简体中文 | English
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.
✨ 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
npm install @antv/infographic
📝 Quick Start
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:
Streaming Rendering
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);
}
🔧 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.
/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
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
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
💡 Have a project using AntV Infographic? Share it in Issue #99!
- 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.
📄 License
This project is open source under the MIT license. See LICENSE for details.
评论