AntV Infographic

// Overview

AntV Infographic is AntV's declarative infographic visualisation engine. Instead of hand-placing shapes, you write a short indentation-based document that names a template and supplies the data, and the engine renders a finished infographic from it. The syntax was designed to be written by a model as much as by a person: it is concise enough to fit in a prompt and deliberately fault-tolerant.

That fault tolerance is what makes it a generative-UI component rather than a chart library. Because a partial document still parses, you can append an LLM's output chunk by chunk and re-render on every chunk, so the infographic builds itself in front of the user as the model writes it. Around 200 built-in templates, data-item components and layouts cover the common shapes, and a theme system supplies hand-drawn, gradient and pattern presets before you start customising.

Output is SVG by default, which keeps the result crisp and editable rather than baked into pixels, and the package ships a built-in editor so a user can adjust whatever the model produced. AntV also publishes a set of agent skills — infographic-creator, infographic-syntax-creator, infographic-structure-creator and infographic-item-creator — that teach a coding agent the syntax, installable from a Claude Code plugin marketplace.

// Getting started

Infographic ships as the @antv/infographic npm package. You create an instance bound to a container element and call render with an infographic document.

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
  lists
    - label Step 1
      desc Start
    - label Step 2
      desc In Progress
    - label Step 3
      desc Complete
`);

let buffer = '';
for (const chunk of chunks) {
  buffer += chunk;
  infographic.render(buffer);
}

/plugin marketplace add https://github.com/antvis/Infographic.git
/plugin install antv-infographic-skills@antv-infographic

Commands and code are distilled from the project's own documentation — always check the official repo for the latest.

// When to use it

• Reach for it when a chat product should answer with a rendered infographic instead of a wall of bullet points
• Reach for it when you want the visual to appear progressively as the model streams, rather than after the response completes
• Reach for it when generated visuals need to stay editable — SVG output plus a built-in editor lets a user fix what the model got wrong
• Reach for it to give a coding agent a constrained visual vocabulary, so it produces a consistent deck of infographics rather than ad-hoc SVG

// How AntV Infographic compares

AntV Infographic alongside other open-source generative ui sdks tools AI/TLDR tracks, ranked by GitHub stars.