Loading...
Loading...
Create beautiful infographics with pre-designed templates. Best for KPI cards, timelines, roadmaps, step-by-step processes, A vs B comparisons, SWOT analysis, funnels, org trees, pie/bar charts. Use when you need quick visual impact with 4-8 items. Simple YAML-like syntax. NOT for complex data analysis (use vega) or technical flowcharts (use mermaid).
npx skill4agent add markdown-viewer/skills infographic⚠️ CHECK TEMPLATES: Wrong template names WILL cause render failures.
list-grid-badge-cardlist-grid-candy-card-litelist-grid-ribbon-cardlist-column-done-listlist-column-vertical-icon-arrowlist-column-simple-vertical-arrowlist-row-horizontal-icon-arrowlist-row-simple-illuslist-sector-plain-textlist-zigzag-down-compact-cardlist-zigzag-down-simplelist-zigzag-up-compact-cardlist-zigzag-up-simplesequence-timeline-simplesequence-timeline-rounded-rect-nodesequence-timeline-simple-illussequence-snake-steps-simplesequence-snake-steps-compact-cardsequence-snake-steps-underline-textsequence-stairs-front-compact-cardsequence-stairs-front-pill-badgesequence-ascending-stepssequence-ascending-stairs-3d-underline-textsequence-circular-simplesequence-pyramid-simplesequence-mountain-underline-textsequence-cylinders-3d-simplesequence-zigzag-steps-underline-textsequence-zigzag-pucks-3d-simplesequence-horizontal-zigzag-underline-textsequence-horizontal-zigzag-simple-illussequence-color-snake-steps-horizontal-icon-linesequence-roadmap-vertical-simplesequence-roadmap-vertical-plain-textsequence-filter-mesh-simplesequence-funnel-simplecompare-binary-horizontal-underline-text-vscompare-binary-horizontal-simple-foldcompare-binary-horizontal-badge-card-arrowcompare-hierarchy-left-right-circle-node-pill-badgecompare-swotquadrant-quarter-simple-cardquadrant-quarter-circularquadrant-simple-illushierarchy-tree-tech-style-capsule-itemhierarchy-tree-curved-line-rounded-rect-nodehierarchy-tree-tech-style-badge-cardhierarchy-structurechart-pie-plain-textchart-pie-compact-cardchart-pie-donut-plain-textchart-pie-donut-pill-badgechart-bar-plain-textchart-column-simplechart-line-plain-textchart-wordcloudrelation-circle-icon-badgerelation-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 #f97316infographic <template-name>key value-childrendescvaluehierarchy-structure| Field | Description | Example |
|---|---|---|
| Item title/name (required) | |
| Description text | |
| Numeric value (charts/funnels only) | |
| Icon: | |
| Illustration name (unDraw) | |
| Nested items (hierarchy/compare) | See examples |
| Completion status (checklist) | |
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 #2infographic 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 Launchinfographic 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% conversioninfographic 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 falseinfographic 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 costinfographic 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 changesinfographic 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 12infographic 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```infographic
infographic <template-name>
data
title Your Title
items
- label Item 1
desc Description here
```For detailed syntax, templates, and examples, refer to references below: