AntV Infographic 信息图创建器：数据可视化与视觉设计工具

infographic-creator by antvis/infographic

94 周安装量

4,700 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/antvis/infographic --skill infographic-creator

内容创作数据可视化设计

🇨🇳中文介绍

信息图（Infographic）将数据、信息与知识转化为可感知的视觉语言。它结合视觉设计与数据可视化，用直观符号压缩复杂信息，帮助受众快速理解并记住要点。

Infographic = Information Structure + Visual Expression

本任务使用 AntV Infographic 创建可视化信息图。

在开始任务前，需要理解 AntV Infographic 语法规范，包括模板列表、数据结构、主题等。

规范

AntV Infographic 语法

AntV Infographic 语法是一种自定义的 DSL，用于描述信息图渲染配置。它使用缩进描述信息，具有较强鲁棒性，便于 AI 流式输出并渲染信息图。主要包含以下信息：

template：用模板表达文字信息结构。
data：信息图数据，包含 title、desc、数据项等。数据项通常包含 label、desc、icon 等字段。
theme：主题包含 palette、font 等样式配置。

例如：

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 开发者，精准高效

联系我们

相关 Skills

Vercel Web界面规范检查工具 - 自动检测代码是否符合Web设计指南

233,800 周安装

头脑风暴技能：AI协作设计流程，将创意转化为完整规范与实施计划

92,100 周安装

shadcn/ui 框架：React 组件库与 UI 设计系统，Tailwind CSS 最佳实践

69,400 周安装

PPTX技能指南：使用Python和pptxgenjs创建、编辑、分析PPTX文件

60,000 周安装

键值对使用「键空格值」；数组使用 - 作为条目前缀。

icon 使用图标关键词（如 star fill）。

data 应包含 title/desc + 模板对应的主数据字段（不一定是 items）。

主数据字段选择（只用一个，避免混用）：

list-* → lists
sequence-* → 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

禁止输出 JSON、Markdown 或解释性文字

按模板类别的数据语法示例（使用对应字段，避免同时添加 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

chart-bar-plain-text
chart-column-simple
chart-line-plain-text
chart-pie-compact-card
chart-pie-donut-pill-badge
chart-pie-donut-plain-text
chart-pie-plain-text
chart-wordcloud
compare-binary-horizontal-badge-card-arrow
compare-binary-horizontal-simple-fold
compare-binary-horizontal-underline-text-vs
compare-hierarchy-left-right-circle-node-pill-badge
compare-quadrant-quarter-circular
compare-quadrant-quarter-simple-card
compare-swot
hierarchy-mindmap-branch-gradient-capsule-item
hierarchy-mindmap-level-gradient-compact-card
hierarchy-structure
hierarchy-tree-curved-line-rounded-rect-node
hierarchy-tree-tech-style-badge-card
hierarchy-tree-tech-style-capsule-item
list-column-done-list
list-column-simple-vertical-arrow
list-column-vertical-icon-arrow
list-grid-badge-card
list-grid-candy-card-lite
list-grid-ribbon-card
list-row-horizontal-icon-arrow
list-sector-plain-text
list-waterfall-badge-card
list-waterfall-compact-card
list-zigzag-down-compact-card
list-zigzag-down-simple
list-zigzag-up-compact-card
list-zigzag-up-simple
relation-dagre-flow-tb-animated-badge-card
relation-dagre-flow-tb-animated-simple-circle-node
relation-dagre-flow-tb-badge-card
relation-dagre-flow-tb-simple-circle-node
sequence-ascending-stairs-3d-underline-text
sequence-ascending-steps
sequence-circular-simple
sequence-color-snake-steps-horizontal-icon-line
sequence-cylinders-3d-simple
sequence-filter-mesh-simple
sequence-funnel-simple
sequence-horizontal-zigzag-underline-text
sequence-mountain-underline-text
sequence-pyramid-simple
sequence-roadmap-vertical-plain-text
sequence-roadmap-vertical-simple
sequence-snake-steps-compact-card
sequence-snake-steps-simple
sequence-snake-steps-underline-text
sequence-stairs-front-compact-card
sequence-stairs-front-pill-badge
sequence-timeline-rounded-rect-node
sequence-timeline-simple
sequence-zigzag-pucks-3d-simple
sequence-zigzag-steps-underline-text
sequence-interaction-default-badge-card
sequence-interaction-default-animated-badge-card
sequence-interaction-default-compact-card
sequence-interaction-default-capsule-item
sequence-interaction-default-rounded-rect-node

模板选择建议：

严格顺序（流程/步骤/发展趋势）→ sequence-*
- 时间线 → sequence-timeline-*
- 阶梯图 → sequence-stairs-*
- 路线图 → sequence-roadmap-vertical-*
- 折线路径 → sequence-zigzag-*
- 环形进度 → sequence-circular-simple
- 彩色蛇形步骤 → sequence-color-snake-steps-*
- 金字塔 → sequence-pyramid-simple
交互流程/时序图（多角色/系统间的交互）→ sequence-interaction-*
- 标准间距 → sequence-interaction-default-*
- 紧凑布局 → sequence-interaction-compact-*
- 宽松布局 → sequence-interaction-wide-*
- 虚线箭头 → sequence-interaction-*-dashed-*
- 动画箭头 → sequence-interaction-*-animated-*
观点列举 → list-row-* 或 list-column-*
二元对比（利弊）→ compare-binary-*
SWOT → compare-swot
层级结构（树图）→ hierarchy-tree-*
数据图表 → chart-*
象限分析 → quadrant-*
网格列表（要点）→ list-grid-*
关系展示 → relation-*
词云 → chart-wordcloud
思维导图 → hierarchy-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

第一步：理解用户需求

在创建信息图之前，先理解用户需求与想表达的信息，以便确定模板和数据结构。

若用户提供清晰的内容描述，应将其拆解为清晰、简洁的结构。

否则需要向用户澄清（如：“请提供清晰简洁的内容描述。”、“你希望使用哪个模板？”）

提取关键信息结构（title、desc、items 等）。
明确所需数据字段（title、desc、items、label、value、icon 等）。
选择合适模板。
使用 AntV Infographic 语法描述信息图内容 {syntax}。

关键注意 ：必须尊重用户输入的语言。例如用户输入中文，则语法中的文本也必须是中文。

第二步：渲染信息图

当得到最终的 AntV Infographic 语法后，可按以下步骤生成完整 HTML 文件：

创建包含以下结构的完整 HTML 文件：
- DOCTYPE 与 HTML meta（charset: utf-8）
- Title：{title} - Infographic
- 引入 AntV Infographic 脚本：https://unpkg.com/@antv/infographic@latest/dist/infographic.min.js
- 创建 id 为 container 的容器 div
- 初始化 Infographic（width: '100%'、height: '100%'）
- 用实际标题替换 {title}
- 用实际 AntV Infographic 语法替换 {syntax}
- 加入导出 SVG 的功能：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

展示给用户：
- 生成文件路径，并提示：“直接用浏览器打开即可查看并保存 SVG”
- 输出语法，并提示：“需要调整模板/配色/内容请告诉我”

**注意：**HTML 文件必须包含：

通过导出按钮实现 SVG 导出
容器自适应，宽高均为 100%

前端设计技能指南：避免AI垃圾美学，打造独特生产级界面

49,900 周安装

AntV Infographic 信息图创建器：数据可视化与视觉设计工具

🇨🇳中文介绍

规范

AntV Infographic 语法

语法规范

相关 Skills

数据语法示例

可用模板

示例

生成流程

第一步：理解用户需求

第二步：渲染信息图

最新 Skills