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