Add Mermaid support

[h-enk]

Features

• Use shortcode
• Use code fences
• Uses Doks default font Jost
• Mermaid script is only loaded on pages that need it
• No conflicts w/ highlight.js + clipboard
• No Content Security Policy conflicts
• Shows error message when mermaid = true is not set

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

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

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

Code fences

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

Documentation

See: https://getdoks.org/docs/extensions/mermaid/