简体中文 | 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，因此需要手动集成。

set -e

VERSION=0.2.4 # 替换为最新版本号，例如 0.2.4
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

💬 社区与交流

• 在 GitHub 提交你的问题或建议
• 参与 GitHub Discussions 与社区交流
• 欢迎参与贡献，一起完善 AntV Infographic！

如有任何建议，欢迎在 GitHub 上与我们交流！欢迎 Star ⭐ 支持我们。

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

📄 许可证

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