AntV Infographic | 用声明式语法生成可编辑 SVG 信息图

AntV Infographic 是 AntV 开源的声明式信息图生成与渲染框架，采用 MIT 许可。它用文本语法描述模板和数据，再默认渲染成 SVG，并提供编辑能力。适合把文章中的流程、对比或层级关系做成可重复修改的信息图，也可以作为内容工具中的渲染组件。

选图之前，先确定信息之间的关系

信息图的模板选择影响读者怎样理解内容。“收集 → 分类 → 复核”有先后顺序，适合流程；几个并列方案各有优缺点，更适合对比。若只是为了好看给并列信息加上箭头，就容易暗示原文没有的时间顺序或因果。

步骤与进程：先确认顺序、起点和终点，再选相应流程结构。
方案对比：各方案使用同一组比较维度，避免一边写功能、一边写价格。
时间线：保留日期和事件对应关系，不把同时发生的事项随意排成先后。
层级与分类：说明父子关系；仅仅属于同一主题，未必存在上下级。

框架提供多种模板、数据项与主题。结构决定内容怎么组织，主题再决定颜色、纹理、渐变或手绘风格；先确认关系正确，再调整样式，图形才有解释作用。

AntV Infographic 信息图模板预览 — AntV Infographic 官方 README 的模板预览，展示顺序、对比、四象限、列表、时间线等多种信息图布局；来源：https://github.com/antvis/Infographic/blob/main/README.md

用三步资料整理流程，走通最小示例

在已有前端项目中安装并准备容器

npm install @antv/infographic

安装 npm 包以后，在页面上放一个有尺寸的容器。下面示例使用 360px 高度，后续实例的 100% 高度才有明确参照：

<div id="container" style="width:100%;height:360px"></div>

把模板与数据交给 render

在前端 JavaScript 或 TypeScript 模块中导入框架，并在容器存在后创建实例。下面沿用 README 的横向箭头模板，将内容换成有先后关系的三步资料整理流程：

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 收集资料
      desc 保留来源与原始记录
    - label 分类整理
      desc 按主题归入对应目录
    - label 核对内容
      desc 检查事实与遗漏
`);

这里 infographic 后面是模板名，data 下描述数据，lists 中每个条目包含标签与说明。文本按缩进表达结构；代码中的反引号是 JavaScript 模板字符串边界，不能额外加反斜杠再当作模块代码运行。

这个例子展示的是浏览器页面集成方式。裸 HTML 页面不能直接按 npm 包名解析 import，需要由已有构建工具处理，或按官方文档选择相应引入方式。配置和语法说明随版本核对，不把复制一段代码等同于完成整个项目接入。

可编辑 SVG，方便修改，但仍要看实际内容

默认 SVG 输出适合需要清晰显示和后续修改的内容，editable: true 打开内置编辑能力。文字长短、容器大小、字体与所选模板都会影响最终呈现；把长段落直接塞进数据项，未必能得到易读布局。

可以先缩短标签，把必要补充留在说明中，再检查是否截断、遮挡或造成关系歧义。重要数字、单位、条件和归因不能只为腾出空间而删除。信息图是原文的表达形式，图中内容也需要与正文保持一致。

AI 流式生成时，要累计完整语法

README 提供了边接收 AI 输出、边重新渲染的方式：把每个片段追加到缓冲区，再将当前累计文本交给渲染器。下面的 chunks 代表应用已有的数据流，框架不会因此自动连接模型服务：

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

语法支持容错和逐步显示；渲染成功以后，仍要检查输出是否完整、内容是否正确。生成结束后仍要核对完整文本、关系、标签和数字；并列事项被 AI 写成流程，渲染器也无法替作者判断语义。

按需要接入 Skill 或扩展组件

仓库提供面向 Agent 的配套 Skill，各自承担不同工作：生成可渲染 HTML、从描述生成语法、设计自定义结构、设计数据项，以及供开发者维护模板库。只需要在网站上展示现成语法时，使用渲染库即可；要让 Agent 协助生成或修改内容，再选择对应能力。

已有模板不合适时，先判断问题来自结构、数据项还是主题。关系布局需要改结构，单项呈现需要改数据项，颜色与背景效果则属于主题；确定问题所在后，就可以修改对应组件。

MIT 许可覆盖项目代码，另外引入的图标、字体、图片和业务资料要分别看来源与授权。将它接入文章、演示或内容系统时，保留语法文本与所用版本，后续改词、换模板和重现结果会更方便。

官方文档：https://infographic.antv.vision/learn
模板示例库：https://infographic.antv.vision/gallery
项目仓库：https://github.com/antvis/Infographic

1.本站所发布资源部分收集于网络，仅限用于学习和研究测试使用。2.本站资源售价仅为赞助网站，赞助收费仅用于网站维护运营更新，感谢您的支持。3.本站仅保证资源的正常下载和测试使用，售后不包含相关技术咨询服务，请知悉谅解。4.本站所发布资源为非实物商品，不接受退款，请考虑好再进行支付赞助获取下载。
赞助获取下载注意：
1.支付赞助成功后请勿关闭窗口或其他操作，等待系统自动确认，按钮变为获取下载按钮。2.游客操作请使用 Chrome、Edge 或 FireFox 浏览器，以免支付刷新失败(浏览器缓存7天有效)。3.如支付赞助成功后刷新无法显示下载按钮、链接失效等问题请到 【公告留言】 处理或参考下载说明文档。

THE END