Guide to Mermaid Diagrams in Hugo

• 11/8/2025
• One-minute read

For displaying diagrams and charts in a Hugo project, you can leverage Mermaid.

If you want to use Mermaid diagrams in your site, enable mermaid support in your config file:

[params.mermaid]
enable = true

You can then use mermaid syntax to display your diagram:

    ```mermaid
        sequenceDiagram
        Alice ->> Bob: Hello Bob, how are you?
        Bob-->>John: How about you John?
        Bob--x Alice: I am good thanks!
        Bob-x John: I am good thanks!
        Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.

        Bob-->Alice: Checking with John...
        Alice->John: Yes... John, how are you?
    ```

Which should render your diagram as: