infographic-creator

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

Infographic = Information Structure + Visual Expression

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

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

规范

AntV Infographic 语法

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

1. template：用模板表达文字信息结构。
2. data：信息图数据，包含 title、desc、数据项等。数据项通常包含 label、desc、icon 等字段。
3. 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 / 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 用于自定义主题（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