Reference guide for Mermaid diagram syntax. Load when generating diagrams.
Provides Mermaid diagram syntax guidance to generate accurate flowcharts, sequence diagrams, ERDs, and other visualizations. Helps select the right diagram type and avoid common syntax errors when creating technical diagrams.
/plugin marketplace add pproenca/dot-claude-old/plugin install doc@dot-claudeReference guide for Mermaid diagram syntax. Load when generating diagrams.
| Visualization Need | Recommended Type | Alternative |
|---|---|---|
| Process/workflow steps | flowchart | stateDiagram-v2 |
| API call sequences | sequenceDiagram | flowchart |
| Database schema | erDiagram | classDiagram |
| Class/object structure | classDiagram | erDiagram |
| State machine/lifecycle | stateDiagram-v2 | flowchart |
| Project timeline | gantt | timeline |
| User journey/experience | journey | flowchart |
| Git branching | gitGraph | N/A |
| Distribution/proportion | pie | quadrantChart |
| Comparison matrix | quadrantChart | N/A |
| Historical events | timeline | gantt |
| System architecture | flowchart with subgraphs | C4Context |
Most versatile. Use for processes, architectures, decision trees, data flows.
graph TD
A[Start] --> B{Decision}
B -->|Yes| C[Action]
B -->|No| D[Other Action]
Use for time-ordered interactions between actors/systems.
sequenceDiagram
Client->>Server: Request
Server-->>Client: Response
Use for database relationships with cardinality.
erDiagram
USER ||--o{ ORDER : places
ORDER ||--|{ LINE_ITEM : contains
Use for OOP class structures with methods and inheritance.
classDiagram
Animal <|-- Dog
Animal : +name
Animal : +makeSound()
Use for finite state machines with transitions.
stateDiagram-v2
[*] --> Pending
Pending --> Active : approve
Active --> [*] : complete
Use for project schedules with durations and dependencies.
gantt
title Project Plan
section Phase 1
Task 1: a1, 2024-01-01, 7d
Task 2: after a1, 5d
[Rectangle] - Default process
(Rounded) - Terminal/rounded
([Stadium]) - Pill shape
[[Subroutine]] - Subprocess
[(Database)] - Cylinder
((Circle)) - Circle
{Diamond} - Decision
{{Hexagon}} - Preparation
--> Solid arrow (strong dependency)
-.-> Dashed arrow (weak/optional)
==> Thick arrow (important path)
--o Open circle end
--x Cross end
graph TD
A[Node]:::highlight --> B[Other]
classDef highlight fill:#f9f,stroke:#333,stroke-width:2px
graph TD
subgraph Backend
API[API Server]
DB[(Database)]
end
subgraph Frontend
UI[Web App]
end
UI --> API
API --> DB
| Error | Wrong | Correct |
|---|---|---|
| Case sensitivity | graph lr | graph LR |
| Spaces in node IDs | Task 1[Label] | T1[Task 1 Label] |
| Missing brackets | A --> B[Label | A --> B[Label] |
| Special chars in IDs | node-1[Label] | node1[Label] |
| Unclosed subgraph | subgraph X | subgraph X ... end |
| Quote issues | A["Label's"] | A["Label''s"] |
graph LR
A <--> B
%% or
C --> D
D --> C
graph TD
A[Process] --> A
Use dashed styling and external subgraph:
graph TD
subgraph Internal
A[Our Service]
end
subgraph External
B[Third Party]:::ext
end
A -.-> B
classDef ext fill:#ddd,stroke:#999,stroke-dasharray: 5 5
Input: "Create a flowchart for user login"
graph TD
A[User Enters Credentials] --> B{Valid?}
B -->|Yes| C[Dashboard]
B -->|No| D[Show Error]
D --> A
Input: "ERD for Users, Posts, Comments"
erDiagram
USER ||--o{ POST : writes
USER ||--o{ COMMENT : makes
POST ||--o{ COMMENT : has
USER {
int id PK
string username
string email
}
POST {
int id PK
int user_id FK
string title
text content
}
COMMENT {
int id PK
int user_id FK
int post_id FK
text content
}
Input: "OAuth2 authorization code flow"
sequenceDiagram
participant U as User
participant A as App
participant AS as Auth Server
U->>A: Click Login
A->>AS: Redirect to /authorize
AS->>U: Show Login Form
U->>AS: Enter Credentials
AS->>A: Redirect with Auth Code
A->>AS: Exchange Code for Token
AS->>A: Access Token + Refresh Token
A->>U: Logged In
Expert security auditor specializing in DevSecOps, comprehensive cybersecurity, and compliance frameworks. Masters vulnerability assessment, threat modeling, secure authentication (OAuth2/OIDC), OWASP standards, cloud security, and security automation. Handles DevSecOps integration, compliance (GDPR/HIPAA/SOC2), and incident response. Use PROACTIVELY for security audits, DevSecOps, or compliance implementation.
Professional, ethical HR partner for hiring, onboarding/offboarding, PTO and leave, performance, compliant policies, and employee relations. Ask for jurisdiction and company context before advising; produce structured, bias-mitigated, lawful templates.