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