infographic-creator by antvis/infographic
npx skills add https://github.com/antvis/infographic --skill infographic-creator信息图(Infographic)将数据、信息与知识转化为可感知的视觉语言。它结合视觉设计与数据可视化,用直观符号压缩复杂信息,帮助受众快速理解并记住要点。
Infographic = Information Structure + Visual Expression
本任务使用 AntV Infographic 创建可视化信息图。
在开始任务前,需要理解 AntV Infographic 语法规范,包括模板列表、数据结构、主题等。
AntV Infographic 语法是一种自定义的 DSL,用于描述信息图渲染配置。它使用缩进描述信息,具有较强鲁棒性,便于 AI 流式输出并渲染信息图。主要包含以下信息:
例如:
infographic list-row-horizontal-icon-arrow
data
title Title
desc Description
lists
- label Label
value 12.5
desc Explanation
icon document text
theme
palette #3b82f6 #8b5cf6 #f97316
第一行必须是 infographic <template-name>,模板从下方列表中选择(见“可用模板”部分)。
使用 data / 块,块内用两个空格缩进。
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
theme键值对使用「键 空格 值」;数组使用 - 作为条目前缀。
icon 使用图标关键词(如 star fill)。
data 应包含 title/desc + 模板对应的主数据字段(不一定是 items)。
主数据字段选择(只用一个,避免混用):
list-* → listssequence-* → sequences(可选 order asc|desc)sequence-interaction-* → sequences(泳道列表,每个泳道包含 label 和 children)+ relations(节点间关系);children 中的节点可用 step 字段指定时间层级(相同 step 的节点处于同一高度)compare-* → compares(支持 children 分组对比),可包含多个对比项hierarchy-structure → items(每一项对应一个独立层级,每一层级可以包含子项,最多可嵌套 3 层)hierarchy-* → 单一 root(树结构,通过 children 嵌套);relation-* → nodes + relations;简单关系图可省略 nodes,在 relations 中用箭头语法chart-* → values(数值统计,可选 category)items 兜底compare-binary-* / compare-hierarchy-left-right-* 二元模板:必须两个根节点,所有对比项挂在这两个根节点的 children
hierarchy-*:使用单一 root,通过 children 嵌套(不要重复 root)
theme 用于自定义主题(palette、font 等) 例如:暗色主题 + 自定义配色
infographic list-row-simple-horizontal-arrow
theme dark
palette
- #61DDAA
- #F6BD16
- #F08BB4
使用 theme.base.text.font-family 指定字体,如手写风格 851tegakizatsu
使用 theme.stylize 选择内置风格并传参 常见风格:
rough:手绘效果pattern:图案填充linear-gradient / radial-gradient:线性/径向渐变例如:手绘风格(rough)
infographic list-row-simple-horizontal-arrow
theme
stylize rough
base
text
font-family 851tegakizatsu
按模板类别的数据语法示例(使用对应字段,避免同时添加 items):
list-* 模版
infographic list-grid-badge-card data title Feature List lists - label Fast icon flash fast - label Secure icon secure shield check
sequence-* 模版
infographic sequence-steps-simple data sequences - label Step 1 - label Step 2 - label Step 3 order asc
sequence-interaction-* 模版(交互流程/时序图)
infographic sequence-interaction-compact-animated-badge-card data title TCP三次握手 desc 客户端与服务器建立可靠连接的过程 sequences - label 客户端 icon mingcute/computer-line children - label CLOSED id client-closed icon mingcute/close-circle-line step 0 - label SYN-SENT id client-syn-sent icon mingcute/send-line step 2 - label ESTABLISHED id client-established icon mingcute/check-circle-line step 4 - label 服务器 icon mingcute/server-line children - label CLOSED id server-closed icon mingcute/close-circle-line step 0 - label LISTEN id server-listen icon mingcute/ear-line step 1 - label SYN-RCVD id server-syn-rcvd icon mingcute/receive-line step 3 - label ESTABLISHED id server-established icon mingcute/check-circle-line step 4 relations client-closed - SYN=1, seq=x -> server-listen server-listen - SYN=1, ACK=1, seq=y, ack=x+1 -> client-syn-sent client-syn-sent - ACK=1, seq=x+1, ack=y+1 -> server-syn-rcvd client-established <- 数据传输 -> server-established
hierarchy-* 模版
infographic hierarchy-structure data root label Company children - label Dept A - label Dept B
compare-* 模版
infographic compare-swot data compares - label Strengths children - label Strong brand - label Loyal users - label Weaknesses children - label High cost - label Slow release
四象限图
infographic compare-quadrant-quarter-simple-card
data
compares
- label High Impact & Low Effort
- label High Impact & High Effort
- label Low Impact & Low Effort
- label Low Impact & High Effort
chart-* 模版
infographic chart-column-simple data values - label Visits value 1280 - label Conversion value 12.4
relation-* 模版
边标签写法:A -label-> B 或 A -->|label| B
infographic relation-dagre-flow-tb-simple-circle-node
data
nodes
- id A
label Node A
- id B
label Node B
relations
A - approves -> B
A -->|blocks| B
兜底 items 示例
infographic list-row-horizontal-icon-arrow data items - label Item A desc Description icon sun - label Item B desc Description icon moon
模板选择建议:
sequence-*
sequence-timeline-*sequence-stairs-*sequence-roadmap-vertical-*sequence-zigzag-*sequence-circular-simplesequence-color-snake-steps-*sequence-pyramid-simplesequence-interaction-*
sequence-interaction-default-*sequence-interaction-compact-*sequence-interaction-wide-*sequence-interaction-*-dashed-*sequence-interaction-*-animated-*list-row-* 或 list-column-*compare-binary-*compare-swothierarchy-tree-*chart-*quadrant-*list-grid-*relation-*chart-wordcloudhierarchy-mindmap-*绘制互联网技术演进信息图
infographic list-row-horizontal-icon-arrow
data
title Internet Technology Evolution
desc From Web 1.0 to AI era, key milestones
lists
- time 1991
label Web 1.0
desc Tim Berners-Lee published the first website, opening the Internet era
icon web
- time 2004
label Web 2.0
desc Social media and user-generated content become mainstream
icon account multiple
- time 2007
label Mobile
desc iPhone released, smartphone changes the world
icon cellphone
- time 2015
label Cloud Native
desc Containerization and microservices architecture are widely used
icon cloud
- time 2020
label Low Code
desc Visual development lowers the technology threshold
icon application brackets
- time 2023
label AI Large Model
desc ChatGPT ignites the generative AI revolution
icon brain
在创建信息图之前,先理解用户需求与想表达的信息,以便确定模板和数据结构。
若用户提供清晰的内容描述,应将其拆解为清晰、简洁的结构。
否则需要向用户澄清(如:“请提供清晰简洁的内容描述。”、“你希望使用哪个模板?”)
{syntax}。关键注意 :必须尊重用户输入的语言。例如用户输入中文,则语法中的文本也必须是中文。
当得到最终的 AntV Infographic 语法后,可按以下步骤生成完整 HTML 文件:
{title} - Infographichttps://unpkg.com/@antv/infographic@latest/dist/infographic.min.jscontainer 的容器 divwidth: '100%'、height: '100%'){title}{syntax}const svgDataUrl = await infographic.toDataURL({ type: 'svg' });可参考的 HTML 模板:
<div id="container"></div>
<script src="https://unpkg.com/@antv/infographic@latest/dist/infographic.min.js"></script>
<script>
const infographic = new AntVInfographic.Infographic({
container: '#container',
width: '100%',
height: '100%',
});
infographic.render(`{syntax}`);
document.fonts?.ready.then(() => {
infographic.render(`{syntax}`);
}).catch((error) => console.error('Error waiting for fonts to load:', error));
</script>
2. 使用 Write 工具生成 HTML 文件,命名为 <title>-infographic.html
展示给用户:
**注意:**HTML 文件必须包含:
Weekly Installs
81
Repository
GitHub Stars
4.6K
First Seen
Jan 20, 2026
Security Audits
Installed on
opencode67
claude-code63
cursor61
gemini-cli60
codex59
github-copilot47
前端设计技能指南:避免AI垃圾美学,打造独特生产级界面
49,900 周安装