๐ฆ 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.
- ๐ค 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
npm install @antv/infographic
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
items:
- label: Step 1
desc: Start
- label: Step 2
desc: In Progress
- label: Step 3
desc: Complete
`);The rendered result looks like this:
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);
}
- 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.
This project is open source under the MIT license. See LICENSE for details.