我发现了一个很好用的 AI 信息图项目 · 几句话生成 SVG 信息图
蚂蚁 AntV 的开源声明式信息图引擎，用文本语法描述结构，AI 负责理解，引擎负责渲染。
内容想清楚了，但做成一张好看的信息图很费时？这个开源项目把文字、数据、视觉结构连了起来。
开源项目 5700+ Star
写在前面
平时做汇报、写方案或者整理文章，经常会遇到一个问题：内容已经想清楚了，但怎么把它做成一张直观、好看的信息图，还是挺费时间。今天和大家分享一个开源项目：蚂蚁集团 AntV 团队的 Infographic。
01
PART
这个项目能做什么
Infographic 的官方定位是「 新一代声明式信息图可视化引擎 」。它的核心思路不是让 AI 从空白画布开始自由设计，而是提前准备好模板、结构、数据项、主题等设计资产。AI 根据内容选择合适的结构，再把数据填进去，渲染引擎负责生成最终画面。
▲ AntV Infographic 官方定位：新一代声明式信息图可视化引擎
这种方式的好处是，生成过程更容易控制，结果也更容易保持统一。它比较值得关注的能力主要有下面几项：
对 AI 生成比较友好
提供专门的信息图语法，配置简洁、容错性高。AI 可以根据自然语言生成这套语法，也可以边输出、边渲染，对接入 Agent 或流式生成场景比较实用。
内置了丰富的设计资产
约 200 个内置信息图模板、数据项组件和布局，覆盖列表、流程、对比、层级等常见信息关系。AI 不必每次从零设计，先判断内容属于时间线、流程、对比还是层级关系，再选模板。
支持主题和视觉定制
带有主题系统，支持手绘、渐变、图案、色板、字体等视觉配置。内置主题不满足需求时，还能进一步自定义结构、数据项、模板、主题、色板和资源加载方式。
默认使用 SVG 渲染
渲染结果以 SVG 为主，适合在网页中展示，也便于缩放和后续处理。这也是它与「让 AI 直接写一大段 SVG 代码」的明显区别。
项目地址： https://github.com/antvis/Infographic
目前 5700 多 star 了，官方展示的效果还很丰富。
▲ 官方展示的部分信息图效果（一）
▲ 丰富的内置模板与布局（二）
02
PART
怎么安装
如果使用 Claude Code，可以直接通过插件市场安装官方插件：
/plugin marketplace add https://github.com/antvis/Infographic.git
/plugin install antv-infographic-skills@antv-infographic
▲ Claude Code 插件市场安装示意（一）
▲ 插件安装示意（二）
官方插件目前提供五项 Skills：
- infographic-creator ：创建能够渲染信息图的 HTML 文件
- infographic-syntax-creator ：根据描述生成信息图语法
- infographic-structure-creator ：生成自定义结构设计
- infographic-item-creator ：生成自定义数据项设计
- infographic-template-updater ：更新模板库，主要面向项目开发者
一般来说，最常用的是 infographic-creator 。它可以根据我们的描述生成一份 HTML 文件，并在页面中完成信息图渲染。
TIP
其他 Agent 也能装
其他 Agent 也可以安装项目提供的 Skills。直接告诉你的 Agent 就行：
请阅读下面这个项目的官方文档，并帮我安装它提供的 Skills。
项目地址：
https://github.com/antvis/Infographic另外，如果要在自己的前端项目里通过代码调用渲染引擎，则需要安装 npm 包：
npm install @antv/infographic --save03
PART
它是怎么工作的
HOW IT WORKS
通过 Agent 调用 Infographic 时，大致会经历下面几个步骤：
- 步骤 1 ：我们把提示词、主题、原始资料、数据和视觉要求交给 Agent。
- 步骤 2 ：Agent 阅读内容，提炼标题、层级、步骤、对比关系和关键数字。
- 步骤 3 ：Agent 判断内容更适合时间线、流程、列表、对比还是其他结构。
- 步骤 4 ：Agent 选择内置模板或设计配置，并生成 Infographic 语法。
- 步骤 5 ：渲染引擎解析语法，将内容渲染为 SVG 信息图。
- 步骤 6 ：Agent 将渲染代码封装进 HTML，供我们在浏览器中查看。
- 步骤 7 ：如果有问题，让 Agent 进行检查和修正。
▲ Agent 调用 Infographic 的工作流示意
AI 并不是直接把自然语言变成一张图片 。更准确地说，它先把自然语言整理成结构化的信息图语法，再由 Infographic 完成解析、布局和 SVG 渲染。
如果原始资料比较长，也可以先让 Agent 阅读文档、提炼关键信息，再生成信息图。为了减少遗漏和误解，正式使用时更适合采用「 先提炼、再生成 」的方式。
04
PART
实际试几个案例
CASES
下面用几个工作和生活中常见的场景，看看它可以生成哪些类型的信息图。
CASE 一周工作计划 01 / 07
请使用 infographic创建一张中文信息图，主题为“高效工作一周计划”。
内容：
- 周一｜明确目标：制定周计划、确认三个核心目标
- 周二｜专注执行：处理最重要、最困难的任务
- 周三｜协作沟通：团队会议、跨部门同步、解决阻塞
- 周四｜深度产出：减少会议，集中完成核心成果
- 周五｜复盘总结：检查进度、整理成果、安排下周事项
补充原则：
- 每天预留 2 小时不受打扰的专注时间
- 每天下班前用 15 分钟整理任务
- 未完成事项不能全部自动顺延，要重新判断优先级
视觉要求：
- 使用横向时间线或五列卡片布局
- 周一到周五分别使用紫色、蓝色、青色、橙色和红色
- 为目标、执行、协作、产出、复盘匹配合适的图标
- 使用明亮、现代、有活力的风格
- 每天的颜色不同，但整体需要统一协调
- 重点数字“2 小时”和“15 分钟”要突出显示
- 不使用大段文字
- 输出为可直接打开的 HTML 文件
- 保存为 case1.html
▲ Case 1：一周工作计划信息图
CASE 项目从启动到上线 02 / 07
请使用 infographic-creator 创建一张中文信息图，主题为“产品项目从启动到上线”。
项目阶段：
1. 项目启动｜明确目标、范围和负责人｜第 1 周
2. 需求分析｜用户调研、需求评审、确定优先级｜第 2～3 周
3. 方案设计｜产品原型、视觉设计、技术方案｜第 4～5 周
4. 开发实现｜前端开发、后端开发、接口联调｜第 6～9 周
5. 测试验收｜功能测试、性能测试、业务验收｜第 10～11 周
6. 灰度上线｜小范围发布、监控数据、收集反馈｜第 12 周
7. 正式发布｜全量上线、发布公告、项目复盘｜第 13 周
关键里程碑：
- 第 3 周：需求冻结
- 第 5 周：设计确认
- 第 9 周：开发完成
- 第 11 周：验收通过
- 第 13 周：正式发布
视觉要求：
- 使用道路、路径、阶梯或里程碑式布局
- 每个阶段采用不同颜色，整体使用彩虹渐变的配色逻辑
- 已完成、进行中、待开始三种状态应有明显区别
- 假设当前处于“开发实现”阶段，并突出显示
- 里程碑使用旗帜、星标或圆点等视觉符号
- 页面应具有项目向前推进的方向感
- 输出 HTML 文件
- 保存为 case2.html
▲ Case 2：产品项目从启动到上线
CASE 会议效率优化 03 / 07
请使用 infographic-creator 创建一张中文信息图，主题为“让团队会议更高效”。
左上侧展示常见问题：
- 没有明确议题
- 参会人员过多
- 讨论经常跑题
- 只有讨论，没有结论
- 会后没有责任人
- 相同问题重复开会
右下侧展示对应改进方法：
- 会前发送议程和背景材料
- 只邀请必要参与者
- 主持人控制讨论范围和时间
- 每个议题必须形成明确结论
- 记录负责人和完成期限
- 会后跟踪行动项，不重复讨论
视觉要求：
- 使用“问题 vs 解决方案”的双栏对应布局
- 左侧使用珊瑚红、橙色和浅红色
- 右侧使用绿色、青色和蓝色
- 中间使用箭头建立每组问题与方法的联系
- 风格轻松、现代，避免过度严肃
- 输出 HTML 文件
- 保存为 case3.html
▲ Case 3：让团队会议更高效
CASE 个人月度收支 04 / 07
请使用 infographic创建一张中文信息图，主题为“个人月度收支概览”。
本月收入：
- 工资：12,000 元
- 兼职：2,000 元
- 其他收入：500 元
- 总收入：14,500 元
本月支出：
- 房租：3,500 元
- 餐饮：2,200 元
- 交通：800 元
- 购物：1,500 元
- 娱乐：900 元
- 学习：600 元
- 其他：500 元
- 总支出：10,000 元
结果：
- 本月结余：4,500 元
- 储蓄率：约 31%
视觉要求：
- 顶部使用三张指标卡展示总收入、总支出和本月结余
- 中部使用适当结构展示各项支出的占比和金额
- 收入使用绿色系，支出分类使用紫色、橙色、蓝色、粉色等多彩配色
- 房租作为最大支出应被突出显示
- 底部突出显示“储蓄率约 31%”
- 不要虚构预算目标，也不要给出投资建议
- 金额必须与输入数据一致
- 风格清新，适合个人记账场景
- 输出 HTML 文件
- 保存为 case4.html
▲ Case 4：个人月度收支概览
CASE 7 天居家整理挑战 05 / 07
请使用 infographic 创建一张中文信息图，主题为“7 天居家整理挑战”。
计划：
- 第 1 天｜玄关：清理鞋柜，处理长期不用的物品
- 第 2 天｜衣柜：按保留、捐赠、丢弃进行分类
- 第 3 天｜厨房：整理调料、餐具和过期食品
- 第 4 天｜客厅：清理桌面、抽屉和杂物
- 第 5 天｜书房：整理文件、书籍和电子设备
- 第 6 天｜卫生间：整理洗护用品和清洁工具
- 第 7 天｜数字空间：整理电脑桌面、下载目录和手机照片
整理规则：
1. 每天只整理一个区域
2. 每次控制在 30～45 分钟
3. 不确定是否保留的物品放进“待定箱”
4. 一个月内未使用待定箱物品，再决定是否处理
视觉要求：
- 使用七天打卡、阶梯或环形挑战布局
- 每一天使用不同的明亮颜色
- 为玄关、衣柜、厨房、客厅、书房、卫生间和数字空间搭配图标
- 使用温暖、轻松、略带手绘感的主题
- 突出“每天一个区域”和“30～45 分钟”
- 避免使用压迫感强的警示风格
- 输出 HTML 文件
- 保存为 case5.html
▲ Case 5：7 天居家整理挑战
CASE 新人快速认识团队 06 / 07
请使用 infographic 创建一张中文信息图，主题为“新人快速认识产品团队”。
团队角色：
- 产品经理：明确用户问题，制定产品方向
- 交互设计师：设计操作流程和信息结构
- 视觉设计师：负责界面风格和视觉规范
- 前端工程师：实现用户看到和操作的界面
- 后端工程师：负责业务逻辑、数据与接口
- 测试工程师：检查功能质量和异常场景
- 数据分析师：分析用户行为和业务结果
- 运营人员：连接产品、内容和用户反馈
协作流程：
需求发现 → 方案设计 → 开发实现 → 测试验证 → 发布运营 → 数据复盘
团队原则：
- 对问题负责，而不只对任务负责
- 重要信息及时同步
- 用事实和数据讨论
- 出现风险尽早提出
视觉要求：
- 上半部分使用多彩角色卡片或蜂巢结构展示八种角色
- 下半部分使用流程箭头展示协作过程
- 每种角色使用不同颜色和图标
- 颜色丰富但不能影响文字可读性
- 团队原则使用便签或标签式样
- 风格友好、有协作感，适合新人培训
- 输出 HTML 文件
- 保存为 case6.html
▲ Case 6：新人快速认识产品团队
CASE 四象限任务管理 07 / 07
请使用 infographic 创建一张中文信息图，主题为“用重要—紧急四象限管理任务”。
四个象限：
第一象限｜重要且紧急｜立即处理
- 线上故障
- 今日截止的客户方案
- 紧急风险处理
第二象限｜重要但不紧急｜计划安排
- 核心能力学习
- 下季度规划
- 健康管理
- 重要关系维护
第三象限｜不重要但紧急｜减少或委派
- 非必要的临时会议
- 可由他人处理的请求
- 频繁即时消息
第四象限｜不重要且不紧急｜限制或删除
- 无目的刷短视频
- 重复查看无关信息
- 没有价值的琐事
视觉要求：
- 必须使用标准四象限布局，不能转换成普通列表
- 横轴表示“紧急程度”，纵轴表示“重要程度”
- 第一象限使用红橙色，第二象限使用绿色，第三象限使用黄色，第四象限使用灰紫色
- 每个象限显示行动策略和任务示例
- 第二象限应在视觉上强调，因为它适合提前投入时间
- 信息清楚、色彩鲜明
- 输出 HTML 文件
- 保存为 case7.html
▲ Case 7：重要—紧急四象限任务管理
///
END
写在最后
WRAP-UP
体验下来，Infographic 比较适合需要频繁做内容视觉化的人。比如项目计划、团队介绍、工作流程、会议规范、个人收支、任务管理等内容，都可以先整理成信息图，再放进网页、PPT、Word 或公众号文章中使用。
它的价值是把文字、数据和视觉结构连接了起来。我们可以先用自然语言描述需求，让 Agent 负责理解和组织，再交给渲染引擎完成信息图。
当然，实际效果仍取决于原始内容是否清楚、结构是否合适，以及提示词有没有说明重点、受众和视觉要求。对于正式对外发布的内容，生成后最好再检查一遍数据、文字、布局和来源。如果平时经常需要做汇报、写方案或整理知识内容，这个项目值得试一试。
祝大家周末愉快。
我是 AI李子，热衷于分享 AI 干货。
如果你觉得今天这篇有收获，欢迎点赞、在看、收藏三连，我们下篇见
赞
在看
收藏
