Skip to main content

Diagram - mermaid

Introduction​

Diagrams can be rendered using Mermaid in a code block. You can test it using the live editor.

Example Mermaid diagram

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

See the Mermaid syntax documentation for more information on the Mermaid syntax.

Theming​

The diagram dark and light themes can be changed by setting mermaid.theme values in the themeConfig in your docusaurus.config.js. You can set themes for both light and dark mode.

docusaurus.config.js

export default {
  themeConfig: {
    mermaid: {
      theme: {light: 'neutral', dark: 'forest'},
    },
  },
};

See the Mermaid theme documentation for more information on theming Mermaid diagrams.

Mermaid Config​

Options in mermaid.options will be passed directly to mermaid.initialize:

docusaurus.config.js

export default {
  themeConfig: {
    mermaid: {
      options: {
        maxTextSize: 50,
      },
    },
  },
};

Pie Chart​

```mermaid
pie title NETFLIX
    "Time spent looking for movie" : 90
    "Time spent watching it" : 10
```

Flowchart​

You can use flowchart [direction] and id["text"] Node syntax.

Directions​

  • TD: Topdown
  • BT: Bottom to Top
  • LR: Left to Right
  • RL: Right to Left
```mermaid
---
title: Flowchart Example
---
flowchart LR
    markdown["`This **is** _Markdown_`"]
    newLines["`Line1
    Line 2
    Line 3`"]
    markdown --> newLines
```

Node Style​

  • id(text): Rounded Corner
  • id([text]): more Rounded
  • id[text]: Rectangle
```mermaid
flowchart LR
    id1(This is the text in the box)
    id2([This is the text in the box])
    id3[[This is the text in the box]]
    id4[(Database)]
    id5((This is the text in the circle))
    id6>This is the text in the box]
    id7{This is the text in the box}
    id8{{This is the text in the box}}
    id9[/This is the text in the box/]
    id10[\This is the text in the box\]
    A[/Christmas\]
    B[\Go shopping/]
    id11(((This is the text in the circle)))
```
```mermaid
flowchart LR
    A-->B
    A --- B
    A-- This is the text! ---B
    A---|This is the text|B
    A-->|text|B
    A-- text -->B
    A-.->B;
    A-. text .-> B
    A ==> B
    A ~~~ B
    A -- text --> B -- text2 --> C
    a --> b & c--> d
    A & B--> C & D
```

Simple Example​

```mermaid
flowchart TD
    A[Start] --> B{Is it?}
    B -->|Yes| C[OK]
    C --> D[Rethink]
    D --> B
    B ---->|No| E[End]
```

System Design Diagrams​

Diagrams are based on the diagrams in the System Design Primer

Mint​

Sales Rank​