Diagram Examples
This page contains comprehensive examples of all major Mermaid diagram types. Click the "Copy" button on any code block to copy it to your clipboard, then paste it into the editor to try it yourself!
Simple decision flow with different node shapes and arrow types.
graph TD
A[Start] --> B{Is it working?}
B -->|Yes| C[Great!]
B -->|No| D[Fix it]
D --> B
C --> E[End]
Organize complex flows with subgraphs and different node styles.
graph LR
subgraph Frontend
A[User Interface] --> B[React Components]
B --> C[State Management]
end
subgraph Backend
D[API Gateway] --> E[Business Logic]
E --> F[(Database)]
end
C -->|API Call| D
F -->|Response| C
Visualize interactions between different system components.
sequenceDiagram
participant User
participant Browser
participant Server
participant Database
User->>Browser: Enter credentials
Browser->>Server: POST /login
activate Server
Server->>Database: Query user
Database-->>Server: User data
Server-->>Browser: JWT Token
deactivate Server
Browser->>User: Redirect to dashboard
Show conditional logic and loops in sequence diagrams.
sequenceDiagram
participant Client
participant API
participant Cache
participant DB
Client->>API: Request data
API->>Cache: Check cache
alt Cache hit
Cache-->>API: Return cached data
else Cache miss
API->>DB: Query database
DB-->>API: Return data
API->>Cache: Store in cache
end
API-->>Client: Return response
Model class relationships and hierarchies.
classDiagram
class Animal {
+String name
+int age
+makeSound()
+eat()
}
class Dog {
+String breed
+bark()
+fetch()
}
class Cat {
+String color
+meow()
+scratch()
}
Animal <|-- Dog
Animal <|-- Cat
Model state transitions in a system.
stateDiagram-v2
[*] --> Pending
Pending --> Processing: Payment confirmed
Processing --> Shipped: Order packed
Shipped --> Delivered: Received by customer
Delivered --> [*]
Pending --> Cancelled: Payment failed
Processing --> Cancelled: Out of stock
Cancelled --> [*]
Design database relationships and cardinality.
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
PRODUCT ||--o{ LINE-ITEM : includes
CUSTOMER {
int id PK
string name
string email
string phone
}
ORDER {
int id PK
int customer_id FK
date order_date
decimal total
}
PRODUCT {
int id PK
string name
decimal price
int stock
}
LINE-ITEM {
int order_id FK
int product_id FK
int quantity
decimal subtotal
}
Plan and track project phases and milestones.
gantt
title Project Development Timeline
dateFormat YYYY-MM-DD
section Planning
Requirements gathering :a1, 2024-01-01, 7d
Design phase :a2, after a1, 10d
section Development
Frontend development :b1, after a2, 20d
Backend development :b2, after a2, 25d
Database setup :b3, after a2, 5d
section Testing
Unit testing :c1, after b1, 5d
Integration testing :c2, after b2, 7d
UAT :c3, after c2, 5d
section Deployment
Production deployment :milestone, after c3, 0d
Visualize proportions and percentages.
pie title Technology Stack Usage
"JavaScript" : 35
"Python" : 25
"Java" : 20
"Go" : 12
"Rust" : 8
Visualize Git workflows and branching patterns.
gitGraph
commit
commit
branch develop
checkout develop
commit
commit
branch feature
checkout feature
commit
commit
checkout develop
merge feature
commit
checkout main
merge develop
commit
Map user experiences and satisfaction levels.
journey
title Customer Shopping Experience
section Browse
Visit website: 5: Customer
Search products: 4: Customer
View details: 5: Customer
section Purchase
Add to cart: 4: Customer
Checkout: 3: Customer
Payment: 3: Customer
section Post-Purchase
Order confirmation: 5: Customer
Delivery: 4: Customer
Review product: 5: Customer