Skip to content

Mermaid

Getting Started

Mermaid is a JavaScript-based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.

Including Mermaid

To use Mermaid in your project, include the following script in your HTML:

<script type="module">
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
  mermaid.initialize({ startOnLoad: true });
</script>

Flowchart

Basic Flowchart

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

Flowchart with Text and Styles

graph TD;
    A[Start] --> B{Is it?};
    B -- Yes --> C[OK];
    B -- No --> D[Not OK];
    C --> E[Rethink];
    D --> E;

Sequence Diagram

Basic Sequence Diagram

sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts<br/>prevail...
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!

Sequence Diagram with Activation

sequenceDiagram
    Alice->>+John: Hello John, how are you?
    John-->>-Alice: Great!

Gantt Chart

Basic Gantt Chart

gantt
    dateFormat  YYYY-MM-DD
    title Adding GANTT diagram functionality to mermaid
    section A section
    Completed task            :done,    des1, 2014-01-06,2014-01-08
    Active task               :active,  des2, 2014-01-09, 3d
    Future task               :         des3, after des2, 5d
    Future task2              :         des4, after des3, 5d

Class Diagram

Basic Class Diagram

classDiagram
    classA --|> classB : Inheritance
    classC --* classD : Composition
    classE --o classF : Aggregation
    classG <-- classH : Dependency
    classI -- classJ : Association

Detailed Class Diagram

classDiagram
    Animal <|-- Duck
    Animal <|-- Fish
    Animal <|-- Zebra
    Animal : +int age
    Animal : +String gender
    Animal: +isMammal()
    Animal: +mate()
    class Duck{
      +String beakColor
      +swim()
      +quack()
    }
    class Fish{
      -int sizeInFeet
      -canEat()
    }
    class Zebra{
      +bool is_wild
      +run()
    }

State Diagram

Basic State Diagram

stateDiagram
    [*] --> Still
    Still --> [*]

    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]

State Diagram with Transitions

stateDiagram
    [*] --> S1
    S1 --> S2
    S2 --> [*]

    state S1 {
        [*] --> S11
        S11 --> S12
        S12 --> [*]
    }

Pie Chart

Basic Pie Chart

pie
    title Key Elements in a Pie Chart
    "A" : 30
    "B" : 40
    "C" : 30

ER Diagram

Basic ER Diagram

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses

Git Graph

Basic Git Graph

gitGraph
    commit
    branch develop
    commit
    checkout main
    commit
    commit
    checkout develop
    merge main
    commit