Back to Details

infographic

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

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
✅ 适合使用信息图的场景：
  • 功能列表/检查清单：
    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
  • 时间线/里程碑：
    sequence-timeline-simple
    , 
    sequence-timeline-rounded-rect-node
    , 
    sequence-timeline-simple-illus
  • 分步流程：
    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
  • 产品路线图：
    sequence-roadmap-vertical-simple
    , 
    sequence-roadmap-vertical-plain-text
  • 漏斗图/转化分析：
    sequence-filter-mesh-simple
    , 
    sequence-funnel-simple
  • A/B对比：
    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分析：
    compare-swot
  • 2×2优先级矩阵：
    quadrant-quarter-simple-card
    , 
    quadrant-quarter-circular
    , 
    quadrant-simple-illus
  • 组织架构图/层级结构：
    hierarchy-tree-tech-style-capsule-item
    , 
    hierarchy-tree-curved-line-rounded-rect-node
    , 
    hierarchy-tree-tech-style-badge-card
    , 
    hierarchy-structure
  • 饼图/环形图：
    chart-pie-plain-text
    , 
    chart-pie-compact-card
    , 
    chart-pie-donut-plain-text
    , 
    chart-pie-donut-pill-badge
  • 条形图/柱状图：
    chart-bar-plain-text
    , 
    chart-column-simple
    , 
    chart-line-plain-text
  • 词云图：
    chart-wordcloud
  • 关系图/环形图：
    relation-circle-icon-badge
    , 
    relation-circle-circular-progress

Syntax Structure

语法结构

plain
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
plain
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
规则： 第一行必须为
infographic <template-name>
（需与模板列表完全匹配）| 使用2空格缩进 | 采用
键 值
对格式 | 数组项以
-
开头 | 对比类模板需要恰好2个包含
children
的根元素 | SWOT分析需要恰好4个元素（标签必须为英文的Strengths/Weaknesses/Opportunities/Threats）| 列表类模板使用
desc
而非
value
| 
hierarchy-structure
最多支持3级

Data Fields

数据字段

FieldDescriptionExample
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
字段说明示例
label
元素标题/名称（必填）
label Q1 Sales
desc
描述文本
desc 12.8 亿元 | +20%
value
数值（仅图表/漏斗图可用）
value 128
icon
图标：
mdi/icon-name
（Iconify）
icon mdi/star
illus
插画名称（unDraw）
illus coding
children
嵌套元素（层级/对比类模板）参考示例
done
完成状态（检查清单模板）
done true

Core Examples

核心示例

Feature Grid (list-grid-badge-card)

功能网格（list-grid-badge-card）

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

时间线（sequence-timeline-simple）

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

漏斗图（sequence-filter-mesh-simple）

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

检查清单（list-column-done-list）

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

A/B对比（compare-binary-horizontal-underline-text-vs）

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

SWOT分析（compare-swot）

Must have exactly 4 items with English labels: Strengths, Weaknesses, Opportunities, Threats
infographic
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
必须包含恰好4个元素，标签为英文：Strengths, Weaknesses, Opportunities, Threats
infographic
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)

饼图/环形图（chart-pie-donut-plain-text）

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

组织架构图（hierarchy-tree-tech-style-capsule-item）

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

输出格式

markdown
```infographic
infographic <template-name>
data
  title Your Title
  items
    - label Item 1
      desc Description here
```
markdown
```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
如需了解详细语法、模板和示例，请参考以下资料：
  • syntax.md — 完整语法规范和规则
  • templates.md — 所有可用模板及说明
  • examples.md — 各模板分类的完整示例

Resources

资源