Mermaid.js diagrams

Mermaid.js is a diagramming and charting tool. It allows you to write text descriptions of diagrams, which are then rendered into images.

Including Mermaid diagrams

In order to include mermaid.js diagrams, enclose the mermaid syntax in a code block with language =mermaid.

Editor

Presentation

Both

⛶

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

Configuring Mermaid

Mermaid can be configured by setting the window.Mermaid configuration value, following mermaid’s configuration schema. The default value is:

{
  startOnLoad: false,
  deterministicIds : true,
  securityLevel: "loose"
}

Note that startOnLoad must be set to false, in order for Slipshow to be able to start after all diagrams have been rendered.