<img src="https://gw.alipayobjects.com/zos/antfincdn/R8sN%24GNdh6/language.svg" width="18"> [简体中文](./README.zh-CN.md) | 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
- 🤖 **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
```bash
npm install @antv/infographic
```
## 📝 Quick Start
[](https://infographic.antv.vision/learn/getting-started)
[](https://infographic.antv.vision/learn/infographic-syntax)
[](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
`);
```
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
[](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.
```ts
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
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
> Claude marketplace is now available. You can install from marketplace, or keep using manual install.
```bash
/plugin marketplace add https://github.com/antvis/Infographic.git
/plugin install antv-infographic-skills@antv-infographic
```
Manual install:
```bash
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
> Enter codex
```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
Community projects and products powered by AntV Infographic:
- 💼 **Products**
- [Alma](https://alma.now/) — Desktop AI provider orchestration app with Infographic
- [Markdown Viewer](https://docu.md) — Markdown viewer with Infographic support, export to Word, extensions for Chrome/VS Code/Firefox
- [InfographicAI](https://infographic-ai.tuntun.site/) — Generate PPT slides powered by Infographic
- [LangChat Slides](https://github.com/TyCoding/langchat-slides) — Next-Gen AI Slide Generator using @antv/infographic
- [Nowledge Mem](https://mem.nowledge.co/) — AI Memory Bank with Presentation Creator supporting Infographic
- [WeChat Markdown Editor](https://md.doocs.org/) — Markdown to WeChat article editor with Infographic
- [Welight](https://waer.ltd/) — WeChat article creation platform with Infographic support
- [Zojo](https://zojo.ai/infographic) — Generate professional infographics with simple syntax
- 📦 **Libraries**
- [astro-koharu](https://github.com/cosZone/astro-koharu) — Anime blog theme (Astro) with Infographic support
- [docsify-infographic](https://github.com/bulexu/docsify-infographic) — Plugin to render Infographic diagrams in Docsify
- [dsh-antv-infographic](https://github.com/HellowVirgil/dsh-antv-infographic) — DeepSeek Harness plugin for streaming, editing, and exporting Infographic diagrams
- [feffery-infographic](https://github.com/HogaStack/feffery-infographic) — Create infographics in Python with Plotly Dash
- [infographic-cli](https://github.com/lyw405/infographic-cli) — CLI tool to generate SVG infographics
- [infographic-for-react](https://github.com/lyw405/infographic-for-react) — React component wrapper for @antv/infographic
- [markdown-it-infographic](https://github.com/hcg1023/markdown-it-infographic) — markdown-it plugin for @antv/infographic
- [markstream-vue](https://github.com/Simon-He95/markstream-vue) — Streaming Markdown rendering for Vue 3 with Infographic
- [obsidian-infographic](https://github.com/hcg1023/obsidian-infographic) — Obsidian plugin for @antv/infographic
- [slidev-addon-infographic](https://github.com/fxss5201/slidev-addon-infographic) — @antv/infographic component for Slidev
- [VSCode Extension](https://github.com/liwx2000/infographic-vscode-extension) — Preview Infographic in VSCode Markdown files
> 💡 Have a project using AntV Infographic? Share it in [Issue #99](https://github.com/antvis/Infographic/issues/99)!
## 💬 Community & Communication
- Submit your questions or suggestions on GitHub
- Join [GitHub Discussions](https://github.com/antvis/infographic/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](https://antv.antgroup.com/)
- [GitHub Repository](https://github.com/antvis/infographic)
- [Issue Tracker](https://github.com/antvis/infographic/issues)
## 📄 License
This project is open source under the **MIT** license. See [LICENSE](./LICENSE) for details.