Diagrams and Charts

This article offers some examples about using Mermaid for diagramming and charting.

Using Mermaid Code Block

1```mermaid
2graph TD;
3    A-->B;
4    A-->C;
5    B-->D;
6    C-->D;
7```
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

Using Mermaid Shortcode

 1{{< mermaid >}}
 2sequenceDiagram
 3    participant Alice
 4    participant Bob
 5    Alice->>John: Hello John, how are you?
 6    loop Healthcheck
 7        John->>John: Fight against hypochondria
 8    end
 9    Note right of John: Rational thoughts <br/>prevail!
10    John-->>Alice: Great!
11    John->>Bob: How about you?
12    Bob-->>John: Jolly good!
13{{< /mermaid >}}
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!

Further Reading