Agent skill · design visual · ccheney
mermaid-diagrams
Proactively suggest diagrams when explaining complex systems. Triggers on diagrams, charts, visualizations, flowcharts, sequence diagrams, architecture diagrams, ER diagrams, state machines, Gantt charts, mindmaps, C4, class diagrams, git graphs, kanban boards, sankey, timelines, quadrant charts, XY charts, packet diagrams. Use when user asks for visual representations of code, systems, processes, data structures, database schemas, workflows, or API flows. Generate Mermaid diagrams in markdown.
Why this skill is useful
Provides specific syntax and patterns for generating various types of diagrams that the AI wouldn't reliably generate on its own.
What it needs
About 5k tokens when loaded. Last updated 2026-07-07. 58 stars on the source repository.
What this skill does
Mermaid Diagrams Generate diagrams in markdown that render in GitHub, GitLab, VS Code, Obsidian, Notion. Syntax verified against Mermaid v11.16 (2026). Quick Start mermaid flowchart LR A[Start] --> B{Decision} B --> Yes C[Action] B --> No D[Finish] Quick Decision Tree Default to flowchart when unsure — it handles most "draw the system/process" requests. Prefer plain flowchart + subgraphs over architecture-beta/C4 unless the user asks for those specifically, since flowcharts render everywhere. Diagram Types Type Declaration Best For Status ------ ------------- ---------- -------- Flowchart flowchart LR / flowchart TB Processes, decisions, data flow Stable Sequence sequenceDiagram API flows, service calls Stable ER erDiagram Database schemas Stable Class classDiagram Types, domain models Stable State stateDiagram-v2 State machines Stable Gantt gantt Project timelines Stable Timeline timeline Chronological events Stable Journey journey User experience mapping Stable Mindmap mindmap Brainstorming, hierarchies Stable Git gitGraph Branch visualization Stable Pie pie Data distribution Stable Quadrant quadrantChart Priority matrices Stable XY Chart xychart Bar/line data trends Stable (was xychart-beta) Packet packet Network protocol layouts Stable (was packet-beta) Kanban kanban Task boards Stable Block block Grid-positioned layouts Stable (was block-beta) Sankey sankey Flow allocation Experimental (was sankey-beta) C4 C4Context etc. System architecture Experimental Architecture architecture-beta Cloud/service topology Beta Treemap treemap-beta Hierarchical proportions Beta Requirement requirementDiagram Requirements traceability Stable The old -beta declarations still parse in Mermaid v11 as legacy aliases. Prefer the stable keyword — but on platforms that bundle an older Mermaid (GitHub lags releases), the -beta form may be the only one that renders. When targeting a specific platform, verify with a small test diagram first. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills ccheney/mermaid-diagrams