Mermaid syntax references
A rewrite of the Mermaid documentation as a learning aid and cheatsheet.
| Example | Code |
flowchart LR
A[Start] --> B{Should you?}
B -- Yes --> C{{Do it}}
B -- Maybe --> D[(Save for later)]
B -- No --> E[Okay]
|
|
sequenceDiagram
Alice ->>+ Bob: Here's a message!
Bob ->>- Alice: Hmm, ok, thanks.
|
|
classDiagram
class ClassName {
String stringName
Long longName
MyDatatype attributeName
functionName(parameter) ReturnType
functionName2(parameter2) ReturnType
}
class Interface {
Int intName
}
ClassName --|> Interface
|
|
stateDiagram-v2
Stationary --> Moving : Begin moving
Moving --> Stationary : Stop moving
|
|
erDiagram
User {
Int id PK
String username
Int serverId FK
}
Server {
Int id PK
String serverName
}
Server ||--o{ User : has
|
|
journey
title User Journey
section Logging in
Navigate to login: 4: Alice, Bob, Craig
Entering details: 2: Alice, Bob
Pressing button: 5: Alice
|
|
gantt
Dated Milestone: milestone, m1, today, 1d
Relative Milestone: milestone, m2, after m1, 1d
Task 1: a1, today, 1d
Task 2: a2, after a1, 1d
Task 3: a3, today, 36hr
|
|
pie
title Fruits
"Apples" : 50
"Oranges" : 20
"Grapes" : 9.99
"Passionfruits" : 12.5
|
|
requirementDiagram
requirement UptimeRequirement {
id: 1
text: Site Uptime
risk: Medium
verifymethod: Analysis
}
element satisfyingElement {
type: MyElement
docref: ABC001
}
element containingElement {
type: MyElement
docref: ABC002
}
satisfyingElement - satisfies -> UptimeRequirement
containingElement - contains -> UptimeRequirement
|
|
gitGraph BT:
commit
branch branch2
checkout branch2
commit
checkout main
commit
merge branch2
|
|