infographic-creator

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

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

  • 时间线 →

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

• 象限分析 →

  quadrant-*

• 网格列表（要点）→

  list-grid-*

• 关系展示 →

  relation-*

• 词云 →

  chart-wordcloud

• 思维导图 →

  hierarchy-mindmap-*

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

  {syntax}

  。

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' });

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

1. 使用 Write 工具生成 HTML 文件，命名为

   <title>-infographic.html

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

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