infographic-creator

Name: infographic-creator
Author: antvis

433stars35forks

How to install infographic-creator?

antvis/chart-visualization-skills/infographic-creator

$npx -y skills add antvis/chart-visualization-skills --skill infographic-creator

Installs into the current project.

Summary

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

Files · 1

View on GitHub

SKILL.md

1	Infographics convert data, information, and knowledge into perceptible visual language. They combine visual design with data visualization, compressing complex information with intuitive symbols to help audiences quickly understand and remember key points.
2
3	`Infographic = Information Structure + Visual Expression`
4
5	This task uses [AntV Infographic](https://infographic.antv.vision/) to create visual infographics.
6
7	Before starting the task, you need to understand the AntV Infographic syntax specifications, including template list, data structure, themes, etc.
8
9	## Specifications
10
11	### AntV Infographic Syntax
12
13	AntV Infographic syntax is a custom DSL used to describe infographic rendering configurations. It uses indentation to describe information, has strong robustness, and is convenient for AI streaming output and infographic rendering. It mainly contains the following information:
14
15	1. template: Use templates to express the text information structure.
16	2. data: Infographic data, including title, desc, data items, etc. Data items typically contain fields such as label, desc, icon, etc.
17	3. theme: Theme contains style configurations such as palette, font, etc.
18
19	For example:
20
21	```plain
22	infographic list-row-horizontal-icon-arrow
23	data
24	title Title
25	desc Description
26	lists
27	- label Label
28	value 12.5
29	desc Explanation
30	icon document text
31	theme
32	palette #3b82f6 #8b5cf6 #f97316
33	```
34
35	### Syntax Specifications
36
37	- The first line must be `infographic <template-name>`, template selected from the list below (see "Available Templates" section).
38	- Use `data` / `theme` blocks, with two-space indentation within blocks.
39	- Key-value pairs use "key space value"; arrays use `-` as entry prefix.
40	- icon uses icon keywords (e.g., `star fill`).
41	- `data` should contain title/desc + template-specific main data field (not necessarily `items`).
42	- Main data field selection (use only one, avoid mixing):
43	- `list-*` → `lists`
44	- `sequence-*` → `sequences` (optional `order asc\|desc`)
45	- `compare-*` → `compares` (supports `children` for grouped comparisons), can contain multiple comparison items
46	- `hierarchy-structure` → `items` (each item corresponds to an independent hierarchy, each level can contain sub-items, can be nested up to 3 levels)
47	- `hierarchy-*` → single `root` (tree structure, nested through `children`);
48	- `relation-*` → `nodes` + `relations`; simple relation diagrams can omit `nodes`, using arrow syntax in relations
49	- `chart-*` → `values` (numeric statistics, optional `category`)
50	- Use `items` as fallback when uncertain
51	- `compare-binary-` / `compare-hierarchy-left-right-` binary templates: must have two root nodes, all comparison items hang under these two root nodes' children
52	- `hierarchy-*`: use single `root`, nested through `children` (do not repeat `root`)
53	- `theme` is used to customize themes (palette, font, etc.)
54	For example: dark theme + custom color scheme
55	```plain
56	infographic list-row-horizontal-icon-arrow
57	theme dark
58	palette
59	- #61DDAA
60	- #F6BD16
61	- #F08BB4
62	```
63	- Use `theme.base.text.font-family` to specify font, such as handwriting style `851tegakizatsu`
64	- Use `theme.stylize` to select built-in styles and pass parameters
65	Common styles:
66	- `rough`: hand-drawn effect
67	- `pattern`: pattern fill
68	- `linear-gradient` / `radial-gradient`: linear/radial gradient
69
70	For example: hand-drawn style (rough)
71
72	```plain
73	infographic list-row-horizontal-icon-arrow
74	theme
75	stylize rough
76	base
77	text
78	font-family 851tegakizatsu
79	```
80
81	- Do not output JSON, Markdown, or explanatory text
82
83	### Data Syntax Examples
84
85	Data syntax examples by template category (use corresponding fields, avoid adding `items` simultaneously):
86
87	- `list-*` templates
88
89	```plain
90	infographic list-grid-badge-card
91	data
92	title Feature List
93	lists
94	- label Fast
95	icon flash fast
96	- label Secure
97	icon secure shield check
98	```
99
100	- `sequence-*` templates
101
102	```plain
103	infographic sequence-steps-simple
104	data
105	sequences
106	- label Step 1
107	- label Step 2
108	- label Step 3
109	order asc
110	```
111
112	- `hierarchy-*` templates
113
114	```plain
115	infographic hierarchy-structure
116	data
117	root
118	label Company
119	children
120	- label Dept A
121	- label Dept B
122	```
123
124	- `compare-*` templates
125
126	```plain
127	infographic compare-swot
128	data
129	compares
130	- label Strengths
131	children
132	- label Strong brand
133	- label Loyal users
134	- label Weaknesses
135	children
136	- label High cost
137	- label Slow release
138	```
139
140	Quadrant diagram
141
142	```plain
143	infographic compare-quadrant-quarter-simple-card
144	data
145	compares
146	- label High Impact & Low Effort
147	- label High Impact & High Effort
148	- label Low Impact & Low Effort
149	- label Low Impact & High Effort
150	```
151
152	- `chart-*` templates
153
154	```plain
155	infographic chart-column-simple
156	data
157	values

antvisPublisher · 12 listings

Preview

antvis/chart-visualization-skills

Infographics convert data, information, and knowledge into perceptible visual language. They combine visual design with data visualization, compressing complex

`Infographic = Information Structure + Visual Expression`

This task uses [AntV Infographic](https://infographic.antv.vision/) to create visual infographics.

Before starting the task, you need to understand the AntV Infographic syntax specifications, including template list, data structure, themes, etc.

Repoantvis/chart-visualization-skills

LicenseMIT

TypeSkills

CategoryDesign

UpdatedJul 2026

Repo stars433

First seenJul 22, 2026

People who liked this also viewed

6 picks

Type

infographic-creator

433stars35forks

View on GitHub

How to install infographic-creator?

antvis/chart-visualization-skills/infographic-creator

$npx -y skills add antvis/chart-visualization-skills --skill infographic-creator

Installs into the current project.

Summary

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

Files · 1

View on GitHub

SKILL.md

1	Infographics convert data, information, and knowledge into perceptible visual language. They combine visual design with data visualization, compressing complex information with intuitive symbols to help audiences quickly understand and remember key points.
2
3	`Infographic = Information Structure + Visual Expression`
4
5	This task uses [AntV Infographic](https://infographic.antv.vision/) to create visual infographics.
6
7	Before starting the task, you need to understand the AntV Infographic syntax specifications, including template list, data structure, themes, etc.
8
9	## Specifications
10
11	### AntV Infographic Syntax
12
13	AntV Infographic syntax is a custom DSL used to describe infographic rendering configurations. It uses indentation to describe information, has strong robustness, and is convenient for AI streaming output and infographic rendering. It mainly contains the following information:
14
15	1. template: Use templates to express the text information structure.
16	2. data: Infographic data, including title, desc, data items, etc. Data items typically contain fields such as label, desc, icon, etc.
17	3. theme: Theme contains style configurations such as palette, font, etc.
18
19	For example:
20
21	```plain
22	infographic list-row-horizontal-icon-arrow
23	data
24	title Title
25	desc Description
26	lists
27	- label Label
28	value 12.5
29	desc Explanation
30	icon document text
31	theme
32	palette #3b82f6 #8b5cf6 #f97316
33	```
34
35	### Syntax Specifications
36
37	- The first line must be `infographic <template-name>`, template selected from the list below (see "Available Templates" section).
38	- Use `data` / `theme` blocks, with two-space indentation within blocks.
39	- Key-value pairs use "key space value"; arrays use `-` as entry prefix.
40	- icon uses icon keywords (e.g., `star fill`).
41	- `data` should contain title/desc + template-specific main data field (not necessarily `items`).
42	- Main data field selection (use only one, avoid mixing):
43	- `list-*` → `lists`
44	- `sequence-*` → `sequences` (optional `order asc\|desc`)
45	- `compare-*` → `compares` (supports `children` for grouped comparisons), can contain multiple comparison items
46	- `hierarchy-structure` → `items` (each item corresponds to an independent hierarchy, each level can contain sub-items, can be nested up to 3 levels)
47	- `hierarchy-*` → single `root` (tree structure, nested through `children`);
48	- `relation-*` → `nodes` + `relations`; simple relation diagrams can omit `nodes`, using arrow syntax in relations
49	- `chart-*` → `values` (numeric statistics, optional `category`)
50	- Use `items` as fallback when uncertain
51	- `compare-binary-` / `compare-hierarchy-left-right-` binary templates: must have two root nodes, all comparison items hang under these two root nodes' children
52	- `hierarchy-*`: use single `root`, nested through `children` (do not repeat `root`)
53	- `theme` is used to customize themes (palette, font, etc.)
54	For example: dark theme + custom color scheme
55	```plain
56	infographic list-row-horizontal-icon-arrow
57	theme dark
58	palette
59	- #61DDAA
60	- #F6BD16
61	- #F08BB4
62	```
63	- Use `theme.base.text.font-family` to specify font, such as handwriting style `851tegakizatsu`
64	- Use `theme.stylize` to select built-in styles and pass parameters
65	Common styles:
66	- `rough`: hand-drawn effect
67	- `pattern`: pattern fill
68	- `linear-gradient` / `radial-gradient`: linear/radial gradient
69
70	For example: hand-drawn style (rough)
71
72	```plain
73	infographic list-row-horizontal-icon-arrow
74	theme
75	stylize rough
76	base
77	text
78	font-family 851tegakizatsu
79	```
80
81	- Do not output JSON, Markdown, or explanatory text
82
83	### Data Syntax Examples
84
85	Data syntax examples by template category (use corresponding fields, avoid adding `items` simultaneously):
86
87	- `list-*` templates
88
89	```plain
90	infographic list-grid-badge-card
91	data
92	title Feature List
93	lists
94	- label Fast
95	icon flash fast
96	- label Secure
97	icon secure shield check
98	```
99
100	- `sequence-*` templates
101
102	```plain
103	infographic sequence-steps-simple
104	data
105	sequences
106	- label Step 1
107	- label Step 2
108	- label Step 3
109	order asc
110	```
111
112	- `hierarchy-*` templates
113
114	```plain
115	infographic hierarchy-structure
116	data
117	root
118	label Company
119	children
120	- label Dept A
121	- label Dept B
122	```
123
124	- `compare-*` templates
125
126	```plain
127	infographic compare-swot
128	data
129	compares
130	- label Strengths
131	children
132	- label Strong brand
133	- label Loyal users
134	- label Weaknesses
135	children
136	- label High cost
137	- label Slow release
138	```
139
140	Quadrant diagram
141
142	```plain
143	infographic compare-quadrant-quarter-simple-card
144	data
145	compares
146	- label High Impact & Low Effort
147	- label High Impact & High Effort
148	- label Low Impact & Low Effort
149	- label Low Impact & High Effort
150	```
151
152	- `chart-*` templates
153
154	```plain
155	infographic chart-column-simple
156	data
157	values

antvisPublisher · 12 listings

Preview

antvis/chart-visualization-skills

Infographics convert data, information, and knowledge into perceptible visual language. They combine visual design with data visualization, compressing complex

`Infographic = Information Structure + Visual Expression`

This task uses [AntV Infographic](https://infographic.antv.vision/) to create visual infographics.

Before starting the task, you need to understand the AntV Infographic syntax specifications, including template list, data structure, themes, etc.

Repoantvis/chart-visualization-skills

LicenseMIT

TypeSkills

CategoryDesign

UpdatedJul 2026

Repo stars433

First seenJul 22, 2026

People who liked this also viewed

6 picks

Type