Questo post è stato modificato il 25 maggio 2025.

Mermaid lets you create diagrams and visualizations using text and code.

Le versioni più recenti di Hugo hanno semplificato molto l’inserimento di grafici Mermaid.

Mermaid si basa su javascript e la sintassi richiama vagamente markdown. Con il codice che segue

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!

Si ottiene:

  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!