Mermaid doesn't work

[nicfab]

Hi!
Starting from the file single.html, which is under themes/PaperMod/layouts/_default, I edited it adding the following Mermaid code

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

I retrieved that code from the Hugo website, here https://gohugo.io/content-management/diagrams/#mermaid-diagrams
I put the modified file single.html in /layouts/_default/, leaving the original single.html under themes/PaperMod/layouts/_default.

Now the files single.hml under /layouts/_default/ has the following lines:

{{- define "main" }}

<article class="post-single">
  <header class="post-header">
    {{ partial "breadcrumbs.html" . }}
    <h1 class="post-title">
      {{ .Title }}
      {{- if .Draft }}<sup><span class="entry-isdraft">&nbsp;&nbsp;[draft]</span></sup>{{- end }}
    </h1>
    {{- if .Description }}
    <div class="post-description">
      {{ .Description }}
    </div>
    {{- end }}
    {{- if not (.Param "hideMeta") }}
    <div class="post-meta">
      {{- partial "post_meta.html" . -}}
      {{- partial "translation_list.html" . -}}
      {{- partial "edit_post.html" . -}}
      {{- partial "post_canonical.html" . -}}
    </div>
    {{- end }}
  </header>
  {{- $isHidden := .Params.cover.hidden | default .Site.Params.cover.hiddenInSingle | default .Site.Params.cover.hidden }}
  {{- partial "cover.html" (dict "cxt" . "IsHome" false "isHidden" $isHidden) }}
  {{- if (.Param "ShowToc") }}
  {{- partial "toc.html" . }}
  {{- end }}

  {{- if .Content }}
  <div class="post-content">
    {{- if not (.Param "disableAnchoredHeadings") }}
    {{- partial "anchored_headings.html" .Content -}}
    {{- else }}{{ .Content }}{{ end }}
  </div>
  {{ if .Page.Store.Get "hasMermaid" }}
  <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
  <script>
    mermaid.initialize({ startOnLoad: true });
  </script>
  {{ end }}
  {{- end }}
  
  <footer class="post-footer">
    {{- if .Params.tags }}
    <ul class="post-tags">
      {{- range ($.GetTerms "tags") }}
      <li><a href="{{ .Permalink }}">{{ .LinkTitle }}</a></li>
      {{- end }}
    </ul>
    {{- end }}
    {{- if (.Param "ShowPostNavLinks") }}
    {{- partial "post_nav_links.html" . }}
    {{- end }}
    {{- if (and .Site.Params.ShowShareButtons (ne .Params.disableShare true)) }}
    {{- partial "share_icons.html" . -}}
    {{- end }}
  </footer>

  {{- if (.Param "comments") }}
  {{- partial "comments.html" . }}
  {{- end }}
</article>

{{- end }}{{/* end main */}}

Unfortunately, Mermaid doesn't work.
Where was I wrong?

[adityatelange]

Try implementating like it is implemented in this commit

bee-san@c5c9ffc

[asphaltbuffet]

But this is not convenient when hosting on GitHub via GitHub Actions.

None of those should affect the ability to use this with Github actions. Are you able to check the rendered source to ensure that the files are getting rendered as you expect?

[baozaolaowu]

Neither extended_head.html, extended_footer.html nor single.html work for my site.
I am prompted with the following error.
<.Page.Store.Get>: can't evaluate field Store in type page.Page

[ArkaprabhaChakraborty]

Neither extended_head.html, extended_footer.html nor single.html work for my site. I am prompted with the following error. <.Page.Store.Get>: can't evaluate field Store in type page.Page

Me too man!!! Anyone knows why?

[willihay]

Neither extended_head.html, extended_footer.html nor single.html work for my site. I am prompted with the following error. <.Page.Store.Get>: can't evaluate field Store in type page.Page

Me too man!!! Anyone knows why?

Yes, I just had to troubleshoot this. If you see the error message ".Page.Store.Get>: can't evaluate field Store in type page.Page", then you need to upgrade your version of Hugo. The Page.Store field was added in 0.93.

[baozaolaowu]

I succeeded with this method.
In the first step, Add the following code to layouts/partials/extend_head.html.

<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>
const config = {
    startOnLoad:true,
    theme: 'forest',
    themeVariables: {
        lineColor: "#fafafa"  
    },
    flowchart: {
        useMaxWidth:false,
        htmlLabels:true
        }
};
mermaid.initialize(config);
window.onload = () => {
    window.mermaid.init(undefined, document.querySelectorAll('.language-mermaid'));
}
</script>

In the last step, the guessSyntax of the goldmark in the config.yaml file has to be set to false or deleted for Mermaid to take effect.

[howardjohn]

Here is how I did it:

diff --git a/layouts/partials/extend_head.html b/layouts/partials/extend_head.html
new file mode 100644
index 0000000..59db893
--- /dev/null
+++ b/layouts/partials/extend_head.html
@@ -0,0 +1,9 @@
+{{ if .Page.Store.Get "needMermaid" -}}
+<script type="module">
+  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
+  mermaid.initialize({
+    startOnLoad: true,
+    'theme': 'base',
+  });
+</script>
+{{ end -}}
diff --git a/layouts/shortcodes/mermaid.html b/layouts/shortcodes/mermaid.html
new file mode 100644
index 0000000..c00edf5
--- /dev/null
+++ b/layouts/shortcodes/mermaid.html
@@ -0,0 +1,2 @@
+{{ .Page.Store.Set "needMermaid" true }}
+<div class="mermaid" align="center">{{ safeHTML .Inner }}</div>

Then in the content:

{{< mermaid >}}
graph LR
  a-->b
{{< /mermaid >}}

[howardjohn]

With changing based on color scheme (although not until page refresh):

{{ if .Page.Store.Get "needMermaid" -}}
<script type="module">
  var theme = 'neutral';
    if (localStorage.getItem("pref-theme") == "dark") {
      theme = 'dark'
    } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
      theme = 'dark'
    }
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
  mermaid.initialize({
    startOnLoad: true,
    'theme': theme,
  });
</script>
{{ end -}}

[nakednous]

I tried following @howardjohn by editing both partials and shortcodes in local layouts (not those found in themes as I plan to implement other shortcodes without affecting the upstream theme) so that they look like this:

layouts/partials/extend_head.html:

<!--katex is working -->
{{ if or .Params.math .Site.Params.math }}
{{ partial "math.html" . }}
{{ end }}

<!--mermaid is NOT working -->
{{ if .Page.Store.Get "needMermaid" -}}
<script type="module">
  var theme = 'neutral';
    if (localStorage.getItem("pref-theme") == "dark") {
      theme = 'dark'
    } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
      theme = 'dark'
    }
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
  mermaid.initialize({
    startOnLoad: true,
    'theme': theme,
  });
</script>
{{ end -}}

layouts/shortcodes/mermaid.html :

{{ .Page.Store.Set "needMermaid" true }}
<div class="mermaid" align="center">{{ safeHTML .Inner }}</div>

when including the shortcode within mypost.md as:

{{< mermaid >}}
graph LR
  a-->b
{{< /mermaid >}}

I got no mermaid diagram rendered (but just a center aligned text graph LR a-->b).

Any advice is much appreciated.

[fguisso]

Just a tip for anyone searching for toggle theme mode using mermaid, live example here:
layouts/_default/_markup/render-codeblock-mermaid.html

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

layouts/partials/extend_footer.html

{{ if .Page.Store.Get "hasMermaid" }}
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>
    const elementCode = '.mermaid'
    const loadMermaid = function(theme) {
        
        mermaid.initialize({theme})
        mermaid.init({theme}, document.querySelectorAll(elementCode))
    }
    const saveOriginalData = function(){
        return new Promise((resolve, reject) => {
            try {
                var els = document.querySelectorAll(elementCode),
                    count = els.length;
                els.forEach(element => {
                    element.setAttribute('data-original-code', element.innerHTML)
                    count--
                    if(count == 0){
                        resolve()
                    }
                });
            } catch (error) {
                reject(error)
            }
        })
    }
    const resetProcessed = function(){
        return new Promise((resolve, reject) => {
            try {
                var els = document.querySelectorAll(elementCode),
                    count = els.length;
                els.forEach(element => {
                    if(element.getAttribute('data-original-code') != null){
                        element.removeAttribute('data-processed')
                        element.innerHTML = element.getAttribute('data-original-code')
                    }
                    count--
                    if(count == 0){
                        resolve()
                    }
                });
            } catch (error) {
                reject(error)
            }
        })
    }

    saveOriginalData()
        .catch( console.error )
   
    let statusTheme = localStorage.getItem("pref-theme")
        if (statusTheme == 'dark') {
            resetProcessed()
                .then(loadMermaid('dark'))
                .catch(console.error)
        }
        if (statusTheme == 'light') {
            resetProcessed()
                .then(loadMermaid('neutral'))
                .catch(console.error)
        }
       document.getElementById("theme-toggle").addEventListener("click",()=>{
        resetProcessed()
            .then(loadMermaid(mermaid.mermaidAPI.getConfig().theme == 'neutral' ? 'dark' : 'neutral'))
            .catch(console.error)

    })
</script>
{{ end }}

thanks to mermaid-js/mermaid#1945 (comment)

[syaghoubi00]

What I came up with based on Diagrams | Hugo

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

<pre class="mermaid">
  {{- .Inner | htmlEscape | safeHTML }}
</pre>
{{ .Page.Store.Set "hasMermaid" true }}

layouts/partials/extend_head.html

{{ if .Store.Get "hasMermaid" }}
<script src="https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js" integrity="sha256-pDvBr9RG+cTMZqxd1F0C6NZeJvxTROwO94f4jW3bb54=" crossorigin="anonymous"></script>
<script>
  mermaid.initialize({ 
    startOnLoad: true,
  });
</script>
{{ end }}

Now within pages I don't need to use params or shortcodes.
A codeblock and specify mermaid as the language and it renders.

page.md

```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```

---

As an aside, I was messing with GoAT diagrams, which hugo natively supports. These may be good enough for some use cases. This site made creating some simple diagrams easy. So that may be something to consider if you don't wan't/need to depend on mermaid.