Hugo and Mermaid Integration

March 11, 2023

Introduction

By default Hugo is not supporting Mermaid integration. But there is a way to make it work.

Mermaid Javascript

Get the mermaid Javascript to transform the graphic description into a graphic:

https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js

Get the file and copy in folder /static/js.

Partial for Mermaid usage in Markdown

In folder layouts/_default/_markup create a new file render-codeblock-mermaid.html and paste the following content :

1
2
3
4

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

Update Content Page

In the baseof.html file at the bottom, add the code below (in my case after the {{ partial "footer.html" . }}):

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

    ...
    {{ partial "footer.html" . }}

    {{ if .Page.Store.Get "hasMermaid" }}
      <script src="/js/mermaid.min.js"></script>
      <script>
        mermaid.initialize({ startOnLoad: true });
      </script>
    {{ end }}
    {{ partial "cookie-consent.html" . }}
  </body>
</div>

</html>

Sample

Class Diagram

The Class Diagram below is created using the code below in a markdown file:

```mermaid
---
title: Mermaid Class Diagram Example
---
classDiagram
    note "This is a general note"
    Item <|-- Box
    note for Box "can never be empty"
    Item <|-- Can
    Item <|-- Glass
    Item : +String Material
    Item : +String Name
    Item: +isComposed()
    Item: +isRenewable()
    class Can{
        +String Color
        +Fill()
        +Open()
    }
    class Glass{
        +Fill()
    }
   class Box{
        +String Material
        +Item[]
        +Fill()
        +Close()
        +Open()
        +Deliver()
    }

Workflow

References

• Hugo Diagrams
• Mermaid References