Infographic Visualizer
⚠️ CHECK TEMPLATES: Wrong template names WILL cause render failures.
When to Use & Available Templates
✅ Use infographic when:
- Feature list / checklist:
list-grid-badge-card,list-grid-candy-card-lite,list-grid-ribbon-card,list-column-done-list,list-column-vertical-icon-arrow,list-column-simple-vertical-arrow,list-row-horizontal-icon-arrow,list-row-simple-illus,list-sector-plain-text,list-zigzag-down-compact-card,list-zigzag-down-simple,list-zigzag-up-compact-card,list-zigzag-up-simple - Timeline / milestones:
sequence-timeline-simple,sequence-timeline-rounded-rect-node,sequence-timeline-simple-illus - Step-by-step process:
sequence-snake-steps-simple,sequence-snake-steps-compact-card,sequence-snake-steps-underline-text,sequence-stairs-front-compact-card,sequence-stairs-front-pill-badge,sequence-ascending-steps,sequence-ascending-stairs-3d-underline-text,sequence-circular-simple,sequence-pyramid-simple,sequence-mountain-underline-text,sequence-cylinders-3d-simple,sequence-zigzag-steps-underline-text,sequence-zigzag-pucks-3d-simple,sequence-horizontal-zigzag-underline-text,sequence-horizontal-zigzag-simple-illus,sequence-color-snake-steps-horizontal-icon-line - Product roadmap:
sequence-roadmap-vertical-simple,sequence-roadmap-vertical-plain-text - Funnel / conversion:
sequence-filter-mesh-simple,sequence-funnel-simple - A vs B comparison:
compare-binary-horizontal-underline-text-vs,compare-binary-horizontal-simple-fold,compare-binary-horizontal-badge-card-arrow,compare-hierarchy-left-right-circle-node-pill-badge - SWOT analysis:
compare-swot - Priority matrix 2×2:
quadrant-quarter-simple-card,quadrant-quarter-circular,quadrant-simple-illus - Org tree / hierarchy:
hierarchy-tree-tech-style-capsule-item,hierarchy-tree-curved-line-rounded-rect-node,hierarchy-tree-tech-style-badge-card,hierarchy-structure - Pie / donut chart:
chart-pie-plain-text,chart-pie-compact-card,chart-pie-donut-plain-text,chart-pie-donut-pill-badge - Bar / column chart:
chart-bar-plain-text,chart-column-simple,chart-line-plain-text - Word cloud:
chart-wordcloud - Relation / circle:
relation-circle-icon-badge,relation-circle-circular-progress
Syntax Structure
infographic <template-name>
data
title Title
desc Description
items
- label Label
value 12.5
desc Explanation
icon mdi/rocket-launch
theme
palette #3b82f6 #8b5cf6 #f97316
Rules: First line infographic <template-name> (must match template list) | 2-space indentation | key value pairs | - prefix for arrays | Compare templates need exactly 2 root items with children | SWOT needs exactly 4 items (Strengths/Weaknesses/Opportunities/Threats in English) | list templates use desc not value | hierarchy-structure max 3 levels
Data Fields
| Field | Description | Example |
|---|---|---|
label | Item title/name (required) | label Q1 Sales |
desc | Description text | desc 12.8 亿元 | +20% |
value | Numeric value (charts/funnels only) | value 128 |
icon | Icon: mdi/icon-name (Iconify) | icon mdi/star |
illus | Illustration name (unDraw) | illus coding |
children | Nested items (hierarchy/compare) | See examples |
done | Completion status (checklist) | done true |
Core Examples
Feature Grid (list-grid-badge-card)
infographic list-grid-badge-card
data
title Key Metrics
desc Annual performance overview
items
- label Total Revenue
desc 12.8 亿元 | YoY +23.5%
- label New Customers
desc 3280 | YoY +45%
- label Satisfaction
desc 94.6% | Industry leading
- label Market Share
desc 18.5% | Rank #2
Timeline (sequence-timeline-simple)
infographic sequence-timeline-simple
data
title Product Roadmap
items
- label Q1 2024
desc Research phase
- label Q2 2024
desc Design phase
- label Q3 2024
desc Development
- label Q4 2024
desc Launch
Funnel Chart (sequence-filter-mesh-simple)
infographic sequence-filter-mesh-simple
data
title Sales Funnel
items
- label Leads
value 10000
desc Market leads
- label Qualified
value 2500
desc 25% conversion
- label Proposals
value 800
desc 32% conversion
- label Closed
value 328
desc 41% conversion
Checklist (list-column-done-list)
infographic list-column-done-list
data
title Launch Checklist
items
- label Code review completed
done true
- label Tests passing
done true
- label Documentation updated
done false
- label Deploy to production
done false
A vs B Comparison (compare-binary-horizontal-underline-text-vs)
infographic compare-binary-horizontal-underline-text-vs
data
title Cloud vs On-Premise
items
- label Cloud
children
- label Scalable on demand
- label Pay as you go
- label On-Premise
children
- label Full control
- label One-time cost
SWOT Analysis (compare-swot)
Must have exactly 4 items with English labels: Strengths, Weaknesses, Opportunities, Threats
infographic compare-swot
data
title Strategic Analysis
items
- label Strengths
children
- label Strong R&D
- label Complete supply chain
- label Weaknesses
children
- label Limited brand awareness
- label High costs
- label Opportunities
children
- label Digital transformation
- label Emerging markets
- label Threats
children
- label Intense competition
- label Market changes
Pie/Donut Chart (chart-pie-donut-plain-text)
infographic chart-pie-donut-plain-text
data
title Revenue by Product
items
- label Enterprise Software
value 42
- label Cloud Services
value 28
- label Hardware
value 18
- label Services
value 12
Organization Tree (hierarchy-tree-tech-style-capsule-item)
infographic hierarchy-tree-tech-style-capsule-item
data
title Organization Structure
items
- label CEO
children
- label VP Engineering
children
- label Frontend Team
- label Backend Team
- label VP Product
children
- label Design
- label Research
Output Format
```infographic
infographic <template-name>
data
title Your Title
items
- label Item 1
desc Description here
```
Related Files
For detailed syntax, templates, and examples, refer to references below:
- syntax.md — Complete syntax specification and rules
- templates.md — All available templates with descriptions
- examples.md — Full examples for each template category