简体中文 | English

AntV Infographic 是 AntV 的新一代 声明式信息图可视化引擎。它采用精心设计的信息图语法，能够快速、灵活地渲染高质量的信息图，使信息展示更加高效，数据叙事更加简单。

✨ 特性

• 🤖 AI友好：配置和语法专为 AI 生成优化，提供简洁的提示词，并支持 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);
}

🔧 技能集成

AntV Infographic 提供了与 AI 代理集成的技能：

• infographic-creator：创建可渲染信息图的 HTML 文件
• infographic-syntax-creator：根据描述生成信息图语法
• infographic-structure-creator：生成自定义结构设计
• infographic-item-creator：生成自定义项目设计
• infographic-template-updater：（面向开发者）更新模板库

Claude Code

Claude 市场现已开放。您可以通过市场安装，或继续使用手动安装。

/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> 替换为技能名称，例如 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 — 基于 Infographic 的桌面 AI 提供商编排应用
  • Chrome 扩展 — 支持 Infographic 的 Markdown 查看器，可导出为 Word 文档
  • InfographicAI — 基于 Infographic 生成 PPT 幻灯片
  • LangChat Slides — 使用 @antv/infographic 的下一代 AI 幻灯片生成器
  • Nowledge Mem — 带有演示文稿创建功能的 AI 记忆库，支持 Infographic
  • 微信 Markdown 编辑器 — 基于 Infographic 的 Markdown 转微信文章编辑器
  • Welight — 支持 Infographic 的微信文章创作平台
  • Zojo — 使用简单语法生成专业信息图表
• 📦 库
  • astro-koharu — 支持 Infographic 的动漫博客主题（Astro）
  • docsify-infographic — 在 Docsify 中渲染 Infographic 图表的插件
  • feffery-infographic — 使用 Plotly Dash 在 Python 中创建信息图表
  • infographic-cli — 用于生成 SVG 信息图表的命令行工具
  • infographic-for-react — @antv/infographic 的 React 组件封装
  • markdown-it-infographic — 用于 @antv/infographic 的 markdown-it 插件
  • markstream-vue — 基于 Infographic 的 Vue 3 流式 Markdown 渲染
  • obsidian-infographic — 适用于 Obsidian 的 @antv/infographic 插件
  • slidev-addon-infographic — Slidev 的 @antv/infographic 组件
  • VSCode 扩展 — 在 VSCode 的 Markdown 文件中预览 Infographic

💡 您是否有使用 AntV Infographic 的项目？欢迎在 Issue #99 中分享！

💬 社区与交流

• 请在 GitHub 上提交您的问题或建议
• 加入 GitHub Discussions，与社区成员交流
• 欢迎贡献！让我们一起改进 AntV Infographic！

如果您有任何建议，欢迎随时通过 GitHub 与我们沟通！请为我们点亮星标 ⭐，以示支持。

• AntV 官网
• GitHub 仓库
• 问题追踪

📄 许可证

本项目采用 MIT 开源许可证。详情请参阅 LICENSE 文件。

AntV Infographic 快速上手指南

AntV Infographic 是蚂蚁集团推出的下一代声明式信息图可视化引擎。它通过精心设计的语法，能够快速、灵活地渲染高质量的信息图，让数据叙事更简单。该工具特别针对 AI 生成进行了优化，支持流式输出渲染。

环境准备

在开始之前，请确保您的开发环境满足以下要求：

• 操作系统：Windows, macOS, 或 Linux
• Node.js：建议安装 LTS 版本 (v14.0.0 及以上)
• 包管理器：npm, yarn, 或 pnpm
• 前置依赖：无需特殊系统依赖，只需标准的 Web 开发环境（浏览器用于预览）

💡 国内加速建议：如果您在中国大陆地区，建议使用淘宝镜像源以加快安装速度：

npm config set registry https://registry.npmmirror.com

安装步骤

通过 npm 安装核心库：

npm install @antv/infographic

或者使用 yarn/pnpm：

yarn add @antv/infographic
# 或
pnpm add @antv/infographic

基本使用

以下是创建一个简单信息图的最简代码示例。该示例将渲染一个包含三个步骤的水平箭头流程图。

1. 在 HTML 中准备一个容器节点：

   <div id="container" style="width: 600px; height: 400px;"></div>
   

2. 在 JavaScript/TypeScript 中初始化并渲染：

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 流式渲染

AntV Infographic 具备高容错性的语法解析能力，非常适合配合 AI 大模型进行流式输出（Streaming）。您可以随着 AI 生成的内容块逐步渲染图表：

let buffer = '';
// 假设 chunks 是 AI 返回的流式数据块
for (const chunk of chunks) {
  buffer += chunk;
  // 实时增量渲染
  infographic.render(buffer);
}

渲染结果将默认输出为高质量的 SVG 格式，确保视觉保真度且易于二次编辑。