antv-infographic

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

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.

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

Infographic = Information Structure + Visual Expression

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

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

Specifications

规范

AntV Infographic Syntax

AntV Infographic 语法

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:

template: Use templates to express the text information structure.
data: Infographic data, including title, desc, data items, etc. Data items typically contain fields such as label, desc, icon, etc.
theme: Theme contains style configurations such as palette, font, etc.

For example:

plain

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

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

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

例如：

plain

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

Syntax Specifications

语法规范

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-*
```
  →
```
lists
```
- ```
sequence-*
```
  →
```
sequences
```
  (optional
```
order asc|desc
```
  )
- ```
compare-*
```
  →
```
compares
```
  (supports
```
children
```
  for grouped comparisons), can contain multiple comparison items
- ```
hierarchy-structure
```
  →
```
items
```
  (each item corresponds to an independent hierarchy, each level can contain sub-items, can be nested up to 3 levels)
- ```
hierarchy-*
```
  → single
```
root
```
  (tree structure, nested through
```
children
```
  );
- ```
relation-*
```
  →
```
nodes
```
  +
```
relations
```
  ; simple relation diagrams can omit
```
nodes
```
  , using arrow syntax in relations
- ```
chart-*
```
  →
```
values
```
  (numeric statistics, optional
```
category
```
  )
- Use
```
items
```
  as fallback when uncertain
```
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

plain

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 effect
```
pattern
```
: pattern fill
```
linear-gradient
```
/
```
radial-gradient
```
: linear/radial gradient

For example: hand-drawn style (rough)

plain

infographic list-row-horizontal-icon-arrow
theme
  stylize rough
  base
    text
      font-family 851tegakizatsu

Do not output JSON, Markdown, or explanatory text

第一行必须是
```
infographic <template-name>
```
，template 从下方列表中选择（见“可用模板”部分）。
使用
```
data
```
/
```
theme
```
块，块内使用两个空格缩进。
键值对使用“key space value”格式；数组使用
```
-
```
作为条目前缀。
icon 使用 icon 关键词（例如
```
star fill
```
）。
```
data
```
应包含 title/desc，以及 template 专属的主数据字段（不一定是
```
items
```
）。
主数据字段选择（仅使用一个，避免混用）：
- ```
list-*
```
  →
```
lists
```
- ```
sequence-*
```
  →
```
sequences
```
  （可选
```
order asc|desc
```
  ）
- ```
compare-*
```
  →
```
compares
```
  （支持通过
```
children
```
  进行分组比较），可包含多个比较项
- ```
hierarchy-structure
```
  →
```
items
```
  （每个 item 对应一个独立层级，每一层可包含子项，最多可嵌套 3 层）
- ```
hierarchy-*
```
  → 单个
```
root
```
  （树形结构，通过
```
children
```
  嵌套）；
- ```
relation-*
```
  →
```
nodes
```
  +
```
relations
```
  ；简单关系图可省略
```
nodes
```
  ，在 relations 中使用箭头语法
- ```
chart-*
```
  →
```
values
```
  （数值统计，可选
```
category
```
  ）
- 不确定时使用
```
items
```
  作为兜底字段
```
compare-binary-*
```
/
```
compare-hierarchy-left-right-*
```
二元 template：必须包含两个根节点，所有比较项都挂在这两个根节点的 children 下
```
hierarchy-*
```
：使用单个
```
root
```
，通过
```
children
```
嵌套（不要重复使用
```
root
```
）

theme

用于自定义主题（palette、font 等）。例如：深色主题 + 自定义配色方案

plain

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）

plain

infographic list-row-horizontal-icon-arrow
theme
  stylize rough
  base
    text
      font-family 851tegakizatsu

不要输出 JSON、Markdown 或说明性文本

Data Syntax Examples

数据语法示例

Data syntax examples by template category (use corresponding fields, avoid adding

items

simultaneously):

```
list-*
```
templates

plain

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

```
sequence-*
```
templates

plain

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

```
hierarchy-*
```
templates

plain

infographic hierarchy-structure
data
  root
    label Company
    children
      - label Dept A
      - label Dept B

```
compare-*
```
templates

plain

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

plain

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

plain

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

plain

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

plain

infographic list-row-horizontal-icon-arrow
data
  items
    - label Item A
      desc Description
      icon sun
    - label Item B
      desc Description
      icon moon

按 template 类别划分的数据语法示例（使用对应字段，避免同时添加

items

）：

```
list-*
```
template

plain

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

```
sequence-*
```
template

plain

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

```
hierarchy-*
```
template

plain

infographic hierarchy-structure
data
  root
    label Company
    children
      - label Dept A
      - label Dept B

```
compare-*
```
template

plain

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

象限图

plain

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

plain

infographic chart-column-simple
data
  values
    - label Visits
      value 1280
    - label Conversion
      value 12.4

```
relation-*
```
template

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

plain

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

plain

infographic list-row-horizontal-icon-arrow
data
  items
    - label Item A
      desc Description
      icon sun
    - label Item B
      desc Description
      icon moon

Available Templates

可用模板

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

Template Selection Recommendations:

Strict sequence (process/steps/development trend) →
```
sequence-*
```
- Timeline →
```
sequence-timeline-*
```
- Staircase diagram →
```
sequence-stairs-*
```
- Roadmap →
```
sequence-roadmap-vertical-*
```
- Zigzag path →
```
sequence-zigzag-*
```
- Circular progress →
```
sequence-circular-simple
```
- Colorful snake steps →
```
sequence-color-snake-steps-*
```
- Pyramid →
```
sequence-pyramid-simple
```
Opinion listing →
```
list-row-*
```
or
```
list-column-*
```
Binary comparison (pros/cons) →
```
compare-binary-*
```
SWOT →
```
compare-swot
```
Hierarchical structure (tree diagram) →
```
hierarchy-tree-*
```
Data charts →
```
chart-*
```
Quadrant analysis →
```
compare-quadrant-*
```
Grid list (key points) →
```
list-grid-*
```
Relationship display →
```
relation-*
```
Word cloud →
```
chart-wordcloud
```
Mind map →
```
hierarchy-mindmap-*
```

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

时间线 →
```
sequence-timeline-*
```
阶梯图 →
```
sequence-stairs-*
```
路线图 →
```
sequence-roadmap-vertical-*
```
锯齿路径 →
```
sequence-zigzag-*
```
循环进度 →
```
sequence-circular-simple
```
彩色蛇形步骤 →
```
sequence-color-snake-steps-*
```
金字塔 →
```
sequence-pyramid-simple
```

观点列举 →
```
list-row-*
```
或
```
list-column-*
```
二元比较（优缺点）→
```
compare-binary-*
```
SWOT →
```
compare-swot
```
层级结构（树状图）→
```
hierarchy-tree-*
```
数据图表 →
```
chart-*
```
象限分析 →
```
compare-quadrant-*
```
网格列表（要点）→
```
list-grid-*
```
关系展示 →
```
relation-*
```
词云 →
```
chart-wordcloud
```
思维导图 →
```
hierarchy-mindmap-*
```

Example

示例

Creating an Internet technology evolution infographic

plain

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

创建互联网技术演进信息图

plain

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

Generation Process

生成流程

Step 1: Understand User Requirements

第 1 步：理解用户需求

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?")

Extract key information structure (title, desc, items, etc.).
Clarify required data fields (title, desc, items, label, value, icon, etc.).
Select appropriate template.
Describe infographic content using AntV Infographic syntax
```
{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.

创建信息图前，应先了解用户的需求以及希望表达的信息，从而确定 template 和数据结构。

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

否则，需要向用户进一步确认（例如：“请提供清晰、简洁的内容描述。”“您希望使用哪个 template？”）。

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

关键说明：必须尊重用户输入所使用的语言。例如，如果用户使用中文输入，语法中的文本也必须使用中文。

Step 2: Render the Infographic

第 2 步：渲染信息图

When you have the final AntV Infographic syntax, you can generate a complete HTML file following these steps:

Create a complete HTML file with the following structure:
- DOCTYPE and HTML meta (charset: utf-8)
- Title:
```
{title} - Infographic
```
- Include AntV Infographic script:
```
https://unpkg.com/@antv/infographic@latest/dist/infographic.min.js
```
- Create container div with id
```
container
```
- Initialize Infographic (
```
width: '100%'
```
  ,
```
height: '100%'
```
  )
- Replace
```
{title}
```
  with actual title
- Replace
```
{syntax}
```
  with actual AntV Infographic syntax
- Add SVG export functionality:
```
const svgDataUrl = await infographic.toDataURL({ type: 'svg' });
```

Reference HTML template:

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>

Use the Write tool to generate HTML file, named as
```
<title>-infographic.html
```
Show to user:
- Generate file path and prompt: "Open directly with a browser to view and save as SVG"
- Output syntax and prompt: "Tell me if you need to adjust template/colors/content"

Note: The HTML file must include:

SVG export via export button
Container is responsive, both width and height are 100%

准备好最终的 AntV Infographic 语法后，可以按照以下步骤生成完整的 HTML 文件：

创建具有以下结构的完整 HTML 文件：
- DOCTYPE 和 HTML meta（charset: utf-8）
- 标题：
```
{title} - Infographic
```
- 引入 AntV Infographic 脚本：
```
https://unpkg.com/@antv/infographic@latest/dist/infographic.min.js
```
- 创建 id 为
```
container
```
  的容器 div
- 初始化 Infographic（
```
width: '100%'
```
  ，
```
height: '100%'
```
  ）
- 将
```
{title}
```
  替换为实际标题
- 将
```
{syntax}
```
  替换为实际的 AntV Infographic 语法
- 添加 SVG 导出功能：
```
const svgDataUrl = await infographic.toDataURL({ type: 'svg' });
```

参考 HTML template：

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>

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

注意：HTML 文件必须包含：

通过导出按钮实现 SVG 导出
容器具有响应式能力，宽度和高度均为 100%