AntV Infographic: a declarative SVG engine that renders a text syntax into infographics

What AntV Infographic actually solves, and who it is for

The project describes itself as AntV's next-generation declarative infographic visualization engine. The problem it addresses is narrow but real: turning a small block of structured text into a laid-out, styled graphic without writing layout code. You describe a list, a sequence or a hierarchy in an indentation-based syntax, name a template, and the library produces SVG.

The intended audience is front-end and TypeScript developers, plus teams wiring an LLM into a product. The README states that the configuration and syntax are tuned for AI generation, with concise prompts and support for streaming output. That framing matters. The library is not a design tool and not a charting library for numeric series; it is a renderer for short, label-and-description content such as steps, comparisons and lists.

If your content is a table of measurements or a time series, this is the wrong layer. If your content is three to eight short items that a human would otherwise arrange in a slide, the syntax plus a template gets you there faster than writing flexbox.

The syntax, the template library and the render call

The mechanism is a two-part input. First a template name, then a body of indented data. In the README example the template is list-row-simple-horizontal-arrow and the data is a lists block with three entries, each carrying a label and a desc. The library maps that to a layout and emits SVG.

The README states there are roughly 200 built-in infographic templates, data-item components and layouts. Templates are the outer arrangement; item components are how a single entry is drawn. That separation is what lets the same three-item list render as a horizontal arrow, a vertical stack or something else by changing one line.

Rendering goes through the Infographic class. You construct it with a container, dimensions and an editable flag, then call render with the syntax string. Default output is SVG, which the README frames as a way to keep visual fidelity and make the result easy to edit. Because the output is SVG, you can post-process it, inline it in a page, or hand it to a downstream tool that understands SVG.

The editable option is worth noting: the README states the package includes an editor so AI-generated results can be edited further. That is a different product surface from the render call, and it is the reason the container and size options exist rather than a bare string-to-string function.

Installing AntV Infographic and rendering a first list

Installation is a single npm package. The README gives this command:

npm install @antv/infographic

The package publishes ESM, CommonJS and UMD builds. The package.json maps the main entry to ./lib/index.js, the module entry to ./esm/index.js, and the jsdelivr and unpkg fields to ./dist/infographic.umd.min.js, so a script-tag build exists alongside the bundler path. There is also a ./ssr export, which suggests server-side rendering is an intended use, though the README does not walk through it.

The quick start needs a container element in the page and then the render call. This is the README's example, unchanged:

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
`);

What you should see is an SVG infographic with three labelled steps connected left to right. The template name on the first line selects the layout; the data block supplies the content. Note that the syntax is passed as a plain string, so nothing stops you from loading it from a file or a database column.

For LLM output the README shows the streaming pattern: keep a buffer, append each chunk, and call render again with the whole buffer.

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

The README describes the syntax as highly fault-tolerant specifically so that partial, still-incomplete text can be rendered progressively. That is the design bet: re-render the whole string on every chunk rather than trying to patch the SVG.

Where the design breaks down

The clearest limitation is that the syntax is a language you have to learn, and the README does not teach it. It links to a separate Infographic Syntax page and a Configuration reference. Everything about template names, valid data keys and per-template requirements lives there, not in the repository README. If you skim the README and assume you can guess a template name, you will get a blank or fallback render.

The streaming pattern also has a cost the README does not discuss. Calling render on every chunk means re-parsing and re-rendering the full buffer repeatedly. For a short list this is fine. For a long document with a large template, the work grows with the buffer length and repeats on each token. The README presents the pattern without a throttle or debounce, and it does not document rollback if a partially streamed render fails mid-way.

Template count cuts both ways. Roughly 200 templates is a lot to search through, and the README gives no guidance on which template fits which data shape. Matching your content to a template is the actual work; the render call is the easy part.

Finally, the README does not document browser support, accessibility behaviour of the generated SVG, or file-size expectations for the UMD bundle. Those are questions you will have to answer by inspecting the build output yourself.

How this differs from Mermaid and from Canva

The closest comparison in the diagram-as-text space is Mermaid, which is widely used for flowcharts, sequence diagrams and ER diagrams embedded in Markdown. The difference is the target output. Mermaid is built around graph semantics: nodes and edges with a layout algorithm deciding placement. AntV Infographic is built around presentation semantics: a named template decides the arrangement, and your data fills slots in it. If your content is a process with branching logic, Mermaid's model fits better. If your content is a short labelled list that you want to look designed, the template model is the point.

The other comparison people search for is Canva, which is a hosted design product. The difference is not features, it is where the work happens. Canva gives a human a canvas and a template gallery; AntV Infographic gives a program a string and returns SVG. You cannot ask AntV Infographic to make a design decision, and you cannot embed Canva's canvas in a render loop driven by an LLM stream. They solve adjacent problems for different actors.

There is also a middle ground worth knowing about: the README lists community products built on the library, including Markdown viewers, slide generators and WeChat article editors. If your need is close to one of those, checking how they use the syntax may be faster than reading the reference cold.

AI agent skills, licence and what upgrades cost

The repository ships a skills/ directory and a .claude-plugin/ directory, and the README documents installing them into an agent. For Claude Code there is a marketplace route and a manual route. The manual route downloads a release asset and unpacks it into .claude/skills:

set -e

VERSION=0.2.4 # Replace with the latest tag, e.g. 0.2.14
BASE_URL=https://github.com/antvis/Infographic/releases/download
mkdir -p .claude/skills

curl -L --fail -o skills.zip "$BASE_URL/$VERSION/skills.zip"
unzip -q -o skills.zip -d .claude/skills
rm -f skills.zip

The README names five skills: infographic-creator, infographic-syntax-creator, infographic-structure-creator, infographic-item-creator and infographic-template-updater. The last is marked as being for developers updating the template library. Note that the version in the snippet is a placeholder the README itself tells you to replace, and it does not match the current package version, so read the snippet as a pattern rather than a copy-paste command.

On maintenance: the repository is not archived, and the last push was on 2026-08-21. Releases listed run from 0.2.16 in March 2026 through 0.2.19 in May 2026, while package.json on main carries 0.2.20, so the published tag and the working version have drifted apart. Plan upgrades around the version you actually install, and pin it.

The licence is MIT, which permits commercial use and modification. That is a permissive licence, but it says nothing about the licence of any template artwork or fonts you might pair with the output, and the README does not address that. Check the assets you ship.

Editorial conclusion

Adopt AntV Infographic if you already produce structured text or LLM output and want it rendered as SVG without hand-building layouts. Do not adopt it if you need a hosted design tool with no code, or if you expect the model to invent the visual grammar for you. Before committing, open the gallery, check that a template matches your data shape, and read the infographic-options reference for the options the quick start does not mention.

Frequently asked questions

Official sources

1. antvis/Infographic on GitHub
2. License: MIT
3. Project website
4. README
5. Releases