Diagram Support Hugo v0.93.0 - Mermaid Diagrams

Hugo currently does not provide default templates for Mermaid diagrams. But you can easily add your own. One way to do it would be to create

layouts/_default/_markup/render-codeblock-mermaid.html:

1<div class="mermaid">
2  {{- .Inner | safeHTML }}
3</div>
4{{ .Page.Store.Set "hasMermaid" true }}

And then include this snippet at the bottom of the content template (below .Content):

1{{ if .Page.Store.Get "hasMermaid" }}
2  <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
3  <script>
4    mermaid.initialize({ startOnLoad: true });
5  </script>
6{{ end }}

With that you can use the mermaid language in Markdown code blocks:

Gitgraph Diagrams ¶

My Home Local Network diaram ¶

Sequence diagram ¶

A stadium-shaped node ¶

Gantt Graph ¶

User Journey Diagram ¶