Using Mermaid in Hugo


Create a shortcode for Mermaid

  1. Create a layouts/shortcodes directory in your theme directory.

  2. Inside layouts/shortcodes, create a file named mermaid.html. The filename is the same as the shortcode name we are going to use. Paste the following content into the file:

    <div class="mermaid">
        {{.Inner}}
    </div>
  3. Load MermaidJS on posts that requires it. Find somewhere in your theme that’s suitable for adding a <scritp> and add the following snippet:

     {{ if (.Params.mermaid) }}
     <!-- MermaidJS support -->
     <script async src="https://unpkg.com/mermaid@8.2.3/dist/mermaid.min.js"></script>
     {{ end }}

Use the mermaid shortcode to create a graph

  1. In a post you want to use Mermaid, you need to turn the mermaid option on to load the required script. For example, the configuration for this post looks like:

     +++
     title = "Using Mermaid in Hugo"
     date = 2020-08-09T20:47:40+08:00
     mermaid = true
     +++
  2. Use the short code. For example:

     {{</* 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!
     {{</* /mermaid */>}}

    generates the following graph:

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 
prevail... John-->Alice: Great! John->Bob: How about you? Bob-->John: Jolly good!