Hugo Mermaid Module

March 28, 2023 1 min read Module Mermaid Docs Diagrams Flowchart

On this page

Please check out the tutorial to start using Hugo modules.

Mermaid lets you create diagrams and visualizations using text and code.

Module
`github.com/hugomods/mermaid`

The featured image credited by: https://mermaid.js.org/.

Installation§

1. Import Module§

1[[module.imports]]
2path = "github.com/hugomods/mermaid"
toml

2. Import the JavaScript§

Skip this step if your theme supports HugoPress.

1{{ partial "mermaid/assets/js" . }}
go

Configuration§

The site parameters as following.

Parameter	Type	Default	Description
`js_url`	String	Latest version from JS Delivr CDN	The Mermaid script URL.

hugo.yaml

1params:
2  mermaid:
3    js_url: https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.esm.min.mjs
yaml

hugo.toml

1[params]
2  [params.mermaid]
3    js_url = 'https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.esm.min.mjs'
toml

hugo.json

1{
2   "params": {
3      "mermaid": {
4         "js_url": "https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.esm.min.mjs"
5      }
6   }
7}
json

Usage§

Use Mermaid via Code Block§

1```mermaid
2DIAGRAM
3```
markdown

Use Mermaid via Shortcode§

1{{< mermaid >}}
2DIAGRAM
3{{< /mermaid >}}
markdown

Browser docs