AntV Infographic：让文字活起来的信息图可视化引擎

Fen9Pi2026/8/11大约 9 分钟

前言：信息图的困境

需要做信息图时，很多人面临的困境是：

工具太复杂：

Figma/Sketch 需要设计技能
PowerPoint 模板有限
在线工具质量参差不齐

流程太慢：

从设计到调整需要数小时
改动成本高
难以批量生产

质量难保证：

不会设计的人做不出好图
模板千篇一律
风格不统一

今天介绍一个优雅的解决方案——AntV Infographic，一个声明式的信息图可视化引擎，用代码生成信息图，支持 AI 流式输出。

一、项目概览

AntV Infographic 是 AntV 的下一代声明式信息图可视化引擎。

一句话说清楚：

用精心设计的信息图语法，快速灵活地渲染高质量信息图，让信息呈现更高效，数据故事讲述更简单。

项目地址：https://github.com/antvis/Infographic 团队：AntV（蚂蚁集团可视化团队） 开源协议：MIT 官网：https://infographic.antv.vision

核心特性

特性	说明
🤖 AI-friendly	为 AI 生成调优，支持流式输出
📦 Ready to use	~200 个内置模板和组件
🎨 Theme system	手绘、渐变、图案等多主题
🧑🏻‍💻 Built-in editor	内置编辑器，AI 生成后可编辑
📐 High-quality SVG	默认 SVG 渲染，保真度高

Slogan

Infographic, bring words to life!
信息图，让文字活起来！

二、核心能力

1. AI-friendly 设计

为 AI 生成调优的配置和语法。

核心特点：

简洁的提示词
高度容错的语法
支持流式输出和渲染
渐进式渲染

流式渲染示例：

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

价值：

AI 边输出边渲染
实时看到结果
减少等待时间
提升用户体验

2. 丰富的内置资源

约 200 个内置信息图模板、data-item 组件和布局。

模板类型：

流程图（process、timeline、roadmap）
列表（list、card、grid）
关系图（relation、tree、mind）
图表（chart、diagram、stat）
混合（infographic、poster、story）

组件库：

文本组件（title、subtitle、description）
形状组件（icon、badge、tag）
布局组件（row、column、grid）
装饰组件（arrow、line、background）

价值：

开箱即用
覆盖常见场景
风格统一
质量保证

3. 强大的主题系统

手绘、渐变、图案等多种预设主题。

预设主题：

手绘风格（sketch）
渐变风格（gradient）
图案风格（pattern）
扁平风格（flat）
3D 风格（3D）

深度自定义：

配色方案
字体样式
间距布局
装饰元素

示例：

const infographic = new Infographic({
  theme: 'sketch', // 手绘风格
  customTheme: {
    colors: ['#1890FF', '#52C41A', '#FAAD14'],
    fontFamily: 'Arial',
  },
});

价值：

风格多样
快速切换
深度定制
品牌一致

4. 内置编辑器

AI 生成的结果可以进一步编辑。

编辑功能：

拖拽调整位置
双击编辑文本
右键更改样式
撤销/重做

工作流：

AI 生成 → 内置编辑器调整 → 导出 SVG/PNG

价值：

AI 快速生成
人工精细调整
最佳实践结合
降低门槛

5. 高质量 SVG 输出

默认用 SVG 渲染。

优势：

矢量格式，无限缩放
文件小，加载快
易于编辑（用 Figma/Illustrator）
可以嵌入到任何网页

对比 PNG：

PNG：位图，放大失真，文件大
SVG：矢量，无限缩放，文件小

三、快速开始

安装

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
`);

渲染效果：一个三步流程图，带箭头，简洁清晰。

语法示例

1. 流程图

infographic.render(`
infographic process-timeline-vertical
data
  steps
    - title 需求分析
      time 1月
      desc 明确用户需求
    - title 设计阶段
      time 2月
      desc 完成产品设计
    - title 开发阶段
      time 3-4月
      desc 实现核心功能
`);

2. 关系图

infographic.render(`
infographic relation-mind-map
data
  center 核心目标
  branches
    - label 技术选型
      desc 选择合适的技术栈
    - label 架构设计
      desc 设计系统架构
    - label 性能优化
      desc 提升系统性能
`);

3. 统计图表

infographic.render(`
infographic stat-card-group
data
  stats
    - label 用户增长
      value 120%
      trend up
    - label 收入增长
      value 85%
      trend up
    - label 成本下降
      value 30%
      trend down
`);

四、AI 集成

Skills 集成

AntV Infographic 提供了多个 Skills 用于集成 AI agents：

Skill	功能
infographic-creator	创建渲染信息图的 HTML 文件
infographic-syntax-creator	从描述生成信息图语法
infographic-structure-creator	生成自定义结构设计
infographic-item-creator	生成自定义 item 设计
infographic-template-updater	更新模板库（开发者用）

Claude Code 集成

方式 1：从 Marketplace 安装

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

方式 2：手动安装

set -e

VERSION=0.2.4
BASE_URL=https://github.com/antvis/Infographic/releases/download
mkdir -p .claude/skills
"
curl -L --fail -o skills.zip "$BASE_URL/$VERSION/skills.zip"
unzip -q -o skills.zip -d .claude/skills
rm -f skills.zip

Codex 集成

# 替换 <SKILL> 为技能名，如 infographic-creator
$skill-installer install https://github.com/antvis/Infographic/tree/main/skills/infographic-creator

AI 使用场景

场景 1：从描述生成信息图

你：生成一个产品发布流程图，包含需求分析、设计、开发、测试、发布五个阶段

AI（使用 infographic-syntax-creator）：
生成信息图语法 → 渲染成 SVG

场景 2：从文档生成信息图

你：分析这个 Markdown 文档，提取关键流程，生成信息图

AI（使用 infographic-creator）：
解析文档 → 提取结构 → 生成语法 → 渲染成 HTML

场景 3：实时流式生成

你：边讲边生成信息图

AI（使用流式渲染）：
边输出语法边渲染 → 实时看到结果

五、生态系统

使用 AntV Infographic 的产品

💼 产品：

Alma — 桌面 AI 提供者编排应用，集成 Infographic
Markdown Viewer — Markdown 查看器，支持 Infographic，可导出 Word
InfographicAI — 用 Infographic 生成 PPT 幻灯片
LangChat Slides — 下一代 AI 幻灯片生成器
Nowledge Mem — AI 记忆库，支持 Infographic 演示创建
WeChat Markdown Editor — Markdown 转微信文章编辑器
Welight — 微信文章创作平台
Zojo — 用简单语法生成专业信息图

📦 库和插件：

astro-koharu — Anime 博客主题（Astro），支持 Infographic
docsify-infographic — Docsify 插件，渲染 Infographic 图表
feffery-infographic — Python Plotly Dash 创建信息图
infographic-cli — CLI 工具生成 SVG 信息图
infographic-for-react — React 组件封装
markdown-it-infographic — markdown-it 插件
markstream-vue — Vue 3 流式 Markdown 渲染
obsidian-infographic — Obsidian 插件
slidev-addon-infographic — Slidev 组件
VSCode Extension — VSCode 预览 Infographic

六、实际应用场景

场景 1：技术文档

任务：为技术文档添加流程图。

传统方式：

在 draw.io 里画图
调整样式
导出 PNG
插入文档

新方式：

```infographic
infographic process-timeline-vertical
data
  steps
    - title 需求分析
      desc 明确用户需求
    - title 设计阶段
      desc 完成产品设计


**价值**：
- 代码即图
- 版本控制
- 易于维护

### 场景 2：演示文稿

**任务**：为 PPT 添加信息图。

**传统方式**：
- 在 PowerPoint 里手动绘制
- 调整样式
- 对齐元素

**新方式**：
- 用 AI 生成信息图语法
- 渲染成 SVG
- 拖入 PPT

**价值**：
- 快速生成
- 质量保证
- 易于调整

### 场景 3：社交媒体

**任务**：为社交媒体生成配图。

**传统方式**：
- 用设计工具画图
- 调整尺寸
- 导出

**新方式**：
- 用 AI 描述需求
- 生成信息图
- 导出 PNG

**价值**：
- 批量生产
- 风格统一
- 快速迭代

### 场景 4：数据故事

**任务**：讲述数据背后的故事。

**传统方式**：
- 用图表工具
- 手动标注
- 添加说明

**新方式**：
- 用信息图语法
- 结合数据
- 自动生成

**价值**：
- 数据可视化
- 故事化呈现
- 易于理解

---

## 七、设计理念

### 为什么是声明式？

**命令式 vs 声明式**：

**命令式**（PowerPoint）：

创建矩形框
设置位置 (100, 100)
设置大小 (200, 100)
添加文字"需求分析"
设置字体样式
复制矩形框
调整位置 (100, 250) ...


**声明式**（Infographic）：

infographic process-timeline-vertical data steps - title 需求分析 - title 设计阶段


**价值**：
- 描述"是什么"，不是"怎么做"
- 更简洁
- 更易维护
- 更适合 AI 生成

### 为什么是 SVG？

**SVG vs PNG**：

| 维度 | SVG | PNG |
|------|-----|-----|
| **格式** | 矢量 | 位图 |
| **缩放** | 无限缩放不失真 | 放大会失真 |
| **文件大小** | 小 | 大 |
| **可编辑性** | 可用 Figma/Illustrator 编辑 | 难以编辑 |
| **浏览器支持** | 原生支持 | 原生支持 |

**价值**：
- 高质量输出
- 易于编辑
- 文件小
- 加载快

### 为什么 AI-friendly？

**三个设计决策**：

**1. 简洁的语法**

infographic list-row-simple-horizontal-arrow data lists - label Step 1 - label Step 2

- AI 容易生成
- 人类容易理解

**2. 高度容错**
- 缺少字段有默认值
- 顺序灵活
- 格式宽松

**3. 流式渲染**
- 边输出边渲染
- 实时反馈
- 减少等待

---

## 八、最佳实践

### 1. 从模板开始

**不要从零开始，用内置模板。**

```ts
// 浏览模板库
https://infographic.antv.vision/gallery

// 选择合适的模板
infographic.render('infographic list-row-simple-horizontal-arrow');

2. 用 AI 生成

不要手写语法，用 AI 生成。

你：生成一个产品发布流程图

AI（使用 infographic-syntax-creator）：
生成信息图语法

3. 渐进式优化

先做出可用版本，再优化。

// 1. 生成基础版本
infographic.render(basicSyntax);

// 2. 添加主题
infographic.render(basicSyntax, {theme: 'sketch'});

// 3. 自定义样式
infographic.render(basicSyntax, {customTheme: {...}});

4. 版本控制

信息图是代码，可以 Git 管理。

git add infographic.spec
git commit -m "update process flow"

5. 文档化

为信息图添加注释。

infographic.render(`
# 产品发布流程
# 包含五个阶段：需求、设计、开发、测试、发布

infographic process-timeline-vertical
data
  steps
    - title 需求分析
    ...
`);

九、总结

AntV Infographic 的核心价值：

🤖 AI-friendly：为 AI 生成调优，支持流式输出
📦 Ready to use：~200 个内置模板和组件
🎨 Theme system：多种预设主题，深度自定义
🧑🏻‍💻 Built-in editor：AI 生成后可编辑
📐 High-quality SVG：矢量输出，保真度高
🔄 流式渲染：边输出边渲染，实时反馈
🧩 生态丰富：集成多个产品和库

核心思想：

信息图不应该是设计工具的专利，而应该是代码的产物。用声明式语法替代手动绘制，用 AI 生成替代从零开始，用 SVG 输出保证高质量。

三个关键点：

声明式语法：描述"是什么"，不是"怎么做"
AI-friendly：为 AI 生成调优，支持流式渲染
生态集成：集成 Claude/Codex，支持 Markdown/VSCode/Obsidian

记住：

好的工具不是降低质量，而是降低门槛。AntV Infographic 让不会设计的人也能做出专业信息图。

参考资源

官网：https://infographic.antv.vision
GitHub：https://github.com/antvis/Infographic
文档：https://infographic.antv.vision/learn
Gallery：https://infographic.antv.vision/gallery
AI Agent：https://infographic.antv.vision/ai
NPM：https://www.npmjs.com/package/@antv/infographic

声明：本文基于开源项目分析，具体使用请参考官方文档。