diagrams

Original：🇺🇸 English

Translated

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.

2installs

Sourcecitypaul/.dotfiles

Added on2026-05-10

NPX Install

npx skill4agent add citypaul/.dotfiles diagrams

SKILL.md Content

View Translation Comparison →

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