AI 边说边画,200+ 模板自动出图,蚂蚁这个项目有点东西!

有没有同感：AI 越能写，我们越懒得读字。

一篇复盘、一版方案、一份周报，全是密密麻麻的文字。信息都在，就是不想看第二眼。

都知道一图胜千言。可画图这事，难的从来不是「画」，而是排版、配色、对齐这些体力活。

最近开源君发现的一个叫Infographic的项目，大概就是来干掉这些体力活的。

项目简介

Infographic是蚂蚁集团 AntV 可视化团队（G2、G6、L7 那一家）开源的新一代声明式信息图可视化引擎。

它设计了一套类似 Mermaid 的「信息图语法」：一段纯文本，说清楚模板、数据和主题，丢给引擎就渲染出一张成品图。

不用拖拽，不用排版，不用跟画布较劲。

背后的设计公式也很有意思：信息图 = 信息结构 + 图形语义

前者管「讲什么」，后者管「长什么样」。你只管内容和叙事，视觉的活儿交给引擎。

项目目前已经拿到 6.8k star，社区也已经长出了十几个衍生项目，从微信排版编辑器、PPT 生成工具到 VSCode / Obsidian 插件都有，可以说生态已经跑起来了。

功能特性

01 AI 生到哪，图就画到哪

这是我觉得最妙的一点。

Infographic 的语法是为 AI 生成而设计的，容错性很高——语法没写完、字段缺一半，它也不会报错崩掉，而是尽力渲染当前能渲染的部分。

于是就出现了这个效果：大模型还在往外吐字，图已经在屏幕上一点点长出来了。

代码上就一个套路：把每次收到的碎片拼进 buffer，然后反复调用 render。

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

没有中间态转换，没有等生成完再解析。那种「AI 一边说、图一边长」的观感，第一次见到确实有点上头。

02 200 多个模板，开箱即用

内置约 200 个信息图模板、数据项组件和布局，覆盖了日常能想到的大部分表达场景。

模板命名很有规律，看前缀就知道该配什么数据：

比如一条彩色时间线，几行语法就出来了：

统计图表也不在话下，年度营收对比，改改数字就能用：

关系图那块甚至支持 Mermaid 风格的写法，A -> B -> C，写过流程图的人零上手成本。

03 主题系统：手绘、渐变、深色，一键切换

不喜欢默认风格？换主题就行。

预设主题里有深色、渐变、图案、手绘风等好几套，语法里一个 theme 块搞定。比如一键切到深色：

想深度定制也行，背景色、主色、调色板都能单独调：

theme  colorBg #0b1220  colorPrimary #ff5a5f  palette #ff5a5f #1fb6ff #13ce66  stylize rough    roughness 0.3

想做出那种随手画在白板上的松弛感，加个 stylize rough 就够了。

04 生成完还能改，导出就是 SVG

很多人用 AI 出图的痛点：结果不满意，没法改，只能重来。

Infographic 内置了编辑器，初始化时把 editable 打开，AI 生成的图，你还能接着手动调文字、改内容。

渲染默认走 SVG，不是位图——放大不糊，拖进 Figma 或 Illustrator 能直接编辑图层，贴进文档也清晰。

05 打包成 Skills，塞进 AI 编程工具

项目直接提供了一组 skills，给 AI Agent 用：

• infographic-creator：生成一个渲染信息图的 HTML 文件
• infographic-syntax-creator：按描述生成信息图语法
• infographic-structure-creator：自定义结构设计
• infographic-item-creator：自定义数据项设计

Claude Code 里两行命令装好：

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

Codex 也支持。装完之后，跟 AI 说一句「把这个内容做成信息图」，它就自己会写了。

快速安装、使用

安装

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-arrowdata  lists    - label Step 1      desc Start    - label Step 2      desc In Progress    - label Step 3      desc Complete`);

渲染出来是这样：

语法规则很简单：infographic [模板名] 开头，空格分隔键值，两空格缩进，- 换行表示数组项。

官方还提供了大量的模版库可以直接盗用，还不确定用什么图的伙伴可以到这里逛逛。

开源君想说

Infographic 做的其实就是把信息图从「手工作业」变成了「声明式渲染」，而且专门为 AI 生成场景做了优化，算是踩在了当下的趋势上。

如果你经常需要做信息图，或者正在折腾 AI 生成可视化，这个项目可以收藏一下。

https://github.com/antvis/Infographic