Diagramming with Mermaid

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

#

• Mermaid Cheat Sheet
• About Mermaid
• Mermaid Tutorial
• Mermaid Theme Configuration
• Mermaid Live Editor
• Mermaid online Live Editor