infographic-creator by antvis/chart-visualization-skills
npx skills add https://github.com/antvis/chart-visualization-skills --skill infographic-creator信息图将数据、信息和知识转化为可感知的视觉语言。它结合了视觉设计与数据可视化,用直观的符号压缩复杂信息,帮助受众快速理解和记忆要点。
Infographic = Information Structure + Visual Expression
本任务使用 AntV Infographic 来创建可视化信息图。
在开始任务前,你需要了解 AntV Infographic 的语法规范,包括模板列表、数据结构、主题等。
AntV Infographic 语法是一种自定义 DSL,用于描述信息图渲染配置。它使用缩进来描述信息,具有强健性,便于 AI 流式输出和信息图渲染。主要包含以下信息:
例如:
infographic list-row-horizontal-icon-arrow
data
title 标题
desc 描述
lists
- label 标签
value 12.5
desc 说明
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)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 用于自定义主题(调色板、字体等)。例如:深色主题 + 自定义配色方案
infographic list-row-horizontal-icon-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-horizontal-icon-arrow
theme
stylize rough
base
text
font-family 851tegakizatsu
按模板分类的数据语法示例(使用对应字段,避免同时添加 items):
list-* 模板
infographic list-grid-badge-card data title 功能列表 lists - label 快速 icon flash fast - label 安全 icon secure shield check
sequence-* 模板
infographic sequence-steps-simple data sequences - label 步骤 1 - label 步骤 2 - label 步骤 3 order asc
hierarchy-* 模板
infographic hierarchy-structure data root label 公司 children - label 部门 A - label 部门 B
compare-* 模板
infographic compare-swot data compares - label 优势 children - label 品牌力强 - label 用户忠诚度高 - label 劣势 children - label 成本高 - label 发布慢
四象限图
infographic compare-quadrant-quarter-simple-card
data
compares
- label 高影响 & 低投入
- label 高影响 & 高投入
- label 低影响 & 低投入
- label 低影响 & 高投入
chart-* 模板
infographic chart-column-simple data values - label 访问量 value 1280 - label 转化率 value 12.4
relation-* 模板
边标签语法:A -label-> B 或 A -->|label| B
infographic relation-dagre-flow-tb-simple-circle-node
data
nodes
- id A
label 节点 A
- id B
label 节点 B
relations
A - 批准 -> B
A -->|阻塞| B
后备 items 示例
infographic list-row-horizontal-icon-arrow data items - label 项目 A desc 描述 icon sun - label 项目 B desc 描述 icon moon
模板选择建议:
sequence-*
sequence-timeline-*sequence-stairs-*sequence-roadmap-vertical-*sequence-zigzag-*sequence-circular-simplesequence-color-snake-steps-*sequence-pyramid-simplelist-row-* 或 list-column-*compare-binary-*compare-swothierarchy-tree-*chart-*compare-quadrant-*list-grid-*relation-*chart-wordcloudhierarchy-mindmap-*创建一个互联网技术演进信息图
infographic list-row-horizontal-icon-arrow
data
title 互联网技术演进
desc 从 Web 1.0 到 AI 时代,关键里程碑
lists
- time 1991
label Web 1.0
desc Tim Berners-Lee 发布了第一个网站,开启互联网时代
icon web
- time 2004
label Web 2.0
desc 社交媒体和用户生成内容成为主流
icon account multiple
- time 2007
label 移动
desc iPhone 发布,智能手机改变世界
icon cellphone
- time 2015
label 云原生
desc 容器化和微服务架构被广泛采用
icon cloud
- time 2020
label 低代码
desc 可视化开发降低技术门槛
icon application brackets
- time 2023
label AI 大模型
desc ChatGPT 点燃生成式 AI 革命
icon brain
在创建信息图之前,首先要理解用户的需求和想要表达的信息,以便确定模板和数据结构。
如果用户提供了明确的内容描述,应将其分解为清晰简洁的结构。
否则,需要向用户澄清(例如,“请提供清晰简洁的内容描述。”,“您想使用哪个模板?”)
{syntax} 描述信息图内容。关键注意:必须尊重用户输入的语言。例如,如果用户输入中文,语法中的文本也必须是中文。
当你得到最终的 AntV Infographic 语法时,可以按照以下步骤生成完整的 HTML 文件:
{title} - Infographichttps://unpkg.com/@antv/infographic@latest/dist/infographic.min.jscontainer 的容器 divwidth: '100%', height: '100%'){title} 替换为实际标题{syntax} 替换为实际的 AntV Infographic 语法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%',
});
document.fonts?.ready.then(() => {
infographic.render(`{syntax}`);
}).catch((error) => {
console.error('Error waiting for fonts to load:', error);
infographic.render(`{syntax}`);
});
</script>
2. 使用 Write 工具生成 HTML 文件,命名为 <title>-infographic.html
展示给用户:
注意: HTML 文件必须包含:
每周安装数
323
仓库
GitHub 星标数
34
首次出现
Jan 23, 2026
安全审计
安装于
opencode271
codex243
gemini-cli236
github-copilot230
cursor207
claude-code206
Infographics convert data, information, and knowledge into perceptible visual language. They combine visual design with data visualization, compressing complex information with intuitive symbols to help audiences quickly understand and remember key points.
Infographic = Information Structure + Visual Expression
This task uses AntV Infographic to create visual infographics.
Before starting the task, you need to understand the AntV Infographic syntax specifications, including template list, data structure, themes, etc.
AntV Infographic syntax is a custom DSL used to describe infographic rendering configurations. It uses indentation to describe information, has strong robustness, and is convenient for AI streaming output and infographic rendering. It mainly contains the following information:
For example:
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
The first line must be infographic <template-name>, template selected from the list below (see "Available Templates" section).
Use data / theme blocks, with two-space indentation within blocks.
Key-value pairs use "key space value"; arrays use - as entry prefix.
icon uses icon keywords (e.g., star fill).
data should contain title/desc + template-specific main data field (not necessarily items).
Main data field selection (use only one, avoid mixing):
list-* → listssequence-* → sequences (optional order asc|desc)compare-* → compares (supports children for grouped comparisons), can contain multiple comparison itemshierarchy-structure → items (each item corresponds to an independent hierarchy, each level can contain sub-items, can be nested up to 3 levels)compare-binary-* / compare-hierarchy-left-right-* binary templates: must have two root nodes, all comparison items hang under these two root nodes' children
hierarchy-*: use single root, nested through children (do not repeat root)
theme is used to customize themes (palette, font, etc.) For example: dark theme + custom color scheme
infographic list-row-horizontal-icon-arrow
theme dark
palette
- #61DDAA
- #F6BD16
- #F08BB4
Use theme.base.text.font-family to specify font, such as handwriting style 851tegakizatsu
Use theme.stylize to select built-in styles and pass parameters Common styles:
rough: hand-drawn effectpattern: pattern filllinear-gradient / radial-gradient: linear/radial gradientFor example: hand-drawn style (rough)
infographic list-row-horizontal-icon-arrow
theme
stylize rough
base
text
font-family 851tegakizatsu
Data syntax examples by template category (use corresponding fields, avoid adding items simultaneously):
list-* templates
infographic list-grid-badge-card data title Feature List lists - label Fast icon flash fast - label Secure icon secure shield check
sequence-* templates
infographic sequence-steps-simple data sequences - label Step 1 - label Step 2 - label Step 3 order asc
hierarchy-* templates
infographic hierarchy-structure data root label Company children - label Dept A - label Dept B
compare-* templates
infographic compare-swot data compares - label Strengths children - label Strong brand - label Loyal users - label Weaknesses children - label High cost - label Slow release
Quadrant diagram
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-* templates
infographic chart-column-simple data values - label Visits value 1280 - label Conversion value 12.4
relation-* templates
Edge label syntax: A -label-> B or 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
Fallback items example
infographic list-row-horizontal-icon-arrow data items - label Item A desc Description icon sun - label Item B desc Description icon moon
Template Selection Recommendations:
sequence-*
sequence-timeline-*sequence-stairs-*sequence-roadmap-vertical-*sequence-zigzag-*sequence-circular-simplesequence-color-snake-steps-*sequence-pyramid-simplelist-row-* or Creating an Internet technology evolution infographic
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
Before creating an infographic, first understand the user's needs and the information they want to express, in order to determine the template and data structure.
If the user provides a clear content description, it should be broken down into a clear and concise structure.
Otherwise, clarification from the user is needed (e.g., "Please provide a clear and concise content description.", "Which template do you want to use?")
{syntax}.Key Note : Must respect the language of user input. For example, if the user inputs in Chinese, the text in the syntax must also be in Chinese.
When you have the final AntV Infographic syntax, you can generate a complete HTML file following these steps:
{title} - Infographichttps://unpkg.com/@antv/infographic@latest/dist/infographic.min.jscontainerwidth: '100%', height: '100%'){title} with actual title{syntax} with actual AntV Infographic syntaxconst svgDataUrl = await infographic.toDataURL({ type: 'svg' });Reference HTML template:
<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%',
});
document.fonts?.ready.then(() => {
infographic.render(`{syntax}`);
}).catch((error) => {
console.error('Error waiting for fonts to load:', error);
infographic.render(`{syntax}`);
});
</script>
2. Use the Write tool to generate HTML file, named as <title>-infographic.html
Show to user:
Note: The HTML file must include:
Weekly Installs
323
Repository
GitHub Stars
34
First Seen
Jan 23, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykWarn
Installed on
opencode271
codex243
gemini-cli236
github-copilot230
cursor207
claude-code206
前端设计技能指南:避免AI垃圾美学,打造独特生产级界面
36,100 周安装
hierarchy-* → single root (tree structure, nested through children);relation-* → nodes + relations; simple relation diagrams can omit nodes, using arrow syntax in relationschart-* → values (numeric statistics, optional category)items as fallback when uncertainlist-column-*compare-binary-*compare-swothierarchy-tree-*chart-*compare-quadrant-*list-grid-*relation-*chart-wordcloudhierarchy-mindmap-*