Mermaid.js diagrams

Doctave supports Mermaid JS diagrams out of the box. All you need to do is specify the mermaid language for your codeblock, and Doctave will render the diagram for you.

Diagram types supported include

Pie chards
Sequence diagrams
Flowcharts
Class diagrams
State diagrams

Basic example

Specify mermaid as your code block language:

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

```

and see your graph rendered as follows:

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

Learning Mermaid.js

If you are not familiar with Mermaid JS, we suggest taking a look at their tutorials and playing around with their live editor.

Further examples

Below are a few examples to get you started if you want to play around with the Mermaid syntax.

Pie chart

```mermaid
pie title Favorite pie flavor
         "Lemon" : 2
         "Apple" : 3
         "Blueberry" : 5.6
```

pie title Favorite pie flavor "Lemon" : 2 "Apple" : 3 "Blueberry" : 5.6

Sequence diagram

```mermaid
sequenceDiagram
    Alice ->> Bob: Hello Bob, how are you?
    Bob-->>John: How about you John?
    Bob--x Alice: I am good thanks!
    Bob-x John: I am good thanks!
    Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.

    Bob-->Alice: Checking with John...
    Alice->John: Yes... John, how are you?
```

sequenceDiagram Alice ->> Bob: Hello Bob, how are you? Bob-->>John: How about you John? Bob--x Alice: I am good thanks! Bob-x John: I am good thanks! Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row. Bob-->Alice: Checking with John... Alice->John: Yes... John, how are you?

Source.

State diagram

```mermaid
stateDiagram-v2
    [*] --> Still
    Still --> [*]

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

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

Source.