midtowndrafting.com/content/docs/guide/diagrams.zh-cn.md

title	weight	next
图表	6	/docs/guide/shortcodes

目前，Hextra 支持 Mermaid 的图表。

Mermaid

Mermaid 是一个基于 JavaScript 的图表绘制工具，它的文本定义和 Markdown 类似，可在浏览器中动态创建图表。例如：流程图、序列图、饼图等。

在 Hextra 中使用 Mermaid 就像使用代码块一样简单：

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

将呈现为：

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

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 <br/>prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!

如需获取更多信息，转至 Mermaid Documentation。