Mermaid: First Attempts

Mermaid setup.

Really basic first effort.

I created a shortcodes folder under my theme layouts folder, adn there created a mermaid.html with the following code.

100
101
102
103
104
105
106
107
108
109
110
111
112


<script async type="application/javascript" src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js">
    var config = {
      startOnLoad:true,
      theme:
      '{{ if .Get "theme" }}{{ .Get "theme" }}{{ else }}dark{{ end }}',
      align:'{{ if .Get "align" }}{{ .Get "align" }}{{ else }} center{{ end }}'
    };
    mermaid.initialize(config);
  </script>

  <div class="mermaid">
    {{.Inner}}
  </div>

Markdown Mermaid Pie Chart

The markdown to create the pie chart is as follows.

100
101
102
103
104
105
106
107


{{< mermaid align="left" theme="neutral" >}}
pie
title French Words I Know
"Merde" : 50
"Oui" : 35
"Alors" : 10
"Non" : 5
{{< /mermaid >}}

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.

Singly Linked

First attempt, using this Mermaid Cheat Cheat Sheet and Mermaid-js.github

graph LR 1-->2-->3-->4-->5-->6

Code:

100
101
102
103


{{< mermaid align="left" theme="neutral" >}}
graph LR
1-->2-->3-->4-->5-->6
{{< /mermaid >}}

Getting there, but not great. I want to demonstrate the idea of node.next and later node.previous linking from the nodes.

This is closer:

classDiagram Node02 <|-- Node01 : next Node01 : data / value Node01 : next() Node02 : data / value Node02 : next()

Code:

100
101
102
103
104
105
106
107


{{< mermaid align="left" theme="neutral" >}}
classDiagram
    Node02 <|-- Node01 : next
    Node01 : data / value
    Node01 : next()
    Node02 : data / value
    Node02 : next()
{{< /mermaid >}}

Arrow type options

I experimented with a node as a subroutine but to no avail.

flowchart LR Node01-. next .->Node02 Node02-- next -->Node03 Node03== next ==>Node04 Node04 ==> None

Ok, so there’s options of arrows. I haven’t been able to subdivide the node yet.

Code:

100
101
102
103
104
105
106


{{< mermaid align="left" theme="neutral" >}}
flowchart LR
Node01-. next .->Node02
Node02-- next -->Node03
Node03== next ==>Node04
Node04 ==> None
{{< /mermaid >}}

Oh here we go!

Subgraphs!

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:

100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121


{{< 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:

100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119



// initialize Mermaid to [1] log errors, [2] have loose security for first-party
// authored diagrams, and [3] respect a preferred dark color scheme

<script type="module">
  import mermaid from "https://cdn.skypack.dev/mermaid@8.14.0";
    var config = {
      startOnLoad:true,
      logLevel: "error", // [1]
      securityLevel: "loose", // [2]
      theme: (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ?
    "dark" :
    "default"
    };
    mermaid.initialize(config);
  </script>

  <div class="mermaid">
    {{.Inner}}
  </div>

Using this CSS Tricks post as a guide.

No difference to my linked list rendering. It seems like the direction functionality is not… well, just not.

Time to do some more research.

continue