// Create beautiful infographics based on the given text content. Use this when users request creating infographics.
[HINT] Download the complete skill directory including SKILL.md and all related files
| name | infographic-creator |
| description | Create beautiful infographics based on the given text content. Use this when users request creating infographics. |
An infographic (Infographic) transforms data, information, and knowledge into perceivable visual language. It combines visual design with data visualization, using intuitive symbols to compress complex information and help audiences quickly understand and remember key points.
Infographic = Information Structure + Visual Expression
This is a task that utilizes AntV Infographic to create visual infographics.
Before you start the task, you need to understand the AntV Infographic Syntax specification, including template lists, data structures, themes, and more.
AntV Infographic Syntax is a mermaid-like DSL for describing infographic rendering configuration. It uses indentation to describe information, has strong robustness, and makes it easy to render infographics through AI streaming output. It mainly contains the following information:
e.g.:
infographic list-row-horizontal-icon-arrow
data
title Title
desc Description
items
- label Label
value 12.5
desc Explanation
icon mdi/rocket-launch
theme
palette #3b82f6 #8b5cf6 #f97316
The first line starts with infographic <template-name>, and the template is selected from the list below (the Available Templates section).
Use blocks to describe data / theme, with two-space indentation
Key-value pairs are expressed as "key value", and arrays are expressed as "-" items
The icon value is provided directly with keywords or icon names (such as mdi/chart-line)
data should contain title/desc/items (which can be omitted according to semantics)
data.items should contain label(string)/value(number)/desc(string)/icon(string)/children(object), where children represents the hierarchical structure
For comparison templates (template names starting with compare-), construct exactly two root nodes and place every comparison item under them as children to keep the hierarchy clear
theme field is for customizing the theme of the infographic, including palette, font, etc.
e.g. dark theme with custom palette:
infographic list-row-simple-horizontal-arrow
theme dark
palette
- #61DDAA
- #F6BD16
- #F08BB4
data
items
- label Step 1
desc Start
- label Step 2
desc In Progress
- label Step 3
desc Complete
Use theme.base.text.font-family to specify fonts, such as the handwriting style '851tegakizatsu'
Use theme.stylize to select built-in styles and pass parameters
Common stylization types include:
rough: Apply hand-drawn style to make graphics look like they were drawn by hand.pattern: Apply pattern fill to add repeated pattern effects to graphics.linear-gradient / radial-gradient: Apply gradient fill to add linear or radial gradient effects to graphics.e.g: Hand-drawn style (rough):
infographic list-row-simple-horizontal-arrow
theme
stylize rough
base
text
font-family 851tegakizatsu
data
items
- label Step 1
desc Start
- label Step 2
desc In Progress
- label Step 3
desc Complete
Typescript definition for data field:
interface Data {
title?: string;
desc?: string;
items: ItemDatum[];
[key: string]: any;
}
interface ItemDatum {
icon?: string;
label?: string;
desc?: string;
value?: number;
illus?: string;
children?: ItemDatum[];
[key: string]: any;
}
Icons (from Iconify):
<collection>/<icon-name>, e.g., mdi/rocket-launchmdi/* - Material Design Icons (most commonly used)fa/* - Font Awesomebi/* - Bootstrap Iconsheroicons/* - Heroiconsmdi/code-tags, mdi/database, mdi/api, mdi/cloudmdi/chart-line, mdi/briefcase, mdi/currency-usdmdi/check-circle, mdi/arrow-right, mdi/cogmdi/account, mdi/account-group, mdi/shield-accountIllustrations (from unDraw):
codingcoding, programmer, server, cloud-syncbusiness-plan, team-work, analyticsabstract, building-blocks, connectionUsage Tips:
sequence-* and list-* templates → use iconillusTemplate Selection Guidelines:
sequence-* series
sequence-timeline-*sequence-stairs-*sequence-roadmap-vertical-*sequence-zigzag-*sequence-circular-simplesequence-color-snake-steps-*sequence-pyramid-simplelist-row-* series or list-column-* seriescompare-binary-* seriescompare-swothierarchy-tree-*chart-* seriesquadrant-* serieslist-grid-* seriesrelation-circle-*chart-wordcloudDraw an information graph of the Internet technology evolution
infographic list-row-horizontal-icon-arrow
data
title Internet Technology Evolution
desc From Web 1.0 to AI era, key milestones
items
- time 1991
label Web 1.0
desc Tim Berners-Lee published the first website, opening the Internet era
icon mdi/web
- time 2004
label Web 2.0
desc Social media and user-generated content become mainstream
icon mdi/account-multiple
- time 2007
label Mobile
desc iPhone released, smartphone changes the world
icon mdi/cellphone
- time 2015
label Cloud Native
desc Containerization and microservices architecture are widely used
icon mdi/cloud
- time 2020
label Low Code
desc Visual development lowers the technology threshold
icon mdi/application-brackets
- time 2023
label AI Large Model
desc ChatGPT ignites the generative AI revolution
icon mdi/brain
infographic sequence-horizontal-zigzag-simple-illus
data
title Product Development Phases
desc Key stages in our development process
items
- label Research
desc Understanding user needs
illus user-research
- label Design
desc Creating user experience
illus design-thinking
- label Development
desc Building the product
illus coding
- label Launch
desc Going to market
illus launch-day
Before creating the infographic, it is important to understand the user's requirements and the information they want to present. This will help in defining the template and the data structure.
If the user provides a clear and concise description of the information they want to present, break down the information into a clear and concise structure.
Otherwise, ask the user for clarification (e.g., "Please provide a clear and concise description of the information you want to present.", "Which template would you prefer to use?")
{syntax}.CRITICAL NOTE: Must respect the language of the user's input content. e.g. if the user's input content is in Chinese, the text content in infographic syntax must be in Chinese.
Once you have the final AntV Infographic Syntax, you can generate the complete infographic HTML file by following these steps:
{title} - Infographichttps://unpkg.com/@antv/infographic@latest/dist/infographic.min.jscontainer where the infographic will renderwidth: '100%' and height: '100%'{title} with the actual title{syntax} with the actual AntV Infographic Syntaxconst svgDataUrl = await infographic.toDataURL({ type: 'svg' });The Html template you can follow:
<div id="container"></div>
<script src="https://unpkg.com/@antv/infographic@latest/dist/infographic.min.js"></script>
<script>
// Resource Loader Script
// Use the following resource loader script to handle icon and illustration loading:
const svgTextCache = new Map();
const pendingRequests = new Map();
AntVInfographic.registerResourceLoader(async (config) => {
const { data, scene } = config;
try {
const key = `${scene}::${data}`;
let svgText;
// 1. Check cache
if (svgTextCache.has(key)) {
svgText = svgTextCache.get(key);
}
// 2. Check if request is already in progress
else if (pendingRequests.has(key)) {
svgText = await pendingRequests.get(key);
}
// 3. Make new request
else {
const fetchPromise = (async () => {
try {
let url;
if (scene === 'icon') {
url = `https://api.iconify.design/${data}.svg`;
} else if (scene === 'illus') {
url = `https://raw.githubusercontent.com/balazser/undraw-svg-collection/refs/heads/main/svgs/${data}.svg`;
} else return null;
if (!url) return null;
const response = await fetch(url, { referrerPolicy: 'no-referrer' });
if (!response.ok) {
console.error(`HTTP ${response.status}: Failed to load ${url}`);
return null;
}
const text = await response.text();
if (!text || !text.trim().startsWith('<svg')) {
console.error(`Invalid SVG content from ${url}`);
return null;
}
svgTextCache.set(key, text);
return text;
} catch (fetchError) {
console.error(`Failed to fetch resource ${key}:`, fetchError);
return null;
}
})();
pendingRequests.set(key, fetchPromise);
try {
svgText = await fetchPromise;
} catch (error) {
pendingRequests.delete(key);
console.error(`Error loading resource ${key}:`, error);
return null;
} finally {
pendingRequests.delete(key);
}
}
if (!svgText) {
return null;
}
const resource = AntVInfographic.loadSVGResource(svgText);
if (!resource) {
console.error(`loadSVGResource returned null for ${key}`);
svgTextCache.delete(key);
return null;
}
return resource;
} catch (error) {
console.error('Unexpected error in resource loader:', error);
return null;
}
});
</script>
<script>
const infographic = new AntVInfographic.Infographic({
container: '#container',
width: '100%',
height: '100%',
});
infographic.render(`{syntax}`);
document.fonts?.ready.then(() => {
infographic.render(`{syntax}`);
}).catch((error) => console.error('Error waiting for fonts to load:', error));
</script>
Write the HTML file named <title>-infographic.html using the Write tool
Display to the user:
Note: The HTML file must include: