Loading...
Loading...
Generate Mermaid diagrams in markdown. Triggers on: diagrams, charts, visualizations, flowcharts, sequence diagrams, architecture diagrams, ER diagrams, state machines, Gantt charts, mindmaps, C4, class diagrams, git graphs. Use when: user asks for visual representations of code, systems, processes, data structures, database schemas, workflows, or API flows. Proactively suggest diagrams when explaining complex systems.
npx skill4agent add ccheney/robust-skills mermaid-diagrams```mermaid
flowchart LR
A[Start] --> B{Decision}
B -->|Yes| C[Action]
B -->|No| D[End]
```What to visualize?
├─ Process, algorithm, decision flow → flowchart
├─ API calls, service interactions → sequenceDiagram
├─ Database tables, relationships → erDiagram
├─ OOP, type hierarchy, domain model → classDiagram
├─ State machine, lifecycle → stateDiagram-v2
├─ System architecture, services → flowchart + subgraphs (or C4Context)
├─ Project timeline, sprints → gantt
├─ User experience, pain points → journey
├─ Git branches → gitGraph
├─ Data distribution → pie
└─ Priority matrix → quadrantChart| Type | Declaration | Best For |
|---|---|---|
| Flowchart | | Processes, decisions, data flow |
| Sequence | | API flows, service calls |
| ER | | Database schemas |
| Class | | Types, domain models |
| State | | State machines |
| Gantt | | Project timelines |
| Journey | | User experience |
| C4 | | System architecture |
| Git | | Branch visualization |
flowchart LR
subgraph Client
Browser & Mobile
end
subgraph Services
API --> Auth & Core
end
subgraph Data
DB[(PostgreSQL)]
end
Client --> API
Core --> DBsequenceDiagram
autonumber
Client->>+API: POST /orders
API->>Auth: Validate
Auth-->>API: OK
API->>+DB: Insert
DB-->>-API: ID
API-->>-Client: 201 CreatederDiagram
USER ||--o{ ORDER : places
ORDER ||--|{ LINE_ITEM : contains
USER { uuid id PK; string email UK }
ORDER { uuid id PK; uuid user_id FK }stateDiagram-v2
[*] --> Draft
Draft --> Submitted : submit()
Submitted --> Approved : approve()
Submitted --> Rejected : reject()
Approved --> [*][Rectangle] (Rounded) {Diamond} [(Database)] [[Subroutine]]
((Circle)) >Asymmetric] {{Hexagon}}A --> B # Arrow
A --- B # Line
A -.-> B # Dotted arrow
A ==> B # Thick arrow
A -->|text| B # Labeled->> # Solid arrow (request)
-->> # Dotted arrow (response)
-x # X end (async)
-) # Open arrow||--|| # One to one
||--o{ # One to many
}o--o{ # Many to manyLRTB| File | Purpose |
|---|---|
| references/FLOWCHARTS.md | Nodes, edges, subgraphs, styling |
| references/SEQUENCE.md | Participants, messages, activation |
| references/CLASS-ER.md | Classes, ER diagrams, relationships |
| references/STATE-JOURNEY.md | States, user journeys |
| references/DATA-CHARTS.md | Gantt, Pie, Timeline, Quadrant |
| references/ARCHITECTURE.md | C4, Block, Kanban |
| references/CHEATSHEET.md | All syntax quick reference |