🦋 AntV Infographic：把文字变成信息图的声明式引擎

项目地址：https://github.com/antvis/infographic  协议：MIT  Stars：6,740  更新：2026-08-21

一、产品深度介绍

AntV Infographic 是 AntV 可视化家族的新成员，官方在仓库描述里把它称为「🦋 An Infographic Generation and Rendering Framework, bring words to life with AI!」——一个信息图生成与渲染框架，让文字随 AI 活起来。更准确地说，它是 AntV 的「下一代声明式信息图可视化引擎」：借助一套精心设计的 infographic 语法，你可以快速、灵活地渲染高质量信息图，让信息呈现更高效，让数据叙事更简单。

它要解决的痛点介于纯文本与完整图表之间。日常里大量内容其实是「轻量可视化」——产品功能的步骤清单、方案对比、流程时间线、数据要点卡片——它们不值得动用 G2、ECharts 这类重型图表库，但纯文字又显得干瘪。Infographic 的目标，就是用一套轻量语法描述版式与数据，再由引擎渲染成可编辑的 SVG。它于 2025 年 9 月开源，npm 包名为 @antv/infographic，采用 MIT 协议，当前以 TypeScript 为主语言实现。作为 AntV 家族的新成员，它延续了团队在可视化引擎上的工程积累，却把重心从「画数据」转向「讲信息」：你描述的是信息的结构与顺序，引擎负责把它排得好看、排得对。

小黑配图：小黑化身数据可视化指挥官，手持声明式语法魔杖，身旁环绕着抽象的图表、流程与卡片图标，正指挥 AI 把一段段文字实时渲染成精美信息图。

二、核心功能

README 把 Infographic 的能力拆成五块，几乎每一块都围绕「让 AI 出图、让人改图」展开。

• AI 友好：配置与语法为 AI 生成而调优，提供简洁提示词，并支持 AI 流式输出与渲染，智能体边生成边出图。
• 开箱即用：约 200 个内置信息图模板、数据项组件与版式，几分钟即可搭出专业级信息图。
• 主题系统：内置手绘、渐变、图案等多种预设主题，并支持深度自定义，统一视觉风格。
• 内置编辑器：随附信息图编辑器，AI 生成的结果可以继续手动编辑、微调与再发布。
• 高质量 SVG 输出：默认以 SVG 渲染，保证视觉保真度，且矢量图易于二次编辑与嵌入。

三、安装与使用

通过 npm 即可安装，随后用几行 TypeScript 就能把一段 infographic 语法渲染到容器里。

npm install @antv/infographic

最简渲染示例：声明一个实例并调用 render，传入声明式语法即可。

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

语法本身很直白：先写模板名（如 list-row-simple-horizontal-arrow），再用缩进描述 data 下的列表项与描述。由于语法高度容错，它还能配合 LLM 的流式输出，边接收边渲染，体验接近「打字机式出图」。

四、官方地址与获取方式

• GitHub 仓库：https://github.com/antvis/infographic
• 官方网站：https://infographic.antv.vision
• 文档与教程：https://infographic.antv.vision/learn（含入门与语法参考）
• 图库 Gallery：https://infographic.antv.vision/gallery
• AI Agent 入口：https://infographic.antv.vision/ai
• Skills 目录：仓库 skills/ 下提供可直接接入智能体的技能集

五、与同类方案对比

Infographic 并不想取代图表库，而是补上「轻量信息图」这块空白：相比 G2/ECharts 偏统计图表，它更擅长步骤、对比、清单这类叙事型版面；相比 Mermaid 偏关系流程图，它自带模板与主题，出图更「成品化」，且原生为 AI 生成与流式渲染设计。换句话说，当你要把一份产品说明、一份方案对比或一页流程卡发给同事时，Infographic 比「再写一段文字」高效，又比「再画一张图」省事——它正好落在两者之间的甜区。对于已经用 AntV 其它产品的团队，它也能和既有可视化体系协同，承担其中的「信息图」环节。

六、核心机制深度解析

Infographic 的核心可以概括为一句话：用声明式语法描述版式与数据，引擎负责解析、容错与渲染。几条关键设计如下。

声明式 infographic 语法：用模板名加缩进的数据结构描述版面，比手写 SVG 简单、比配置对象更贴近「自然语言」。官方强调其语法「高度容错」，这对 AI 场景至关重要——模型吐出的中间片段即使不完整，也能被解析并渐进渲染，不会因一处缺字段就整图崩溃。流式渲染：把模型返回的块不断追加到缓冲区并重复 render，即可实时看到信息图逐步成形，代码形如 buffer += chunk; infographic.render(buffer)，非常契合 LLM 逐 token 返回的特性。主题与 SVG 管线：渲染默认产出 SVG，套用主题系统后既能保真又便于二次编辑；遇到不满意处，还能丢进内置编辑器手动微调，形成「AI 出初稿、人精修终稿」的闭环。Skills 接入：仓库提供 infographic-creator、infographic-syntax-creator 等技能，让 Claude Code、Codex 等智能体直接调用，把出图能力装进工作流。

七、实用技巧

• 从内置模板起步：先挑一个接近的约 200 个模板，只改 data 部分，最快看到效果。
• 接 LLM 做流式出图：把模型输出边收边渲染，适合做「实时生成信息图」的演示与产品。
• 用主题统一风格：手绘风适合科普、渐变风适合汇报，主题系统一次设定全局生效。
• 编辑器收尾：AI 生成初稿后，用内置编辑器精修文案与版式再导出。
• Skills 接智能体：在 Claude Code / Codex 里安装 infographic-creator，让 Agent 自动产出可渲染的 HTML。
• 借力生态：社区已有 markdown-it、Obsidian、Vue、React、VSCode 等插件，可嵌入你现有工作流。

八、最新更新动态

从框架到生态：项目于 2025 年 9 月创建，随后以 @antv/infographic 名义发布 npm 包，并持续迭代 Skills 与模板库（版本号已演进到 0.2.x 区间）。最近一次代码推送在 2026 年 8 月。

智能体集成落地：README 明确提供 infographic-creator、infographic-syntax-creator、infographic-structure-creator、infographic-item-creator、infographic-template-updater 五类 Skills，并给出 Claude Code 与 Codex 的安装方式，Claude 市场也已可一键安装。

生态快速扩张：围绕 Infographic 已长出一批产品与库——如 Alma、Markdown Viewer、InfographicAI、LangChat Slides、微信 Markdown 编辑器、Zojo，以及 astro-koharu、docsify-infographic、obsidian-infographic、slidev-addon-infographic、VSCode 扩展等，覆盖桌面、博客、笔记与幻灯片场景。

九、常见问题 FAQ

十、总结

AntV Infographic 把「信息图」这件常被低估的小事，做成了声明式、AI 原生、可流式渲染的引擎。它不追求取代重型图表库，而是补上步骤、对比、清单、时间线这类轻量叙事版面的空白：约 200 个模板让你起步即专业，主题系统统一视觉，内置编辑器兜底精修，默认 SVG 保证可编辑。更关键的是它对 AI 友好——语法为生成而调优、支持流式出图，并随附可直接接入 Claude Code、Codex 的 Skills，使它天然适合作为智能体「出图底座」。对于想把文字快速变成精美信息图、又希望结果可改可嵌入的团队，Infographic 值得放进工具箱认真试一试。

资料来源：AntV Infographic 的 GitHub 仓库（https://github.com/antvis/infographic）与 README 公开信息。