Mermaid.js diagrams

Mermaid.js is a diagramming and charting tool. It allows you to write descriptions of diagrams, and let them be rendered.

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"
}

Not that startOnLoad has to be set to false, in order for Slipshow to be able to start when all diagrams have been rendered.