AntV Infographic 深度解析：用 Markdown 语法生成专业信息图的开源利器

AntV Infographic 深度解析：用 Markdown 语法生成专业信息图的开源利器

本文由 无忆研习社 原创首发，深度拆解这款国产开源信息图引擎的技术架构与实战玩法。

写在前面

最近技术圈流传一个段子："四年前你绝对想不到，AGI 的重要组成部分竟然是 Markdown 文档。"

虽然是调侃，但确实点出了一个趋势——在生成式 AI 时代，人与大模型高效协作的媒介，往往是结构清晰、语法简洁的纯文本格式。Markdown 这类语言正是其中的典范代表。

作为一个长期关注开源项目的技术博主，我最近发现了一个相当有意思的国产开源项目：AntV Infographic。

它在 GitHub 上开源仅一个多月，Star 数就突破了 3000。考虑到它的定位相当垂直（专注信息图生成），这种关注度说明它确实切中了一类现实需求。

今天这篇文章，无忆研习社 就来带大家深入拆解这个项目的技术原理和实际操作方法。无论你是前端开发者、内容创作者，还是对 AI 可视化感兴趣的技术爱好者，相信都能从中有所收获。

一、什么是 AntV Infographic？

1.1 项目定位

AntV Infographic 是蚂蚁集团 AntV 团队开源的一款声明式、AI 友好的信息图生成与渲染引擎。

简单来说，它做的事情是：让你用类似 Markdown 的简洁语法，快速生成专业级别的信息图。

项目地址：https://github.com/antvis/Infographic

在线体验：https://infographic.antv.vision

1.2 解决了什么问题？

如果你从事过内容创作、技术写作或者产品运营工作，应该对"画信息图"这件事不陌生。

传统的信息图制作流程通常是这样的：

• 方案一：PPT 手动画 —— 灵活但效率低，风格难统一
• 方案二：专业设计软件（Figma、Sketch） —— 门槛高，需要设计功底
• 方案三：在线设计工具（Canva 等） —— 模板多但定制性差，免费版功能受限
• 方案四：AI 生成工具 —— 快但风格不可控，难以精确编辑

用过这些工具的朋友可能都有同感：免费、可控、可集成，几乎是信息图工具的"不可能三角"。

AntV Infographic 的出现，正是为了打破这个困局。它提供了：

• 免费开源：MIT 协议，商用无忧
• 高度可控：通过结构化语法精确控制内容和样式
• 易于集成：标准化 API，可嵌入各类业务系统
• AI 友好：天然适配大模型的生成与编辑

1.3 核心特性一览

在深入技术细节之前，先给大家一个整体印象。AntV Infographic 的核心特性包括：

二、技术架构深度剖析

好，铺垫完毕，接下来进入 无忆研习社 的拿手环节——技术架构拆解。

AntV Infographic 的整体架构可以分为三层：JSX Engine（引擎层）、Runtime（运行时层） 和 API（接口层）。

这三层各司其职，共同支撑起一个面向 AI 时代的信息图生成系统。

2.1 JSX Engine：为什么选择 JSX 而非 JSON？

这是 AntV 团队做出的一个相当有意思的技术决策。

传统方案的局限

从 Figma 的插件生态到许多经典的可视化库，采用轻量的 JSON 来序列化和存储画布内容几乎是标准做法。JSON 结构清晰、对机器友好，是数据交换的理想载体。

但问题在于，当创作主体从人类转向 AI 时，JSON 的局限性便逐渐暴露。

JSON 本质上是面向程序的数据载体，存在以下问题：

• 缺乏语义表达力：难以描述复杂的布局逻辑
• 无逻辑控制能力：条件分支、循环等需要额外处理
• 动态组合能力差：组件嵌套关系表达繁琐
• Schema 约束复杂：为确保数据有效性，往往需额外引入校验机制

JSX 的优势

大模型作为"类人创作者"，更擅长理解和生成语义丰富的结构。因此，在 AI 驱动的画布生成场景中，使用代码来描述内容比使用纯数据结构更自然、更高效。

基于这一洞察，AntV 团队选择 JSX 作为信息图的描述语言，并围绕它构建了一套独立于 React 的 JSX 渲染引擎。

这套引擎的特点：

• 开发者可以直接使用 JSX 描述信息图
• 渲染器将 JSX 转化为最终的 SVG 输出
• 内置几何图形、文本、分组等原语组件
• 支持由基础组件组合出复杂结构
• 提供比 React JSX 更灵活可控的布局机制

举个例子，一个简单的信息图组件可能长这样：

<Structure
data={data}
Title={TitleComponent}
Item={ItemComponent}
Items={itemsArray}
options={parsedOptions}
{...structureProps}
/>

这种声明式的写法，既便于人类理解，也便于 AI 生成。

2.2 信息图语法：AI 友好的核心设计

为什么需要专门的语法？

大模型以 token 为单位逐字生成，天然支持流式输出。而类 Markdown 语法恰好是逐行或逐块可解析的。

它不依赖成对标签，而是通过缩进、连字符、空格等简单符号表达结构，用最少的 token 传递最丰富的语义。

对 LLM 而言，这意味着：

• 更低的出错率：简单语法减少生成错误
• 更快的生成速度：token 数量更少
• 更低的推理成本：计算资源消耗更小

对人类用户同样友好：打开一份信息图语法文件，即便没有编程基础的人也能立刻理解、直接修改；AI 则可基于修改后的文本继续生成。

这种双向可读、可编辑的特性，正是"人机协同"的理想形态。

语法结构详解

Infographic 的信息图语法以 infographic [template-name] 为入口，通过缩进块（block）组织四大核心部分：

① 模板（template）

在入口处直接通过 infographic <template-name> 指定要使用的模板。

infographic timeline-basic

② 设计块（design）

用于选择结构、卡片与标题等模块的具体样式。

design:
structure: stairs
item: card-basic
title: heading-1

③ 数据块（data）

这是信息结构的核心，通常包含标题、描述与列表项，支持嵌套层级。

data:
title: "项目发展历程"
description: "从创立到上市的关键节点"
items:
- title: "2020年"
description: "项目启动"
- title: "2021年"
description: "获得A轮融资"
- title: "2022年"
description: "用户突破百万"

④ 主题块（theme）

用于切换主题与调整色板、字体与风格化能力。用户可以使用预设主题，也可以自定义。

theme:
palette: blue
font: "PingFang SC"
style: hand-drawn

渲染模式

这套语法通过 render(syntax) 方法直接渲染，支持两种典型模式：

常规渲染：传入完整语法，一次性生成信息图。

const infographic = new Infographic();
const svg = infographic.render(completeSyntax);

流式渲染：结合大模型使用，模型逐段输出后，将片段追加至缓冲区并调用 render(buffer) 重新渲染，让画面与输出同步更新。

let buffer = '';

// AI 流式输出时
onChunk((chunk) => {
buffer += chunk;
infographic.render(buffer);
});

这种设计让信息图可以随着 AI 的生成过程实时呈现，用户体验极佳。

2.3 Runtime 层：三大核心模块

Runtime 层是连接信息图语法与最终可视化结果的核心执行环境，由三个关键模块组成。

模块一：模板生成器

模板生成器是唯一直接解析和处理用户输入的模块。它的任务是将一段信息图语法转化为可被渲染的 JSX 组件。

为了降低 AI 的生成门槛，Infographic 设计了一套类似 Mermaid 的声明式语法，将信息图抽象为"信息结构 × 图形表意"。

AI 无需理解坐标、SVG 路径等底层细节，只需关注内容逻辑与视觉意图。

设计资产体系

模板生成器的核心任务，是将语法映射到设计资产。设计资产是 Infographic 的可复用单元，分为三类：

结构（Structure）

决定信息图的整体布局。它不绘制具体图形，而是接收已绑定数据的 Title 和 Item 等组件，决定它们的位置关系，同时可以置入装饰性元素。

比如，同样的数据可以呈现为"阶梯式布局"或"时间线布局"，这就是不同结构的效果。

数据项（Item）

是信息图中内容单元的可视化载体。它将 data.items 中的数据转换为信息图中的视觉元素。

同一条数据，可以呈现为"简约卡片"、"图标卡片"或"数字高亮卡片"等不同样式，这就是不同数据项的效果。

基础组件

基础组件是 Infographic 设计体系的"积木"，封装了字号、颜色等设计规范。

结构和数据项组件在开发时，不直接操作底层图形指令，而是组合基础组件。这确保了：

• 全图视觉一致性
• 渲染器和编辑器能准确识别不同元素
• 减少重复代码和逻辑

模板组装流程

模板生成器的组装过程可以简化为两个关键步骤：

步骤一：配置解析

解析器会把语法中的配置转换成高阶组件。这个高阶组件已经绑定了主题上下文，能根据当前的主题风格动态调整样式。

function parseDesignItem(config, options) {
const { type, ...userProps } = normalizeWithType(config);
const item = getItem(type);

return {
...item,
component: (props) => {
const { indexes } = props;
const { data, themeConfig } = options;

const themeColors = generateColors(
getPaletteColor(themeConfig?.palette, indexes, data?.items?.length)
);

return item.component({
themeColors,
...props,
...userProps,
});
},
};
}

步骤二：模板组装与渲染

compose 方法将解析后的组件通过 JSX 组织成完整的模板树，然后交给渲染引擎生成最终的 SVG 输出。

compose() {
const { design, data } = this.parsedOptions;
const { title, item, structure } = design;

const { component: Structure, props: structureProps } = structure;
const Title = title.component;
const Item = item.component;

const svg = renderSVG(
<Structure
data={data}
Title={Title}
Item={Item}
options={this.parsedOptions}
{...structureProps}
/>
);

return parseSVG(svg);
}

模块二：渲染器

渲染器接收由模板生成器组装好的 SVG 节点树，为其注入具体的视觉风格，最终输出风格统一的信息图。

渲染器的工作流程可以理解为深度遍历。它逐个检查 SVG 节点树中的每个子节点，并根据类型执行特定的渲染逻辑。

核心能力包括：

风格化层 stylize 是一个亮点，它让信息图可以呈现多种视觉风格，比如：

• 专业商务风格
• 手绘涂鸦风格
• 渐变现代风格
• 纹理复古风格

模块三：编辑器

AI 生成的信息图通常只是初稿。用户需要调整文本措辞、更换配色、移动元素位置，甚至增删数据项。

Infographic 提供了完整的编辑器，支持对信息图进行交互式修改。

关键设计理念：用户编辑的始终是原始的信息图语法，而不是渲染后的 SVG。每次修改后，系统会重新走一遍模板生成和渲染的流程，确保输出始终与声明式配置一致。

编辑器由 5 个核心模块组成：

其中 Managers 包含四个子模块：

• Command：负责执行命令，并提供撤销、重做能力
• State：管理状态，所有数据更新都需要通过状态模块进行变更
• Interaction：交互控制，选区管理、控制交互触发和冲突解决
• Plugin：加载和管理插件

这种架构确保了：人类用户能在所见即所得的编辑器中安全地调整细节，并将修改结果导出为与原始输入结构一致的配置，支持复用、存档或重新生成。

2.4 API 层：面向 AI 系统的标准化接口

API 是 AntV Infographic 对外暴露能力的唯一入口，由 Infographic 类统一提供。

它支持的基本操作包括：

• 创建实例
• 渲染信息图
• 导出图片
• 监听事件

特别值得一提的是 getTypes 方法。

与柱状图、折线图等传统统计图表不同，信息图不是单一类型的图表，而是由标题、数据项、插图、装饰元素、布局结构等组合而成，不同的模板对数据结构的要求可能完全不同。

为了让 AI 在生成信息图时能准确组织数据，Infographic 提供了 getTypes 方法，用于获取给定设计的信息图模板所需要的数据的 TypeScript 类型。

const types = Infographic.getTypes(design);
// 返回类似：
// {
// title: string;
// description?: string;
// items: Array<{
// title: string;
// description?: string;
// value?: number;
// }>;
// }

这为 AI 的数据抽取和结构化过程提供了明确的类型指引，大大提高了生成准确率。

三、实战操作指南

理论讲完了，接下来 无忆研习社 带大家进入实战环节。

3.1 快速开始：在线体验

最简单的体验方式是访问官网：https://infographic.antv.vision

进入 AI 生成入口（/ai），输入一段文字描述，就能获得一张可编辑的信息图。

比如输入：

请帮我做一张信息图，展示前端开发的学习路线：
1. HTML/CSS 基础
2. JavaScript 核心
3. 前端框架（React/Vue）
4. 工程化工具
5. 性能优化

系统会自动选择合适的模板，生成结构化的信息图。

3.2 项目集成：安装与基本使用

安装

npm install @AntV/Infographic
# 或
yarn add @AntV/Infographic

基本使用

import { Infographic } from '@AntV/Infographic';

// 创建实例
const infographic = new Infographic({
container: document.getElementById('container'),
width: 800,
height: 600,
});

// 定义信息图语法
const syntax = `
infographic timeline-basic
design:
structure: vertical-timeline
item: card-icon
theme:
palette: blue
data:
title: "产品迭代历程"
items:
- title: "V1.0"
description: "基础功能上线"
icon: "rocket"
- title: "V2.0"
description: "性能大幅优化"
icon: "speed"
- title: "V3.0"
description: "AI 能力集成"
icon: "ai"
`;

// 渲染
infographic.render(syntax);

导出图片

// 导出为 PNG
const pngData = await infographic.toImage('png');

// 导出为 SVG
const svgData = infographic.toSVG();

3.3 与 AI 大模型集成

这是 Infographic 最强大的应用场景之一。

流式渲染示例

import { Infographic } from '@AntV/Infographic';
import { streamChat } from 'your-ai-sdk';

const infographic = new Infographic({
container: document.getElementById('container'),
});

let buffer = '';

// 调用 AI 接口，流式输出
const stream = await streamChat({
prompt: '请生成一张关于敏捷开发流程的信息图，使用 Infographic 语法',
});

for await (const chunk of stream) {
buffer += chunk;

// 每收到新内容就重新渲染
// 语法解析器会智能处理不完整的输入
infographic.render(buffer);
}

使用 getTypes 提高生成准确率

// 先获取目标模板的类型定义
const design = {
structure: 'pyramid',
item: 'card-basic',
};

const types = Infographic.getTypes(design);

// 将类型信息包含在 prompt 中
const prompt = `
请根据以下数据结构要求，生成信息图语法：
${JSON.stringify(types, null, 2)}

主题：马斯洛需求层次理论
`;

const response = await chat(prompt);
infographic.render(response);

3.4 自定义模板开发

Infographic 支持开发自定义的结构和数据项样式。

开发自定义结构

在 src/designs/structures/ 目录下创建新的结构组件：

// src/designs/structures/my-custom-structure.jsx
export const MyCustomStructure = ({
data,
Title,
Item,
options,
}) => {
return (
<g className="my-custom-structure">
<Title data={data} />
<g className="items-container">
{data.items.map((item, index) => (
<Item
key={index}
data={item}
indexes={{ item: index }}
/>
))}
</g>
</g>
);
};

开发自定义数据项

在 src/designs/items/ 目录下创建新的数据项组件：

// src/designs/items/my-custom-item.jsx
export const MyCustomItem = ({
data,
themeColors,
indexes,
}