# Mermaid works for some content only

**URL:** https://discourse.gohugo.io/t/mermaid-works-for-some-content-only/52207
**Category:** support
**Tags:** shortcodes
**Created:** [October 30, 2024, 4:18pm UTC](https://discourse.gohugo.io/t/mermaid-works-for-some-content-only/52207 "2024-10-30T16:18:25Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![king-11](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/king-11/32/23231_2.png) [@king-11](https://discourse.gohugo.io/u/king-11)
#### Post date: [October 30, 2024, 4:18pm UTC](https://discourse.gohugo.io/t/mermaid-works-for-some-content-only/52207/1 "2024-10-30T16:18:25Z")

</div>

hugo version: 0.128.0  
theme: hugo-PaperMod

I had a working mermaid integration as per the docs but recently for a new content [file](https://github.com/king-11/blog/blob/main/content/posts/cloudflare-integration/index.md?plain=1#L53) I started missing it out.

Mermaid is loaded in dev server if `disableFastRender` isn’t used with

```bash
pkgx hugo@0.128.0 server -w

```

layouts defined:

- render-codeblock-mermaid

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

```

- extend\_head

```html
{{ if .Page.Store.Get "hasMermaid" }}
<script async type="module">
  var theme = localStorage.getItem("pref-theme") === "dark" ? 'neutral' : 'base';
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11.3.0/dist/mermaid.esm.min.mjs';
  mermaid.initialize({
    startOnLoad: true,
    'theme': theme,
  });
</script>
{{ end }}

```

Mermaid is loaded on all other content files for [example](https://github.com/king-11/blog/blob/main/content/posts/process-management.md?plain=1#L64)

I am not able to figure out the reason for the same and have tried looking up options for now what I have done is include an explicit param in frontmatter with or condition. So the issue seems to be around Page.Store set and get.

I validated things by running

```bash
pkgx hugo@0.128.0 --minify --baseURL localhost:7000
python -m http.server -d public 7000

```

the mermaid head isn’t included in new content but is included for the other example.

---

<div class="post-metadata">

### Author: ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)
#### Post date: [October 30, 2024, 4:31pm UTC](https://discourse.gohugo.io/t/mermaid-works-for-some-content-only/52207/2 "2024-10-30T16:31:39Z")

</div>

[https://gohugo.io/methods/page/store/#determinate-values](https://gohugo.io/methods/page/store/#determinate-values)

You are attempting to access the page store before the page has been rendered.

---

<div class="post-metadata">

### Author: ![king-11](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/king-11/32/23231_2.png) [@king-11](https://discourse.gohugo.io/u/king-11)
#### Post date: [October 30, 2024, 4:33pm UTC](https://discourse.gohugo.io/t/mermaid-works-for-some-content-only/52207/3 "2024-10-30T16:33:57Z")

</div>

yes thanks I figured after finding your comment on this [issue](https://github.com/gohugoio/hugo/issues/10798) I am using this as new `extend_head` now works like a charm. Thanks 😁

```auto
{{ $noop := .WordCount }}
{{ if .Page.Store.Get "hasMermaid" }}
<script async type="module">
  var theme = localStorage.getItem("pref-theme") === "dark" ? 'neutral' : 'base';
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11.3.0/dist/mermaid.esm.min.mjs';
  mermaid.initialize({
    startOnLoad: true,
    'theme': theme,
  });
</script>
{{ end }}

```

---

<div class="post-metadata">

### Author: ![system](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/system/32/1_2.png) [@system](https://discourse.gohugo.io/u/system)
#### Post date: [November 1, 2024, 4:34pm UTC](https://discourse.gohugo.io/t/mermaid-works-for-some-content-only/52207/4 "2024-11-01T16:34:22Z")

</div>

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.