created: 09/03/2019 updated: 09/03/2019 mermaid diagrams! Things that support Mermaid diagrams: Grafana GitLab e.g. HackMD osgav blog  🎉 Just learned that GitLab supports this syntax too (see this example while Microsoft GitHub doesn't — André Staltz (@andrestaltz) February 25, 2019 Just discovered that supports Mermaid syntax. This is a game changer in drawing diagrams with multiple authors, really useful! — André Staltz (@andrestaltz) January 11, 2019 »

Mermaid Diagrams

graph LR; A(Mermaid) B(Diagrams) C(Are) D(Awesome) A-->B; B-->C; C-->D; style B fill:#f9f,stroke:#333,stroke-width:4px click B "" "Mermaid!"


Mermaid Diagrams on Hugo

 created: 19/01/2019 updated: 19/01/2019 how do you get Mermaid diagrams on a Hugo blog 1 Under themes/casper/layouts/ I created a shortcodes folder (I didn’t have one already, you might) and added mermaid.html: <script src="/js/mermaid_dist_8.0.0-rc.6.js"></script> <div class="mermaid"> {{ .Inner }} </div> 2 Then under themes/casper/static/js/ I added the mermaid_dist_8.0.0-rc.6.js file referenced in the snippet above (Mermaid JS itself came from here) tada I didn’t figure any of this out I was inspired by this excellent person who had already described how they added Mermaid to their Hugo site. »