Marvin Tan Network Engineer • Open Source Lover
Post Header Image

Mermaid in Hugo

#mermaid Sep 30, 2019 3 min
Table of Contents:

I’m using Mermaid to generate flowchart, sequence diagram, gantt or pie chart in my site.

Download mermaid

As of writing, the latest version is 8.3.1. Download mermaid.min.js and put it under static/js/mermaid.min.js

Create mermaid shortcode

Create mermaid.html under layouts/shortcodes directory

<div class="mermaid" align="{{ if .Get "align" }}{{ .Get "align" }}{{ else }}center{{ end }}">{{ safeHTML .Inner }}</div>

Load ths script

Call the script only if the page contains a mermaid shortcode. I just put a simple if statement to find mermaid keyword then if it exists, call the script:

{{ if (findRE "mermaid" .Content 1) }}
  <script type="text/javascript" src="/js/mermaid.min.js"></script>
  <script>mermaid.initialize({startOnLoad:true});</script>
{{ end }}

Examples

Example 1

{{< mermaid >}}
graph LR;
  A(think of a new brand name) -->B{related to content?}
  B --> |No| A
  B --> |Yes| C{max 2 words?}
  C --> |No| A
  C --> |Yes| D{domain available}
  D --> |No| A
  D -->|Yes| E{social media available}
  E --> |No| A
  E -->|Yes| F(that's it!)
{{< / mermaid >}}

Output:

graph LR; A(think of a new brand name) -->B{related to content?} B --> |No| A B --> |Yes| C{max 2 words?} C --> |No| A C --> |Yes| D{domain available} D --> |No| A D -->|Yes| E{social media available} E --> |No| A E -->|Yes| F(that's it!)

Example 2

{{< 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 >}}

Output:

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!

Example 3

{{< mermaid >}}
gantt
    dateFormat  YYYY-MM-DD
    title Adding GANTT diagram functionality to mermaid
    section A section
    Completed task            :done,    des1, 2014-01-06,2014-01-08
    Active task               :active,  des2, 2014-01-09, 3d
    Future task               :         des3, after des2, 5d
    Future task2               :         des4, after des3, 5d
    section Critical tasks
    Completed task in the critical line :crit, done, 2014-01-06,24h
    Implement parser and jison          :crit, done, after des1, 2d
    Create tests for parser             :crit, active, 3d
    Future task in critical line        :crit, 5d
    Create tests for renderer           :2d
    Add to mermaid                      :1d
{{< / mermaid >}}

Output:

gantt dateFormat YYYY-MM-DD title Adding GANTT diagram functionality to mermaid section A section Completed task :done, des1, 2014-01-06,2014-01-08 Active task :active, des2, 2014-01-09, 3d Future task : des3, after des2, 5d Future task2 : des4, after des3, 5d section Critical tasks Completed task in the critical line :crit, done, 2014-01-06,24h Implement parser and jison :crit, done, after des1, 2d Create tests for parser :crit, active, 3d Future task in critical line :crit, 5d Create tests for renderer :2d Add to mermaid :1d
Show comments