https://github.com/jakesteam/mermaid
A collection of cheatsheets for using Mermaid diagrams on GitHub and elsewhere
https://github.com/jakesteam/mermaid
cheatsheet mermaid mermaidjs
Last synced: 5 months ago
JSON representation
A collection of cheatsheets for using Mermaid diagrams on GitHub and elsewhere
- Host: GitHub
- URL: https://github.com/jakesteam/mermaid
- Owner: JakeSteam
- License: mit
- Created: 2022-02-24T19:58:53.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2025-04-27T18:20:24.000Z (about 1 year ago)
- Last Synced: 2025-04-27T19:23:06.354Z (about 1 year ago)
- Topics: cheatsheet, mermaid, mermaidjs
- Homepage: https://blog.jakelee.co.uk/using-mermaid-for-diagrams-on-github/
- Size: 110 KB
- Stars: 317
- Watchers: 3
- Forks: 39
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
> [!TIP]
> **Last updated Apr 2025** to include Quadrant, C4, Mindmap, ZenUML, Timeline, Sankey, XY, Block, Architecture, Kanban, Packet, and Radar diagrams!
# Mermaid syntax references
A rewrite of [the Mermaid documentation](https://mermaid.js.org/intro/syntax-reference.html) as a learning aid and cheatsheet. You can also experiment with Mermaid [in their interactive online editor](https://mermaid.live/edit)!
ExampleCode
```mermaid
flowchart LR
A[Start] --> B{Should you?}
B -- Yes --> C{{Do it}}
B -- Maybe --> D[(Save for later)]
B -- No --> E[Okay]
```
```
flowchart LR
A[Start] --> B{Should you?}
B -- Yes --> C{{Do it}}
B -- Maybe --> D[(Save for later)]
B -- No --> E[Okay]
```
Flowchart in Mermaid cheatsheet
```mermaid
sequenceDiagram
Alice ->>+ Bob: Here's a message!
Bob ->>- Alice: Hmm, ok, thanks.
```
```
sequenceDiagram
Alice ->>+ Bob: Here's a message!
Bob ->>- Alice: Hmm, ok, thanks.
```
Sequence diagram in Mermaid cheatsheet
```mermaid
classDiagram
class ClassName {
String stringName
Long longName
MyDatatype attributeName
functionName(parameter) ReturnType
functionName2(parameter2) ReturnType
}
class Interface {
Int intName
}
ClassName --|> Interface
```
```
classDiagram
class ClassName {
String stringName
Long longName
MyDatatype attributeName
functionName(parameter) ReturnType
functionName2(parameter2) ReturnType
}
class Interface {
Int intName
}
ClassName --|> Interface
```
Class diagram in Mermaid cheatsheet
```mermaid
stateDiagram-v2
Stationary --> Moving : Begin moving
Moving --> Stationary : Stop moving
```
```
stateDiagram-v2
Stationary --> Moving : Begin moving
Moving --> Stationary : Stop moving
```
State diagram in Mermaid cheatsheet
```mermaid
erDiagram
User {
Int id PK
String username
Int serverId FK
}
Server {
Int id PK
String serverName
}
Server ||--o{ User : has
```
```
erDiagram
User {
Int id PK
String username
Int serverId FK
}
Server {
Int id PK
String serverName
}
Server ||--o{ User : has
```
Entity relationship diagram in Mermaid cheatsheet
```mermaid
journey
title User Journey
section Logging in
Navigate to login: 4: Alice, Bob, Craig
Entering details: 2: Alice, Bob
Pressing button: 5: Alice
```
```
journey
title User Journey
section Logging in
Navigate to login: 4: Alice, Bob, Craig
Entering details: 2: Alice, Bob
Pressing button: 5: Alice
```
User journey diagram in Mermaid cheatsheet
```mermaid
gantt
Dated Milestone: milestone, m1, 2023-01-01, 1d
Relative Milestone: milestone, m2, after m1, 1d
Task 1: a1, 2023-01-01, 1d
Task 2: a2, after a1, 1d
Task 3: a3, 2023-01-01, 36hr
```
```
gantt
Dated Milestone: milestone, m1, 2023-01-01, 1d
Relative Milestone: milestone, m2, after m1, 1d
Task 1: a1, 2023-01-01, 1d
Task 2: a2, after a1, 1d
Task 3: a3, 2023-01-01, 36hr
```
Gantt chart in Mermaid cheatsheet
```mermaid
pie
title Fruits
"Apples" : 50
"Oranges" : 20
"Grapes" : 9.99
"Passionfruits" : 12.5
```
```
pie
title Fruits
"Apples" : 50
"Oranges" : 20
"Grapes" : 9.99
"Passionfruits" : 12.5
```
Pie chart in Mermaid cheatsheet
```mermaid
quadrantChart
title Title of quadrant chart
x-axis X low value --> X high value
y-axis Y low value --> Y high value
quadrant-1 Top right name
quadrant-2 Top left name
quadrant-3 Bottom left name
quadrant-4 Bottom right name
Value A: [0.1, 0.2]
Value B: [0.9, 0.8]
Value C: [0.5, 0.5]
Value D: [0.9, 0.9]
```
```
quadrantChart
title Title of quadrant chart
x-axis X low value --> X high value
y-axis Y low value --> Y high value
quadrant-1 Top right name
quadrant-2 Top left name
quadrant-3 Bottom left name
quadrant-4 Bottom right name
Value A: [0.1, 0.2]
Value B: [0.9, 0.8]
Value C: [0.5, 0.5]
Value D: [0.9, 0.9]
```
Quadrant diagram in Mermaid cheatsheet
```mermaid
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
```
```
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
```
Requirement diagram in Mermaid cheatsheet
```mermaid
gitGraph:
commit
branch branch2
checkout branch2
commit
checkout main
commit
merge branch2
```
```
gitGraph:
commit
branch branch2
checkout branch2
commit
checkout main
commit
merge branch2
```
Git graphs in Mermaid cheatsheet
```mermaid
C4Dynamic
title Internet Banking System Application
ContainerDb(c4, "Database", "Schema", "Stores")
Container(c1, "SPA", "JS", "Banking.")
Container_Boundary(b, "API Application") {
Component(c3, "Security", "Bean", "Login.")
Component(c2, "Controller", "Controller", "A")
}
Rel(c1, c2, "Submits", "JSON/HTTPS")
Rel(c2, c3, "Calls isAuthenticated() on")
Rel(c3, c4, "select *", "JDBC")
```
```
C4Dynamic
title Internet Banking System Application
ContainerDb(c4, "Database", "Schema", "Stores")
Container(c1, "SPA", "JS", "Banking.")
Container_Boundary(b, "API Application") {
Component(c3, "Security", "Bean", "Login.")
Component(c2, "Controller", "Controller", "A")
}
Rel(c1, c2, "Submits", "JSON/HTTPS")
Rel(c2, c3, "Calls isAuthenticated() on")
Rel(c3, c4, "select *", "JDBC")
```
C4 diagram in Mermaid cheatsheet
```mermaid
mindmap
Middle element
Branch 1
Branch 2
Branch 3
Branch 4
Sub-branch 1
Sub-branch 2
Sub-branch 3
Sub-sub-branch 1
```
```
mindmap
Middle element
Branch 1
Branch 2
Branch 3
Branch 4
Sub-branch 1
Sub-branch 2
Sub-branch 3
Sub-sub-branch 1
```
Mindmaps diagram in Mermaid cheatsheet
```mermaid
timeline
title Timeline title
2001: Something happened
2002: Something else happened
2003: Another thing happened
Whenever: This happened!
: And this!
```
```
timeline
title Timeline title
2001: Something happened
2002: Something else happened
2003: Another thing happened
Whenever: This happened!
: And this!
```
Timeline diagram in Mermaid cheatsheet
Will not work within GitHub without additional configuration.
```
zenuml
@Actor "An actor"
@VirtualMachine "A virtual machine"
@GoogleSecurity "Google Security"
@S3 "S3 bucket"
"An actor"->"A virtual machine": Uses
"A virtual machine"->"Google Security": Logs in
"Google Security"->"S3 bucket": Stores data
```
ZenUML diagram in Mermaid cheatsheet
```mermaid
sankey-beta
BlockA,SubblockA,100
BlockA,SubblockB,50
BlockA,SubblockC,10
SubblockA,SubsubblockA,70
SubblockA,SubsubblockC,30
SubblockB,SubsubblockA,50
SubblockC,SubsubblockB,7
SubblockC,SubsubblockD,80
BlockB,SubsubblockD,20
```
```
sankey-beta
BlockA,SubblockA,100
BlockA,SubblockB,50
BlockA,SubblockC,10
SubblockA,SubsubblockA,70
SubblockA,SubsubblockC,30
SubblockB,SubsubblockA,50
SubblockC,SubsubblockB,7
SubblockC,SubsubblockD,80
BlockB,SubsubblockD,20
```
Sankey diagram in Mermaid cheatsheet
```mermaid
xychart-beta
title "Chart title"
x-axis "Some months" [January, Febuary, March]
y-axis "How much I like them" 0.0 --> 1.0
bar [0.3, 0.1, 0.4]
line [5000, 6000, 7500]
```
```
xychart-beta
title "Chart title"
x-axis "Some months" [January, Febuary, March]
y-axis "How much I like them" 0.0 --> 1.0
bar [0.3, 0.1, 0.4]
line [5000, 6000, 7500]
```
XY diagram in Mermaid cheatsheet
```mermaid
block-beta
columns 5
a:3 b:2 c d e f g h
block:myBlock:2
columns 2
i j k
end
```
```
block-beta
columns 5
a:3 b:2 c d e f g h
block:myBlock:2
columns 2
i j k
end
```
Block diagram in Mermaid cheatsheet
```mermaid
packet-beta
title Packet diagram title
0-5: "First bytes"
6-15: "More bytes"
16-31: "Many more!"
32-63: "A defined row"
64-93: "Almost full row"
94: "A"
95: "B"
```
```
packet-beta
title Packet diagram title
0-5: "First bytes"
6-15: "More bytes"
16-31: "Many more!"
32-63: "A defined row"
64-93: "Almost full row"
94: "A"
95: "B"
```
Packet diagram in Mermaid cheatsheet
```mermaid
kanban
Individual metadata
Task B@{ ticket: ABC-123 }
Task C@{ assigned: 'Jake' }
Task D@{ priority: 'High' }
Combined metadata
Task A@{ ticket: ABC, assigned: 'J', priority: 'High' }
All priorities
Very High@{ priority: 'Very High' }
High@{ priority: 'High' }
Default
Low@{ priority: 'Low' }
Very Low@{ priority: 'Very Low' }
```
```
kanban
Individual metadata
Task B@{ ticket: ABC-123 }
Task C@{ assigned: 'Jake' }
Task D@{ priority: 'High' }
Combined metadata
Task A@{ ticket: ABC, assigned: 'J', priority: 'High' }
All priorities
Very High@{ priority: 'Very High' }
High@{ priority: 'High' }
Default
Low@{ priority: 'Low' }
Very Low@{ priority: 'Very Low' }
```
Kanban diagram in Mermaid cheatsheet
```mermaid
architecture-beta
service db(database)[Database]
service disk1(disk)[Storage]
service disk2(disk)[Storage]
service server(server)[Server]
db:L <-- R:server
disk1:T -- B:server
disk2:T <-- B:db
```
```
architecture-beta
service db(database)[Database]
service disk1(disk)[Storage]
service disk2(disk)[Storage]
service server(server)[Server]
db:L <-- R:server
disk1:T -- B:server
disk2:T <-- B:db
```
Architecture diagram in Mermaid cheatsheet
```mermaid
radar-beta
title Language skills
axis English, French, German, Spanish, Dutch, Abc, Def
curve a["User1"]{20, 30, 50, 60, 80, 30, 30}
curve b["User2"]{80, 30, 40, 50, 90, 10, 20}
curve c["User3"]{100, 100, 30, 50, 70, 70, 40}
```
```
radar-beta
title Language skills
axis English, French, German, Spanish, Dutch, Abc, Def
curve a["User1"]{20, 30, 50, 60, 80, 30, 30}
curve b["User2"]{80, 30, 40, 50, 90, 10, 20}
curve c["User3"]{100, 100, 30, 50, 70, 70, 40}
```