Mermaid Js In Hugo

mermaid js is the diagram engine with capability to draw diagrams with text. as SRE, sysadmin or someone that everyday cudling with text or terminal, this mermaid js is so much great to combine with markdown to write a blog post.

Here i am using hugo as my blog engine. its easy since we write a blog post like we create a README.md in a repo.

why not jekyll ?

my be i just fall to this benchmark

How to integrate mermaidjs with hugo blog engine

mermaid js is easy to integrate we just need to include mermaid js script to our pages, we could iclude it inside themes/yourthemes/layouts. I add that to template that render just for the post pages. ex: layouts/_default/single.html add this included script.

<script async src="https://unpkg.com/[email protected]/dist/mermaid.min.js"></script>

read this if ypu curious about async attribute

include the tags

and add the graph code inside it

<div class="mermaid">
graph TD
A[Client] --> B[Load Balancer]
B --> C[Server01]
B --> D[Server02]
</div>

this code will render like this

graph TD A[Client] --> B[Load Balancer] B --> C[Server01] B --> D[Server02]

Add mermaid to our hugo shortcodes

in hugo we have shortcodes. like instagram or youtube. but we could make our own shortcodes

  1. Create file in yourworkdir/layouts/shortcodes/mermaid.html
  2. fill that file with this
    <div class="mermaid">
        {{.Inner}}
    </div>
    
  3. inner is used so you could write in the markdown like this
    {{<mermaid>}}
    graph TD
    A[Client] --> B[Load Balancer]
    B --> C[Server01]
    B --> D[Server02]
    {{</mermaid>}}
    

How good is mermaid js

let say you have this codes

graph LR
    A[Hard edge] -->|Link text| B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]
    E -->|back to hard| A

it will render like this

graph LR A[Hard edge] -->|Link text| B(Round edge) B --> C{Decision} C -->|One| D[Result one] C -->|Two| E[Result two] E -->|back to hard| A

and i think thats awesome