MermaidJs Cheatsheet
Quick Reference
https://jojozhuang.github.io/tutorial/mermaid-cheat-sheet/
Notes
Note right of John: Text in note
Note over Alice,John: A typical interaction
Note over Alice,John: A typical interaction<br/>But now in two lines
sequenceDiagram
Note right of John: Text in note
Note over Alice,John: A typical interaction
Note over Alice,John: A typical interaction
But now in two lines
Class Diagram
classDiagram
class Duck{
+String beakColor
+swim()
+quack()
}
classDiagram
class Duck{
+String beakColor
+swim()
+quack()
}
Entity Relationship Diagram
erDiagram
CAR {
string registrationNumber PK
string make
string model
string[] parts
}
PERSON {
string driversLicense PK "The license #"
string(99) firstName "Only 99 characters are allowed"
string lastName
string phone UK
int age
}
NAMED-DRIVER {
string carRegistrationNumber PK, FK
string driverLicence PK, FK
}
erDiagram
CAR {
string registrationNumber PK
string make
string model
string[] parts
}
PERSON {
string driversLicense PK "The license #"
string(99) firstName "Only 99 characters are allowed"
string lastName
string phone UK
int age
}
NAMED-DRIVER {
string carRegistrationNumber PK, FK
string driverLicence PK, FK
}
Flow Chart
---
title: Diagram Title
---
flowchart TD
A[Start] --> B{Is it?}
B -->|Yes| C[OK]
C --> D[Rethink]
D --> B
B ---->|No| E[End]
---
title: Diagram Title
---
flowchart LR
A[Start] --> B{Is it?}
B -->|Yes| C[OK]
C --> D[Rethink]
D --> B
B ---->|No| E[End]
Sequence Diagram
sequenceDiagram
actor User
participant System
User->>System: Sends Request
alt is valid?
System-->>User: Process Request
else is not valid?
System-->>User: Show Error Message
end
loop Every minute
John-->Alice: Great!
end
sequenceDiagram
actor User
participant System
User->>System: Sends Request
System-->>User: Process Request
alt is valid?
System-->>User: Process Request
else is not valid?
System-->>User: Show Error Message
end
loop Every minute
John-->Alice: Great!
end