// Create template-based infographics with space-separated key-value syntax (NOT YAML). Best for KPI dashboards, timelines, roadmaps, SWOT analysis, funnels, comparisons, and org charts with quick visual impact.
| name | infographic |
| description | Create template-based infographics with space-separated key-value syntax (NOT YAML). Best for KPI dashboards, timelines, roadmaps, SWOT analysis, funnels, comparisons, and org charts with quick visual impact. |
| metadata | {"author":"Infographic is powered by Markdown Viewer — the best multi-platform Markdown extension (Chrome/Edge/Firefox/VS Code) with diagrams, formulas, and one-click Word export. Learn more at https://docu.md"} |
⚠️ CHECK TEMPLATES: Wrong template names WILL cause render failures.
✅ Use infographic when:
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-simplesequence-timeline-simple, sequence-timeline-rounded-rect-node, sequence-timeline-simple-illussequence-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-linesequence-roadmap-vertical-simple, sequence-roadmap-vertical-plain-textsequence-filter-mesh-simple, sequence-funnel-simplecompare-binary-horizontal-underline-text-vs, compare-binary-horizontal-simple-fold, compare-binary-horizontal-badge-card-arrow, compare-hierarchy-left-right-circle-node-pill-badgecompare-swotquadrant-quarter-simple-card, quadrant-quarter-circular, quadrant-simple-illushierarchy-tree-tech-style-capsule-item, hierarchy-tree-curved-line-rounded-rect-node, hierarchy-tree-tech-style-badge-card, hierarchy-structurechart-pie-plain-text, chart-pie-compact-card, chart-pie-donut-plain-text, chart-pie-donut-pill-badgechart-bar-plain-text, chart-column-simple, chart-line-plain-textchart-wordcloudrelation-circle-icon-badge, relation-circle-circular-progressinfographic <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
❌ 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
| 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 |
infographic 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 items use time for the time label and label for the milestone name.
infographic 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
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
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
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
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
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
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
Quadrant templates need exactly 4 root items, each with children. The 4 items represent the four quadrants.
infographic 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
```infographic
infographic <template-name>
data
title Your Title
items
- label Item 1
desc Description here
```
Add a theme block as a top-level sibling of data (not nested inside data):
# 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
For detailed syntax, templates, and examples, refer to references below:
Create editorial-style information cards using HTML/CSS in Markdown. Best for knowledge summaries, data highlights, event announcements, and single-topic content cards with magazine-quality typography.
Create ArchiMate enterprise architecture diagrams using PlantUML stdlib macros. Best for TOGAF viewpoints, layered EA modeling (Business/Application/Technology), motivation analysis, and migration planning.
Create layered system architecture diagrams using HTML/CSS templates with color-coded tiers and grid layouts. Best for technology stacks, microservices topology, and multi-tier application design.
Create business process diagrams using PlantUML syntax with BPMN, EIP, and Lean Mapping stencil icons. Best for workflow automation, approval chains, message-based integration patterns, and value stream mapping.
Create spatial diagrams with free-positioned nodes using JSON format. Best for concept maps, knowledge graphs, and planning boards requiring precise x/y coordinate control.
Create cloud provider architecture diagrams using PlantUML syntax with official AWS, Azure, GCP, and Alibaba Cloud service icons. Best for multi-service cloud topologies and migration blueprints.