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

Please see also Mermaid.

Usage§

Via Shortcode§

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

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

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

Mermaid code block§

1```mermaid
2YOUR DIAGRAM INSTRUCTIONS
3```

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[fas: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[fas:fa-car Car]

We need to import the faCar solid icon first, in order to use the fas:fa-car FontAwesome icon.

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```
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() }