Last updated

Insert Mermaid diagrams

Deprecated docs

The developer portal beta is approaching end of life.

Use Realm and Reunite instead. Read the migration guide.

You can insert mermaid charts and diagrams directly into markdown. This allows you to adhere to the docs-as-code philosophy.

To insert a diagram, create a code block and specify the mermaid language, like this example:

```mermaid
graph LR
    Start --> Stop
```

An example of a graph

Start
Stop

An example of a sequence diagram

```mermaid
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:

AliceBobJohnHello John, how are you?Fight against hypochondrialoop[Healthcheck]Rational thoughts prevail...Great!How about you?Jolly good!AliceBobJohn

An example of a Gantt diagram

```mermaid
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
        section Critical tasks
        Completed task in the critical line :crit, done, 2014-01-06,24h
        Implement parser and jison          :crit, done, after des1, 2d
        Create tests for parser             :crit, active, 3d
        Future task in critical line        :crit, 5d
        Create tests for renderer           :2d
        Add to mermaid                      :1d
```

Gantt:

2014-01-072014-01-092014-01-112014-01-132014-01-152014-01-172014-01-192014-01-21Completed task Completed task in the critical line Implement parser and jison Active task Create tests for parser Future task Future task in critical line Future task2 Create tests for renderer Add to mermaid A sectionCritical tasksAdding GANTT diagram functionality to mermaid
 
Next page