Infographic
🦋 An Infographic Generation and Rendering Framework, bring words to life with AI!
Last verified:
What is Infographic?
AntV Infographic is a next-generation declarative infographic engine and powerful visualization library for building interactive and customizable infographics. It transforms data, information, and knowledge into perceptible graphic language by combining visual design with data visualization, using intuitive symbols to compress complex information and help audiences quickly understand and remember key points.
The tool features a Mermaid-like syntax for describing templates, design, data, and themes, making it suitable for both AI streaming output and manual writing. It includes over 197 high-fidelity infographic templates covering lists, sequences, hierarchies, comparisons, statistics, and relationship graphs. The library supports semantic icon search with over 100,000 icons, streaming rendering for real-time visualization, server-side rendering via @antv/infographic/ssr, and an online AI editor that automatically generates infographics from pasted text.
AntV Infographic is designed for developers building data visualization features in React, Vue, or vanilla JavaScript applications, data analysts creating visual stories, content creators producing infographics without coding, and AI applications generating visual content. It provides a complete API including Infographic class instantiation, render/update methods, export capabilities to PNG/SVG, event listeners, and TypeScript type definitions for AI model integration.
Infographic pricing
Pricing model: Freemium
Free and open-source library available via npm (@antv/infographic). No paid tiers mentioned. Install with 'npm install @antv/infographic --save' or use CDN at unpkg.com. Online editor at infographic.antv.vision/editor is free to use. GitHub repository at github.com/antvis/Infographic is publicly accessible.
Infographic pros
- Next-generation declarative infographic engine architecture
- Mermaid-like syntax easy to learn and write
- 197+ high-fidelity infographic templates ready to use
- Over 100,000 icons with semantic search support
- Native AI generation and real-time streaming rendering
- Online editor allows no-code infographic creation
- AI automatically understands context and generates matching infographics from pasted text
- Server-side rendering support via @antv/infographic/ssr
- Full React, Vue 3, and vanilla JavaScript integration
- Export to both PNG and SVG formats with Data URL
- Complete TypeScript type definitions for AI model integration
- Event system with warning, error, rendered, and destroyed events
- Customizable themes with color palettes and rough stylize mode
- Supports lists, sequences, hierarchies, comparisons, statistics, and relationship data
- CDN inclusion option for direct HTML usage without npm
Infographic cons
- Documentation primarily in Chinese with limited English content
- Relatively new library (v0.2.19) with potential stability issues
- Requires understanding of declarative syntax for custom designs
- Limited template customization without deep API knowledge
- No built-in drag-and-drop visual editor in the library itself
- Icon search API points to external weavefox.cn endpoint
- Server-side rendering requires separate @antv/infographic/ssr package
- Streaming rendering requires manual buffer management in code
Frequently asked questions about Infographic
What is AntV Infographic?
AntV Infographic is a next-generation declarative infographic engine and powerful visualization library for building interactive and customizable infographics. It transforms data, information, and knowledge into perceptible graphic language by combining visual design with data visualization.
How do I install AntV Infographic?
Install via npm with 'npm install @antv/infographic --save'. Alternatively, include via CDN directly in HTML using the script tag from unpkg.com at '@antv/infographic@latest/dist/infographic.min.js'.
What syntax does Infographic use?
Infographic uses a Mermaid-like syntax for describing templates, design, data, and themes. The syntax is inspired by AntV G2 and G6 graphics syntax, with entry using 'infographic [template-name]' and blocks for template, design, data, and theme.
How many templates are available?
There are 197 infographic templates available in the curated template library with high-fidelity designs ready to drop into applications, covering lists, sequences, hierarchies, comparisons, statistics, and relationship graphs.
Does it support AI generation?
Yes, AntV Infographic natively supports AI generation and real-time rendering. The online editor at infographic.antv.vision/editor allows you to paste text content, and AI automatically understands the context to generate matching infographics.
What frameworks does it support?
AntV Infographic supports React (with useEffect and ref), Vue 3 (with onMounted lifecycle), and vanilla JavaScript. It can also be used directly in HTML via CDN without any framework.
Can I export infographics as images?
Yes, use the toDataURL() method to export infographic image data as a Data URL string. It supports exporting as PNG (default) or SVG with options like embedResources and removeIds for SVG.
How many icons are available?
Over 100,000 icons are available with semantic icon search support. You can search by keyword and the system automatically uses appropriate icons based on the keyword.
Does it support server-side rendering?
Yes, through @antv/infographic/ssr which provides the renderToString method. This allows rendering infographics in non-browser environments and outputs an SVG string.
What data types does it support?
It supports lists (unordered items), sequences (ordered items like timelines), hierarchies (tree structures), comparisons (grouped comparisons), statistics (metrics with values), and relationships (nodes and edges for flowcharts/networks).