中文 | English

Infographic, bring words to life!

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

AntV Infographic is a next-generation declarative infographic visualization engine from AntV. With unified syntax and component architecture, you can render structured data into high-quality infographics in an elegant and flexible way, making information presentation more efficient and data storytelling simpler.

Website · GitHub · Document · Gallery · AI Agent

✨ Features

• 📦 Ready to use: 100+ built-in templates, data-item components, and layouts to assemble infographics in minutes
• 🎨 Themeable: Hand-drawn (rough), gradients, patterns, multiple presets, and deep customization
• 🧑🏻‍💻 Built-in editor: built-in editor for AI-generated infographics, allowing for further customization and refinement
• 🧩 Composable: Structures, items, and render units are fully componentized for flexible extension
• 🎯 Declarative Configuration: Simple and clear configuration approach, ideal for AI generation, machine understanding, and automated workflows
• 🤖 AI-friendly: Declarative config with JSON Schema, ideal for AI generation and automated workflows
• 📐 High-quality SVG: Default SVG output for crisp visuals and easy editing/export

🚀 Installation

npm install @antv/infographic

📝 Quick Start

import { Infographic } from '@antv/infographic';

const infographic = new Infographic({
  container: '#container',
  width: '100%',
  height: '100%',
  template: 'list-row-simple-horizontal-arrow',
  data: {
    items: [
      { label: 'Step 1', desc: 'Start' },
      { label: 'Step 2', desc: 'In Progress' },
      { label: 'Step 3', desc: 'Complete' },
    ],
  },
  // Enable editing with the built-in editor
  editable: true,
});

infographic.render();

Render the infographic in the target container.

For more examples, please refer to the documentation site.

🗂 Configuration

The InfographicOptions configuration item required when instantiating the Infographic class, see the information graph syntax for more information.

Attribute	Type	Required	Description	Reference
container	string | HTMLElement	N	Container, can be selector or HTMLElement.	-
width	number | string	N	Width, support pixel value or percentage.	-
height	number | string	N	Height, support pixel value or percentage.	-
padding	Padding	N	Padding for container	Padding
template	string	N	Template name	-
design	DesignOptions	N	Design options	DesignOptions
data	Data	Y	Data for Infographic	Data
theme	string	N	Theme name	-
themeConfig	ThemeConfig	N	Theme configure options	ThemeConfig
svg	SVGOptions	N	Options for SVG container	SVGOptions
editable	boolean	N	Whethe editable?	-

For more details, please refer to the Configuration section.

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

• AntV Official Website
• GitHub Repository
• Issue Tracker

📄 License

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