infographic

infographic

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

1stars
0forks
Updated 1/23/2026
SKILL.md
readonlyread-only
name
infographic
description

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

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

You Might Also Like

Related Skills

songsee

songsee

88Kdesign

Generate spectrograms and feature-panel visualizations from audio with the songsee CLI.

moltbot avatarmoltbot
Get

Knowledge and utilities for creating animated GIFs optimized for Slack. Provides constraints, validation tools, and animation concepts. Use when users request animated GIFs for Slack like "make me a GIF of X doing Y for Slack."

anthropics avataranthropics
Get

Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.

anthropics avataranthropics
Get

Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.

anthropics avataranthropics
Get
theme-factory

theme-factory

47Kdesign

Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.

anthropics avataranthropics
Get
canvas-design

canvas-design

47Kdesign

Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.

anthropics avataranthropics
Get