Dit artikel biedt een voorbeeld van het gebruik van diagrammen in Hugo-inhoudsbestanden.

Zie ook Mermaid.

Gebruik

Via Shortcode

1{{< mermaid >}}
2UW DIAGRAM INSTRUCTIES
3{{< /mermaid >}}

U kunt de shortcode ook combineren met andere shortcodes, zoals text/align-center.

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

Mermaid codeblok

1```mermaid
2UW DIAGRAM INSTRUCTIES
3```

Voorbeelden

Stroomdiagram

1{{< mermaid >}}
2graph TD
3    A[Kerst] -->|Geld krijgen| B(Winkelen)
4    B --> C{Laat me denken}
5    C -->|Één| D[Laptop]
6    C -->|Twee| E[iPhone]
7    C -->|Drie| F[fas:fa-car Auto]
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 moeten eerst het FontAwesome faCar pictogram importeren om het fas:fa-car pictogram te kunnen gebruiken.

Sequentiediagram

1{{< mermaid >}}
2sequenceDiagram
3    Alice->>+John: Hallo John, hoe gaat het?
4    Alice->>+John: John, kan je me horen?
5    John-->>-Alice: Hoi Alice, ik kan je horen!
6    John-->>-Alice: Ik voel me goed!
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!

Klassediagram

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