Skip to content

JakeSteam/Mermaid

Repository files navigation

Mermaid syntax references

A rewrite of the Mermaid documentation as a learning aid and cheatsheet.

ExampleCode
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, 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
Loading
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

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:
    commit
    branch branch2
    checkout branch2
    commit
    checkout main
    commit
    merge branch2
Loading
gitGraph:
    commit
    branch branch2
    checkout branch2
    commit
    checkout main
    commit
    merge branch2

Git graphs in Mermaid cheatsheet

About

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

Topics

Resources

License

Stars

Watchers

Forks