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