How to insert mermaid diagram with the render hooks way?

support
,
1

Hello everyone,

I’ve read that there’s a new method for integrating Mermaid diagrams, but this method requires at least version 0.93. So I installed this new version as you can see :
kfocal@kfocal:~$ hugo version
hugo v0.93.0-07469082 linux/amd64 BuildDate=2022-02-28T08:30:42Z VendorInfo=gohugoio
kfocal@kfocal:~$

kfocal@kfocal:~/Documents/static_website/test_papa$ hugo version
hugo v0.93.0-07469082 linux/amd64 BuildDate=2022-02-28T08:30:42Z VendorInfo=gohugoio
kfocal@kfocal:~/Documents/static_website/test_papa$

I create the “code block” for mermaid as fellows :

kfocal@kfocal:~/Documents/static_website/test_papa$ cat layouts/_default/_markup/render-codeblock-mermaid.html 
<pre class="mermaid">
  {{- .Inner | safeHTML }}
</pre>
{{ .Page.Store.Set "hasMermaid" true }}

kfocal@kfocal:~/Documents/static_website/test_papa$ hugo version

I am creating a new page “test_diplay_mermaid” at the root of my website :
kfocal@kfocal:~/Documents/static_website/test_papa$ hugo new test_diplay_mermaid.md
Content “/home/kfocal/Documents/static_website/test_papa/content/test_diplay_mermaid.md” created

And I put in the template :

  • the mermaid code drawing the diagram
  • the Javascript code calling the remote mermaid library

I added "" to escape “```” in my message below. If it is not clear, I also put there : mermaid bash code | WTOOLS

kfocal@kfocal:~/Documents/static_website/test_papa$ cat content/test_diplay_mermaid.md 
---
title: Test_diplay_mermaid
date: 2024-01-01T12:45:44+01:00
draft: false
---
Test diplay mermaid : 


\```mermaid 
sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!
\```
{{ 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 }}

kfocal@kfocal:~/Documents/static_website/test_papa$

And when I go the following web page : http : // localhost:1313 /test_diplay_mermaid/

The block merderaid is not rendered as you can see :
html render

And when I look at the html code of the rendering webpage, I can not see the link “https : // cdn . jsdelivr . net/npm/mermaid/dist/mermaid.esm.min.mjs” but maybe that is normal.

<pre class="mermaid">sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!
</pre>


<p>{{ if .Page.Store.Get &ldquo;hasMermaid&rdquo; }}</p>
<!-- raw HTML omitted -->
<!-- raw HTML omitted -->
<p>{{ end }}</p>

I thought that I’d follow the documentation carefully but that seems not to be the case :pensive:
My links :

  • https:// gohugo . io /templates/render-hooks/#render-hooks-for-code-blocks
  • https : // gohugo . io /content-management/diagrams/#mermaid-diagrams
2

You’re adding template code ({{if...) to a MD file. That does not work. Never.
Use a shortcode in MD. Use template code in HTML. And where is hasMermaid ever set?

Also, the current version of Hugo is 0.121 – why install one that’s almost a year old?

3

Here’s a working example:

git clone --single-branch -b hugo-forum-topic-47662 https://github.com/jmooring/hugo-testing hugo-forum-topic-47662
cd hugo-forum-topic-47662
hugo server

Files of interest:

  • layouts/_default/baseof.html
  • layouts/_default/_markup/render-codeblock-mermaid.html
  • content/_index.md

Minimum required version: v0.93.0.

1 Like
4

Yes, you’re right @chrillek, never mix code and content.
Okay, noted :+1::

  • use shortcode in MD file
  • use template code in HTML

I used Hugo a year ago for another site and haven’t updated it since the last time. And the Hugo version is not updated at all in the repositories of my Ubuntu Linux distribution.
Yes, I’m going to update the extended version by getting the latest deb version from gihub.

Thanks @jmooring , I’ve now got the diagram working on my site. However, the layout of my theme Techdoc no longer displays correctly. I no longer have the menu on the left.
You made me modify the template file baseof.html. I’ll have to take a closer look at the documentation on the use of templates.

Thank you both very much for your help

5

No, I did not. I provided a working example.