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

Please see also Mermaid.

Prerequisites#

The diagram is disabled by default, you’ll need to enable the diagram in front matter, otherwise the diagram won’t be rendered.

diagram = true

diagram: true

{
   "diagram": true
}

Usage#

{{< mermaid >}}
YOUR DIAGRAM INSTRUCTIONS
{{< /mermaid >}}

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

{{% text/align-center %}}
{{< mermaid >}}
YOUR DIAGRAM INSTRUCTIONS
{{< /mermaid >}}
{{% /text/align-center %}}

Examples#

Flow Chart#

{{< 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[fa:fa-car Car]
{{< /mermaid >}}

Sequence Diagram#

{{< 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!
{{< /mermaid >}}

Class Diagram#

{{< mermaid >}}
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()
    }
{{< /mermaid >}}