infographic-creator

name infographic-creator description 基于给定文字内容创建精美信息图。当用户请求创建信息图时使用。 信息图（Infographic）将数据、信息与知识转化为可感知的视觉语言。它结合视觉设计与数据可视化，用直观符号压缩复杂信息，帮助受众快速理解并记住要点。 Infographic = Information Structure + Visual Expression 本任务使用 AntV Infographic 创建可视化信息图。 在开始任务前，需要理解 AntV Infographic 语法规范，包括模板列表、数据结构、主题等。 Language Lock Prompt 的书写语言和示例语言不能决定最终输出语言。 如果用户输入英文，则生成的 title 、 desc 、 label 等文案必须保持英文，不要自动翻译成中文。 如果用户输入中文，则生成的 title 、 desc 、 label 等文案必须保持中文，不要自动翻译成英文。 规范 AntV Infographic 语法 AntV Infographic 语法是一种自定义 DSL，用于描述信息图渲染配置。它使用缩进表达结构，适合 AI 直接生成并流式输出。核心信息包括： template：用模板表达信息结构。 data：信息图数据，包含 title 、 desc 和主数据字段。 theme：主题配置，包含 palette 、字体、风格化等。 例如： 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> 。 模板列表里只写模板名本身；真正输出时首行必须显式写出 infographic 前缀。 使用 data / theme 块，块内统一使用两个空格缩进。 键值对写法是 键 空格 值 ；对象数组使用 - 作为条目前缀。 icon 可以使用精确图标 ID，例如 mingcute/server-line ，也可以使用语义关键词短语，例如 star fill 。 如果使用语义关键词短语，多个关键词之间使用空格分隔，不要使用短横线；例如写 rocket launch ，不要写 rocket-launch 。 对 lists 、 sequences 、 nodes 、 items 以及 compares / children 下的语义型数据项，默认应补充 icon ；不要因为字段是可选就省略。 如果模板名或视觉样式明显依赖图标，则每个主要数据项都应包含 icon 。 如果不确定精确图标 ID，也要优先写一个简洁的语义关键词，例如 rocket 、 shield 、 database 、 users 、 chart line ，而不是省略 icon 字段。 仅在纯图表类数据点、纯数值序列，或用户明确要求极简文本版时，才可以省略 icon 。 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 需求确认 icon clipboard check - label 开发实现 icon code - label 发布上线 icon rocket order asc sequence-interaction-* 模板 infographic sequence-interaction-compact-animated-badge-card data title 登录校验流程 sequences - label 用户 icon user children - label 发起登录 id user-login step 0 icon login - label 收到结果 id user-result step 2 icon inbox check - label 服务端 icon server children - label 校验凭证 id server-verify step 1 icon shield check - label 返回结果 id server-return step 2 icon send 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 icon trophy children - label 品牌认知高 icon star - label Weaknesses icon alert circle children - label 成本压力大 icon wallet compare-binary-* 模板 infographic compare-binary-horizontal-simple-fold data title 餐桌价格对比 compares - label 原价 icon tag children - label 原价 value 500 icon tag - label 实际支付 icon wallet 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> 是否只使用了一个与模板匹配的主数据字段 主要数据项是否都带有合理的 icon ，尤其是列表、步骤、节点、对比项与名称中含 icon 的模板 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 等）。 对语义明确的主要数据项主动补充 icon ，不要等用户单独提醒。 选择合适模板。 使用 AntV Infographic 语法描述信息图内容 {syntax} 。 关键注意 ：必须尊重用户输入的语言。例如用户输入中文，则语法中的文本也必须是中文。 第二步：渲染信息图 当得到最终的 AntV Infographic 语法后，可按以下步骤生成完整 HTML 文件： 创建包含以下结构的完整 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 > 使用 Write 工具生成 HTML 文件，命名为 <title>-infographic.html 展示给用户： 生成文件路径，并提示：“直接用浏览器打开即可查看并保存 SVG” 输出语法，并提示：“需要调整模板/配色/内容请告诉我” **注意：**HTML 文件必须包含： 通过导出按钮实现 SVG 导出 容器自适应，宽高均为 100%