About Mermaid#
Mermaid allow us to create diagrams and visualizations using merely text and code.
It is a JavaScript-based diagramming tool that renders Markdown-inspired text definitions to create diagram easily.
If you are familiar with Markdown you should have no problem learning Mermaid.
Mermaid Themes#
Mermaid supports different themes at site-wide or individual diagram.
For site-wide theme customization, the
initialize
call is used. For diagram specific customization, theinit
directive is used.
Here are the available themes:
default
- default theme.neutral
- black/white theme that suitable for printing.dark
- dark-colored that suit for blog or web site.forest
- green-shared theme if you like it.base
- the only theme that can be modified and customization.
Site-wide Theme#
mermaidAPI.initialize({
securityLevel: 'loose',
theme: 'base',
});
Diagram-specific Theme#
%%{init: {'theme':'forest'}}%%
graph LR
a --> b
b --> a
linkStyle 0 stroke:white
linkStyle 1 stroke:yellow
%%{init: {'theme':'forest'}}%%
graph LR
a --> b
b --> a
linkStyle 0 stroke:white
linkStyle 1 stroke:yellow
Hugo + Mermaid#
Simply follow the instruction at Hugo’s Diagram.
- Upgrade to Hugo v0.93.0 and above.
- It supports
GoAT
andMermaid
diagrams.
Make sure to turn on Mermaid
at the front matter.
toml mermaid = true
Update:
- Since I migrated to
blowfish
theme, to insertMermaid
diagram, use the shortcodei as below.
{{< mermaid >}}
graph LR;
A[Lemons]-->B[Lemonade];
B-->C[Profit]
{{< /mermaid >}}
Links#
- Mermaid Cheat Sheet
- About Mermaid
- Mermaid Tutorial
- Mermaid Theme Configuration
- Mermaid Live Editor
- Mermaid online Live Editor