Mermaid Diagrams in Hugo

This post demonstrates how to use Mermaid diagrams in Hugo. Mermaid lets you create diagrams and visualizations using text and code.

Flowchart Example

#

graph LR;
A[Lemons]-->B[Lemonade];
B-->C[Profit]

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

Sequence Diagram Example

#

sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts<br/>prevail...
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!

Class Diagram Example

#

classDiagram
    Animal <|-- Duck
    Animal <|-- Fish
    Animal <|-- Zebra
    Animal : +int age
    Animal : +String gender
    Animal: +isMammal()
    Animal: +mate()
    class Duck{
      +String beakColor
      +swim()
      +quack()
    }
    class Fish{
      -int sizeInFeet
      -canEat()
    }
    class Zebra{
      +bool is_wild
      +run()
    }

Gantt Chart Example

#

gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
    section Section
    A task           :a1, 2025-03-01, 30d
    Another task     :after a1, 20d
    section Another
    Task in sec      :2025-03-12, 12d
    another task     :24d

State Diagram

#

stateDiagram-v2
    [*] --> Still
    Still --> [*]
    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]

Pie Chart

#

pie
    title What kind of diagrams do you prefer?
    "ASCII Art" : 40
    "Mermaid" : 35
    "Other Tools" : 25

Git Graph

#

gitGraph
    commit
    commit
    branch develop
    checkout develop
    commit
    commit
    checkout main
    merge develop
    commit
    commit

Entity Relationship Diagram

#

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses