Mermaid Chart Shortcode

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

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

Flowchart #

graph TD; A-->B; A-->C; B-->D; C-->D;

View Code
{{<mermaid class="text-center">}}
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
{{</mermaid >}}

Sequence diagram #

sequenceDiagram participant Alice participant Bob Alice->>John: Hello John, how are you? loop Healthcheck John->>John: Fight against hypochondria end Note right of John: Rational thoughts
prevail! John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good!

View Code
{{<mermaid class="text-center">}}
sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!
{{</mermaid>}}
Mermaid Chart Shortcode was last edited on 2021-01-13 @16a6725 : update formatting
Source Edit