note: A neat trick to get go code to display well in code blocks is to comment out/escape the contents of the mermaid opening and closing tags in your markdown. I used </* mermaid align="left" theme="neutral" */> and </* mermaid */>, a method I saw at //robb.sh’s github repo of his site’s source code.
pie
title Cities I've lived in
"Limerick": 5
"Dublin" : 3
"Madrid" : 15
"Valencia" : 7
I followed the instructions as described here by .//robb.sh. Lovely site.
Representing lists
I’d like to represent linked lists, singly linked possibly doubly linked and maybe even a branched tree. Let’s see.
flowchart LR
subgraph LinkedList
direction LR
subgraph Node01
direction LR
node01Prev[Prev]
node01Data[Data]
node01Next[Next]
end
subgraph Node02
direction LR
node02Prev(Prev)
node02Data(Data)
node02Next(Next)
end
end
node01Next --> Node02
node02Prev--> Node01
This is not what I was expecting form the code below:
{{< mermaid align="left"theme="neutral" >}}flowchart LR
subgraph LinkedList
direction LR
subgraph Node01
direction LR
node01Prev[Prev] node01Data[Data] node01Next[Next] end
subgraph Node02
direction LR
node02Prev(Prev) node02Data(Data) node02Next(Next) end
end
node01Next --> Node02
node02Prev --> Node01
{{< /mermaid >}}
Updating Mermaid?
I thought, I’d detter check if I’m using the latest. So I altered the mermaid.html to this:
// initialize Mermaid to [1] log errors, [2] have loose security for first-party
// authored diagrams, and [3] respect a preferred dark color scheme
<scripttype="module">importmermaidfrom"https://cdn.skypack.dev/mermaid@8.14.0";varconfig={startOnLoad:true,logLevel:"error",// [1]
securityLevel:"loose",// [2]
theme:(window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches)?"dark":"default"};mermaid.initialize(config);</script><divclass="mermaid">{{.Inner}}</div>