简体中文 | English
Infographic, bring words to life!
🦋 新一代信息图可视化引擎，让文字信息栩栩如生！
AntV Infographic 是 AntV 推出的新一代声明式信息图可视化引擎，通过精心设计的信息图语法，能够快速、灵活地渲染出高质量的信息图，让信息表达更高效，让数据叙事更简单。
✨ 特性
- 🤖 AI 友好：配置和语法更适合 AI 生成，提供简洁有效的 Prompt，支持 AI 流式输出和渲染
- 📦 开箱即用：内置 ~200 信息图模板、数据项组件与布局，快速构建专业信息图
- 🎨 主题系统：支持手绘、渐变、图案、多套预设主题，允许深度自定义
- 🧑🏻💻 内置编辑器：内置信息图的编辑器，让 AI 生成之后可以二次编辑
- 📐 高质量 SVG 输出：默认基于 SVG 渲染，保证视觉品质与可编辑性
🚀 安装
npm install @antv/infographic
📝 快速开始
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
`);
渲染结果如下：
流式渲染
使用具有高容错性的信息图语法能够实时接收 AI 流式输出并逐步渲染信息图。
let buffer = '';
for (const chunk of chunks) {
buffer += chunk;
infographic.render(buffer);
}
🔧 Skills 集成
AntV Infographic 提供了多项能力，便于与 AI 大模型集成：
- infographic-creator：创建一个渲染信息图的 HTML 文件
- infographic-syntax-creator：根据描述生成信息图语法
- infographic-structure-creator：生成自定义的结构设计
- infographic-item-creator：生成自定义的数据项设计
- infographic-template-updater：（开发者使用）用于更新信息图模板库
Claude Code
已提供 Claude marketplace，可通过 marketplace 安装，也可继续手动集成。
/plugin marketplace add https://github.com/antvis/Infographic.git
/plugin install antv-infographic-skills@antv-infographic
手动集成：
set -e
VERSION=0.2.4 # 替换为最新版本号，例如 0.2.14
BASE_URL=https://github.com/antvis/Infographic/releases/download
mkdir -p .claude/skills
curl -L --fail -o skills.zip "$BASE_URL/$VERSION/skills.zip"
unzip -q -o skills.zip -d .claude/skills
rm -f skills.zip
Codex
进入 codex
# 将 <SKILL> 替换为需要安装的 skill 名称，例如 infographic-creator
# https://github.com/antvis/Infographic/tree/main/skills/<SKILL>
$skill-installer install https://github.com/antvis/Infographic/tree/main/skills/infographic-creator
🌐 生态周边
社区基于 AntV Infographic 构建的项目和产品：
- 💼 商业产品
- Alma — 集成信息图的桌面 AI 多模型管理应用
- Markdown Viewer — 支持信息图的 Markdown 查看器，支持导出 Word，提供 Chrome/VS Code/Firefox 扩展
- InfographicAI — 基于信息图生成 PPT 的在线工具
- LangChat Slides — 基于 @antv/infographic 的新一代 AI 幻灯片生成器
- Nowledge Mem — 支持信息图演示创作的 AI 记忆库
- 微信 Markdown 编辑器 — 支持信息图的 Markdown 转微信图文编辑器
- Welight — 支持信息图的微信公众号创作平台
- Zojo — 使用简单语法生成专业信息图
- 📦 技术库
- astro-koharu — 支持信息图的 Astro 动漫风格博客主题
- docsify-infographic — 在 Docsify 中渲染信息图的插件
- feffery-infographic — 基于 Plotly Dash 在 Python 中创建信息图
- infographic-cli — 命令行生成 SVG 信息图的 CLI 工具
- infographic-for-react — @antv/infographic 的 React 组件封装
- markdown-it-infographic — @antv/infographic 的 markdown-it 插件
- markstream-vue — 支持信息图的 Vue 3 流式 Markdown 渲染库
- obsidian-infographic — @antv/infographic 的 Obsidian 插件
- slidev-addon-infographic — 适用于 Slidev 的 @antv/infographic 组件
- VSCode 插件 — 在 VSCode Markdown 文件中预览信息图
💡 有使用 AntV Infographic 的项目？欢迎在 Issue #99 中分享！
💬 社区与交流
- 在 GitHub 提交你的问题或建议
- 参与 GitHub Discussions 与社区交流
- 欢迎参与贡献，一起完善 AntV Infographic！
如有任何建议，欢迎在 GitHub 上与我们交流！欢迎 Star ⭐ 支持我们。
📄 许可证
本项目基于 MIT 许可开源，详见 LICENSE。