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