antv-infographic

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

信息图 = 信息结构 + 视觉表达

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

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

规范

AntV Infographic 语法

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

1. template：使用模板表达文本信息结构。
2. data：信息图数据，包括标题、描述、数据项等。数据项通常包含标签、描述、图标等字段。
3. theme：主题包含调色板、字体等样式配置。

例如：

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

• 不要输出 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

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

示例

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

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

生成流程

步骤 1：了解用户需求

创建信息图前，首先要了解用户的需求和想要表达的信息，以确定模板和数据结构。

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

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

• 提取关键信息结构（标题、描述、条目等）。
• 明确所需的数据字段（标题、描述、条目、标签、值、图标等）。
• 选择合适的模板。
• 使用 AntV Infographic 语法 {syntax} 描述信息图内容。

重要提示：必须遵循用户输入的语言。例如，如果用户使用中文输入，语法中的文本也必须使用中文。

步骤 2：渲染信息图

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

1. 按照以下结构创建完整的 HTML 文件：
   • DOCTYPE 和 HTML 元信息（字符集：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 模板：

<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

3. 向用户展示：

   • 生成的文件路径和提示：“直接用浏览器打开即可查看并另存为 SVG”
   • 输出的语法和提示：“如需调整模板／颜色／内容，请告诉我”

注意： HTML 文件必须包含：

• 通过导出按钮导出 SVG
• 容器具有响应式布局，宽度和高度均为 100%