Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
From development-codebase-tools
Generates valid Mermaid.js diagrams (flowcharts, sequences, classes, states, ER, Gantt, git graphs) with strict syntax rules for error-free rendering. Fixes broken diagrams.
npx claudepluginhub uniswap/ai-toolkit --plugin development-codebase-toolsHow this skill is triggered — by the user, by Claude, or both
Slash command
/development-codebase-tools:mermaid-diagramThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Generate valid Mermaid.js diagrams that render without syntax errors on the first attempt.
Generates error-free Mermaid diagrams (flowcharts, sequence, class, state, ER, gantt, pie, mindmaps, timelines) with strict syntax rules that prevent HTML tags, style directives, and invalid escapes.
Generates Mermaid diagrams for flowcharts, sequences, states, classes, and architecture using semantic styling, shapes, and visual hierarchy.
Guides creation of syntactically correct Mermaid diagrams including flowcharts, sequence diagrams, class diagrams, state diagrams, Gantt charts, ER diagrams, and data lineage visualizations.
Share bugs, ideas, or general feedback.
Generate valid Mermaid.js diagrams that render without syntax errors on the first attempt.
Follow every rule below. Violating any one will produce a render failure.
%% CORRECT
A[Service A]
B[Service B]
%% WRONG
A[Service A] B[Service B]
No spaces, hyphens, or special characters in IDs. Display names go in brackets.
%% CORRECT
AuthService[Auth Service]
UserDB[User Database]
%% WRONG
Auth-Service[Auth Service]
User DB[User Database]
Wrap in double quotes if a label contains parentheses, brackets, colons, math operators, or anything that could be parsed as Mermaid syntax.
%% CORRECT
A["Process (async)"]
B["array[0]"]
C["ratio: 3/4"]
D["calculate(x, y)"]
%% WRONG
A[Process (async)]
B[array[0]]
Use commas or semicolons instead of <br> or \n.
%% CORRECT
A["Input: raw data, Output: processed"]
%% WRONG
A[Input: raw data<br>Output: processed]
Write each connection on its own line.
%% CORRECT
A --> B
B --> C
%% WRONG
A --> B --> C
%% comments must not appear at the end of code lines.
%% CORRECT
%% This is a comment
A --> B
%% WRONG
A --> B %% connection
Apply style directives only after the node has been defined.
%% CORRECT
A[Server]
style A fill:#f9f,stroke:#333
%% WRONG
style A fill:#f9f,stroke:#333
A[Server]
Use underscores or wrap in quotes — no bare spaces.
%% CORRECT
subgraph Backend_Services
subgraph "Backend Services"
%% WRONG
subgraph Backend Services
Trace through the diagram to confirm:
| Type | Directive | Use For |
|---|---|---|
| Flowchart | flowchart TD / flowchart LR | Architecture, data flow, decisions |
| Sequence | sequenceDiagram | API calls, request/response |
| Class | classDiagram | Type relationships, OOP |
| State | stateDiagram-v2 | State machines, lifecycles |
| ER | erDiagram | Database schemas, entities |
| Gantt | gantt | Timelines, schedules |
| Git | gitGraph | Branch strategies, merges |
flowchart TD
Client[Browser Client]
API[API Gateway]
Auth[Auth Service]
DB[(Database)]
Client --> API
API --> Auth
Auth --> DB
sequenceDiagram
participant C as Client
participant S as Server
participant D as Database
C->>S: POST /api/data
S->>D: INSERT query
D-->>S: Result
S-->>C: 201 Created