Correct way to embed Mermaid.JS

support
,
10

I tried the code-fence style as the docs say, but it just won’t render and remains blank.

What I did:

  1. Created render-codeblock-mermaid.html in the correct dir with this content:
<div class="mermaid">
  {{- .Inner | safeHTML }}
</div>
{{ .Page.Store.Set "hasMermaid" true }}
  1. Modified my content file single.html in layouts/_default/ with:
{{ define "main" }}
<h1>{{ .Title }}</h1>

{{ if ne .Params.Type "page" }}
  {{ partial "metadata.html" . }}
{{ end }}

{{ .Content }}

{{ if .Page.Store.Get "hasMermaid" }}
  <script type="module">
    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs';
    mermaid.initialize({ startOnLoad: true });
  </script>
{{ end }}

{{ if .Params.categories }}

  <p><strong>Related categories:</strong></p>

  <ul>

  {{ with .Params.categories }}
  {{ range . }}
  {{ $href := print (absURL "categories/") (urlize .) }}
  <li><a href="{{ $href }}">{{ . }}</a></li>
  {{ end }}
  {{ end }}

  </ul>

{{ end }}

{{ if .Params.tags }}

  <p><strong>Related tags:</strong></p>

  <ul>

  {{ with .Params.tags }}
  {{ range . }}
  {{ $href := print (absURL "tags/") (urlize .) }}
  <li><a href="{{ $href }}">{{ . }}</a></li>
  {{ end }}
  {{ end }}

  </ul>

{{ end }}

{{ end }}
  1. Result = a blank white area where the diagram should be.

In the end only the short-code method is working, based on this: