This article offers a sample of basic diagram usage that can be used in Hugo content files.

Please see also Mermaid.

Prerequisites#

The diagram is disabled by default, you’ll need to enable the diagram in front matter, otherwise the diagram won’t be rendered.

1diagram = true

1diagram: true

1{
2   "diagram": true
3}

Usage#

1{{< mermaid >}}
2YOUR DIAGRAM INSTRUCTIONS
3{{< /mermaid >}}

You can also wrap it with other shortcodes, such as text/align-center.

1{{% text/align-center %}}
2{{< mermaid >}}
3YOUR DIAGRAM INSTRUCTIONS
4{{< /mermaid >}}
5{{% /text/align-center %}}

Examples#

Flow Chart#

1{{< mermaid >}}
2graph TD
3    A[Christmas] -->|Get money| B(Go shopping)
4    B --> C{Let me think}
5    C -->|One| D[Laptop]
6    C -->|Two| E[iPhone]
7    C -->|Three| F[fa:fa-car Car]
8{{< /mermaid >}}
graph TD A[Christmas] -->|Get money| B(Go shopping) B --> C{Let me think} C -->|One| D[Laptop] C -->|Two| E[iPhone] C -->|Three| F[fa:fa-car Car]

Sequence Diagram#

1{{< mermaid >}}
2sequenceDiagram
3    Alice->>+John: Hello John, how are you?
4    Alice->>+John: John, can you hear me?
5    John-->>-Alice: Hi Alice, I can hear you!
6    John-->>-Alice: I feel great!
7{{< /mermaid >}}
sequenceDiagram Alice->>+John: Hello John, how are you? Alice->>+John: John, can you hear me? John-->>-Alice: Hi Alice, I can hear you! John-->>-Alice: I feel great!

Class Diagram#

 1{{< mermaid >}}
 2classDiagram
 3    Animal <|-- Duck
 4    Animal <|-- Fish
 5    Animal <|-- Zebra
 6    Animal : +int age
 7    Animal : +String gender
 8    Animal: +isMammal()
 9    Animal: +mate()
10    class Duck{
11      +String beakColor
12      +swim()
13      +quack()
14    }
15    class Fish{
16      -int sizeInFeet
17      -canEat()
18    }
19    class Zebra{
20      +bool is_wild
21      +run()
22    }
23{{< /mermaid >}}
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() }