README Copy Section

<img src="https://gw.alipayobjects.com/zos/antfincdn/R8sN%24GNdh6/language.svg" width="18"> 简体中文 | English

<div align="center">

Infographic, bring words to life!

🦋 An Infographic Generation and Rendering Framework, bring words to life!

<a href="https://trendshift.io/repositories/15838" target="_blank"><img src="https://trendshift.io/api/badge/repositories/15838" alt="antvis%2FInfographic | Trendshift" style="width: 250px; height: 55px;" width="250" height="55"/></a>

[](https://www.npmjs.com/package/@antv/infographic)
[](https://github.com/antvis/infographic/actions)

[](./LICENSE)

<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*EdkXSojOxqsAAAAAQHAAAAgAemJ7AQ/original" width="256">

</div>

AntV Infographic is AntV's next-generation declarative infographic visualization engine. With a carefully designed infographic syntax, it can quickly and flexibly render high-quality infographics, making information presentation more efficient and data storytelling simpler.

<div align="center">

<p align="center">
<a href="https://infographic.antv.vision">
<img src="https://img.shields.io/badge/Website-2F54EB?style=for-the-badge" alt="Website" />
</a>
<a href="https://github.com/antvis/infographic">
<img src="https://img.shields.io/badge/GitHub-000000?style=for-the-badge&logo=github&logoColor=white" alt="GitHub" />
</a>
<a href="https://infographic.antv.vision/learn">
<img src="https://img.shields.io/badge/Docs-722ED1?style=for-the-badge" alt="Docs" />
</a>
<a href="https://infographic.antv.vision/gallery">
<img src="https://img.shields.io/badge/Gallery-13C2C2?style=for-the-badge" alt="Gallery" />
</a>
<a href="https://github.com/antvis/Infographic/tree/main/skills">
<img src="https://img.shields.io/badge/Skills-FA8C16?style=for-the-badge" alt="Skills" />
</a>
<a href="https://infographic.antv.vision/ai">
<img src="https://img.shields.io/badge/AI%20Agent-EB2F96?style=for-the-badge" alt="AI Agent" />
</a>
</p>

<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*ZdeISZWHuyIAAAAAbEAAAAgAemJ7AQ/fmt.webp" width="768" alt="AntV Infographic Preview">

</div>

✨ Features Copy Chapter

- 🤖 AI-friendly: Configuration and syntax are tuned for AI generation, provide concise prompts, and support AI streaming output and rendering
- 📦 Ready to use: ~200 built-in infographic templates, data-item components, and layouts to build professional infographics in minutes
- 🎨 Theme system: Hand-drawn, gradients, patterns, multiple preset themes, plus deep customization
- 🧑🏻‍💻 Built-in editor: Includes an editor for infographics so AI-generated results can be edited further
- 📐 High-quality SVG output: Renders with SVG by default to ensure visual fidelity and easy editing

🚀 Installation Copy Chapter

npm install @antv/infographic

📝 Quick Start Copy Chapter

[](https://infographic.antv.vision/learn/getting-started)
[](https://infographic.antv.vision/learn/infographic-syntax)
[](https://infographic.antv.vision/reference/infographic-options)

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

The rendered result looks like this:

<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*uvj8Qb26F1MAAAAARAAAAAgAemJ7AQ/fmt.webp" width="480" alt="AntV Infographic DEMO">

Streaming Rendering Copy Chapter

[](https://infographic.antv.vision/learn/infographic-syntax)

With a highly fault-tolerant infographic syntax you can stream AI output in real time and progressively render the infographic.

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

<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*e_PFSZrR9AQAAAAASdAAAAgAemJ7AQ/original" width="480" alt="AntV Infographic Streaming Rendering">

🔧 Skills Integration Copy Chapter

AntV Infographic provides skills to integrate with AI agents:

- infographic-creator: Create an HTML file that renders an infographic
- infographic-syntax-creator: Generate infographic syntax from descriptions
- infographic-structure-creator: Generate custom structure designs
- infographic-item-creator: Generate custom item designs
- infographic-template-updater: (For developers) update the template library

Claude Code Copy Section

Claude marketplace is now available. You can install from marketplace, or keep using manual install.

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

Manual install:

set -e
VERSION=0.2.4 # Replace with the latest tag, e.g. 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 Copy Section

Enter codex

Replace <SKILL> with the skill name, e.g. infographic-creator

https://github.com/antvis/Infographic/tree/main/skills/<SKILL>

$skill-installer install https://github.com/antvis/Infographic/tree/main/skills/infographic-creator

🌐 Ecosystem Copy Chapter

Community projects and products powered by AntV Infographic:

- 💼 Products
- Alma — Desktop AI provider orchestration app with Infographic
- Markdown Viewer — Markdown viewer with Infographic support, export to Word, extensions for Chrome/VS Code/Firefox
- InfographicAI — Generate PPT slides powered by Infographic
- LangChat Slides — Next-Gen AI Slide Generator using @antv/infographic
- Nowledge Mem — AI Memory Bank with Presentation Creator supporting Infographic
- WeChat Markdown Editor — Markdown to WeChat article editor with Infographic
- Welight — WeChat article creation platform with Infographic support
- Zojo — Generate professional infographics with simple syntax
- 📦 Libraries
- astro-koharu — Anime blog theme (Astro) with Infographic support
- docsify-infographic — Plugin to render Infographic diagrams in Docsify
- feffery-infographic — Create infographics in Python with Plotly Dash
- infographic-cli — CLI tool to generate SVG infographics
- infographic-for-react — React component wrapper for @antv/infographic
- markdown-it-infographic — markdown-it plugin for @antv/infographic
- markstream-vue — Streaming Markdown rendering for Vue 3 with Infographic
- obsidian-infographic — Obsidian plugin for @antv/infographic
- slidev-addon-infographic — @antv/infographic component for Slidev
- VSCode Extension — Preview Infographic in VSCode Markdown files

💡 Have a project using AntV Infographic? Share it in Issue #99!

💬 Community & Communication Copy Chapter

- Submit your questions or suggestions on GitHub
- Join GitHub Discussions to communicate with the community
- Contributions are welcome! Let's improve AntV Infographic together!

If you have any suggestions, feel free to communicate with us on GitHub! Star ⭐ us to show your support.

- AntV Official Website
- GitHub Repository
- Issue Tracker

📄 License Copy Chapter

This project is open source under the MIT license. See LICENSE for details.

---