Hey there, fellow papermod enthusiasts! If you’re like me, you’re always on the lookout for ways to make your Hugo blog content more engaging and easy to understand. That’s why I’m excited to share with you my experience of adding Mermaid.js to my Hugo Papermod site using the CDN method.

Mermaid.js is a fantastic tool that allows you to create beautiful, interactive diagrams and flowcharts right in your web browser. With its simple markdown-like syntax, you can create complex visualizations in no time - no need to be a coding expert or a design whiz! From mapping out project timelines to illustrating technical concepts, Mermaid.js is the perfect solution for anyone looking to add a visual punch to their online content.

And the best part? It’s incredibly easy to integrate into your website or blog, which is exactly what we’ll be covering in this post!

How to

Credit: Joe Mooring

  1. Add the following to your layouts/_default/_markup/render-codeblock-mermaid.html file:
<div class="mermaid">
  {{- .Inner | safeHTML }}
</div>
{{ .Page.Store.Set "hasMermaid" true }}
  1. Add the following to your layouts/partials/single.html file:
{{ 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 }}

Examples

You could also add the above code to scrips.html or head.html file. Below are some working examples of mermaid diagrams with UML code taken straight from their site.

Flowchart

flowchart TD A[Start] --> B{Is it?} B -- Yes --> C[OK] C --> D[Rethink] D --> B B -- No ----> E[End]

Sequence diagram

Here is a simple example of a sequence diagram created using Mermaid.js based on the book Bulletproof Problem Solving by Charles Conn and Robert McLean. By the way, I highly recommend this book if you’re interested in improving your problem-solving skills!

sequenceDiagram participant P as Problem Solver participant D as Define the Problem participant B as Break It Down participant I as Prioritize Issues participant A as Conduct Analysis participant S as Synthesize Data participant V as Develop Solution participant C as Create Action Plan participant M as Implement Solution participant R as Review & Iterate P->>D: Identify Problem D->>B: Decompose B->>I: Sort by Importance I->>A: Analyze Parts A->>S: Gather Insights S->>V: Formulate Solutions V->>C: Plan Implementation C->>M: Execute Plan M->>R: Assess & Refine Note over R: Iterative Process. Review outcome. Make adjustments Note over D: Start Here. Clear definition critical Note over I: Prioritize based on impact

Class diagram

Here is an example of a class diagram created using Mermaid.js:

--- title: Animal example --- classDiagram note "From Duck till Zebra" Animal <|-- Duck note for Duck "can fly\ncan swim\ncan dive\ncan help in debugging" Animal <|-- Fish Animal <|-- Zebra Animal : +int age Animal : +String gender Animal: +isMammal() Animal: +mate() class Duck{ +String beakColor +swim() +quack() } class Fish{ -int sizeInFeet -canEat() } class Zebra{ +bool is_wild +run() }

State diagram

Here is an example of a state diagram created using Mermaid.js:

stateDiagram-v2 [*] --> First First --> Second First --> Third state First { [*] --> fir fir --> [*] } state Second { [*] --> sec sec --> [*] } state Third { [*] --> thi thi --> [*] }

Sankey

Here is an example of a Sankey diagram created using Mermaid.js:

--- config: sankey: showValues: false --- sankey-beta Agricultural 'waste',Bio-conversion,124.729 Bio-conversion,Liquid,0.597 Bio-conversion,Losses,26.862 Bio-conversion,Solid,280.322 Bio-conversion,Gas,81.144 Biofuel imports,Liquid,35 Biomass imports,Solid,35 Coal imports,Coal,11.606 Coal reserves,Coal,63.965 Coal,Solid,75.571 District heating,Industry,10.639 District heating,Heating and cooling - commercial,22.505 District heating,Heating and cooling - homes,46.184 Electricity grid,Over generation / exports,104.453 Electricity grid,Heating and cooling - homes,113.726 Electricity grid,H2 conversion,27.14 Electricity grid,Industry,342.165 Electricity grid,Road transport,37.797 Electricity grid,Agriculture,4.412 Electricity grid,Heating and cooling - commercial,40.858 Electricity grid,Losses,56.691 Electricity grid,Rail transport,7.863 Electricity grid,Lighting & appliances - commercial,90.008 Electricity grid,Lighting & appliances - homes,93.494 Gas imports,Ngas,40.719 Gas reserves,Ngas,82.233 Gas,Heating and cooling - commercial,0.129 Gas,Losses,1.401 Gas,Thermal generation,151.891 Gas,Agriculture,2.096 Gas,Industry,48.58 Geothermal,Electricity grid,7.013 H2 conversion,H2,20.897 H2 conversion,Losses,6.242 H2,Road transport,20.897 Hydro,Electricity grid,6.995 Liquid,Industry,121.066 Liquid,International shipping,128.69 Liquid,Road transport,135.835 Liquid,Domestic aviation,14.458 Liquid,International aviation,206.267 Liquid,Agriculture,3.64 Liquid,National navigation,33.218 Liquid,Rail transport,4.413 Marine algae,Bio-conversion,4.375 Ngas,Gas,122.952 Nuclear,Thermal generation,839.978 Oil imports,Oil,504.287 Oil reserves,Oil,107.703 Oil,Liquid,611.99 Other waste,Solid,56.587 Other waste,Bio-conversion,77.81 Pumped heat,Heating and cooling - homes,193.026 Pumped heat,Heating and cooling - commercial,70.672 Solar PV,Electricity grid,59.901 Solar Thermal,Heating and cooling - homes,19.263 Solar,Solar Thermal,19.263 Solar,Solar PV,59.901 Solid,Agriculture,0.882 Solid,Thermal generation,400.12 Solid,Industry,46.477 Thermal generation,Electricity grid,525.531 Thermal generation,Losses,787.129 Thermal generation,District heating,79.329 Tidal,Electricity grid,9.452 UK land based bioenergy,Bio-conversion,182.01 Wave,Electricity grid,19.013 Wind,Electricity grid,289.366

This method did not work for js-sequence-diagrams. I guess I’ll have to try using a different approach and include the library instead in the static files.

Until next time, happy blogging! 🚀