infographic-creator

Category: Content & Multimedia | Uploader: antvis | Downloads: 0 | Version: v1.0（Latest）
基于给定文字内容创建精美信息图。当用户请求创建信息图时使用。
Changelog: Source: GitHub https://github.com/antvis/Infographic
Directory Structure

Current level: skills/infographic-creator/
📄 SKILL.md 13.3 KB
SKILL.md

---
name: infographic-creator
description: 基于给定文字内容创建精美信息图。当用户请求创建信息图时使用。
---

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

`Infographic = Information Structure + Visual Expression`

本任务使用 [AntV Infographic](https://infographic.antv.vision/) 创建可视化信息图。

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

## 规范

### AntV Infographic 语法

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

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

例如：

```infographic
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` / `theme` 块，块内用两个空格缩进。
- 键值对使用「键 空格 值」；数组使用 `-` 作为条目前缀。
- 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
  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
  infographic list-row-simple-horizontal-arrow
  theme
    stylize rough
    base
      text
        font-family 851tegakizatsu
  ```

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

### 数据语法示例

按模板类别的数据语法示例（使用对应字段，避免同时添加 `items`）：

- `list-*` 模版

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

- `sequence-*` 模版

```infographic
infographic sequence-steps-simple
data
  sequences
    - label Step 1
    - label Step 2
    - label Step 3
  order asc
```

- `sequence-interaction-*` 模版（交互流程/时序图）

```infographic
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
infographic hierarchy-structure
data
  root
    label Company
    children
      - label Dept A
      - label Dept B
```

- `compare-*` 模版

```infographic
infographic compare-swot
data
  compares
    - label Strengths
      children
        - label Strong brand
        - label Loyal users
    - label Weaknesses
      children
        - label High cost
        - label Slow release
```

四象限图

```infographic
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
infographic chart-column-simple
data
  values
    - label Visits
      value 1280
    - label Conversion
      value 12.4
```

- `relation-*` 模版

> 边标签写法：A -label-> B 或 A -->|label| B

```infographic
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
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
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 文件：

1. 创建包含以下结构的完整 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 模板：

```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`

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

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

- 通过导出按钮实现 SVG 导出
- 容器自适应，宽高均为 100%
Comments 0
Latest | Hot
Please login before commenting.
No comments yet. Be the first one!
infographic-creator

Directory Structure

SKILL.md

Report

Notice
