# @antv/infographic 中文文档

规范地址：https://npmcn.com/package/%40antv/infographic/

版本：0\.2\.20
npm 元数据更新时间：2026-09-21T08:46:04.782Z
中文译文更新时间：2026-11-06T07:20:12.026Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40antv/infographic
原文对照：https://npmcn.com/package/%40antv/infographic/?lang=original
项目主页：https://github.com/antvis/Infographic#readme
源码仓库：https://github.com/antvis/Infographic

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：8.2 MB，1732 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：13 个
- 首次发布：2025-11-12T06:52:25.760Z
- 最新版本发布：2026-08-19T11:13:20.116Z
- 近 30 天下载量：131873（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：36（近 12 个月 36 个）

## 中文简介

一个信息生成和渲染框架,把文字带入生命!

## 安装

```sh
npm install @antv/infographic
```

也可以使用：`pnpm add @antv/infographic`、`yarn add @antv/infographic`、`bun add @antv/infographic`

## README

![](https://gw.alipayobjects.com/zos/antfincdn/R8sN%24GNdh6/language.svg) 简体中文 | [English](https://npmcn.com/README.md)

# Infographic, bring words to life!

🦋 新一代信息图可视化引擎，让文字信息栩栩如生！

[![antvis%2FInfographic | Trendshift](https://trendshift.io/api/badge/repositories/15838)](https://trendshift.io/repositories/15838)

[![npm version](https://img.shields.io/npm/v/@antv/infographic.svg)](https://www.npmjs.com/package/@antv/infographic) [![build status](https://img.shields.io/github/actions/workflow/status/antvis/infographic/build.yml)](https://github.com/antvis/infographic/actions) ![Visitors](https://hitscounter.dev/api/hit?url=https://github.com/antvis/infographic&label=Visitors&icon=graph-up&color=%23dc3545&message=&style=flat&tz=UTC) [![license](https://img.shields.io/npm/l/@antv/infographic.svg)](https://npmcn.com/package/%40antv/infographic/LICENSE)

![](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*EdkXSojOxqsAAAAAQHAAAAgAemJ7AQ/original)

**AntV Infographic** 是 AntV 推出的新一代**声明式信息图可视化引擎**，通过精心设计的信息图语法，能够快速、灵活地渲染出高质量的信息图，让信息表达更高效，让数据叙事更简单。

 [![官网](https://img.shields.io/badge/%E5%AE%98%E7%BD%91-2F54EB?style=for-the-badge)](https://infographic.antv.vision/)[![GitHub](https://img.shields.io/badge/GitHub-000000?style=for-the-badge&logo=github&logoColor=white) ](https://github.com/antvis/infographic)[![文档](https://img.shields.io/badge/%E6%96%87%E6%A1%A3-722ED1?style=for-the-badge) ](https://infographic.antv.vision/learn)[![示例](https://img.shields.io/badge/%E7%A4%BA%E4%BE%8B-13C2C2?style=for-the-badge) ](https://infographic.antv.vision/gallery)[![Skills](https://img.shields.io/badge/Skills-FA8C16?style=for-the-badge) ](https://github.com/antvis/Infographic/tree/main/skills)[![AI Agent](https://img.shields.io/badge/AI%20Agent-EB2F96?style=for-the-badge)](https://infographic.antv.vision/ai)

![AntV Infographic 预览](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*ZdeISZWHuyIAAAAAbEAAAAgAemJ7AQ/fmt.webp)

## ✨ 特性

-   🤖 **AI 友好**：配置和语法更适合 AI 生成，提供简洁有效的 Prompt，支持 AI 流式输出和渲染
-   📦 **开箱即用**：内置 ~200 信息图模板、数据项组件与布局，快速构建专业信息图
-   🎨 **主题系统**：支持手绘、渐变、图案、多套预设主题，允许深度自定义
-   🧑🏻‍💻 **内置编辑器**：内置信息图的编辑器，让 AI 生成之后可以二次编辑
-   📐 **高质量 SVG 输出**：默认基于 SVG 渲染，保证视觉品质与可编辑性

## 🚀 安装

```bash
npm install @antv/infographic
```

## 📝 快速开始

[![](https://img.shields.io/badge/%E5%85%A5%E9%97%A8%E6%8C%87%E5%8D%97-2F54EB)](https://infographic.antv.vision/learn/getting-started) [![](https://img.shields.io/badge/%E4%BF%A1%E6%81%AF%E5%9B%BE%E8%AF%AD%E6%B3%95-13C2C2)](https://infographic.antv.vision/learn/infographic-syntax) [![](https://img.shields.io/badge/%E9%85%8D%E7%BD%AE%E9%A1%B9-722ED1)](https://infographic.antv.vision/reference/infographic-options)

```ts
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
`);
```

渲染结果如下：

![AntV Infographic DEMO](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*uvj8Qb26F1MAAAAARAAAAAgAemJ7AQ/fmt.webp)

## 流式渲染

[![](https://img.shields.io/badge/Demo-D46A6A)](https://infographic.antv.vision/learn/infographic-syntax)

使用具有高容错性的信息图语法能够实时接收 AI 流式输出并逐步渲染信息图。

```ts
let buffer = '';
for (const chunk of chunks) {
  buffer += chunk;
  infographic.render(buffer);
}
```

![AntV Infographic 流式渲染](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*e_PFSZrR9AQAAAAASdAAAAgAemJ7AQ/original)

## 🔧 Skills 集成

AntV Infographic 提供了多项能力，便于与 AI 大模型集成：

-   **infographic-creator**：创建一个渲染信息图的 HTML 文件
-   **infographic-syntax-creator**：根据描述生成信息图语法
-   **infographic-structure-creator**：生成自定义的结构设计
-   **infographic-item-creator**：生成自定义的数据项设计
-   **infographic-template-updater**：（开发者使用）用于更新信息图模板库

### Claude Code

> 已提供 Claude marketplace，可通过 marketplace 安装，也可继续手动集成。

```bash
/plugin marketplace add https://github.com/antvis/Infographic.git
/plugin install antv-infographic-skills@antv-infographic
```

手动集成：

```bash
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

```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](https://alma.now/) — 集成信息图的桌面 AI 多模型管理应用
    -   [Markdown Viewer](https://github.com/xicilion/markdown-viewer-extension) — 支持信息图的 Markdown 查看器，支持导出 Word，提供 Chrome/VS Code/Firefox 扩展
    -   [InfographicAI](https://infographic-ai.tuntun.site/) — 基于信息图生成 PPT 的在线工具
    -   [LangChat Slides](https://github.com/TyCoding/langchat-slides) — 基于 @antv/infographic 的新一代 AI 幻灯片生成器
    -   [Nowledge Mem](https://mem.nowledge.co/) — 支持信息图演示创作的 AI 记忆库
    -   [微信 Markdown 编辑器](https://md.doocs.org/) — 支持信息图的 Markdown 转微信图文编辑器
    -   [Welight](https://waer.ltd/) — 支持信息图的微信公众号创作平台
    -   [Zojo](https://zojo.ai/infographic) — 使用简单语法生成专业信息图
-   📦 **技术库**
    -   [astro-koharu](https://github.com/cosZone/astro-koharu) — 支持信息图的 Astro 动漫风格博客主题
    -   [docsify-infographic](https://github.com/bulexu/docsify-infographic) — 在 Docsify 中渲染信息图的插件
    -   [feffery-infographic](https://github.com/HogaStack/feffery-infographic) — 基于 Plotly Dash 在 Python 中创建信息图
    -   [infographic-cli](https://github.com/lyw405/infographic-cli) — 命令行生成 SVG 信息图的 CLI 工具
    -   [infographic-for-react](https://github.com/lyw405/infographic-for-react) — @antv/infographic 的 React 组件封装
    -   [markdown-it-infographic](https://github.com/hcg1023/markdown-it-infographic) — @antv/infographic 的 markdown-it 插件
    -   [markstream-vue](https://github.com/Simon-He95/markstream-vue) — 支持信息图的 Vue 3 流式 Markdown 渲染库
    -   [obsidian-infographic](https://github.com/hcg1023/obsidian-infographic) — @antv/infographic 的 Obsidian 插件
    -   [slidev-addon-infographic](https://github.com/fxss5201/slidev-addon-infographic) — 适用于 Slidev 的 @antv/infographic 组件
    -   [VSCode 插件](https://github.com/liwx2000/infographic-vscode-extension) — 在 VSCode Markdown 文件中预览信息图

> 💡 有使用 AntV Infographic 的项目？欢迎在 [Issue #99](https://github.com/antvis/Infographic/issues/99) 中分享！

## 💬 社区与交流

-   在 GitHub 提交你的问题或建议
-   参与 [GitHub Discussions](https://github.com/antvis/infographic/discussions) 与社区交流
-   欢迎参与贡献，一起完善 AntV Infographic！

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

-   [AntV 官网](https://antv.antgroup.com/)
-   [GitHub 仓库](https://github.com/antvis/infographic)
-   [问题反馈](https://github.com/antvis/infographic/issues)

## 📄 许可证

本项目基于 **MIT** 许可开源，详见 [LICENSE](https://npmcn.com/package/%40antv/infographic/LICENSE)。

## 常见问题

### @antv/infographic 是什么？

一个信息生成和渲染框架,把文字带入生命\!

### 如何安装 @antv/infographic？

在项目目录运行 npm install @antv/infographic，或使用 pnpm add / yarn add / bun add。

### @antv/infographic 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @antv/infographic 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @antv/infographic 可以商用吗？

@antv/infographic 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @antv/infographic 的下载量有多少？

根据 npm 官方下载统计，@antv/infographic 在 2026/10/06 – 2026/11/04 这 30 天内被下载 131,873 次，日均约 4,396 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @antv/infographic 还在维护吗？

最新版本 0\.2\.20 发布于 2026/08/19（2 个月前）；至今共发布 36 个版本，其中过去 12 个月发布了 36 个；首次发布于 2025/11/12。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。