Infographic infographic-creator

基于给定文字内容创建精美信息图。当用户请求创建信息图时使用。

install

source · Clone the upstream repo

git clone https://github.com/antvis/Infographic

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/antvis/Infographic "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/infographic-creator" ~/.claude/skills/antvis-infographic-infographic-creator && rm -rf "$T"

manifest: skills/infographic-creator/SKILL.md

source content

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

Infographic = Information Structure + Visual Expression

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

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

Language Lock

Prompt 的书写语言和示例语言不能决定最终输出语言。
如果用户输入英文，则生成的
```
title
```
、
```
desc
```
、
```
label
```
等文案必须保持英文，不要自动翻译成中文。
如果用户输入中文，则生成的
```
title
```
、
```
desc
```
、
```
label
```
等文案必须保持中文，不要自动翻译成英文。

规范

AntV Infographic 语法

AntV Infographic 语法是一种自定义 DSL，用于描述信息图渲染配置。它使用缩进表达结构，适合 AI 直接生成并流式输出。核心信息包括：

template：用模板表达信息结构。
data：信息图数据，包含
```
title
```
、
```
desc
```
和主数据字段。
theme：主题配置，包含
```
palette
```
、字体、风格化等。

例如：

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>
```
。
模板列表里只写模板名本身；真正输出时首行必须显式写出
```
infographic
```
前缀。
使用
```
data
```
/
```
theme
```
块，块内统一使用两个空格缩进。
键值对写法是
```
键 空格 值
```
；对象数组使用
```
-
```
作为条目前缀。
```
icon
```
可以使用精确图标 ID，例如
```
mingcute/server-line
```
，也可以使用语义关键词短语，例如
```
star fill
```
。
如果使用语义关键词短语，多个关键词之间使用空格分隔，不要使用短横线；例如写
```
rocket launch
```
，不要写
```
rocket-launch
```
。
对
```
lists
```
、
```
sequences
```
、
```
nodes
```
、
```
items
```
以及
```
compares
```
/
```
children
```
下的语义型数据项，默认应补充
```
icon
```
；不要因为字段是可选就省略。
如果模板名或视觉样式明显依赖图标，则每个主要数据项都应包含
```
icon
```
。
如果不确定精确图标 ID，也要优先写一个简洁的语义关键词，例如
```
rocket
```
、
```
shield
```
、
```
database
```
、
```
users
```
、
```
chart line
```
，而不是省略
```
icon
```
字段。
仅在纯图表类数据点、纯数值序列，或用户明确要求极简文本版时，才可以省略
```
icon
```
。
```
value
```
尽量使用纯数值；数值单位优先放在
```
label
```
或
```
desc
```
中表达。
```
palette
```
推荐使用行内简单数组写法，例如
```
palette #4f46e5 #06b6d4 #10b981
```
。
```
palette
```
中的颜色值是裸值，不加引号，不加逗号。
```
data
```
只放一个与模板匹配的主数据字段，避免同时混用
```
lists
```
、
```
sequences
```
、
```
compares
```
、
```
values
```
、
```
root
```
、
```
nodes
```
。

主数据字段选择规则：

```
list-*
```
→
```
lists
```
```
sequence-*
```
→
```
sequences
```
，可选
```
order asc|desc
```
```
sequence-interaction-*
```
→
```
sequences
```
+
```
relations
```
- ```
sequences
```
  表示泳道列表
- 每个泳道必须包含
```
label
```
- 每个泳道的
```
children
```
  表示节点列表
- ```
children
```
  下的每一项都必须写成对象条目，并包含
```
label
```
- 节点可选
```
id
```
  、
```
icon
```
  、
```
step
```
  、
```
desc
```
  、
```
value
```
- ```
step
```
  用于表示时间层级；相同
```
step
```
  处于同一高度
```
compare-*
```
→
```
compares
```
- ```
compare-binary-*
```
  /
```
compare-hierarchy-left-right-*
```
  - ```
  compares
```
  第一层必须且只能有两个根节点，分别表示对比双方
- 两个根节点都应包含
```
  children
```
- 真正的对比项写在各自的
```
  children
```
  下
- ```
children
```
    下的每一项都必须写成对象条目，并包含
```
label
```
  - 即使每一侧只有 1 个指标，也要写成
```
children
```
    内含 1 个对象条目
- ```
compare-swot
```
  - ```
  compares
```
  可直接放多个根节点
- 每个根节点下可选
```
  children
```
- ```
compare-quadrant-*
```
  - ```
  compares
```
  直接放 4 个象限根节点
```
hierarchy-structure
```
→
```
items
```
```
hierarchy-*
```
→ 单一
```
root
```
，通过
```
children
```
递归嵌套
```
relation-*
```
→
```
nodes
```
+
```
relations
```
- 简单关系也可直接用箭头语法表达关系
```
chart-*
```
→
```
values
```
- ```
chart-line-plain-text
```
  /
```
chart-bar-plain-text
```
  /
```
chart-column-simple
```
  都使用单条有序
```
values
```
- 每个数据点使用
```
label
```
  表示类目，使用
```
value
```
  表示数值
- 折线图的顺序由
```
values
```
  中条目的排列顺序表达
结构无法明确判断时，再用
```
items
```
兜底

主题规则：

```
theme
```
用于自定义主题，例如
```
palette
```
、
```
base
```
、
```
stylize
```

使用

theme.base.text.font-family

指定字体，如

851tegakizatsu

使用
```
theme.stylize
```
选择内置风格并传参
- ```
rough
```
  ：手绘效果
- ```
pattern
```
  ：图案填充
- ```
linear-gradient
```
  /
```
radial-gradient
```
  ：渐变风格
仅输出 Infographic 语法本身，不输出 JSON、解释性文字或额外 Markdown 段落

数据语法示例

按模板类别给出精简但完整的正向示例：

```
list-*
```
模板

infographic list-grid-badge-card
data
  title Feature List
  lists
    - label Fast
      icon flash fast
    - label Secure
      icon shield check

```
sequence-*
```
模板

infographic sequence-ascending-steps
data
  title 发布流程
  sequences
    - label 需求确认
      icon clipboard check
    - label 开发实现
      icon code
    - label 发布上线
      icon rocket
  order asc

```
sequence-interaction-*
```
模板

infographic sequence-interaction-compact-animated-badge-card
data
  title 登录校验流程
  sequences
    - label 用户
      icon user
      children
        - label 发起登录
          id user-login
          step 0
          icon login
        - label 收到结果
          id user-result
          step 2
          icon inbox check
    - label 服务端
      icon server
      children
        - label 校验凭证
          id server-verify
          step 1
          icon shield check
        - label 返回结果
          id server-return
          step 2
          icon send
  relations
    user-login - 提交账号密码 -> server-verify
    server-verify - 生成结果 -> server-return
    server-return - 返回结果 -> user-result

```
hierarchy-*
```
模板

infographic hierarchy-tree-curved-line-rounded-rect-node
data
  title 组织结构
  root
    label 公司
    children
      - label 产品部
      - label 技术部

```
compare-swot
```
模板

infographic compare-swot
data
  title 产品 SWOT
  compares
    - label Strengths
      icon trophy
      children
        - label 品牌认知高
          icon star
    - label Weaknesses
      icon alert circle
      children
        - label 成本压力大
          icon wallet

```
compare-binary-*
```
模板

infographic compare-binary-horizontal-simple-fold
data
  title 餐桌价格对比
  compares
    - label 原价
      icon tag
      children
        - label 原价
          value 500
          icon tag
    - label 实际支付
      icon wallet
      children
        - label 实际支付
          value 450
          icon check bold

```
compare-quadrant-*
```
模板

infographic compare-quadrant-quarter-simple-card
data
  title 任务优先级
  compares
    - label 高价值低成本
    - label 高价值高成本
    - label 低价值低成本
    - label 低价值高成本

```
chart-line-plain-text
```
模板

infographic chart-line-plain-text
data
  title 模型 A 准确率变化
  desc 第 4 周提升最明显
  values
    - label Week1
      value 86.5
    - label Week2
      value 87.3
    - label Week3
      value 89.1
    - label Week4
      value 91.2
theme
  palette #4f46e5 #db2777 #14b8a6

```
relation-*
```
模板

infographic relation-dagre-flow-tb-simple-circle-node
data
  title 系统关系
  nodes
    - label API
    - id db
      label DB
  relations
    API - 读写 -> db

兜底
```
items
```
示例

infographic list-row-horizontal-icon-arrow
data
  title 要点总结
  items
    - label 效率优先
      desc 聚焦关键动作
    - label 结果导向
      desc 输出可执行结论

可用模板

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-interaction-*
```
并列要点列举 →
```
list-row-*
```
/
```
list-column-*
```
/
```
list-grid-*
```
双方对比、方案对比、前后对比 →
```
compare-binary-*
```
- 先确定双方是谁
- 再为双方分别展开
```
children
```
SWOT 分析 →
```
compare-swot
```
象限分析 →
```
compare-quadrant-*
```
层级树结构 →
```
hierarchy-tree-*
```
统计趋势、单条序列变化 →
```
chart-line-plain-text
```
统计对比、单组数值比较 →
```
chart-bar-plain-text
```
/
```
chart-column-simple
```
节点关系、流程依赖 →
```
relation-*
```
词频主题展示 →
```
chart-wordcloud
```
思维导图 →
```
hierarchy-mindmap-*
```

完整输出示例

infographic list-row-horizontal-icon-arrow
data
  title 产品增长要点
  desc 聚焦获客、转化、复购三个阶段
  lists
    - label 获客
      desc 多渠道投放与内容触达
      icon rocket launch
    - label 转化
      desc 优化路径并减少流失
      icon chart line
    - label 复购
      desc 会员权益与分层运营
      icon repeat
theme
  palette #3b82f6 #8b5cf6 #f97316

输出格式

只输出一个

plain

代码块，不添加任何解释性文字：

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>
```
是否只使用了一个与模板匹配的主数据字段
主要数据项是否都带有合理的
```
icon
```
，尤其是列表、步骤、节点、对比项与名称中含
```
icon
```
的模板
```
palette
```
是否为裸颜色值，且没有引号和逗号

sequence-interaction-*

的泳道节点是否都写成

children -> - label ...

```
compare-binary-*
```
/
```
compare-hierarchy-left-right-*
```
是否只有两个根节点，且两侧内容都放在各自的
```
children
```
下
```
children
```
下的每一项是否都显式包含
```
label
```
```
chart-line-plain-text
```
是否使用单条有序
```
values
```
输出中是否没有 JSON、解释文字或多余代码块

生成流程

第一步：理解用户需求

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

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

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

提取关键信息结构（title、desc、items 等）。
明确所需数据字段（title、desc、items、label、value、icon 等）。
对语义明确的主要数据项主动补充
```
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>

使用 Write 工具生成 HTML 文件，命名为
```
<title>-infographic.html
```
展示给用户：
- 生成文件路径，并提示：“直接用浏览器打开即可查看并保存 SVG”
- 输出语法，并提示：“需要调整模板/配色/内容请告诉我”

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

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