|
1
|
--- |
|
2
|
name: infographic-builder |
|
3
|
description: Build infographics that visualize data, processes, comparisons, and timelines. |
|
4
|
--- |
|
5
|
|
|
6
|
# Infographic Builder |
|
7
|
|
|
8
|
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. |
|
9
|
|
|
10
|
## Infographic = Information Structure + Visual Expression |
|
11
|
|
|
12
|
## When to Use |
|
13
|
|
|
14
|
- The user asks to "create an infographic" or "make a visual summary" |
|
15
|
- The user wants to turn data, stats, or a process into a visual one-pager |
|
16
|
|
|
17
|
- The user asks for a "data graphic", "visual explainer", or "information poster" |
|
18
|
- The user provides data or content and asks to "visualize" it in a static format |
|
19
|
|
|
20
|
- The user asks for a timeline, comparison chart, process flow, or statistical summary as a designed visual (not an interactive dashboard) |
|
21
|
|
|
22
|
Do NOT use this skill when: |
|
23
|
|
|
24
|
- The user wants an interactive dashboard (use `data-visualization` instead) |
|
25
|
- The user wants a multi-slide presentation (use `slides` instead) |
|
26
|
|
|
27
|
- The user just wants a simple chart embedded in an app (use a charting library directly) |
|
28
|
|
|
29
|
## Two Approaches |
|
30
|
|
|
31
|
### Primary: AntV Infographic (DSL-based) |
|
32
|
|
|
33
|
Use this for infographics where the content maps cleanly to a **single visualization type** — a list, a sequence, a comparison, a hierarchy, a chart, or a relationship diagram. AntV Infographic provides 60+ pre-built templates with a simple DSL syntax. It's fast and produces polished results. Read `antv-syntax.md` for the full DSL specification and template list. |
|
34
|
|
|
35
|
### Fallback: React Component (Mockup Sandbox) |
|
36
|
|
|
37
|
Use this when the infographic needs **multiple visualization types combined** (e.g., summary stats + bar chart + pie chart + detailed table), when the user provides raw data that needs analysis and categorization before visualization (e.g., bank transactions, CSV data), or when the layout doesn't fit any single AntV template. Read `react-fallback.md` for this workflow. |
|
38
|
|
|
39
|
#### How to choose |
|
40
|
|
|
41
|
- Content fits one template category (e.g., "show a process flow", "make a SWOT analysis") → **AntV** |
|
42
|
- Content is raw data needing analysis, or requires multiple chart types in one visual → **React fallback** |
|
43
|
|
|
44
|
- User wants a completely bespoke design or pixel-level control → **React fallback** |
|
45
|
|
|
46
|
## Infographic Types → Template Categories |
|
47
|
|
|
48
|
| Content Type | Best For | AntV Template Category | |
|
49
|
|
|
50
|
|-------------|----------|----------------------| |
|
51
|
|
|
52
|
| **Statistical** | Numbers, percentages, survey results | `chart-*` (pie, bar, column, line) | |
|
53
|
|
|
54
|
| **Process / Flow** | Step-by-step workflows, how-tos | `sequence-*` (steps, funnel, pyramid, stairs) | |
|
55
|
|
|
56
|
| **Comparison** | Side-by-side analysis, pros/cons, SWOT | `compare-*` (binary, swot, quadrant) | |
|
57
|
|
|
58
|
| **Timeline** | Historical events, project phases, roadmaps | `sequence-timeline-*`,`sequence-roadmap-*` | |
|
59
|
|
|
60
|
| **Hierarchical** | Org structures, category breakdowns, mind maps | `hierarchy-*` (tree, mindmap, structure) | |
|
61
|
|
|
62
|
| **List / Informational** | Tips, facts, feature lists | `list-*` (grid, row, column, zigzag) | |
|
63
|
|
|
64
|
| **Relationships** | Flow diagrams, dependency graphs | `relation-*` (dagre flow) | |
|
65
|
|
|
66
|
| **Word Cloud** | Keyword frequency, topic prominence | `chart-wordcloud` | |
|
67
|
|
|
68
|
| **Multi-section summary**| Financial reports, data analysis, dashboards |**React fallback** (no single AntV template fits) | |
|
69
|
|
|
70
|
## AntV Infographic Workflow |
|
71
|
|
|
72
|
### Step 1: Understand User Requirements |
|
73
|
|
|
74
|
Before creating an infographic, understand the user's needs and the information they want to express. |
|
75
|
|
|
76
|
- If the user provides a clear content description, break it down into a clear and concise structure. |
|
77
|
- Otherwise, ask for clarification (e.g., "What data or content should the infographic show?", "Do you have a preference for the visual style?") |
|
78
|
|
|
79
|
Extract: |
|
80
|
|
|
81
|
- **Title and subtitle** — the main headline and supporting context |
|
82
|
- **Data points** — numbers, labels, descriptions, icons for each item |
|
83
|
|
|
84
|
- **Sections/items** — logical groupings (3-7 sections work best) |
|
85
|
- **Source attribution** — where the data comes from (if applicable) |
|
86
|
|
|
87
|
- **Style preferences** — colors, dark/light theme, hand-drawn style (if any) |
|
88
|
|
|
89
|
Do not invent data or placeholder text. If the user provides incomplete content, ask for the missing pieces. |
|
90
|
|
|
91
|
**Language rule:** Always respect the language of user input. If the user inputs in Chinese, all text in the syntax must also be in Chinese. Same for any other language. |
|
92
|
|
|
93
|
### Step 2: Select Template and Write DSL |
|
94
|
|
|
95
|
Choose the right template from the available templates list (see `references/antv-syntax.md` for the full list). |
|
96
|
|
|
97
|
Template selection guide: |
|
98
|
|
|
99
|
- Strict sequence (process/steps/development trend) → `sequence-*` |
|
100
|
- Timeline → `sequence-timeline-*` |
|
101
|
|
|
102
|
- Staircase diagram → `sequence-stairs-*` |
|
103
|
- Roadmap → `sequence-roadmap-vertical-*` |
|
104
|
|
|
105
|
- Zigzag path → `sequence-zigzag-*` |
|
106
|
- Circular progress → `sequence-circular-simple` |
|
107
|
|
|
108
|
- Pyramid → `sequence-pyramid-simple` |
|
109
|
- Funnel → `sequence-funnel-simple` |
|
110
|
|
|
111
|
- Opinion listing → `list-row-*`or`list-column-*` |
|
112
|
- Grid list (key points) → `list-grid-*` |
|
113
|
|
|
114
|
- Binary comparison (pros/cons) → `compare-binary-*` |
|
115
|
- SWOT analysis → `compare-swot` |
|
116
|
|
|
117
|
- Quadrant analysis → `compare-quadrant-*` |
|
118
|
- Hierarchical structure (tree diagram) → `hierarchy-tree-*` |
|
119
|
|
|
120
|
- Mind map → `hierarchy-mindmap-*` |
|
121
|
- Org chart / structure → `hierarchy-structure` |
|
122
|
|
|
123
|
- Data charts (bar, pie, line) → `chart-*` |
|
124
|
- Relationship / flow diagram → `relation-*` |
|
125
|
|
|
126
|
- Word cloud → `chart-wordcloud` |
|
127
|
|
|
128
|
Write the AntV Infographic DSL syntax. The syntax rules are documented in `references/antv-syntax.md` — read it before writing any DSL. |
|
129
|
|
|
130
|
Key syntax rules: |
|
131
|
|
|
132
|
- First line must be `infographic <template-name>` |
|
133
|
- Use `data`/`theme` blocks with two-space indentation |
|
134
|
|
|
135
|
- Key-value pairs use `key space value`; arrays use`-` as entry prefix |
|
136
|
- Main data field depends on template category: |
|
137
|
|
|
138
|
- `list-*`→`lists` |
|
139
|
- `sequence-*`→`sequences` |
|
140
|
|
|
141
|
- `compare-*`→`compares` |
|
142
|
- `hierarchy-structure`→`items` |
|
143
|
|
|
144
|
- `hierarchy-*`(others) → single`root`with nested`children` |
|
145
|
- `relation-*`→`nodes`+`relations` |
|
146
|
|
|
147
|
- `chart-*`→`values` |
|
148
|
- Use `items` as fallback when uncertain |
|
149
|
|
|
150
|
### Step 3: Render as HTML File |
|
151
|
|
|
152
|
Create a complete HTML file using this template: |
|
153
|
|
|
154
|
```html |
|
155
|
|
|
156
|
<!DOCTYPE html> |
|
157
|
|
|
158
|
<html lang="en"> |
|
159
|
|
|
160
|
<head> |
|
161
|
|
|
162
|
<meta charset="utf-8" /> |
|
163
|
|
|
164
|
<title>{title} - Infographic</title> |
|
165
|
|
|
166
|
<style> |
|
167
|
|
|
168
|
* { margin: 0; padding: 0; box-sizing: border-box; } |
|
169
|
|
|
170
|
html, body { width: 100%; height: 100%; } |
|
171
|
|
|
172
|
#container { width: 100%; height: 100%; } |
|
173
|
|
|
174
|
</style> |
|
175
|
|
|
176
|
</head> |
|
177
|
|
|
178
|
<body> |
|
179
|
|
|
180
|
<div id="container"></div> |
|
181
|
|
|
182
|
<script src="https://unpkg.com/@antv/infographic@latest/dist/infographic.min.js"></script> |
|
183
|
|
|
184
|
<script> |
|
185
|
|
|
186
|
const infographic = new AntVInfographic.Infographic({ |
|
187
|
|
|
188
|
container: '#container', |
|
189
|
|
|
190
|
width: '100%', |
|
191
|
|
|
192
|
height: '100%', |
|
193
|
|
|
194
|
}); |
|
195
|
|
|
196
|
document.fonts?.ready.then(() => { |
|
197
|
|
|
198
|
infographic.render(`{syntax}`); |
|
199
|
|
|
200
|
}).catch((error) => { |
|
201
|
|
|
202
|
console.error('Error waiting for fonts to load:', error); |
|
203
|
|
|
204
|
infographic.render(`{syntax}`); |
|
205
|
|
|
206
|
}); |
|
207
|
|
|
208
|
</script> |
|
209
|
|
|
210
|
</body> |
|
211
|
|
|
212
|
</html> |
|
213
|
|
|
214
|
``` |
|
215
|
|
|
216
|
Replace `{title}`with the actual title and`{syntax}` with the AntV Infographic DSL. |
|
217
|
|
|
218
|
Save the file as `exports/<title-slug>-infographic.html` (use kebab-case for the filename). |
|
219
|
|
|
220
|
### Step 4: Export as Static Image |
|
221
|
|
|
222
|
To capture the HTML file as a static image: |
|
223
|
|
|
224
|
1. Copy the HTML file into the mockup sandbox's public directory (`artifacts/mockup-sandbox/public/`) so it's accessible via the dev server. |
|
225
|
2. Restart the mockup sandbox workflow so Vite picks up the new public file. |
|
226
|
|
|
227
|
3. Wait a few seconds for the server to restart and the CDN script to load. |
|
228
|
4. Screenshot the page: |
|
229
|
|
|
230
|
```javascript |
|
231
|
|
|
232
|
screenshot({ |
|
233
|
|
|
234
|
artifact_dir_name: "mockup-sandbox", |
|
235
|
|
|
236
|
path: "/<filename>.html", |
|
237
|
|
|
238
|
viewport_size: [1200, 900], |
|
239
|
|
|
240
|
save_to: "exports/<title-slug>-infographic.jpg" |
|
241
|
|
|
242
|
}); |
|
243
|
|
|
244
|
``` |
|
245
|
|
|
246
|
**Important:** The `path`parameter is relative to the artifact's preview path — the tool automatically prepends`/__mockup`. So use`/<filename>.html`, not`/__mockup/<filename>.html`. |
|
247
|
|
|
248
|
If the screenshot approach has issues with CDN loading (blank page, missing fonts), the HTML file itself is the deliverable — present it to the user and mention they can open it in any browser to view and export as SVG. |
|
249
|
|
|
250
|
### Step 5: Deliver to User |
|
251
|
|
|
252
|
Present results: |
|
253
|
|
|
254
|
- The exported `.jpg`image file via`present_asset` (primary deliverable) |
|
255
|
- Mention the HTML file path and that it can be opened in a browser for full-resolution SVG export |
|
256
|
|
|
257
|
- Ask: "Let me know if you'd like to adjust the template, colors, or content." |
|
258
|
|
|
259
|
## React Fallback Workflow (Summary) |
|
260
|
|
|
261
|
When using the React fallback (see `references/react-fallback.md` for full details): |
|
262
|
|
|
263
|
1. **Analyze the data** — categorize, aggregate, and compute totals/percentages before building |
|
264
|
2. **Create the component** at `artifacts/mockup-sandbox/src/components/mockups/infographics/<Name>.tsx` |
|
265
|
|
|
266
|
3. **Restart the mockup sandbox workflow** — the Vite plugin needs to discover the new file. Always restart after creating a new component file. |
|
267
|
4. **Wait 3-5 seconds** after restart for the dev server and component registry to settle |
|
268
|
|
|
269
|
5. **Screenshot** using the correct path format: |
|
270
|
|
|
271
|
```javascript |
|
272
|
|
|
273
|
screenshot({ |
|
274
|
|
|
275
|
artifact_dir_name: "mockup-sandbox", |
|
276
|
|
|
277
|
path: "/preview/infographics/<ComponentName>", |
|
278
|
|
|
279
|
viewport_size: [1050, 1600], |
|
280
|
|
|
281
|
save_to: "exports/<name>-infographic.jpg" |
|
282
|
|
|
283
|
}); |
|
284
|
|
|
285
|
``` |
|
286
|
|
|
287
|
**Path rules:** The `path`must NOT include`/__mockup`— the screenshot tool prepends the artifact's preview path automatically. Use`/preview/infographics/<ComponentName>`. |
|
288
|
|
|
289
|
**Viewport sizing:** Start with a tall viewport (1500-1600px height) to capture the full infographic. If content is cut off at the bottom, increase the height and retake. It's easier to start tall and trim than to guess short and miss content. |
|
290
|
|
|
291
|
1. **Present** the exported image via `present_asset` |
|
292
|
|
|
293
|
## Tips for Great Infographics |
|
294
|
|
|
295
|
- **Less is more.** Remove anything that doesn't help the audience understand the key message. Every element should earn its space. |
|
296
|
- **One key takeaway.** The best infographics have a single dominant insight that the viewer gets within 3 seconds. |
|
297
|
|
|
298
|
- **Visual encoding over text.** Use size, color, position, and icons to convey meaning instead of long text blocks. |
|
299
|
- **Reading flow.** Guide the eye with clear visual hierarchy — numbering, arrows, and color progression all help. |
|
300
|
|
|
301
|
- **Contrast for emphasis.** Make the most important numbers visually dominant — large, bold, colored. |
|
302
|
- **Consistent visual language.** Pick an icon style, color palette, and typographic scale — then stick with them throughout. |
|
303
|
|
|
304
|
- **Use themes.** AntV supports dark themes, custom palettes, hand-drawn style (`stylize rough`), pattern fills, and gradients. Use them to match the user's brand or preferences. |
|
305
|
|
|
306
|
## Checklist Before Delivering |
|
307
|
|
|
308
|
- [ ] All data and content from the user is accurately represented (no invented data) |
|
309
|
- [ ] The infographic uses the most appropriate approach (AntV for single-type, React for multi-type) |
|
310
|
|
|
311
|
- [ ] Text language matches the user's input language |
|
312
|
- [ ] Theme/palette matches any brand preferences the user specified |
|
313
|
|
|
314
|
- [ ] The exported image captures the full infographic — no cut-off content at the bottom |
|
315
|
- [ ] Source attribution is included if the user provided data sources |
|
316
|
|
|
317
|
- [ ] The image file has been presented to the user via `present_asset` |