Skills infographic

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.

install

source · Clone the upstream repo

git clone https://github.com/markdown-viewer/skills

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/markdown-viewer/skills "$T" && mkdir -p ~/.claude/skills && cp -r "$T/infographic" ~/.claude/skills/markdown-viewer-skills-infographic && rm -rf "$T"

manifest: infographic/SKILL.md

source content

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

⚠️ Common Mistakes (will cause render failure)

❌ 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

Data Fields

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`

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 $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 (sequence-timeline-simple)

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

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

Priority Matrix (quadrant-quarter-simple-card)

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

Output Format

```infographic
infographic <template-name>
data
  title Your Title
  items
    - label Item 1
      desc Description here
```

Theme (optional)

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

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