Skip to main content

Diagramming with Mermaid

·246 words·2 mins
Posts diagram mermaid
Table of Contents

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, the init directive is used.

Here are the available themes:

  1. default - default theme.
  2. neutral - black/white theme that suitable for printing.
  3. dark - dark-colored that suit for blog or web site.
  4. forest - green-shared theme if you like it.
  5. 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 and Mermaid diagrams.

Make sure to turn on Mermaid at the front matter.

toml mermaid = true

Update:

  • Since I migrated to blowfish theme, to insert Mermaid diagram, use the shortcodei as below.
{{< mermaid >}}
 graph LR;
 A[Lemons]-->B[Lemonade];
 B-->C[Profit]
{{< /mermaid >}}

Links#

Related

Basic Network Architecture
·180 words·1 min
Posts Essential architecture network diagram
A simple network diagram.
Hands on Workshop: Container Security 101
·2204 words·11 mins
Posts YT sans workshop
Workshop on securing container.
The Myth of Cloud Agnosticism
·322 words·2 mins
Posts Simplify cloud sans iac webcast
Why securing multiple clouds using Terraform is harder than you think?