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
plaininfographic <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 (space-separated, NOT key: value) | - prefix for arrays | Compare templates need exactly 2 root items with children | SWOT needs exactly 4 items (Strengths/Weaknesses/Opportunities/Threats in English) | Quadrant needs exactly 4 items with children | list templates use desc not value | hierarchy-structure max 3 levels | Use desc not description | Use items not steps
⚠️ Common Mistakes (will cause render failure)
plain❌ WRONG — Do NOT use YAML colon syntax: template: list-grid-badge-card ← wrong! no "template:" key title: My Title ← wrong! colons are not allowed items: ← wrong! no colon after items - label: Item One ← wrong! no colon after label description: Some text ← wrong! field is "desc" not "description" value: "100" ← wrong! no colon, and value must be numeric steps: ← wrong! field is "items" not "steps" left: ← wrong! compare uses 2 root items + children label: Option A ← wrong! compare structure is flat items quadrants: ← wrong! quadrant uses 4 items + children ✅ CORRECT — Space-separated key-value, 2-space indent: infographic list-grid-badge-card data title My Title items - label Item One desc Some text value 100
Data Fields
| Field | Description | Example |
|---|---|---|
label | Item title/name (required) | label Q1 Sales |
desc | Description text | desc $1.28B | +20% |
value | Numeric value (charts/funnels only) | value 128 |
time | Time label (timeline templates only) | time Q1 2024 |
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)
infographicinfographic list-grid-badge-card data title Key Metrics desc Annual performance overview items - label Total Revenue desc $1.28B | 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)
Timeline items use time for the time label and label for the milestone name.
infographicinfographic sequence-timeline-simple data title Product Roadmap items - label Research time Q1 2024 desc Research phase - label Design time Q2 2024 desc Design phase - label Development time Q3 2024 desc Development - label Launch time Q4 2024 desc Launch
Funnel Chart (sequence-filter-mesh-simple)
infographicinfographic 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)
infographicinfographic 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)
infographicinfographic 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
infographicinfographic 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)
infographicinfographic 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)
infographicinfographic 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
Priority Matrix (quadrant-quarter-simple-card)
Quadrant templates need exactly 4 root items, each with children. The 4 items represent the four quadrants.
infographicinfographic quadrant-quarter-simple-card data title Priority Matrix items - label Do First desc Urgent & Important children - label Critical bugs - label Client deadlines - label Schedule desc Not Urgent & Important children - label Planning - label Training - label Delegate desc Urgent & Not Important children - label Meetings - label Some emails - label Eliminate desc Not Urgent & Not Important children - label Time wasters - label Busy work
Output Format
markdown```infographic infographic <template-name> data title Your Title items - label Item 1 desc Description here ```
Theme (optional)
Add a theme block as a top-level sibling of data (not nested inside data):
plain# Preset theme (single line) theme dark # Custom palette infographic list-grid-badge-card theme palette #3b82f6 #8b5cf6 #f97316 data title My Title items - label Item 1
Available presets: dark, hand-drawn
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
