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

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
- astro-koharu — Anime blog theme (Astro) with Infographic support
- docsify-infographic — Plugin to render Infographic diagrams in Docsify
- feffery-infographic — Create infographics in Python with Plotly Dash
- infographic-cli — CLI tool to generate SVG infographics
- infographic-for-react — React component wrapper for @antv/infographic
- markdown-it-infographic — markdown-it plugin for @antv/infographic
- markstream-vue — Streaming Markdown rendering for Vue 3 with Infographic
- obsidian-infographic — Obsidian plugin for @antv/infographic
- slidev-addon-infographic — @antv/infographic component for Slidev
- VSCode Extension — Preview Infographic in VSCode Markdown files

💡 Have a project using AntV Infographic? Share it in Issue #99!

💬 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.

Osamaali313/Infographic

README