tronch0 / Mermaid

A collection of cheatsheets for using Mermaid diagrams on GitHub and elsewhere

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] Loading	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
sequenceDiagram Alice ->>+ Bob: Here's a message! Bob ->>- Alice: Hmm, ok, thanks. Loading	sequenceDiagram Alice ->>+ Bob: Here's a message! Bob ->>- Alice: Hmm, ok, thanks. Sequence diagram in Mermaid cheatsheet
classDiagram class ClassName { String stringName Long longName MyDatatype attributeName functionName(parameter) ReturnType functionName2(parameter2) ReturnType } class Interface { Int intName } ClassName --|> Interface Loading	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
stateDiagram-v2 Stationary --> Moving : Begin moving Moving --> Stationary : Stop moving Loading	stateDiagram-v2 Stationary --> Moving : Begin moving Moving --> Stationary : Stop moving State diagram in Mermaid cheatsheet
erDiagram User { Int id PK String username Int serverId FK } Server { Int id PK String serverName } Server ||--o{ User : has Loading	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
journey title User Journey section Logging in Navigate to login: 4: Alice, Bob, Craig Entering details: 2: Alice, Bob Pressing button: 5: Alice Loading	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
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 Loading	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 Gantt chart in Mermaid cheatsheet
pie title Fruits "Apples" : 50 "Oranges" : 20 "Grapes" : 9.99 "Passionfruits" : 12.5 Loading	pie title Fruits "Apples" : 50 "Oranges" : 20 "Grapes" : 9.99 "Passionfruits" : 12.5 Pie chart in Mermaid cheatsheet
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 Loading	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
gitGraph BT: commit branch branch2 checkout branch2 commit checkout main commit merge branch2 Loading	gitGraph BT: commit branch branch2 checkout branch2 commit checkout main commit merge branch2 Git graphs in Mermaid cheatsheet