Mermaid Guideline
Comprehensive guide to Mermaid diagram syntax. Learn advanced techniques and explore all available diagram types.
Advanced Flowchart
Flowcharts can be oriented in different directions (LR for left-to-right, TD for top-down, etc.) and support various node shapes including rectangles, diamonds for decisions, and rounded rectangles. You can also add labels to edges and create complex branching structures.
Preview
Code
```mermaid
graph LR
A[Start] --> B{Check Condition}
B -->|True| C[Process A]
B -->|False| D[Process B]
C --> E[Sub-process 1]
C --> F[Sub-process 2]
D --> G[Alternative Process]
E --> H[End]
F --> H
G --> H
```Class Diagram
Class diagrams represent object-oriented system structures. They show classes with their attributes and methods, inheritance relationships (using <|--), and associations. Use + for public, - for private, and # for protected members.
Preview
Code
```mermaid
classDiagram
Animal <|-- Duck
Animal <|-- Fish
Animal: +int age
Animal: +String gender
Animal: +isMammal() bool
Animal: +mate()
Duck: +String beakColor
Duck: +swim()
Duck: +quack()
Fish: -int sizeInFeet
Fish: +canEat()
Fish: +swim()
```Entity Relationship Diagram
ER diagrams model database structures showing entities (tables), their attributes (columns), and relationships between them. Use ||--o{ for one-to-many, ||--|| for one-to-one, and }o--o{ for many-to-many relationships.
Preview
Code
```mermaid
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE_ITEM : contains
PRODUCT ||--o{ LINE_ITEM : "is in"
CUSTOMER {
string name
string email
int phone
}
ORDER {
int orderNumber
date orderDate
}
PRODUCT {
string productCode
string description
float price
}
```Gantt Chart
Gantt charts visualize project schedules and timelines. Define sections for different phases, specify task names, IDs, start dates, and durations. Tasks can depend on previous tasks using 'after' keyword.
Preview
Code
```mermaid
gantt
title Project Timeline
dateFormat YYYY-MM-DD
section Phase 1
Design :a1, 2024-01-01, 30d
section Phase 2
Development :a2, after a1, 45d
Testing :a3, after a2, 15d
section Phase 3
Deployment :a4, after a3, 10d
```Pie Chart
Pie charts display proportional data in a circular format. Each slice represents a category with its percentage or value. The chart automatically calculates proportions and displays them visually.
Preview
Code
```mermaid
pie title Distribution of Sales
"Product A" : 42.7
"Product B" : 28.3
"Product C" : 15.2
"Product D" : 8.5
"Others" : 5.3
```Git Graph
Git graphs visualize Git branching and merging workflows. They show commits, branches, checkouts, and merges. Perfect for documenting Git workflows and understanding repository history.
Preview
Code
```mermaid
gitGraph
commit id: "Initial"
branch develop
checkout develop
commit id: "Feature A"
commit id: "Feature B"
checkout main
merge develop
commit id: "Release"
```