- 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
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
- Simple process flow? Use Mermaid
- Data with numbers? Use Vega-Lite (charts) or Infographic (visual templates)
- Software modeling with icons? Use PlantUML
- Cloud/network/security architecture? Use PlantUML with provider stencils
- Complex graph with custom layout? Use Graphviz
- Styled system architecture? Use Architecture (HTML)
- Magazine-quality content card? Use Infocard (HTML)
- Quick visual summary (KPI, timeline, funnel)? Use Infographic
- Spatial/freeform layout? Use JSON Canvas
Workflow
- Identify the diagram type from the decision guide above
- Read the appropriate reference file for detailed syntax and rules
- Follow the critical syntax rules exactly to avoid rendering failures
- 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
@startumland end with@enduml - Never use
textfor any diagram type - it won't render - When unsure between tools, prefer Mermaid for simplicity or PlantUML for icon-rich diagrams