Diagrams and Charts

November 26, 2023 1 min read Content Examples Diagrams Charts Mermaid

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

On this page

Using Mermaid Code Block§

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

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 >}}
markdown

Diagrams and Charts

Using Mermaid Code Block§

Using Mermaid Shortcode§

Further Reading§