[įŽ€äŊ“中文](./README.zh-CN.md) | English
# Infographic, bring words to life! đŸĻ‹ An Infographic Generation and Rendering Framework, bring words to life! antvis%2FInfographic | Trendshift [![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)](./LICENSE)
**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.

Website GitHub Docs Gallery Skills AI Agent

AntV Infographic Preview
## ✨ 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://img.shields.io/badge/Getting%20Started-2F54EB)](https://infographic.antv.vision/learn/getting-started) [![](https://img.shields.io/badge/Infographic%20Syntax-13C2C2)](https://infographic.antv.vision/learn/infographic-syntax) [![](https://img.shields.io/badge/Configuration-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 `); ``` The rendered result looks like this: AntV Infographic DEMO ## Streaming Rendering [![](https://img.shields.io/badge/Demo-D46A6A)](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); } ``` 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 with the skill name, e.g. infographic-creator # https://github.com/antvis/Infographic/tree/main/skills/ $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 - [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.