Mermaid

How to add Mermaid charts and diagrams to your Doks website.

On this page

👉

The Mermaid javascript library is quite large (minified 1.12 MB). For performance reasons, consider using Mermaid at build time (recommended).

At request time

Enable

Mermaid support is switched off per default. For performance reasons, the script is only loaded on pages that need it (so, not site wide). Activate it by setting mermaid = true in the front matter of a page.

Shortcode

  1. {{< mermaid class="bg-light text-center" >}}
  2. graph TD
  3.   A[Hard] -->|Text| B(Round)
  4.   B --> C{Decision}
  5.   C -->|One| D[Result 1]
  6.   C -->|Two| E[Result 2]
  7. {{< /mermaid >}}

Note that, you can add Bootstrap classes to the shortcode, for e.g. aligning the graph or setting the background color.

Mermaid Shortcode

Note, this is an image, because Mermaid support is switched off on this site.

Code fences

  1. ```mermaid
  2. graph TD
  3.   A[Hard] -->|Text| B(Round)
  4.   B --> C{Decision}
  5.   C -->|One| D[Result 1]
  6.   C -->|Two| E[Result 2]
  7. ```

Mermaid Code Fences Note, this is an image, because Mermaid support is switched off on this site.

At build time

If you don’t need to generate charts and diagrams at request time, use the Mermaid Live Editor to generate charts and diagrams for use at build time.

Workflow

  1. Generate your chart /diagram in the Mermaid Live Editor
  2. Save the definition file (for future editing purposes) + png in your page bundle
  3. Insert the png in your page with the small image shortcode.

Usage

Resources