简体中文 | 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 多模型管理应用
  • Chrome 插件 — 支持信息图的 Markdown 查看器，支持导出 Word
  • 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 ⭐ 支持我们。

• AntV 官网
• GitHub 仓库
• 问题反馈

📄 许可证

本项目基于 MIT 许可开源，详见 LICENSE。