Mermaid#

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

Override Mermaid initialization by creating assets/mermaid.json in your project.

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.