蚂蚁集团旗下的可视化团队 AntV，一年前悄悄开了一个新仓库，做的事和它以往所有项目都不太一样。AntV 过去十几年做的是"数据可视化"——G2 画统计图表、G6 画关系图、L7 画地图，一句话概括是把数字画成图。而这个新项目要解决的是另一半问题：把文字直接变成图。

它叫 AntV Infographic，2025 年 9 月建仓，到现在攒下 6861 star、559 个 fork，MIT 协议，TypeScript 写的。但它真正特别的地方不是画得好看，而是——它的语法是专门写给 AI 写的。

它是什么：把"一段话"编译成"一张图"

官方给它的定位是「AntV 新一代声明式信息图可视化引擎」，英文原文写得更清楚：

"AntV Infographic is AntV's next-generation declarative infographic visualization engine. With a carefully designed infographic syntax, it can quickly and flexibly render high-quality infographics, making information presentation more efficient and data storytelling simpler."

关键词是"声明式"——你不写绘制代码，不摆坐标，只用一段结构化文本描述"我有哪些信息、想用什么结构表达"，剩下的渲染交给它。它默认输出 SVG，所以图放大不失真，也能直接丢给设计工具二次编辑。

信息图不是图表，这是两件事

官方文档里专门用一节讲这个区别，把话说得很直白：图表服务于"精确"，信息图服务于"讲故事"。

• 主要目的：图表是精确展示数据，信息图是讲故事、传达洞察
• 设计重心：图表讲功能性与准确性，信息图讲视觉美感与叙事性
• 表现方式：图表是标准化图表类型，信息图是自由创意布局
• 信息密度：图表聚焦特定数据集，信息图整合多维信息
• 目标受众：图表给专业分析人员，信息图面向大众传播
• 视觉元素：图表主要靠坐标轴与网格，信息图靠图标、图形、装饰元素

官方还给了一个配比经验值：一张信息图里，图形大约占 60%，文字大约占 40%。

它的理论公式

Infographic = Information Structure（信息结构）+ Graphic Semantics（图形语义）。前半句管"内容是什么、谁包含谁"，后半句管"长什么样、什么风格"。这个二分贯穿了整个框架的设计——待会儿你会看到，它的语法就是按这两半来切的。

核心机制：一套像 Mermaid 的语法

官方把它的语法形容为 "a Mermaid-like grammar for describing templates, designs, data, and themes"（一套类 Mermaid 的语法，用来描述模板、设计、数据和主题）。入口是一个模板名，后面跟几个缩进块：

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

渲染出来就是一个横向箭头串联的三步流程图。规则很简单：键值对用空格分隔、缩进用两个空格、对象数组用换行加 -。除了 data（数据），还有 design（选结构、卡片、标题模块）和 theme（换主题、调色板、字体、风格化）两个块。

五种数据结构，覆盖大部分表达需求

• lists（列表）——一组平级项目，适合清单、特性列表
• sequences（序列）——有先后顺序，适合时间线、步骤；可以用 order desc 反向排列
• root + children（层级）——树状结构，适合组织架构、分类体系
• compares（对比）——并列或分组对比，典型是 SWOT 和四象限
• values（统计）——指标数值，可以加 category 做分组柱状
• nodes + relations（关系）——节点与连线，流程图、关系网络

关系数据这一块值得一提，它兼容了一种类 Mermaid 的写法，可以完全跳过 nodes 直接在 relations 里定义节点：

infographic relation-dagre-flow-tb-simple-circle-node
data
  relations
    A -> B
    B -> C[Label of C]
    C -->|The Edge Between C and D| D

流式渲染：这一条是它写给 AI 的关键

大模型输出是逐字吐的。传统做法是等整段生成完再渲染，用户盯着空白屏幕。AntV Infographic 的做法是把每次新增的片段追加到缓冲区，然后重新渲染一遍——模型打字的同一时间，图在一点点长出来：

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

能这么干的前提是语法高度容错：半截语法不会崩，多余的字会被规整掉。官方明确列了容错清单——多打的破折号（A ----> B）、-.-、==> 、--x、--o 都会被自动规范化成 -- 或 ->；id1(label) 和 id1[label] 等价；id@{...} 这种额外属性会被忽略。

还有个小设计挺实用：点路径语法。theme.base.text.fill #fff 和三层缩进写下来完全等价，能少敲不少空行——对 LLM 来说，这意味着同样的配置可以少输出一大截 token。

真实的规模（附口径说明）

这块我要说得仔细点，因为官方自己的两处数字对不上。

• 模板数：README 写的是 "~200 built-in infographic templates"（约 200 套内置模板），但官方 Gallery 页面实际列出的是 276 套（页面自己标注 276 / 276）。两个数差 70 多套，更像是 README 没跟着更新维护。取用时以 Gallery 为准。
• 结构（structure）设计：按 GitHub 官方 git tree 统计，src/designs/structures 下 49 个文件——这两个口径含 index 等非组件文件，属于估算，不是官方对外宣称的能力数。
• 数据条目（item）样式：src/designs/items 下 31 个文件，同样是估算口径。它们决定每个数据项渲染成什么样——卡片、胶囊、徽章、圆节点、进度环等等。
• 内置主题：README 说"多套预设主题"，但源码 src/themes/built-in.ts 里实际注册的只有三套——light、dark、hand-drawn（手绘风，靠 roughjs 实现，配一款手写体）。另有一个 generator.ts 做主题派生。所以"多套"这个说法，准确讲是"三套基础主题 + 可派生的主题生成器 + 任意自定义"。

Gallery 里的 276 套模板按 七大类组织：Chart（图表）、Comparison（对比）、Hierarchy（层级）、List（列表）、Quadrant（象限）、Relation（关系）、Sequence（序列）。其中数量最多的是层级树（100 套）、交互序列（36 套）和关系图（14 套）。

上手：三步跑起来

第一步：装包

npm install @antv/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
`);

注意 editable: true——它是带内置编辑器的，AI 生成完的结果可以在页面上直接改，不用回炉重生成。这是它和多数"AI 出图"工具的分野：AI 给的是初稿，不是终点。

第二步：让 AI 自己会写——5 个 Skills

这才是这个项目最有意思的部分。它不满足于"语法适合 AI 写"，而是直接把写语法这件事打包成了可以安装给 AI Agent 的技能，仓库里的 skills/ 目录下有 5 个：

• infographic-creator——直接产出一个能渲染信息图的 HTML 文件
• infographic-syntax-creator——把一段描述转成信息图语法
• infographic-structure-creator——生成自定义结构设计
• infographic-item-creator——生成自定义数据项样式
• infographic-template-updater——更新模板库（开发者用）

装给 Claude Code 是两条命令：

/plugin marketplace add https://github.com/antvis/Infographic.git
/plugin install antv-infographic-skills@antv-infographic

Codex 走 skill-installer：

$skill-installer install https://github.com/antvis/Infographic/tree/main/skills/infographic-creator

除此之外官网还有一个 AI Workspace：把写好的文章、报告或任意文本贴进去，AI 读完后直接给出一份信息图方案。也就是说，从"一段文字"到"一张图"这条链路上，每一环都有对应的产品形态——你是开发者就调 API，你是 Agent 用户就装 Skill，你什么都不会就粘文本。

几个上手前该知道的边界

1. 版本还是 0.2.x，API 会变。 这不是 1.0 项目，接口有调整的可能，生产环境用之前建议锁版本。

2. 三个版本号在打架，装包认 npm。 我核的时候发现：npm 上最新是 0.2.20（2026-08-19 发布），GitHub Release 页最新只到 0.2.19（2026-05-06）——release 比 npm 滞后三个多月；而官方文档里的安装示例还写着 VERSION=0.2.4 甚至 0.2.14，更旧。所以以 npm 的 latest 为准，别照文档里的版本号抄。

3. 图标要自己接。 语法里的 icon mdi/rocket-launch 只是关键词，图标的实际加载需要你注册一个资源加载器（官方示例是走 Iconify 的 API 拉 SVG）。不接也能跑，只是图标位空着。

4. 它不是给非开发者的成品工具。 面向的是"要把信息图能力嵌进自己产品里"的开发者——社区里已经有人用它做了 Markdown 查看器、PPT 生成器、Obsidian 插件、VSCode 扩展。想直接出图，官方那个 AI Workspace 页面更合适。

5. 依赖不重。 装了 d3、roughjs（手绘）、linkedom、@antv/layout 与 @antv/hierarchy（布局）、culori 与 tinycolor2（色彩）等，没有需要编译的原生模块。

生态已经长起来了

一年时间，社区项目列表已经不短：Markdown 查看器 docu.md、AI 幻灯片工具 LangChat Slides、微信 Markdown 编辑器 md.doocs.org、Obsidian 插件、VSCode 扩展、Slidev 组件、Docsify 插件，以及 Python 侧的 Plotly Dash 封装 feffery-infographic。对一个 0.2.x 项目来说，这个生态密度算是健康的信号。

一句话总结

AntV Infographic 值得看的不是"276 套模板"，而是它把"图形语法"这件事重新设计了一遍——这次是照着 LLM 的输出习惯设计的：容错到半截语法也能画、流式到打字的同时图在长、再把写语法本身封装成 Agent 能装的 Skill。传统图表库解决的是"人怎么把数据画出来"，它解决的是"AI 怎么把一段话变成一张拿得出手的图"。前者是工具，后者是这条链路里缺的那一节。

如果你想看它到底能画成什么样，去官方 Gallery 按七大类翻一遍最直观；想动手，npm install @antv/infographic 加十行代码就能跑出第一张。

参考来源

• antvis/Infographic 官方仓库（star / fork / license / 建仓时间等元数据取自 GitHub 官方 API）
• 官方站点与文档（语法、快速上手、信息图理论、AI Agent 章节）
• 官方 Gallery（模板数量与分类）
• npm 包页面（版本与依赖）
• AntV 官网（AntV 在蚂蚁可视化体系中的定位）

本文为介绍 / 解读类文章，资料全部取自官方仓库、官方文档、官方站点与 npm 与 GitHub 的公开接口，未做实际安装试用。文中标注"估算"的数字为按官方仓库 git tree 统计所得，与非官方宣称口径可能有差异；模板数以官方 Gallery 为准。