mermaid.js

JavaScript based diagramming and charting tool.
Renders Markdown-inspired text definitions to create and modify diagrams dynamically.

Live editor
Diagrams
Further readings

Live editor

Mermaid.js offers a live editor to check the diagrams' code.

Diagrams

Code blocks for diagrams can either:

start with ```mermaid and finish with ```, or
start with :::mermaid and finish with :::

but are apparently only rendered in Markdown when using the ``` notation:

Code delimiter	Gitea	Github	Gitlab
```mermaid	✓	✓	✓
`:::mermaid`	✗	✗	✗

Flowchart (a.k.a. graph)

:::mermaid
  flowchart TB

    sq[Square shape] --> ci((Circle shape))

    subgraph A
      od>Odd shape]-- Two line<br/>edge comment --> ro
      di{Diamond with <br/> line break} -.-> ro(Rounded<br>square<br>shape)
      di==>ro2(Rounded square shape)
    end

    %% Notice how text in shapes is appended further down
    e --> od3>Really long text with linebreak<br>in an Odd shape]

    %% Comments start with double percent signs
    e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-\*ز)

    cyr[Cyrillic]-->cyr2((Circle shape Начало));

    classDef green fill:#9f6,stroke:#333,stroke-width:2px;
    classDef orange fill:#f96,stroke:#333,stroke-width:4px;
    class sq,e green
    class di orange
:::

flowchart TB
  sq[Square shape] --> ci((Circle shape))

  subgraph A
    od>Odd shape]-- Two line<br/>edge comment --> ro
    di{Diamond with <br/> line break} -.-> ro(Rounded<br>square<br>shape)
    di==>ro2(Rounded square shape)
  end

  %% Notice how text in shapes is appended further down
  e --> od3>Really long text with linebreak<br>in an Odd shape]

  %% Comments start with double percent signs
  e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-\*ز)

  cyr[Cyrillic]-->cyr2((Circle shape Начало));

  classDef green fill:#9f6,stroke:#333,stroke-width:2px;
  classDef orange fill:#f96,stroke:#333,stroke-width:4px;
  class sq,e green
  class di orange

:::mermaid
  graph LR
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    subgraph work
      C -->|One| D[Laptop]
      C --x|Two| E[iPhone]
      C -.->|Three| F[fa:fa-car Car]
      C ==> G((Bike))
      C --> J>TV]
    end
:::

graph LR
  A[Christmas] -->|Get money| B(Go shopping)
  B --> C{Let me think}
  subgraph work
    C -->|One| D[Laptop]
    C --x|Two| E[iPhone]
    C -.->|Three| F[fa:fa-car Car]
    C ==> G((Bike))
    C --> J>TV]
  end

Sequence diagram

:::mermaid
  sequenceDiagram
    Alice->>+John: Hello John, how are you?
    Alice->>+John: John, can you hear me?
    John-->>-Alice: Hi Alice, I can hear you!
    John-->>-Alice: I feel great!
:::

sequenceDiagram
  Alice->>+John: Hello John, how are you?
  Alice->>+John: John, can you hear me?
  John-->>-Alice: Hi Alice, I can hear you!
  John-->>-Alice: I feel great!

Class diagram

:::mermaid
  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()
    }
:::

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

Refer State diagrams.

:::mermaid
  stateDiagram-v2
    direction LR

    state "Still state with description" as Still
    Moving: Moving state with description

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

stateDiagram-v2
  direction LR

  state "Still state with description" as Still
  Moving: Moving state<br/>with description

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

Gantt diagram

:::mermaid
  gantt
    title A Gantt Diagram
    dateFormat YYYY-MM-DD
    section Section
    A task           :a1, 2014-01-01, 30d
    Another task     :after a1 , 20d
    section Another
    Task in sec      :2014-01-12 , 12d
    another task     :24d
:::

gantt
  title A Gantt Diagram
  dateFormat  YYYY-MM-DD
  section Section
  A task           :a1, 2014-01-01, 30d
  Another task     :after a1, 20d
  section Another
  Task in sec      :2014-01-12, 12d
  another task     :24d

Pie chart

:::mermaid
  pie title Pets adopted by volunteers
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 15
:::

pie title Pets adopted by volunteers
  "Dogs" : 386
  "Cats" : 85
  "Rats" : 15

Git commit flow

:::mermaid
  gitGraph:
    commit
    branch develop
    checkout develop
    commit id:"customId"
    commit tag:"customTag"
    checkout main
    commit type: HIGHLIGHT
    commit
    merge develop
    commit
    branch test
    commit
:::

gitGraph:
  commit
  branch develop
  checkout develop
  commit id:"customId"
  commit tag:"customTag"
  checkout main
  commit type: HIGHLIGHT
  commit
  merge develop
  commit
  branch test
  commit

6.3 KiB Raw Blame History