hextra_mirror/exampleSite/content/docs/guide/diagrams.zh-cn.md

title, weight, next

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

目前，Hextra 支持通过 Mermaid 绘制图表。

Mermaid

Mermaid 是一个基于 JavaScript 的图表绘制工具，它能将类 Markdown 的文本定义动态转换为浏览器中渲染的图表。例如，Mermaid 可以绘制流程图、时序图、饼图等多种图表。

在 Hextra 中使用 Mermaid 非常简单，只需编写一个语言设置为 mermaid 的代码块：

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

上述代码将渲染为：

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

时序图示例：

sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: 你好 John，最近怎么样？
    loop 健康检查
        John->>John: 与疑病症斗争
    end
    Note right of John: 理性思考 <br/>占据上风！
    John-->>Alice: 好极了！
    John->>Bob: 你怎么样？
    Bob-->>John: 非常好！

更多信息请参阅 Mermaid 官方文档。