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 <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

Resources

• AntV Infographic Gallery

• Iconify Icons

• unDraw Illustrations