Infographic, bring words to life!

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

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

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

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

💬 Community & Communication

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.

infographic

💡 摘要

🎯 适合人群