infographic-creatorby AntV

Infographic Creator Skill.

Q: Does it come with ready-made visual styles?

It does. theme.stylize selects a built-in style and passes parameters to it; the common styles listed are rough for a hand-drawn effect, pattern for a pattern fill, and linear- or radial-gradient.

A Claude Code and Codex skill for diagrams and charts: creates infographics from a given text.

Diagrams & Data Visualization
Image

Download OpenDesign View usage guide

antvis/chart-visualization-skills · skills/infographic-creator/SKILL.mdSKILL.md

--- name: infographic-creator description: Create beautiful infographics based on given text content. Use when users request to create infographics. --- ## Specifications ## Generation Process

Front matter and section headings read from the upstream file on 2026-09-14 · 11,870 characters in full

01 What it does

What the infographic-creator Skill Does in Claude Code and Codex

Summary, workflow and outputs, all read from the skill's SKILL.md.

From the SKILL.mdRead 2026-09-14 · not a recorded run

In the Skill's Own Terms

An AntV skill that turns a text description into a rendered infographic. The agent writes AntV Infographic syntax, an indentation-based DSL whose first line names a template and whose data block carries title, desc and the template's own main field — lists, sequences, compares, values, nodes and relations, or root.

A theme block sets palette, font and stylize effects. The bundled template list spans list, sequence, compare, hierarchy, relation and chart families, covering timelines, SWOT, mind maps, roadmaps, quadrant analysis and word clouds. The agent then writes a browser-ready HTML file named <title>-infographic.html that renders the diagram and exports it as SVG.

What it produces

The AntV Infographic syntax itself, which the user can read, keep or reuse.
A complete HTML file written with the Write tool, named <title>-infographic.html.
An SVG export of the finished graphic, produced from the rendered page.

See the example prompt ↗

How It Works

01
Work Out What the User Actually Wants to Show
Before anything else the skill reads the user's needs and the information they want to express, because that decides both the template and the data structure.
02
Ask Back When the Brief Is Thin
If the content description is not clear and concise, the skill requests one rather than inventing content, and may also ask which template the user wants.
03
Match Content Shape to a Template Family
Strict sequences go to sequence-, opinion listings to list-row- or list-column-, binary comparisons to compare-binary-, trees to hierarchy-tree-, and quadrants to compare-quadrant-.
04
Express the Structure in the DSL
The structure becomes AntV Infographic syntax: a template line, a data block with title/desc and the template's main field, plus an optional theme block.
05
Generate the HTML File
The syntax is dropped into a full HTML document with the AntV Infographic script tag, a container and a render call.
06
Hand Back the File and Syntax, Then Offer Tweaks
The reply carries the generated file path and the syntax, followed by an invitation to adjust the template, colors or content.

02 Find your fit

When to Use the infographic-creator Skill

Use the infographic-creator skill in Claude Code or Codex when the job is diagrams and charts of this kind. Fit and limits below are taken from the skill's own file.

Good Fit

Showing a process, steps or a development trend in strict order, such as a timeline.
A SWOT analysis of a product, project or idea.
A mind map breaking a topic into branches.
Turning numbers into a bar, column, line, pie or word-cloud chart.
Showing how things depend on or flow into each other.

Know the Boundaries

Producing the image server-side or offline: the generated HTML loads the AntV Infographic script from unpkg, so it renders in a browser.

What to Provide

A clear and concise content descriptionWhat the infographic should say; the skill breaks it down into title, desc and the data items.
The data fields your content needsWhich of title, desc, items, label, value or icon the content carries, so the right fields get filled.
Numeric values, if you want a chartchart-* templates read a values field of label plus value, optionally with a category.

03 Inside the skill

Rules the infographic-creator Skill Gives Claude Code and Codex

8 concrete instructions, defaults and limits the SKILL.md sets for the agent — the part of the file that changes the result.

Name the Template on Line One
The first line must be infographic <template-name>, with the template taken from the bundled list rather than made up.
Output Only the Syntax
The reply must be the AntV Infographic syntax alone — no JSON, no Markdown wrapper, no explanatory prose around it.
Exactly One Main Data Field
Pick a single main field for the family — lists for list-, sequences for sequence-, compares for compare-, values for chart-, nodes plus relations for relation-, root for hierarchy- — and never mix two of them.
Indent with Two Spaces
data and theme are separate blocks, everything inside them is indented two spaces, key-value pairs are written key value and array entries start with -.
Answer in the User's Language
Title, desc, labels and every other string inside the syntax must be written in whatever language the user wrote in.
Fall Back to Items
When it is not clear which main data field applies, use items.
Two Roots for Binary Comparisons
compare-binary- and compare-hierarchy-left-right- templates must have exactly two root nodes, with all comparison items hanging under those two roots.
One Root for Hierarchies
hierarchy-* trees use a single root nested through children, and root must not be repeated.

04 Put it to work

Install infographic-creator in Claude Code or Codex

One npx skills add command, then a first task in your agent and a checklist for the result.

Add infographic-creator to Claude Code, Codex or Your Agent

Run in your project; the installer asks which agent to add it to.

Terminal

npx skills add https://github.com/antvis/chart-visualization-skills --skill infographic-creator

Generic skills CLI form for skills/infographic-creator/SKILL.md; the repository may document its own path.

Give the Skill a First Diagrams and Charts Task

Written in the skill's own terms; replace the bracketed parts with your material.

Starter prompt

Turn the text below into an infographic about [our product evolution], covering [five] milestones. Each entry needs a time, a label, a one-line description and an icon, and the milestones must appear in strict chronological sequence.

Source: written from the SKILL.md in the skill's own terms.

Check the First Result

What the SKILL.md itself says a correct result looks like:

Open the HTML file directly in a browser to confirm the infographic renders, then save it as SVG with the export button.
Check the page title follows the {title} - Infographic pattern.
Check the render target is a container div with the id container.
Check the container is responsive, with both width and height at 100%.
Check the page actually exposes an SVG export button.

In OpenDesign import infographic-creator from its SKILL.md link: Plugins → Add → Skill → Import from link, then pick it in the top bar.

Download OpenDesign Read the quickstart

05 Open source, traceable

Source, License and Verification

Where this page's facts come from, and when they were last checked.

Author: AntV
Repository: github.com/antvis/chart-visualization-skills Branch master
Skill file: skills/infographic-creator/SKILL.md Content checksum recorded at verification; commit 089b687
License: MIT From LICENSE.
Repository stars: 489 GitHub snapshot taken 2026-09-14 for the whole antvis/chart-visualization-skills repository, which contains 2 skills in this catalog. Not a rating or usage count for infographic-creator.
Verified by OpenDesign: 2026-09-14 Source file, path, license text and star count were checked. Not bundled in OpenDesign main (checked 2026-08-28); a live run has not been recorded on this page.

Inside the SKILL.md

SpecificationsGroups the DSL syntax rules, data examples and the template list.
AntV Infographic SyntaxDefines template, data and theme as the three parts of the DSL.
Syntax SpecificationsCovers first line, indentation, icon keywords and data field per family.
Data Syntax ExamplesCopyable snippets for list, sequence, hierarchy, compare, chart and relation templates.
Available TemplatesLists all template names and maps content types to sequence, compare, hierarchy, chart and relation families.
ExampleBuilds an Internet technology evolution infographic with list-row-horizontal-icon-arrow.
Generation ProcessTwo phases: work out the requirement, then render the HTML file.
Step 1: Understand User RequirementsExtract the structure, clarify fields, pick a template and write the syntax.
Step 2: Render the InfographicBuild the HTML file and show the file path and syntax to the user.

The Skill's Own Description

“Create beautiful infographics based on given text content. Use when users request to create infographics.”

Front-matter description from SKILL.md. The full file is about 11,870 characters. Read the full file on GitHub.

06 Before you install

Questions About the infographic-creator Skill

Answers come from the SKILL.md as read on 2026-09-14, not from a recorded run.

Can I change the colors and fonts?

Yes. The theme part of the syntax carries the style configuration, including the palette and the font, so both are set deliberately rather than left to the renderer.

Does it come with ready-made visual styles?

It does. theme.stylize selects a built-in style and passes parameters to it; the common styles listed are rough for a hand-drawn effect, pattern for a pattern fill, and linear- or radial-gradient.

Will the infographic be in my language?

Yes. The skill respects the language of the user's input, so a request written in Chinese produces Chinese text inside the syntax.

Infographic Creator

Run infographic-creator on a Real Diagrams and Charts Task.

Download OpenDesign, import infographic-creator from its SKILL.md link, paste the prompt above, and read the plan before the result.

Download OpenDesign Browse all skills