---
title: Mermaid 图表
slug: docs/cn/UfXt-mermaid
description: 了解如何使用 Mermaid 集成来创建各种类型的图表，包括 ERD、UML、类图和序列图。本文档说明了如何通过快捷方式或菜单选项来访问 Mermaid。不要错过其中包含的序列图示例。
createdAt: 2020-10-15T08:05:12.000Z
---

创建图表的另一种选择是使用我们的[Mermaid](https://mermaid-js.github.io/mermaid/#/)集成。Mermaid 是一种类似 markdown 的语法，用于构建图表、ERD、UML、类、序列等。

只需开始编写`（美人鱼）`快捷方式，或直接从`/`菜单中添加它。

请查看下面示例图表中的实际效果 😄

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

***

::::LinkArray
:::LinkArrayItem{headerType="IMAGE" headerImage="https://api.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-C1IcmVcG0rx4ZLHX6X7V7-20250911-192557.png"}
:FontAwesome[]{icon="fa-solid fa-cubes"} &#x20;**&#x20;查找其他区块**

发现创建令人惊叹且功能强大的文档页面的新方法和区块。

[查看所有区块](docId\:B4IohMBgLgJ5t-HvaLMTF)&#x20;
:::

:::LinkArrayItem{headerType="IMAGE" headerImage="https://api.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-YRyGGWKsNS1ZZJa5XJy0z-20250911-192608.png"}
:FontAwesome[]{icon="fa-solid fa-headset"}**&#x20; 需要帮助？⬇️**

使用**蓝色** **聊天气泡**（右下角）。

或尝试**AI 聊天**（来自搜索框）以获取快速答案。
:::

:::LinkArrayItem{headerType="IMAGE" headerImage="https://api.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-MS_ubDHlXgoktt4svD2rL-20250911-192619.png"}
:FontAwesome[]{icon="fa-solid fa-hand-holding-heart"}**&#x20;  您的意见很重要**

请使用下面的反馈表，匿名提交。

或在**Q\&A 区域**中提出问题，我们的团队或 AI 将为您提供解决方案。
:::
::::