Mermaid + Hugo

Add dynamic mermaidjs diagram support via markdown in Future Imperfect theme for Hugo

JR Morgan golang + js

mermaidjs

I love my Hugo theme from jpescador , but it was missing mermaidjs… I wanted the same shortcode integration available in some other themes, but I also wanted to leverage a CDN for libary loads and make the theme easily swappable from the shortcode calls. So:

{{< mermaid align="left" theme="dark" >}}
graph LR;
    A[Hard edge] -->|Link text| B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]
{{< /mermaid >}}

now renders:

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