简体中文 | 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.

• 🤖 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

npm install @antv/infographic

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

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

AntV Infographic Streaming Rendering

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

We don't have a Claude marketplace entry yet, so install manually.

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

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

• 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

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