Mermaid lets you create diagrams and visualizations using text and code.

Per poter utilizzare mermaid in un sito statico come quello generato da Hugo basta aggiungere in layouts/shortcodes/ il file mermaid.html, contenente il seguente codice.

<div class="mermaid">
  {{.Inner}}
</div>

{{ if (.Page.Params.mermaid) }}
<!-- MermaidJS support -->
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad:true});
</script>
{{ end }}

Mermaid si basa su javascript e la sintassi richiama vagamente markdown. Con il codice che segue

{{< mermaid >}}
%%{init: {’theme’: ‘base’, ’themeVariables’: { ‘primaryColor’: ‘#ff0000’}}}%%
graph TD;
A–>B;
A–>C;
B–>D;
C–>D;
{{< /mermaid >}}

Si ottiene

Un altro esempio.
Con questo codice

{{< mermaid >}}
%%{init: {’theme’: ‘base’, ’themeVariables’: { ‘primaryColor’: ‘#ffcccc’, ’edgeLabelBackground’:’#ffffee’, ’tertiaryColor’: ‘#fff0f0’}}}%%
flowchart LR
A[Hard] –>|Text| B(Round)
B –> C{Decision}
C –>|One| D[Result 1]
C –>|Two| E[Result 2]
{{< /mermaid >}}

Si ottiene

Non ci si deve dimenticare di aggiungere nel front matter mermaid: true
La documentazione di mermaid è disponibile qui.