Create software diagrams using Mermaid text-based syntax. Use for class diagrams (domain modeling, OOP design), sequence diagrams (API flows, interactions), flowcharts (processes, algorithms, user journeys), ERD (database schemas), C4 architecture diagrams, state diagrams, git graphs, gantt charts, and data visualization.
Works with: Any AI coding agent (Claude, Cursor, GitHub Copilot, Windsurf, etc.)
Create professional software diagrams using Mermaid's text-based syntax. Diagrams are version-controllable, easy to update, and render automatically in GitHub, GitLab, Notion, and more.
Use this skill when you need to:
| Diagram Type | Use For | Syntax Starts With |
|---|---|---|
| Class Diagram | Domain models, OOP design | classDiagram |
| API flows, interactions |
sequenceDiagram |
| Flowchart | Processes, algorithms, user journeys | flowchart TD or flowchart LR |
| ERD | Database schemas | erDiagram |
| C4 Diagram | Architecture (context, container, component) | C4Context, C4Container, C4Component |
| State Diagram | State machines, lifecycles | stateDiagram-v2 |
| Git Graph | Branching strategies | gitGraph |
| Gantt Chart | Project timelines | gantt |
All Mermaid diagrams follow this structure:
diagramType
definition content
Key principles:
%% for commentsclassDiagram
User --> Order : places
Order *-- LineItem
class User {
+string email
+string name
+placeOrder()
}
class Order {
+int id
+decimal total
+addItem()
}
sequenceDiagram
participant User
participant API
participant DB
User->>API: POST /login
API->>DB: Query credentials
DB-->>API: Return user data
alt Valid
API-->>User: 200 OK + token
else Invalid
API-->>User: 401 Unauthorized
end
flowchart TD
Start([User visits]) --> Auth{Authenticated?}
Auth -->|No| Login[Login page]
Auth -->|Yes| Dashboard[Dashboard]
Login --> Validate{Valid?}
Validate -->|Yes| Dashboard
Validate -->|No| Error[Error message]
erDiagram
USER ||--o{ ORDER : places
ORDER ||--|{ LINE_ITEM : contains
USER {
int id PK
string email UK
string name
}
ORDER {
int id PK
int user_id FK
decimal total
}
C4Context
title System Context
Person(user, "User", "Customer")
System(app, "Web App", "E-commerce platform")
System_Ext(payment, "Payment Gateway")
Rel(user, app, "Browses, purchases")
Rel(app, payment, "Processes payments", "HTTPS")
--> Association
..> Dependency
--|> Inheritance/Generalization
--* Composition
--o Aggregation
->> Solid arrow (sync message)
-->> Dashed arrow (response)
--> Flowchart connection
[] Rectangle
() Rounded
{} Diamond (decision)
([]) Stadium/pill
[()] Cylinder (database)
||--|| One to one
||--o{ One to many
}o--o{ Many to many
Add themes and styling:
---