Mermaid

Mermaid Chart #

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

Override Mermaid Initialization Config

To override the initialization config for Mermaid, create a mermaid.json file in your assets folder!

Example #

{{< mermaid [class="text-center"]>}}
sequenceDiagram
    Alice->>Bob: Hello Bob, how are you?
    alt is sick
        Bob->>Alice: Not so good :(
    else is well
        Bob->>Alice: Feeling fresh like a daisy
    end
    opt Extra response
        Bob->>Alice: Thanks for asking
    end
{{< /mermaid >}}

sequenceDiagram Alice->>Bob: Hello Bob, how are you? alt is sick Bob->>Alice: Not so good :( else is well Bob->>Alice: Feeling fresh like a daisy end opt Extra response Bob->>Alice: Thanks for asking end