最近有个段子广为流传：“4 年之前你绝对想不到，我们发现 AGI 的重要组成部分竟然是 Markdown 文档。”

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

就像vibe coding改变了编程范式一样，以Markdown为语法的信息图工具也会改变内容创作者的工作流。

作为技术媒体编辑，我经常需要把文字原理翻译成清晰的信息图。最早用 PPT 手动画，后来用Canva这类工具，也借助Nano Banana等工具AI生成。用这些工具的时候会发现，免费、可控和可集成，几乎是信息图工具的不可能三角。

这段时间密集使用了一个叫Infographic的信息图生成工具，只需要提出数据、配色、风格的要求，Infographic就能生成简明、准确、风格统一的信息图，并可以在语法编辑器内直接修改内容。

注：Infographic网站提供AI生成功能。

下图左边是用户的prompt、右边是AI自动生成的信息图语法；上图是实时生成的图片。

更关键的是，它内置了200 多种模板，覆盖时间线、对比分析、层级结构等多种场景。

用户可直接在模板库中挑选合适的样式，根据内容微调几行语法，页面就能重新渲染出新图。

可以看到，Infographic面向使用者采用了类Markdown的信息图语法，这套语法逻辑清晰、结构直观，即便没有编程基础，我也能快速理解上手。

注：用户可直接在Infographic网站选择合适模板，通过信息图语法或工具栏，进行样式和内容编辑。

顺手查了下它的 GitHub 页面，开源才一个多月，Star 数已经超过 2k。考虑到它的定位相当垂直，这种关注度说明它确实切中了一类现实需求。

回过头看，无论是 ECharts、D3，还是 Mermaid，它们在文本到图的转换、编辑性、风格控制上都存在局限。虽然这些工具可以手动桥接 AI 能力，但整体流程复杂、风格不可控，也难以嵌入业务系统。

AntV Infographic 补上了这一环。它是一个声明式、AI 友好、可编辑的信息图生成与渲染引擎，显著简化了从文本到图的转换流程。

Infographic 解决的不只是我个人的效率问题，还有正在快速浮现的行业需求。当 AI 成为内容生产的主力，可视化工具必须同时适应人和AI的需求。

当前，大量 AI Agent 应用聚焦于文字的处理与呈现，如 AI PPT、AI 流程图、AI 图表、DeepResearch 等。过去由设计师或运营人员手动构建的信息图，如今越来越多地由大模型从原始文本中自动抽取结构、选择模板、生成配置并输出可视化结果。

于是，一个关键问题浮现出来：什么样的信息图引擎，才是 AI 友好的，能同时被大模型理解生成、又被人类高效编辑？

要回答这个问题，得从最基础的“语法”开始。

AI友好的“信息图语法”

当AI成为内容生产主力，信息图的语言也得升级。它必须既符合大模型的理解和生成机制，又能保留足够的结构化语义供人类后续调整。

大模型以 token 为单位逐字生成，天然支持流式输出；而类 Markdown 语法恰好是逐行或逐块可解析的。它不依赖成对标签，而是通过缩进、连字符、空格等简单符号表达结构，用最少的 token 传递最丰富的语义。对 LLM 而言，这意味着更低的出错率、更快的生成速度和更低的推理成本。

Markdown对人类用户同样友好。打开一份Markdown 文件，没有编程基础的人也能立刻理解、直接修改；AI 则可基于修改后的文本继续生成。这种双向可读、可编辑的特性，正是“人机协同”的理想形态，也是像我这样的非程序员能够轻松上手 Infographic 的根本原因。

Infographic的“信息图语法”，正是一种类Markdown的语法，用于描述模板、设计、数据与主题。它适合 AI 流式输出，也适合人工编写，并通过 Infographic 的 render(syntax) 直接渲染。

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

模板（template ）：在入口处直接通过infographic 制定。

设计块（design）：用于选择结构、卡片与标题等模块。

数据块（data ）：是信息结构的核心，通常包含标题、描述与列表项，支持嵌套层级。

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

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

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

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

正是这种声明式、结构化、流式友好 的设计，让 Infographic 既能被 AI 高效生成，又能被人类直观编辑，成为为 AI 时代量身打造的信息图通用语言。

面向生成式AI优化的信息图架构

在生成式 AI 时代，信息图的描述语言需要同时满足两个目标：能被大模型准确理解与生成，又具备清晰的结构和语义，便于人类后续编辑。传统的 JSON DSL 或静态模板，往往在表达力、灵活性和可编辑性上捉襟见肘。

为此，AntV Infographic 专门面向生成式 AI 进行了架构优化，构建了由 JSX Engine、Runtime 和 API 三层组成的系统，全面适配生成式AI与人机协同编辑的需求，构成了一个真正“AI 友好”的信息图语言体系。

JSX Engine：用 JSX 作为 AI 友好的信息图描述语言

传统的可视化工具普遍采用 JSON DSL描述画布内容。

而 AntV Infographic团队做出了一个有趣的技术选择，放弃JSON方案，转而采用 JSX 作为信息图的底层描述语言。

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

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

JSON本质上是面向程序的数据载体，缺乏语义表达力、逻辑控制能力和动态组合能力。它难以描述复杂的布局逻辑、条件分支和组件嵌套关系。为了确保数据有效性，往往还需额外引入 Schema 约束，进一步增加了复杂度。

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

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

开发者可以直接使用 JSX 描述信息图，而渲染器会将其转化为最终的 SVG 输出。渲染引擎内置了几何图形、文本、分组等原语组件，并支持由这些基础组件组合出更复杂的结构。

与 React JSX 相比，JSX Engine提供了更灵活、可控的布局机制，能够对容器内部的图形元素实现精确排布。

JSX Engine不仅是技术的选择，更是对AI理解视觉结构的深度探索。它让信息图的生成过程更具表达力与可控性，为后续的编辑、风格化和系统集成奠定了坚实基础。

Runtime：为 AI 生成信息图设计的运行时系统

一个真正面向AI的信息图系统，不仅要有友好的底层语言，更需要一套高效的执行环境。

为此，Infographic 构建了由模板生成器、渲染器和编辑器组成的 Runtime 层，它作为连接信息图语法与最终可视化结果的核心执行环境，完整支撑起从 AI 生成到人机协同的整个工作流。

模板生成器

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

为了降低 AI 的生成门槛，Infographic 设计了一套类似 Mermaid 的声明式语法，将信息图抽象为“信息结构 × 图形表意”。AI 无需理解坐标、SVG 路径等底层细节，只需关注内容逻辑与视觉意图，极大降低了生成门槛。

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

结构：

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

结构决定了信息图的布局，是像上图这样阶梯排布，还是像下图这样按顺序排布。

数据项：

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

它决定了内容单元的具体样式，例如：

基础组件：

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

结构和数据项组件在开发时，不再直接操作底层图形指令，而是组基础组件。这不仅确保了全图视觉一致性，也让渲染器和编辑器能准确识别不同元素，并减少重复代码和逻辑。

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

配置解析器：解析器（比如 parseDesignItem）会把语法中的 design.item 转换成一个高阶组件。这个高阶组件已经绑定了主题上下文，意味着它能根据当前的主题风格动态调整样式和内容。

    function parseDesignItem(
    config: DesignOptions['item'],
    options: InfographicOptions,
    ): ParsedDesignsOptions['item'] {
    if (!config) throw new Error('Item is required in design or template');
    const { type, ...userProps } = normalizeWithType(config);
    const item = getItem(type);
    if (!item) throw new Error(`Item ${type} not found`);
    const { component, options: itemOptions } = item;
    return {
    ...item,
    component: (props) => {
    const { indexes } = props;
    const { data, themeConfig } = options;
    const background = themeConfig?.colorBg || '#fff';
    const {
    themeColors = generateColors(
    getPaletteColor(themeConfig?.palette, indexes, data?.items?.leng
    th) ||
    themeConfig?.colorPrimary ||
    '#FF356A',
    background,
    ),
    ...restProps
    } = props;
    return component({
    themeColors,
    ...restProps,
    ...userProps,
    });
    },
    options: itemOptions,
    };
    }

模板组装与渲染：接下来，compose 方法会将解析后的组件（如 Structure、Title、Item 等）通过 JSX 组织成一棵完整的模板树。最后，这棵树会被交给渲染引擎，生成最终的 SVG 输出。

/**
* Compose the SVG template
*/
compose(): SVGSVGElement {
const { design, data } = this.parsedOptions;
const { title, item, items, structure } = design;
const { component: Structure, props: structureProps } = structure;
const Title = title.component;
const Item = item.component;
const Items = items.map((it) => it.component);
const svg = renderSVG(
,
);
const template = parseSVG(svg);
if (!template) {
throw new Error('Failed to parse SVG template');
}
return template;
}

Infographic 还内置了超过200套信息图模板，可供渲染器在运行时按需调用。

渲染器

渲染器接收由模板生成器组装好的、带有布局和样式信息的 SVG 节点树，为其注入具体的视觉风格，最终输出下图这样风格统一的信息图。

渲染器的工作流程可以理解为深度遍历。它会逐个检查 SVG 节点树中的每一个子节点，并根据其类型执行特定的渲染逻辑。其核心能力可以归纳为以下几个部分：

renderer是渲染器主类

composites 负责对背景、按钮、图标、插图、形状、文本和SVG容器等不同元素类型的专门渲染。

fonts和palettes提供字体和色板的加载、注册与管理功能，确保视觉资产的可复用和一致。

风格化层 stylize它集成了多种视觉效果，如手绘、渐变、纹理等，丰富了信息图的表现力。

编辑器

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

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

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

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

编辑器  Editor：作为调用入口，接受配置项、信息图实例作为输入

管理器  Managers：是编辑能力的调度中枢，包含如下几个子模块

Command: 负责执行命令，并提供撤销、重做能力，编辑器的所有操作都需要通过命令执行

State: 管理状态，所有数据更新都需要通过状态模块进行变更

Interaction: 交互控制，选区管理、控制交互触发和冲突解决

Plugin: 加载和管理插件

命令  Commnads：实现的命令

插件 Plugins：内置插件实现

交互 Interactions：内置交互实现

无论用户是通过 AI 自动生成信息图，还是通过编辑器手动修改内容，整个过程的操作对象始终是同一套结构化的配置数据。这使得人类用户则能在所见即所得的编辑器中，安全地调整细节，并将修改结果导出为与原始输入结构一致的配置，从而支持复用、存档或重新生成。

API：面向AI系统设计的标准化接口

Infographic 的 API 设计从一开始就考虑到了 AI生成的场景，通过提供类型明确、结构清晰、易于集成的标准化接入方式，使大模型能够准确理解所需数据的格式与业务含义，从而生成符合系统预期的有效内容。

API 是 AntV Infographic 对外暴露能力的唯一入口， 由 Infographic 类统一提供，是系统对外暴露能力的唯一入口。它支持创建实例、渲染信息图、导出图片、监听事件等基本操作。

这里特别值得一提的是，AntV团队针对AI获取信息图数据的需求，引入了getTypes 方法。

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

为了让 AI 在生成信息图时能准确组织数据，Infographic 提供了 getTypes 方法，用于获取给定design设计的信息图模版所需要的数据的 TypeScript 类型，为 AI 的数据抽取和结构化过程提供明确的类型指引。

由 JSX Engine、Runtime 和 API 构成的三层架构，共同奠定了 Infographic 面向 AI 的坚实技术基础。JSX Engine 通过结构化的语义描述，为 LLM 提供了易于理解和生成的配置语言；Runtime 则通过模板化生成、实时渲染与可编辑的闭环流程，实现了 AI 输出结果的灵活调整与高效复用；API 则通过提供 getTypes 等方法，为 AI 在原本高度非结构化的信息图生成任务中，确立了明确的数据结构与语义指引。

这一完整的技术架构，让Infographic 成为了“AI 友好”的信息图引擎，在人与AI的交互中建立起顺畅的协作路径。

开箱即用的支持体系

但光有合理的架构还不够。要让开发者真正用起来，还得把门槛压到最低。

AntV团队为此还构建了一套从体验到集成的完整支持体系，让开发者与AI都能“开箱即用”，快速验证、轻松接入：

提供Skills集成，赋能生成和开发流程

Infographic 的 Skills 用于向 AI 清晰描述任务目标、输入输出格式和执行流程，从而引导其生成符合规范的内容。

面向普通用户：

infographic-syntax-creator：生成 AntV 信息图语法

infographic-creator：当用户请求“制作信息图”时调用，创建渲染信息图的 HTML 文件

面向开发者：

infographic-structure-creator：用于生成自定义的结构设计

infographic-item-creator：用于生成个性化的数据项样式

infographic-template-updater：在开发者新增模板后，自动同步更新模板库和开源页面

这些 Skills 已经适配 Claude和Codex 等主流 AI 编程工具。

官网提供 AI 生成入口，降低试用门槛

用户无需搭建任何后端服务，只需访问 https://infographic.antv.vision/ai，输入一段文字，就能获得一张可编辑的信息图。这对希望快速验证 AI 可视化工具的产品团队来说，是一个极低门槛的起点。

开源方案基于“LLM + 提示词”，轻量且通用

本次开源的信息图方案主要基于LLM + 提示词同时完成模板推荐、数据抽取和配置生成。开发者只需调整提示词，即可适配 Qwen、GLM、Claude 等不同大模型，兼顾效果、速度与维护成本。

与内部方案不同，开源方案不依赖专用分类器，避免了基于 Bert 训练的多分类或 Qwen 3 Reranker + 多模态组件所带来的高部署与使用成本，更适合开源用户快速接入和集成。

提示词模板直接开源，复用 AI 工程经验

AntV 团队不仅开源了渲染引擎，内置了超过200种模板，还将配套的 AI 提示词模板一并开放：

用于生成信息图结构的提示词，可在 src/designs/structures/prompt.md 中找到；

用于生成数据项组件的提示词，则位于 src/designs/items/prompt.md；

模板类型，可在https://infographic.antv.vision/gallery/ 找到。

这意味着开发者无需从零摸索 prompt 工程，可以直接复用经过验证的提示结构，大幅缩短从想法到上线的路径。

结语

通过AI友好的信息图语法和引擎，Infographic构建了简洁、标准化的信息图生成体系。

在 AI 快速生成内容的背景下，它有效降低了从自然语言到专业信息图的转换门槛。项目以开源方式提供核心引擎和基础模板，并鼓励社区通过贡献设计资产，共同完善生态。

如果你的工作需要快速、批量输出可视化内容，被风格不稳定的 AI 图折磨，或者需要在系统里嵌入可编辑的信息图能力，Infographic 值得一试。

相关链接：

官网体验（含AI生成入口）：https://infographic.antv.vision/

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