Mermaid Test
Table of Contents
Using Mermaid in Hugo #
I am trying out the mermaid markdown-like syntax for creating code diagrams, graphs, and pie charts.
Graph L-R #
---
config:
theme: 'base'
themeVariables:
darkMode: false
background: '#f4f4f4'
primaryColor: '#ccc4dd'
primaryTextColor: '#aa2825'
lineColor: '#ccc'
---
graph LR;
Root-->A & B & C
A-->A1-->A2--->A3
B-->B1-->B2-->B3
C--->C1-->C2-->C3
Graph Top-Down #
---
config:
theme: 'base'
themeVariables:
darkMode: false
background: '#f4f4f4'
primaryColor: '#ccc4dd'
primaryTextColor: '#aa2825'
lineColor: '#ccc'
---
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
Pie Chart #
---
config:
theme: 'base'
themeVariables:
darkMode: false
background: '#f4f4f4'
primaryColor: '#ccc4dd'
primaryTextColor: '#aa2825'
lineColor: '#ccc'
---
pie
title Linux Distributions
"Debian":42.96
"Ubuntu":50.05
"Arch":10.01
"CentOS":5
Flowchart #
---
config:
theme: 'base'
themeVariables:
darkMode: false
background: '#f4f4f4'
primaryColor: '#ccc4dd'
primaryTextColor: '#aa2825'
lineColor: '#ccc'
---
flowchart TD;
A[Choose OS] --> B{Do you want?}
B -- Yes --> C[UNIX or Windows]
C -- Windows --> D[Good Luck!]
C -- UNIX --> E{Linux or macOS}
E -- Linux --> G{Good Choice!}
E -- macOS --> H{apple.com}
B -- No ---> F[End]
And that’s only a few examples of what can be done using mermaid. I pulled these examples out of an article I read in Ultimate Linux Projects, Issue 2, written by Mihalis Tsoukalos. I had to make several corrections to the mermaid syntax provided by the author; possibly because of mermaid version changes.
There are many more shapes available, as well as styling text. There are also themes available, but I haven’t tried any yet.