A text format for designed information
AntV Infographic sits between a charting library and a design tool. You describe a visual using a compact, indentation-based syntax, choose a template, provide structured data, and optionally specify a theme or lower-level design pieces. The library renders the result as SVG in a web page. Its roughly 200 built-in templates cover lists, sequences, hierarchies, comparisons, statistical views, and relations, with preset palettes, patterns, hand-drawn styling, and icons.
This is a useful abstraction for products that generate the same kind of visual repeatedly. A report builder can turn weekly metrics into a branded card. A documentation system can render a process summary from source text. A language model can emit the syntax in chunks while the page progressively updates. Unlike a generated bitmap, the resulting text remains editable in the browser and the SVG can scale without becoming blurry.
The syntax borrows Mermaid’s text-first feel, but its purpose is different. Mermaid is strongest at technical relationships such as sequences and flows. Infographic emphasizes data storytelling and visual presentation. It separates information structure from graphic semantics, so the same content can move between compatible templates or adopt a different theme without redrawing everything.
The browser start is convincingly small
Installation is one npm command. Create an Infographic instance with a container, dimensions, and editable flag, then pass a string to render. The README example needs only a template name and three list items. CommonJS, ES modules, a browser bundle, TypeScript declarations, and a separate server-rendering export are present in the package. The MIT license is uncomplicated for commercial integration.
The built-in editor makes the first result more than a static preview. Users can select one or several elements, edit text, drag items, resize editable text, align or distribute objects, change font and icon colors, pan, zoom, and undo actions. Plugins and interactions are replaceable or extensible. This is enough for correcting model output or making small editorial adjustments after a template renders.
It is not a freeform vector studio. The documented tools operate on the rendered infographic’s existing structure. There is no claim of arbitrary pen tools, component libraries, multiplayer collaboration, or the breadth of a full design application. Treat editing as a finishing layer over declarative output, not as a replacement for a designer’s main workspace.
AI support is practical but needs a gate
The grammar is designed to tolerate partial input, which makes progressive rendering during model output plausible. The repository also ships five agent skills: they cover complete infographic creation, syntax, custom structures, custom items, and template maintenance. Claude Code users can install them through a plugin marketplace, while Codex users can install individual skills. This gives an agent more specific instructions than a vague request to “make an infographic.”
Generated syntax still needs validation. The rules require two-space indentation, particular collection names such as lists, sequences, values, or nodes, and fields supported by the selected template. Issue 181 reports that output from another model had invalid line breaks and indentation and would not parse. Issue 211 says a skill example used a value field that several diagrams did not display. The gallery and skills lower the prompting burden, but they do not make every template accept every plausible data field.
A production pipeline should render before publishing, inspect parser errors, and check that expected labels and numbers appear in the output. Keep known-good examples beside prompts. If a template is central to a workflow, pin the package version and add visual or SVG-content tests around it.
SVG is an advantage with a compatibility trap
SVG gives Infographic crisp scaling, selectable elements, and a natural path to browser editing. Custom resource loaders can fetch icon SVGs, and the theme system can register fonts, palettes, and reusable styles. These hooks are valuable for brand consistency and private asset catalogs. Server-side rendering examples in the repository show that SVG generation is not limited to a visible browser.
Office documents are the important exception. Issue 208 reports that an exported SVG inserted into Word or PowerPoint shows shapes but loses text. A maintainer explains that infographic text uses foreignObject for browser layout and that PowerPoint may not support it. If the deliverable ends in slides or documents, test the exact application and export route. A PNG can avoid SVG feature compatibility, but it gives up editability and resolution independence.
Charting depth is another boundary. An open request describes line charts as single-series where the user needs several dimensions. Another asks how to add hover highlighting and tooltips because the current result has no interaction feedback. Those users should start with ECharts or G2. Infographic is strongest when the message and composition matter more than exploratory analysis.
Healthy enough to try, young enough to test hard
The default branch was last pushed on June 1, 2026, and release 0.2.19 arrived on May 6. Fifteen open issues and seven open pull requests made up GitHub’s combined open count of 22. Issue activity continued in July, and new pull requests for text spacing, word-cloud indexing, and an AI provider appeared in August. The project is not inactive, but the default-branch and release pace has slowed from January, when several versions landed within days of one another.
The latest release added Shadow Root support for the editor and fixed multiline text clipping and width problems in PNG export. Those changes show attention to real embedding and output defects. Open reports still cover clipped content, missing word spacing, unsupported template fields, and the office SVG problem, so version 0.2 should be read honestly: capable, appealing, and still settling its contracts.
For web-first infographic generation, this is one of the most coherent open-source packages available. Its declarative format is easier to store and regenerate than hand-positioned SVG, and the editor provides a sensible correction loop. Adopt it template by template, not gallery by gallery. The right proof is whether your own data, fonts, languages, and export destination survive repeated renders without manual rescue.