This article offers a sample of basic diagram usage that can be used in Hugo content files.
Please see also Mermaid.
Usage
Via Shortcode
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 %}}
markdown
Mermaid code block
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 >}}
markdown
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 >}}
markdown
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```
markdown
Comments