diagrams

name	diagrams
description	Create diagrams and visualizations in Markdown using Mermaid, Graphviz, Vega-Lite, PlantUML, infographics, JSON Canvas, architecture diagrams, and info cards. Use when asked to create any diagram, chart, visualization, or visual documentation.
metadata	{"author":"Diagram skills adapted from markdown-viewer/skills (MIT license). Powered by Markdown Viewer - https://docu.md"}

Source: https://github.com/citypaul/.dotfiles/tree/6220d843058ff33bb7d3dd3af175fd82b1c7965d/claude/.claude/skills/diagrams Imported from commit: 6220d843058ff33bb7d3dd3af175fd82b1c7965d License: MIT, Copyright (c) 2024 Paul Hammond

Diagram & Visualization Skill

Create professional diagrams and visualizations in Markdown documents. Choose the right tool for the job, then read the detailed reference for that tool.

Decision Guide

What are you trying to create?

Need	Tool	Code Fence	Reference
Flowchart, sequence diagram, state machine, class diagram, mindmap	Mermaid	```mermaid	mermaid.md
Dependency tree, call graph, module relationships, complex directed graphs	Graphviz	```dot	graphviz.md
Bar chart, line chart, scatter plot, heatmap, data-driven visualization	Vega-Lite	```vega-lite	vega.md
UML diagrams with icons (9,500+ stencils)	PlantUML	```plantuml	plantuml.md
Cloud architecture (AWS/Azure/GCP/K8s)	PlantUML	```plantuml	plantuml.md
Network topology, security architecture	PlantUML	```plantuml	plantuml.md
KPI cards, timelines, roadmaps, funnels, SWOT, org charts, pie/bar charts	Infographic	```infographic	infographic.md
Mind map, knowledge graph, spatial planning board	JSON Canvas	```canvas	canvas.md
Layered system architecture, microservices, enterprise diagrams	Architecture	Raw HTML	architecture.md
Editorial info cards, data highlights, knowledge summaries	Infocard	Raw HTML	infocard.md

Quick Selection Rules

0. Where will this be viewed? GitHub (READMEs, PRs, issues), most IDEs, and most markdown renderers only render ```mermaid fences — the other fences (```dot, ```vega-lite, ```infographic, ```canvas), the mxgraph stencil syntax, and the raw-HTML patterns require a compatible viewer (e.g. the docu.md Markdown Viewer extension) and appear as raw code blocks everywhere else. For GitHub/PR/IDE destinations, prefer Mermaid.
1. Simple process flow? Use Mermaid
2. Data with numbers? Use Vega-Lite (charts) or Infographic (visual templates)
3. Software modeling with icons? Use PlantUML
4. Cloud/network/security architecture? Use PlantUML with provider stencils
5. Complex graph with custom layout? Use Graphviz
6. Styled system architecture? Use Architecture (HTML)
7. Magazine-quality content card? Use Infocard (HTML)
8. Quick visual summary (KPI, timeline, funnel)? Use Infographic
9. Spatial/freeform layout? Use JSON Canvas

Workflow

1. Identify the diagram type from the decision guide above
2. Read the appropriate reference file for detailed syntax and rules
3. Follow the critical syntax rules exactly to avoid rendering failures
4. For Architecture and Infocard: pick a layout first, then apply a style

Important Notes

• Architecture and Infocard use raw HTML embedded directly in Markdown (no code fences)
• PlantUML diagrams always start with @startuml and end with @enduml
• Never use ```text for any diagram type - it won't render
• When unsure between tools, prefer Mermaid for simplicity or PlantUML for icon-rich diagrams