mcpField
I
infographic

infographic

github.com/markdown-viewerDesign & UI3.4k3.5k installsUpdated 3w ago
Repository

About infographic

A skill for turning structured information into infographics using named templates and a defined text syntax. It covers lists, timelines, processes, comparisons, charts, and hierarchies.

Key features

  1. 01Templates for lists, timelines, and processes
  2. 02Comparison, SWOT, and quadrant layouts
  3. 03Pie, bar, and line chart templates
  4. 04Defined syntax for infographic data

Use cases

  1. 01Presenting project milestones as a timeline
  2. 02Comparing options or organizing SWOT findings
  3. 03Visualizing chart values and priority matrices

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/markdown-viewer/skills --skill infographic

After installing, type/infographicin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

references/
examples.md
syntax.md
templates.md

Details

From the project README

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

FieldDescriptionExample
labelItem title/name (required)label Q1 Sales
descDescription textdesc $1.28B | +20%
valueNumeric value (charts/funnels only)value 128
timeTime label (timeline templates only)time Q1 2024
iconIcon: mdi/icon-name (Iconify)icon mdi/star
illusIllustration name (unDraw)illus coding
childrenNested items (hierarchy/compare)See examples
doneCompletion 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

Resources

Comments

Markdown supported