A comprehensive showcase of all Mermaid diagram types with colorful styling.
The most common diagram type for visualizing processes and workflows.
flowchart TD
subgraph Input["🔵 Input Phase"]
A[Start]:::blue --> B{Decision}:::orange
end
subgraph Process["🟢 Processing"]
B -->|Yes| C[Process A]:::green
B -->|No| D[Process B]:::red
C --> E[Combine]:::purple
D --> E
end
subgraph Output["🟣 Output Phase"]
E --> F[End]:::pink
end
classDef blue fill:#3498db,stroke:#2980b9,color:white
classDef orange fill:#f39c12,stroke:#d35400,color:white
classDef green fill:#2ecc71,stroke:#27ae60,color:white
classDef red fill:#e74c3c,stroke:#c0392b,color:white
classDef purple fill:#9b59b6,stroke:#8e44ad,color:white
classDef pink fill:#e91e63,stroke:#c2185b,color:white
Shows interactions between participants over time.
sequenceDiagram
autonumber
participant U as 👤 User
participant S as 🖥️ Server
participant D as 🗄️ Database
rect rgb(200, 230, 255)
Note over U,D: Authentication Flow
U->>+S: Login Request
S->>+D: Validate Credentials
D-->>-S: User Data
S-->>-U: JWT Token
end
rect rgb(200, 255, 200)
Note over U,D: Data Request
U->>+S: GET /api/data
S->>+D: Query Data
D-->>-S: Results
S-->>-U: JSON Response
end
Represents object-oriented structures and relationships.
classDiagram
class Animal {
<<abstract>>
+String name
+int age
+makeSound()*
+move()
}
class Dog {
+String breed
+bark()
+fetch()
}
class Cat {
+boolean indoor
+meow()
+scratch()
}
class Bird {
+double wingspan
+fly()
+sing()
}
Animal <|-- Dog : extends
Animal <|-- Cat : extends
Animal <|-- Bird : extends
class Owner {
+String name
+adopt(Animal)
}
Owner "1" --> "*" Animal : owns
style Animal fill:#ffeb3b,stroke:#fbc02d
style Dog fill:#4caf50,stroke:#388e3c
style Cat fill:#ff9800,stroke:#f57c00
style Bird fill:#2196f3,stroke:#1976d2
style Owner fill:#e91e63,stroke:#c2185b
Illustrates state transitions in a system.
stateDiagram-v2
[*] --> Idle
state "🟢 Idle" as Idle
state "🔵 Processing" as Processing
state "🟡 Waiting" as Waiting
state "🔴 Error" as Error
state "✅ Complete" as Complete
Idle --> Processing : Start Task
Processing --> Waiting : Await Response
Processing --> Error : Exception
Waiting --> Processing : Response Received
Waiting --> Error : Timeout
Error --> Idle : Reset
Processing --> Complete : Success
Complete --> [*]
note right of Processing
Active computation
in progress
end note
note left of Error
Requires manual
intervention
end note
Database schema visualization.
erDiagram
CUSTOMER ||--o{ ORDER : places
CUSTOMER {
int id PK
string name
string email
date created_at
}
ORDER ||--|{ ORDER_ITEM : contains
ORDER {
int id PK
int customer_id FK
date order_date
string status
decimal total
}
ORDER_ITEM }|--|| PRODUCT : references
ORDER_ITEM {
int id PK
int order_id FK
int product_id FK
int quantity
decimal price
}
PRODUCT {
int id PK
string name
string category
decimal price
int stock
}
PRODUCT }o--|| CATEGORY : belongs_to
CATEGORY {
int id PK
string name
string description
}
Maps user experience through a process.
journey
title My Working Day
section Morning
Wake up: 3: Me
Drink coffee: 5: Me
Commute to work: 2: Me, Bus
section Work
Check emails: 3: Me
Team meeting: 4: Me, Team
Deep work session: 5: Me
Lunch break: 4: Me, Colleagues
section Afternoon
Code review: 4: Me, Team
Client call: 3: Me, Client
Documentation: 2: Me
section Evening
Commute home: 2: Me, Bus
Dinner: 5: Me, Family
Relax: 5: Me
Project timeline and task scheduling.
gantt
title Project Development Timeline
dateFormat YYYY-MM-DD
section 📋 Planning
Requirements gathering :done, req, 2024-01-01, 14d
System design :done, design, after req, 10d
Architecture review :done, review, after design, 5d
section 💻 Development
Backend development :active, backend, 2024-02-01, 30d
Frontend development :frontend, after backend, 25d
API integration :api, after backend, 15d
section 🧪 Testing
Unit testing :unit, after frontend, 10d
Integration testing :int, after unit, 10d
UAT :uat, after int, 7d
section 🚀 Deployment
Staging deployment :staging, after uat, 3d
Production deployment :prod, after staging, 2d
Monitoring setup :monitor, after prod, 5d
Data distribution visualization.
pie showData
title Technology Stack Usage
"JavaScript" : 35
"Python" : 25
"TypeScript" : 20
"Go" : 10
"Rust" : 5
"Other" : 5
Strategic positioning and analysis.
quadrantChart
title Product Feature Prioritization
x-axis Low Effort --> High Effort
y-axis Low Impact --> High Impact
quadrant-1 Plan Carefully
quadrant-2 Do First
quadrant-3 Delegate
quadrant-4 Quick Wins
Feature A: [0.8, 0.9]
Feature B: [0.2, 0.8]
Feature C: [0.7, 0.3]
Feature D: [0.3, 0.2]
Feature E: [0.5, 0.6]
Feature F: [0.9, 0.4]
Feature G: [0.1, 0.5]
Version control history visualization.
gitGraph
commit id: "Initial"
commit id: "Add README"
branch develop
checkout develop
commit id: "Feature setup"
branch feature/auth
checkout feature/auth
commit id: "Add login" type: HIGHLIGHT
commit id: "Add logout"
checkout develop
merge feature/auth tag: "v0.1.0"
branch feature/api
checkout feature/api
commit id: "Create endpoints"
commit id: "Add validation" type: HIGHLIGHT
checkout develop
merge feature/api
checkout main
merge develop tag: "v1.0.0" type: HIGHLIGHT
commit id: "Hotfix" type: REVERSE
Hierarchical idea organization.
mindmap
root((🧠 Project Planning))
📋 Requirements
Functional
User Stories
Use Cases
Non-Functional
Performance
Security
Scalability
👥 Team
Frontend
React
CSS
Backend
Node.js
Database
DevOps
CI/CD
Cloud
📅 Timeline
Phase 1
Research
Design
Phase 2
Development
Testing
Phase 3
Deployment
Maintenance
💰 Budget
Personnel
Infrastructure
Tools