From diagrams
Generate diagrams using Mermaid syntax -- the most LLM-friendly text-based diagram format. Use when the diagram-router selects Mermaid, or when diagrams will live in GitHub/GitLab markdown, documentation, or when quick generation with broad diagram type coverage is needed. Renders natively on major platforms.
npx claudepluginhub zate/cc-plugins --plugin diagramsThis skill uses the workspace's default tool permissions.
Generate diagrams using Mermaid's Markdown-inspired syntax. Mermaid is the most token-efficient and LLM-reliable diagram format, with native rendering in GitHub, GitLab, Obsidian, Notion, and many documentation platforms.
References Mermaid syntax for diagram types like flowcharts, sequences, ER, Gantt, class diagrams; includes examples, patterns, and Markdown integration for GitHub, GitLab, VS Code.
Creates Mermaid diagrams including flowcharts, sequence diagrams, ERDs, state machines, Gantt charts, and architecture views for technical documentation.
Generates Mermaid diagrams—flowcharts, sequence, ERD, class, state, Gantt—from text using mmdc CLI. Outputs SVG, PNG, PDF for Markdown docs and READMEs.
Share bugs, ideas, or general feedback.
Generate diagrams using Mermaid's Markdown-inspired syntax. Mermaid is the most token-efficient and LLM-reliable diagram format, with native rendering in GitHub, GitLab, Obsidian, Notion, and many documentation platforms.
When to use Mermaid:
When another format is better:
Consult the design-system skill for color, composition, and quality rules.
| Type | Syntax Keyword | Best For |
|---|---|---|
| Flowchart | flowchart TD or flowchart LR | Process flows, decision trees, pipelines |
| Sequence | sequenceDiagram | API calls, request lifecycles, protocols |
| Class | classDiagram | OOP design, domain models |
| State | stateDiagram-v2 | Object lifecycles, state machines |
| ER Diagram | erDiagram | Database schemas, data models |
| Gantt | gantt | Project timelines, schedules |
| Mind Map | mindmap | Topic hierarchies, brainstorming |
| Timeline | timeline | Chronological events |
| Sankey | sankey-beta | Volume/flow distribution |
| Pie | pie | Simple proportions |
| Git Graph | gitGraph | Branch/merge visualization |
| C4 Context | C4Context | System context diagrams |
flowchart TD
A[Start] --> B{Decision?}
B -->|Yes| C[Action A]
B -->|No| D[Action B]
C --> E[End]
D --> E
Direction: TD (top-down), LR (left-right), BT (bottom-top), RL (right-left).
Node shapes:
[text] -- rectangle(text) -- rounded rectangle{text} -- diamond (decision)([text]) -- stadium/pill[[text]] -- subroutine[(text)] -- cylinder (database)((text)) -- circleSubgraphs for grouping:
flowchart LR
subgraph Frontend
A[React App] --> B[API Client]
end
subgraph Backend
C[API Server] --> D[(Database)]
end
B --> C
sequenceDiagram
participant B as Browser
participant S as Server
participant DB as Database
B->>S: GET /api/users
activate S
S->>DB: SELECT * FROM users
DB-->>S: results
S-->>B: 200 OK (JSON)
deactivate S
Arrow types:
->> solid with arrowhead-->> dashed with arrowhead-x solid with cross-) solid with open arrow (async)stateDiagram-v2
[*] --> Created
Created --> Active: approve
Active --> Suspended: suspend
Suspended --> Active: reactivate
Active --> Revoked: revoke
Revoked --> [*]
erDiagram
USER ||--o{ ORDER : places
ORDER ||--|{ LINE_ITEM : contains
PRODUCT ||--o{ LINE_ITEM : "is in"
USER {
int id PK
string name
string email
}
ORDER {
int id PK
int user_id FK
date created_at
}
mindmap
root((Project))
Frontend
React
TypeScript
Tailwind
Backend
Go
PostgreSQL
Redis
Infrastructure
AWS
Kubernetes
Terraform
gantt
title Project Roadmap
dateFormat YYYY-MM-DD
section Phase 1
Design :a1, 2026-01-01, 14d
Implementation :a2, after a1, 21d
section Phase 2
Testing :b1, after a2, 14d
Release :milestone, after b1, 0d
Mermaid supports limited theming. Use %%{init: {...}}%% directives:
%%{init: {'theme': 'base', 'themeVariables': {'primaryColor': '#EFF6FF', 'primaryBorderColor': '#2563EB', 'primaryTextColor': '#1E293B'}}}%%
flowchart TD
A[Node] --> B[Node]
Available themes: default, dark, forest, neutral, base (customizable).
For most cases, use default or neutral theme -- they render well across platforms.
A["Label with (parens)"]#semi; entity->> for all requests, -->> for all responses.v2 -- use stateDiagram-v2 not stateDiagram for modern features.Write Mermaid diagrams in fenced code blocks:
```mermaid
flowchart TD
A --> B
```
If saving to a file, use .mmd extension for standalone Mermaid files.
| Platform | Native Support |
|---|---|
| GitHub (README, issues, PRs) | Yes |
| GitLab (markdown) | Yes |
| Obsidian | Yes |
| Notion | Yes |
| VS Code (with extension) | Yes |
| Docusaurus | Yes (plugin) |
| Confluence | Via Mermaid plugin |
For offline rendering: npx @mermaid-js/mermaid-cli mmdc -i diagram.mmd -o diagram.svg
Before presenting a Mermaid diagram:
flowchart, sequenceDiagram, etc.)