AntV Infographic

当需要生成可反复修改的信息图（如流程步骤、指标卡片、叙事型对比），而非一次性图片时，AntV Infographic 提供一套声明式DSL和渲染引擎，让AI输出结构文本，前端流式渲染为可编辑的SVG。

它能解决什么痛点

AI直接生成图片后，改文案、换颜色、调整模块顺序往往需要重新生成，无法保证布局一致。AntV Infographic 将生成图片转为生成结构：LLM输出DSL文本，引擎解析渲染，人可在内置编辑器中继续微调。

• 流式渲染: 支持AI逐token输出时增量渲染，用户看到信息图逐步生成
• 可编辑SVG: 默认输出SVG，配合编辑器可修改文案、颜色、模块顺序
• 容错设计: 渲染引擎接受不完整输入，即使LLM输出半截也能给出可视反馈

核心能力与语法

项目定位为“信息图的可执行排版语言”，在SVG之上封装贴近信息图的语法层：模板、数据、列表、布局、主题。render()接收一段DSL字符串而非配置对象，对AI生成友好。

• 内置模板约200个: 列表、步骤、对比、流程、数据项、卡片等叙事型结构
• 主题系统: 支持手绘风格、渐变、图案填充，可自定义
• AI友好语法: DSL为文本协议，LLM可逐token生成，无需计算坐标
• 最小代码: new Infographic({container, editable: true})后调用infographic.render(dsl)即可

适用场景与边界

它不替代通用图表库（如G2、G6），而是专注“把信息讲清楚”的叙事型信息图：步骤列表、产品对比、时间线、指标卡片。适合需要反复修改、适配不同宽度的内容生产流程。

• 内容生产: 文章配图、PPT信息图、报告卡片，AI生成初稿后人微调
• Agent集成: 支持Claude Code和Codex工作流，通过skills集成
• 版本状态: 当前v0.2.19，GitHub星标约5k，主语言TypeScript

常见问题

Q1：AntV Infographic 的 DSL 语法长什么样？

A1：以横向箭头列表为例：`infographic list-row-simple-horizontal-arrow data lists - label Step 1 desc Start - label Step 2 desc In Progress - label Step 3 desc Complete`。render()直接接收这段文本，引擎解析为信息图。

Q2：AI 生成后还能在编辑器里改什么？

A2：内置编辑器支持修改文案、调整颜色、删除或移动模块（如把第二步挪到第三步），无需重新生成。编辑器通过editable: true参数启用。

Q3：它和 Mermaid 或 G2 有什么区别？

A3：Mermaid主要生成流程图/时序图等UML类图表；G2是通用统计图表库。Infographic专注叙事型信息图（步骤、对比、卡片），且专为AI流式输出设计，支持不完整输入的渐进渲染。

更多同类工具与网站,可在数据可视化分类继续挑选。

信息核实于 2026年7月,具体以官网为准。