AntV Infographic | 用声明式语法生成可编辑 SVG 信息图

AntV Infographic 是 AntV 团队维护的声明式信息图生成与渲染框架，面向希望用代码或自然语言组织信息图的前端开发者、AI 应用开发者和内容工具作者。它把布局、数据项和主题写成可读的 Infographic Syntax，再渲染为默认可编辑的 SVG；项目本身是 TypeScript 库，不是一个自带模型额度的在线制图 SaaS。当前 GitHub 最新正式 Release 是 0.2.19，仓库主分支的 package.json 已标注 0.2.20，使用时应区分“已发布 Release”和“主分支源码版本”。

截至 2026 年 9 月 2 日核对，antvis/Infographic 约有 6,531 个 stars 和 535 个 forks，默认分支为 main，主要语言为 TypeScript，仓库未归档。官方站点提供学习文档、示例画廊和 AI Agent 页面；npm 包名为 @antv/infographic，适合嵌入网页、文档、Markdown 工具或其他需要动态生成信息图的产品。

把信息图写成可渲染的声明式语法

Infographic 的关键抽象是“描述要表达什么”，而不是手动计算每个图形的坐标。语法先声明模板，例如 list-row-simple-horizontal-arrow，再在 data 节点下提供列表、标签和描述。引擎负责把这些数据套入布局，并输出可以继续编辑的视觉结果；同一套数据可以替换主题或布局，而不必重新绘制每个元素。

infographic list-row-simple-horizontal-arrow
data
  lists
    - label Step 1
      desc Start
    - label Step 2
      desc In Progress
    - label Step 3
      desc Complete

这种写法更接近结构化内容而不是传统图表配置，适合把流程、时间线、对比、层级、四象限或列表等叙事结构交给程序生成。语法是否能准确表达你的业务关系，仍取决于模板选择、数据组织和文本质量；它不会替你判断数据是否真实或结论是否成立。

模板、主题与编辑器负责把结果变成可用视觉

README 介绍了约 200 个内置信息图模板、数据项组件和布局，覆盖顺序型、列表型、对比型、时间线、层级和四象限等常见表达。主题系统提供手绘、渐变、纹理和多种预设风格，也允许继续深度定制。引擎内置编辑器，生成后可以再调整内容和结构；SVG 默认输出则保留了较好的缩放、复制和二次编辑基础。

AntV Infographic 信息图模板预览 — AntV Infographic 官方 README 的模板预览，展示顺序、对比、四象限、列表、时间线等多种信息图布局；来源：https://github.com/antvis/Infographic/blob/main/README.md

对产品团队来说，模板库的价值在于先统一信息结构，再交给主题调整视觉；对开发者来说，SVG 和编辑器意味着生成结果不是一次性位图。需要注意的是，约 200 个模板是 README 的项目描述，具体模板名称、参数和可编辑范围仍应以当前文档与源码为准。

AI 友好，但不会替你提供大模型

Infographic Syntax 的设计考虑了 AI 生成：提示词可以先产出结构化语法，再由引擎渲染。引擎还支持容错性较高的流式渲染，应用可以不断把模型返回的片段追加到缓冲区并重复调用 render，让用户在生成尚未结束时就看到逐步成形的信息图。

let buffer = '';
for (const chunk of chunks) {
  buffer += chunk;
  infographic.render(buffer);
}

仓库的 skills 目录还提供面向 AI Agent 的能力包，包括创建 HTML 信息图、生成 Infographic Syntax、自定义结构和数据项，以及更新模板库。README 分别给出了 Claude Code 和 Codex 的安装入口；这些 Skills 是提示词与工作流配置，不是模型本身，实际生成仍需要你接入的 AI 客户端或服务。

npm 安装与最小渲染流程

在前端项目中可以直接安装 npm 包：

npm install @antv/infographic

页面准备一个容器后，导入 Infographic，设置容器、尺寸和是否可编辑，再传入语法字符串：

import { Infographic } from '@antv/infographic';

const infographic = new Infographic({
  container: '#container',
  width: '100%',
  height: '100%',
  editable: true,
});

infographic.render(\`infographic list-row-simple-horizontal-arrow
data
  lists
    - label Step 1
      desc Start
    - label Step 2
      desc In Progress
    - label Step 3
      desc Complete\`);

这个最小示例对应官方 README 的浏览器用法，前提是项目已有可用的构建工具和 #container 元素。仓库同时导出了 jsx-runtime 与 ssr 入口，并提供 TypeScript、ESM、CommonJS、UMD 等构建脚本；如果要在服务端生成或封装成组件，建议先阅读对应入口的当前文档，而不是直接把浏览器示例照搬到 Node.js。

版本边界与二次开发入口

GitHub Releases 页面当前最新正式版本为 0.2.19，该 Release 附带 skills.zip；而主分支 package.json 的包版本为 0.2.20。如果团队要锁定生产依赖，建议使用 npm 中明确发布的版本或 Git tag，并在升级前查看变更记录；如果直接跟随 main，则应把它当作源码分支而不是已经完成发布验证的稳定包。

仓库根目录的脚本包括 npm run build、npm test、npm run lint 和 npm run check:test，可以据此构建 ESM、CommonJS、UMD 产物并运行测试。它的依赖涵盖布局、颜色、D3、roughjs、linkedom 等组件；二次开发时，模板、主题和渲染器之间的接口变化比单纯替换一张图片更值得关注。

MIT 许可适合怎样使用

Infographic 采用 MIT License，通常允许在保留版权和许可声明的前提下使用、修改、合并、发布和再分发代码。将它集成到自有网站、文档平台、Markdown 编辑器或商业产品时，仍要保留仓库的许可证文本，并同时遵守依赖包各自的许可证要求。

MIT 许可只覆盖代码授权，不替你解决信息图中的数据版权、字体、图标、外部图片、模型输出或用户上传内容的权利问题。若使用 AI 生成文本或图形，仍需核对数据来源、品牌素材和目标平台的发布要求；项目能把内容渲染出来，不代表内容天然具备可商用或可公开传播的资格。

适合的项目与不适合的期待

如果你正在开发文档站、知识库、Markdown 编辑器、AI 演示工具或数据叙事产品，需要把结构化文本快速变成可编辑的流程图、时间线、对比图和列表，Infographic 的声明式语法、模板库、主题系统和 SVG 输出能提供一条较完整的嵌入路径。它尤其适合“内容结构经常变化，但视觉表达需要保持一致”的场景。

它不等于完整的 BI 分析平台，也不会自动完成数据清洗、统计推断、事实核验或品牌设计系统建设。选择模板前应先确定信息关系，接入 AI 前要准备好模型服务与数据边界，进入生产环境前还应自行验证构建版本、浏览器兼容性、导出链路和第三方依赖许可。仓库 README 中的“高质量”和“快速”是项目定位描述，不能替代你对实际内容和性能的验收。