Infographic

[简体中文](./README.zh-CN.md) | English

Infographic, bring words to life!

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

[](https://www.npmjs.com/package/@antv/infographic) [](https://github.com/antvis/infographic/actions)

[](./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.

✨ 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

[](https://infographic.antv.vision/learn/getting-started) [](https://infographic.antv.vision/learn/infographic-syntax) [](https://infographic.antv.vision/reference/infographic-options)

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

...