Mermaid Diagram Samples in Hugo

In Beautifulhugo, the Hugo theme, mermaid.js, the library for drawing sequence diagrams, is already built in, so simply specifying the short tag and writing in the mermaid format is enough to display a sequence diagram.

If it is not built into your theme, it is a good idea to refer to the article Hugoにmermaidを組み込んでみた (in Japanese).

A simple sample

graph LR
A[Local] -->|git push| B(GitLab.com)
B --> C{Netlify}

Gantt chart

Quoted from the official site

gantt
        dateFormat  YYYY-MM-DD
        title Adding GANTT diagram functionality to mermaid
        section A section
        Completed task            :done,    des1, 2014-01-06,2014-01-08
        Active task               :active,  des2, 2014-01-09, 3d
        Future task               :         des3, after des2, 5d
        Future task2               :         des4, after des3, 5d
        section Critical tasks
        Completed task in the critical line :crit, done, 2014-01-06,24h
        Implement parser and jison          :crit, done, after des1, 2d
        Create tests for parser             :crit, active, 3d
        Future task in critical line        :crit, 5d
        Create tests for renderer           :2d
        Add to mermaid                      :1d

Basic sequence diagram

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
long time, so long
that the text does
not fit on a row.

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

• https://mermaidjs.github.io/demos.html
• https://mermaidjs.github.io/mermaid-live-editor/

See also