mermaid-diagrams

Name: mermaid-diagrams
Author: ccheney

55stars3forks

How to install mermaid-diagrams?

ccheney/robust-skills/mermaid-diagrams

$npx -y skills add ccheney/robust-skills --skill mermaid-diagrams

Installs into the current project.

Summary

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,

Files · 1

View on GitHub

SKILL.md

1	# Mermaid Diagrams
2
3	Generate diagrams in markdown that render in GitHub, GitLab, VS Code, Obsidian, Notion. Syntax verified against Mermaid v11.16 (2026).
4
5	## Quick Start
6
7	````markdown
8	```mermaid
9	flowchart LR
10	A[Start] --> B{Decision}
11	B -->\|Yes\| C[Action]
12	B -->\|No\| D[Finish]
13	```
14	````
15
16	## Quick Decision Tree
17
18	```
19	What to visualize?
20	├─ Process, algorithm, decision flow → flowchart
21	├─ API calls, service interactions → sequenceDiagram
22	├─ Database tables, relationships → erDiagram
23	├─ OOP, type hierarchy, domain model → classDiagram
24	├─ State machine, lifecycle → stateDiagram-v2
25	├─ System architecture, services → flowchart + subgraphs (or C4Context / architecture-beta)
26	├─ Project timeline, sprints → gantt
27	├─ Chronological events, milestones → timeline
28	├─ User experience, pain points → journey
29	├─ Git branches → gitGraph
30	├─ Brainstorming, concept hierarchy → mindmap
31	├─ Data distribution → pie
32	├─ Data trends (bar/line) → xychart
33	├─ Flow allocation (funnel, budget) → sankey
34	├─ Priority matrix → quadrantChart
35	├─ Task board → kanban
36	└─ Network packet layout → packet
37	```
38
39	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.
40
41	## Diagram Types
42
43	\| Type \| Declaration \| Best For \| Status \|
44	\|------\|-------------\|----------\|--------\|
45	\| Flowchart \| `flowchart LR` / `flowchart TB` \| Processes, decisions, data flow \| Stable \|
46	\| Sequence \| `sequenceDiagram` \| API flows, service calls \| Stable \|
47	\| ER \| `erDiagram` \| Database schemas \| Stable \|
48	\| Class \| `classDiagram` \| Types, domain models \| Stable \|
49	\| State \| `stateDiagram-v2` \| State machines \| Stable \|
50	\| Gantt \| `gantt` \| Project timelines \| Stable \|
51	\| Timeline \| `timeline` \| Chronological events \| Stable \|
52	\| Journey \| `journey` \| User experience mapping \| Stable \|
53	\| Mindmap \| `mindmap` \| Brainstorming, hierarchies \| Stable \|
54	\| Git \| `gitGraph` \| Branch visualization \| Stable \|
55	\| Pie \| `pie` \| Data distribution \| Stable \|
56	\| Quadrant \| `quadrantChart` \| Priority matrices \| Stable \|
57	\| XY Chart \| `xychart` \| Bar/line data trends \| Stable (was `xychart-beta`) \|
58	\| Packet \| `packet` \| Network protocol layouts \| Stable (was `packet-beta`) \|
59	\| Kanban \| `kanban` \| Task boards \| Stable \|
60	\| Block \| `block` \| Grid-positioned layouts \| Stable (was `block-beta`) \|
61	\| Sankey \| `sankey` \| Flow allocation \| Experimental (was `sankey-beta`) \|
62	\| C4 \| `C4Context` etc. \| System architecture \| Experimental \|
63	\| Architecture \| `architecture-beta` \| Cloud/service topology \| Beta \|
64	\| Treemap \| `treemap-beta` \| Hierarchical proportions \| Beta \|
65	\| Requirement \| `requirementDiagram` \| Requirements traceability \| Stable \|
66
67	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.
68
69	## Common Patterns
70
71	### System Architecture
72
73	```mermaid
74	flowchart LR
75	subgraph Client
76	Browser & Mobile
77	end
78	subgraph Services
79	API --> Auth & Core
80	end
81	subgraph Data
82	DB[(PostgreSQL)]
83	end
84	Client --> API
85	Core --> DB
86	```
87
88	### API Request Flow
89
90	```mermaid
91	sequenceDiagram
92	autonumber
93	Client->>+API: POST /orders
94	API->>Auth: Validate
95	Auth-->>API: OK
96	API->>+DB: Insert
97	DB-->>-API: ID
98	API-->>-Client: 201 Created
99	```
100
101	### Database Schema
102
103	```mermaid
104	erDiagram
105	USER \|\|--o{ ORDER : places
106	ORDER \|\|--\|{ LINE_ITEM : contains
107	USER {
108	uuid id PK
109	string email UK
110	}
111	ORDER {
112	uuid id PK
113	uuid user_id FK
114	}
115	```
116
117	### State Machine
118
119	```mermaid
120	stateDiagram-v2
121	[*] --> Draft
122	Draft --> Submitted : submit()
123	Submitted --> Approved : approve()
124	Submitted --> Rejected : reject()
125	Approved --> [*]
126	```
127
128	## Syntax Quick Reference
129
130	### Flowchart Nodes
131
132	```
133	[Rectangle] (Rounded) {Diamond} [(Database)] [[Subroutine]]
134	((Circle)) >Asymmetric] {{Hexagon}}
135	```
136
137	### Flowchart Edges
138
139	```
140	A --> B # Arrow
141	A --- B # Line
142	A -.-> B # Dotted arrow
143	A ==> B # Thick a

People who liked this also viewed

6 picks

Type

mermaid-diagrams

55stars3forks

View on GitHub

How to install mermaid-diagrams?

ccheney/robust-skills/mermaid-diagrams

$npx -y skills add ccheney/robust-skills --skill mermaid-diagrams

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Mermaid Diagrams
2
3	Generate diagrams in markdown that render in GitHub, GitLab, VS Code, Obsidian, Notion. Syntax verified against Mermaid v11.16 (2026).
4
5	## Quick Start
6
7	````markdown
8	```mermaid
9	flowchart LR
10	A[Start] --> B{Decision}
11	B -->\|Yes\| C[Action]
12	B -->\|No\| D[Finish]
13	```
14	````
15
16	## Quick Decision Tree
17
18	```
19	What to visualize?
20	├─ Process, algorithm, decision flow → flowchart
21	├─ API calls, service interactions → sequenceDiagram
22	├─ Database tables, relationships → erDiagram
23	├─ OOP, type hierarchy, domain model → classDiagram
24	├─ State machine, lifecycle → stateDiagram-v2
25	├─ System architecture, services → flowchart + subgraphs (or C4Context / architecture-beta)
26	├─ Project timeline, sprints → gantt
27	├─ Chronological events, milestones → timeline
28	├─ User experience, pain points → journey
29	├─ Git branches → gitGraph
30	├─ Brainstorming, concept hierarchy → mindmap
31	├─ Data distribution → pie
32	├─ Data trends (bar/line) → xychart
33	├─ Flow allocation (funnel, budget) → sankey
34	├─ Priority matrix → quadrantChart
35	├─ Task board → kanban
36	└─ Network packet layout → packet
37	```
38
39	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.
40
41	## Diagram Types
42
43	\| Type \| Declaration \| Best For \| Status \|
44	\|------\|-------------\|----------\|--------\|
45	\| Flowchart \| `flowchart LR` / `flowchart TB` \| Processes, decisions, data flow \| Stable \|
46	\| Sequence \| `sequenceDiagram` \| API flows, service calls \| Stable \|
47	\| ER \| `erDiagram` \| Database schemas \| Stable \|
48	\| Class \| `classDiagram` \| Types, domain models \| Stable \|
49	\| State \| `stateDiagram-v2` \| State machines \| Stable \|
50	\| Gantt \| `gantt` \| Project timelines \| Stable \|
51	\| Timeline \| `timeline` \| Chronological events \| Stable \|
52	\| Journey \| `journey` \| User experience mapping \| Stable \|
53	\| Mindmap \| `mindmap` \| Brainstorming, hierarchies \| Stable \|
54	\| Git \| `gitGraph` \| Branch visualization \| Stable \|
55	\| Pie \| `pie` \| Data distribution \| Stable \|
56	\| Quadrant \| `quadrantChart` \| Priority matrices \| Stable \|
57	\| XY Chart \| `xychart` \| Bar/line data trends \| Stable (was `xychart-beta`) \|
58	\| Packet \| `packet` \| Network protocol layouts \| Stable (was `packet-beta`) \|
59	\| Kanban \| `kanban` \| Task boards \| Stable \|
60	\| Block \| `block` \| Grid-positioned layouts \| Stable (was `block-beta`) \|
61	\| Sankey \| `sankey` \| Flow allocation \| Experimental (was `sankey-beta`) \|
62	\| C4 \| `C4Context` etc. \| System architecture \| Experimental \|
63	\| Architecture \| `architecture-beta` \| Cloud/service topology \| Beta \|
64	\| Treemap \| `treemap-beta` \| Hierarchical proportions \| Beta \|
65	\| Requirement \| `requirementDiagram` \| Requirements traceability \| Stable \|
66
67	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.
68
69	## Common Patterns
70
71	### System Architecture
72
73	```mermaid
74	flowchart LR
75	subgraph Client
76	Browser & Mobile
77	end
78	subgraph Services
79	API --> Auth & Core
80	end
81	subgraph Data
82	DB[(PostgreSQL)]
83	end
84	Client --> API
85	Core --> DB
86	```
87
88	### API Request Flow
89
90	```mermaid
91	sequenceDiagram
92	autonumber
93	Client->>+API: POST /orders
94	API->>Auth: Validate
95	Auth-->>API: OK
96	API->>+DB: Insert
97	DB-->>-API: ID
98	API-->>-Client: 201 Created
99	```
100
101	### Database Schema
102
103	```mermaid
104	erDiagram
105	USER \|\|--o{ ORDER : places
106	ORDER \|\|--\|{ LINE_ITEM : contains
107	USER {
108	uuid id PK
109	string email UK
110	}
111	ORDER {
112	uuid id PK
113	uuid user_id FK
114	}
115	```
116
117	### State Machine
118
119	```mermaid
120	stateDiagram-v2
121	[*] --> Draft
122	Draft --> Submitted : submit()
123	Submitted --> Approved : approve()
124	Submitted --> Rejected : reject()
125	Approved --> [*]
126	```
127
128	## Syntax Quick Reference
129
130	### Flowchart Nodes
131
132	```
133	[Rectangle] (Rounded) {Diamond} [(Database)] [[Subroutine]]
134	((Circle)) >Asymmetric] {{Hexagon}}
135	```
136
137	### Flowchart Edges
138
139	```
140	A --> B # Arrow
141	A --- B # Line
142	A -.-> B # Dotted arrow
143	A ==> B # Thick a

People who liked this also viewed

6 picks

Type