Infographic Creator

硬性语法规则

• 第一行必须是 infographic <template-name>。
• 模板列表里只写模板名本身；真正输出时首行必须显式写出 infographic 前缀。
• 使用 data / theme 块，块内统一使用两个空格缩进。
• 键值对写法是 键 空格 值；对象数组使用 - 作为条目前缀。
• icon 使用图标关键词，例如 star fill、mingcute/server-line。
• value 尽量使用纯数值；数值单位优先放在 label 或 desc 中表达。
• palette 推荐使用行内简单数组写法，例如 palette #4f46e5 #06b6d4 #10b981。
• palette 中的颜色值是裸值，不加引号，不加逗号。
• data 只放一个与模板匹配的主数据字段，避免同时混用 lists、sequences、compares、values、root、nodes。

主数据字段选择规则：

• list-* → lists
• sequence-* → sequences，可选 order asc|desc
• sequence-interaction-* → sequences + relations
  • sequences 表示泳道列表
  • 每个泳道必须包含 label
  • 每个泳道的 children 表示节点列表
  • children 下的每一项都必须写成对象条目，并包含 label
  • 节点可选 id、icon、step、desc、value
  • step 用于表示时间层级；相同 step 处于同一高度
• compare-* → compares
  • compare-binary-* / compare-hierarchy-left-right-*
    • compares 第一层必须且只能有两个根节点，分别表示对比双方
    • 两个根节点都应包含 children
    • 真正的对比项写在各自的 children 下
    • children 下的每一项都必须写成对象条目，并包含 label
    • 即使每一侧只有 1 个指标，也要写成 children 内含 1 个对象条目
  • compare-swot
    • compares 可直接放多个根节点
    • 每个根节点下可选 children
  • compare-quadrant-*
    • compares 直接放 4 个象限根节点
• hierarchy-structure → items
• hierarchy-* → 单一 root，通过 children 递归嵌套
• relation-* → nodes + relations
  • 简单关系也可直接用箭头语法表达关系
• chart-* → values
  • chart-line-plain-text / chart-bar-plain-text / chart-column-simple 都使用单条有序 values
  • 每个数据点使用 label 表示类目，使用 value 表示数值
  • 折线图的顺序由 values 中条目的排列顺序表达
• 结构无法明确判断时，再用 items 兜底

主题规则：

• theme 用于自定义主题，例如 palette、base、stylize
• 使用 theme.base.text.font-family 指定字体，如 851tegakizatsu
• 使用 theme.stylize 选择内置风格并传参
  • rough：手绘效果
  • pattern：图案填充
  • linear-gradient / radial-gradient：渐变风格
• 仅输出 Infographic 语法本身，不输出 JSON、解释性文字或额外 Markdown 段落

数据语法示例

按模板类别给出精简但完整的正向示例：

• list-* 模板

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

• sequence-* 模板

infographic sequence-ascending-steps
data
  title 发布流程
  sequences
    - label 需求确认
    - label 开发实现
    - label 发布上线
  order asc

• sequence-interaction-* 模板

infographic sequence-interaction-compact-animated-badge-card
data
  title 登录校验流程
  sequences
    - label 用户
      children
        - label 发起登录
          id user-login
          step 0
        - label 收到结果
          id user-result
          step 2
    - label 服务端
      children
        - label 校验凭证
          id server-verify
          step 1
        - label 返回结果
          id server-return
          step 2
  relations
    user-login - 提交账号密码 -> server-verify
    server-verify - 生成结果 -> server-return
    server-return - 返回结果 -> user-result

• hierarchy-* 模板

infographic hierarchy-tree-curved-line-rounded-rect-node
data
  title 组织结构
  root
    label 公司
    children
      - label 产品部
      - label 技术部

• compare-swot 模板

infographic compare-swot
data
  title 产品 SWOT
  compares
    - label Strengths
      children
        - label 品牌认知高
    - label Weaknesses
      children
        - label 成本压力大

• compare-binary-* 模板

infographic compare-binary-horizontal-simple-fold
data
  title 餐桌价格对比
  compares
    - label 原价
      children
        - label 原价
          value 500
          icon tag
    - label 实际支付
      children
        - label 实际支付
          value 450
          icon check bold

• compare-quadrant-* 模板

infographic compare-quadrant-quarter-simple-card
data
  title 任务优先级
  compares
    - label 高价值低成本
    - label 高价值高成本
    - label 低价值低成本
    - label 低价值高成本

• chart-line-plain-text 模板

infographic chart-line-plain-text
data
  title 模型 A 准确率变化
  desc 第 4 周提升最明显
  values
    - label Week1
      value 86.5
    - label Week2
      value 87.3
    - label Week3
      value 89.1
    - label Week4
      value 91.2
theme
  palette #4f46e5 #db2777 #14b8a6

• relation-* 模板

infographic relation-dagre-flow-tb-simple-circle-node
data
  title 系统关系
  nodes
    - label API
    - id db
      label DB
  relations
    API - 读写 -> db

• 兜底 items 示例

infographic list-row-horizontal-icon-arrow
data
  title 要点总结
  items
    - label 效率优先
      desc 聚焦关键动作
    - label 结果导向
      desc 输出可执行结论

可用模板

• 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-interaction-*
• 并列要点列举 → list-row-* / list-column-* / list-grid-*
• 双方对比、方案对比、前后对比 → compare-binary-*
  • 先确定双方是谁
  • 再为双方分别展开 children
• SWOT 分析 → compare-swot
• 象限分析 → compare-quadrant-*
• 层级树结构 → hierarchy-tree-*
• 统计趋势、单条序列变化 → chart-line-plain-text
• 统计对比、单组数值比较 → chart-bar-plain-text / chart-column-simple
• 节点关系、流程依赖 → relation-*
• 词频主题展示 → chart-wordcloud
• 思维导图 → hierarchy-mindmap-*

完整输出示例

infographic list-row-horizontal-icon-arrow
data
  title 产品增长要点
  desc 聚焦获客、转化、复购三个阶段
  lists
    - label 获客
      desc 多渠道投放与内容触达
      icon rocket launch
    - label 转化
      desc 优化路径并减少流失
      icon chart line
    - label 复购
      desc 会员权益与分层运营
      icon repeat
theme
  palette #3b82f6 #8b5cf6 #f97316

输出格式

只输出一个 plain 代码块，不添加任何解释性文字：

infographic list-row-horizontal-icon-arrow
data
  title 标题
  desc 描述
  lists
    - label 条目
      value 12.5
      desc 说明
      icon document text
theme
  palette #3b82f6 #8b5cf6 #f97316

自检清单

输出前检查以下事项：

• 首行是否为 infographic <template-name>
• 是否只使用了一个与模板匹配的主数据字段
• palette 是否为裸颜色值，且没有引号和逗号
• sequence-interaction-* 的泳道节点是否都写成 children -> - label ...
• compare-binary-* / compare-hierarchy-left-right-* 是否只有两个根节点，且两侧内容都放在各自的 children 下
• children 下的每一项是否都显式包含 label
• chart-line-plain-text 是否使用单条有序 values
• 输出中是否没有 JSON、解释文字或多余代码块

生成流程

第一步：理解用户需求

在创建信息图之前，先理解用户需求与想表达的信息，以便确定模板和数据结构。

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

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

• 提取关键信息结构（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 模板：

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