This is part 2 of our series on the use of Mermaid to generate diagrams and flowcharts in Hugo markdown content. In this second part, we will focus on subgraphs, styling and classes. Please refer to Part 1 for continuity if you have not already done so.

Table of Contents

Introduction

This is part 2 of our series on the use of Mermaid to generate diagrams and flowcharts in Hugo markdown content. In this second part, we will focus on subgraphs, styling and classes. Please refer to Part 1 for continuity if you have not already done so.

Subgraphs

A subgraph in Mermaid can be defined as follows:

1subgraph title
2    graph definition
3end

Let’s create a flowchart with three subgraphs and create a link from a node of one subgraph to a node of another subgraph: c1-->a2.

 1flowchart TD
 2    subgraph One
 3      a1-->a2
 4    end
 5    subgraph Two
 6      b1-->b2
 7    end
 8    subgraph Three
 9      c1-->c2
10    end
11    c1-->a2
flowchart TD subgraph One a1-->a2 end subgraph Two b1-->b2 end subgraph Three c1-->c2 end c1-->a2

Linking Subgraphs

Subgraphs can be linked using their titles. For example, to link subgraph One to subgraph Two, we write One --> Two.

 1flowchart LR
 2    subgraph One
 3      a1-->a2
 4    end
 5    subgraph Two
 6      b1-->b2
 7    end
 8    subgraph Three
 9      c1-->c2
10    end
11    One --> Two
12    Two --> Three
13    Three --> One
flowchart LR subgraph One a1-->a2 end subgraph Two b1-->b2 end subgraph Three c1-->c2 end One --> Two Two --> Three Three --> One

Subgraph Directions

We can set the directions of the arrows within each subgraph by indicating the direction within the subgraph.

 1flowchart TD
 2  subgraph One
 3    a1-->a2
 4  end
 5  subgraph Two
 6    direction RL
 7    b1-->b2
 8  end
 9  subgraph Three
10    direction BT
11    c1-->c2
12  end
flowchart TD subgraph One a1-->a2 end subgraph Two direction RL b1-->b2 end subgraph Three direction BT c1-->c2 end

However, the “subgraph direction” may be ignored if there are links between nodes of the subgraph and other subgraphs/nodes.

 1flowchart TD
 2  subgraph One
 3    a1-->a2
 4  end
 5  subgraph Two
 6    direction RL
 7    b1-->b2
 8  end
 9  subgraph Three
10    direction BT
11    c1-->c2
12  end
13  c1-->a2
flowchart TD subgraph One a1-->a2 end subgraph Two direction RL b1-->b2 end subgraph Three direction BT c1-->c2 end c1-->a2
Caution: A subgraph direction may be ignored if any node of the subgraph is linked to other subgraphs or nodes.

Nested Subgraphs

Nested subgraphs are also possible.

 1flowchart LR
 2  subgraph TOP
 3    direction TB
 4    subgraph B1
 5        direction RL
 6        start1 --> stop1
 7    end
 8    subgraph B2
 9        direction BT
10        start2 --> stop2
11    end
12  end
13  A --> TOP --> B
14  B1 --> B2
flowchart LR subgraph TOP direction TB subgraph B1 direction RL start1 --> stop1 end subgraph B2 direction BT start2 --> stop2 end end A --> TOP --> B B1 --> B2

ADVERTISEMENT

Nodal Click Events

It is possible to bind a click event to a node. The click can lead to either a javascript callback or to a link which will be opened in a new browser tab. However, this functionality is only enabled when setting the option securityLevel='loose' in your header file.

1click nodeId callback
2click nodeId call callback()

where

  • nodeId is the id of the node
  • callback is the name of a javascript function defined on the page displaying the graph, the function will be called with nodeId as parameter.

An example of the javascript function can be:

1<script>
2  var callback = function () {
3    alert("A callback was triggered");
4  };
5</script>

The tooltip text is surrounded in double quotes. The styles of the tooltip are set by the class .mermaidTooltip.

1flowchart LR
2  A-->B-->C
3  click A callback "call the javascript function defined above"
4  click B "https://www.digitalblackboard.online" "link to homepage"
5  click C href "../mermaid-flowchart" "link to part 1"
flowchart LR A-->B-->C click A callback "call the javascript function defined above" click B "https://www.digitalblackboard.online" "link to homepage" click C href "../mermaid-flowchart" "link to part 1"

Comments

Comments can be entered within a flow diagram, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with %%. Any text after the start of the comment to the next newline will be treated as a comment, including any flow syntax.

1flowchart LR
2%% this is a comment A -- text --> B{node}
3   A -- text --> B -- text2 --> C

Styling and Classes

It is possible to style links. For instance you might want to style a link that is going backwards in the flow. As links have no ids in the same way as nodes, some other way of deciding what style the links should be attached to is required. Instead of ids, the order number of when the link was defined in the graph is used, or use default to apply to all links.

1flowchart LR
2  A(Start)-->B(Mid)-->C(Stop)
3  linkStyle 1 stroke-width:2px,stroke:red;
flowchart LR A(Start)-->B(Mid)-->C(Stop) linkStyle 1 stroke-width:2px,stroke:red;

For the above, stroke-width is the width of the link and stroke is the color of the link. The number 1 means the styling will apply only to the second link in the graph (indexing starts from 0).

To apply the same styling to all links in the graph, use the default option.

1flowchart LR
2  A(Start)-->B(Mid)-->C(Stop)
3  linkStyle default stroke-width:2px,stroke:red;
flowchart LR A(Start)-->B(Mid)-->C(Stop) linkStyle default stroke-width:2px,stroke:red;

Styling a Node

1flowchart LR
2  A(Start)-->B(Mid)-->C(Stop)
3  linkStyle 1 stroke-width:2px,fill:none,stroke:red;
4  style A fill:#1EE,stroke:black,stroke-width:2px
5  style B fill:#FDA,stroke:black,stroke-width:2px,color:blue,stroke-dasharray: 5 5
flowchart LR A(Start)-->B(Mid)-->C(Stop) linkStyle 1 stroke-width:2px,fill:none,stroke:red; style A fill:#1EE,stroke:black,stroke-width:2px style B fill:#FDA,stroke:black,stroke-width:2px,color:blue,stroke-dasharray: 5 5

For the above, fill is the fill color of the node, stroke is the color of the border, stroke-width is the border width of the node, color is the color of the enclosed text and stroke-dasharray: a b indicates a dashed border with apx solid line and bpx blank space in between.

Defining Classes for Nodes

We can define a class of styles and attach this class to the desired nodes. A short form of adding a class to a node is to attach the classname to the node using the ::: operator as shown below.

1flowchart LR
2    A:::lightblue -- first --> B:::pinky -- second --> C:::lightblue
3    classDef lightblue fill:#E0F2FF;
4    classDef pinky fill:#FFDFEB;
flowchart LR A:::lightblue -- first --> B:::pinky -- second --> C:::lightblue classDef lightblue fill:#E0F2FF; classDef pinky fill:#FFDFEB;

Alternatively, we can define a number of classes and attach each class to certain nodes:

1flowchart LR
2  A -- first --> B -- second --> C
3  classDef lightblue fill:#E0F2FF;
4  classDef pinky fill:#FFDFEB;
5  class A,C lightblue;
6  class B pinky;
flowchart LR A -- first --> B -- second --> C classDef lightblue fill:#E0F2FF; classDef pinky fill:#FFDFEB; class A,C lightblue; class B pinky;

Default Class for Nodes

Finally, just like for the case of links, we can define a default class that will be applied across all nodes.

1flowchart LR
2  A(Start)-->B(Mid)-->C(Stop)
3  classDef default fill:#E0F2FF,stroke:red,stroke-width:2px
flowchart LR A(Start)-->B(Mid)-->C(Stop) classDef default fill:#E0F2FF,stroke:red,stroke-width:2px