Mermaid

Render diagrams and charts with Mermaid. The library is loaded automatically on first use.

Diagram theme follows the site theme through the --mermaid-theme CSS variable. Override it in assets/styles/custom.css to use another Mermaid theme.

Override Mermaid initialization by creating assets/mermaid.json in your project. A theme set there takes precedence over the CSS variable.

Syntax

Use fenced code blocks (recommended) or the shortcode

```mermaid
graph LR
    A --> B
```

{{< mermaid [class="..."] >}}
graph LR
    A --> B
{{< /mermaid >}}

Examples

flowchart TD
    A[Content Files] --> B[Hugo Build]
    B --> C[HTML Output]
    B --> D[Search Index]
    B --> E[RSS Feed]

sequenceDiagram
    Browser->>Hugo: Request page
    Hugo->>Theme: Apply template
    Theme->>Browser: Rendered HTML
    Browser->>Browser: Load shortcodes

pie title Theme Assets
    "SCSS" : 8
    "HTML Templates" : 30
    "JavaScript" : 3
    "i18n Files" : 35

gitGraph
   commit id: "init"
   commit id: "add theme"
   branch feature
   checkout feature
   commit id: "add docs"
   commit id: "add config"
   checkout main
   merge feature
   commit id: "deploy"

Explore more diagram types on the Mermaid documentation.