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.

<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.

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

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

Code:

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

Code:

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

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

Code:

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

Oh here we go!#

Subgraphs!

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

<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