图表

本文将举例说明如何使用 Mermaid 制作图表。

使用 Mermaid 代码块

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;

使用 Mermaid 短代码

 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!

延伸阅读