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"

2. Import the JavaScript

Skip this step if your theme supports HugoPress.

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

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

hugo.toml

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

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}

Usage

Use Mermaid via Code Block

1```mermaid
2DIAGRAM
3```

Use Mermaid via Shortcode

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

Examples

Flowchart

flowchart TD
  A[Start] --> B{Is it?}
  B -- Yes --> C[OK]
  C --> D[Rethink]
  D --> B
  B -- No ----> E[End]

Entity Relationship Diagram

erDiagram
CUSTOMER }|..|{ DELIVERY-ADDRESS : has
CUSTOMER ||--o{ ORDER : places
CUSTOMER ||--o{ INVOICE : "liable for"
DELIVERY-ADDRESS ||--o{ ORDER : receives
INVOICE ||--|{ ORDER : covers
ORDER ||--|{ ORDER-ITEM : includes
PRODUCT-CATEGORY ||--|{ PRODUCT : contains
PRODUCT ||--o{ ORDER-ITEM : "ordered in"

Browser docs