webpage/themes/hugo-book/exampleSite/content.en/docs/shortcodes/mermaid.md

Mermaid Chart

MermaidJS is library for generating svg charts and diagrams from text.

{{% hint info %}} Override Mermaid initialization config
To override the initialization config for Mermaid, create a mermaid.json file in your assets folder! {{% /hint %}}

Example

{{% columns %}}

{{</* mermaid [class="..."] >}}
stateDiagram-v2
    State1: The state with a note
    note right of State1
        Important information! You can write
        notes.
    end note
    State1 --> State2
    note left of State2 : This is the note to the left.
{{< /mermaid */>}}

<--->

{{}} stateDiagram-v2 State1: The state with a note note right of State1 Important information! You can write notes. end note State1 --> State2 note left of State2 : This is the note to the left. {{}}

{{% /columns %}}