mermaid

  created: 09/03/2019 updated: 09/03/2019 mermaid diagrams! Things that support Mermaid diagrams: Grafana GitLab e.g. https://gitlab.com/staltz/manyverse/issues/339 HackMD osgav blog  🎉 Just learned that GitLab supports this syntax too (see this example https://t.co/CzkbnDzQgM) while Microsoft GitHub doesn't https://t.co/jwQp3v6bfR — André Staltz (@andrestaltz) February 25, 2019 Just discovered that https://t.co/e1GrQfdBgb supports Mermaid syntax. This is a game changer in drawing diagrams with multiple authors, really useful! pic.twitter.com/9n3THmBs45 — 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 "https://mermaidjs.github.io" "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. »