> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify-mintlify-add-hello-world-quickstart-48843.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Mermaid

> 使用 Mermaid 展示图表

[Mermaid](https://mermaid.js.org/) 可通过文本与代码构建流程图、时序图、甘特图等各类图表。

有关支持的图表类型与语法的完整列表，请参阅 [Mermaid 文档](https://mermaid.js.org/intro/)。

```mermaid
  flowchart LR
    subgraph subgraph1
        direction TB
        top1[top] --> bottom1[bottom]
    end
    subgraph subgraph2
        direction TB
        top2[top] --> bottom2[bottom]
    end
    %% ^ 这两个子图完全相同，唯一区别在于指向它们的链接：

    %% 指向 subgraph1 的链接：保留 subgraph1 的方向设置
    outside --> subgraph1
    %% subgraph2 内部的链接：
    %% subgraph2 继承顶层图的方向（LR）
    outside ---> top2
```

````mdx Mermaid 流程图示例
```mermaid
  flowchart LR
    subgraph subgraph1
        direction TB
        top1[top] --> bottom1[bottom]
    end
    subgraph subgraph2
        direction TB
        top2[top] --> bottom2[bottom]
    end
    %% ^ 这两个子图完全相同，唯一区别在于指向它们的链接：

    %% 指向 subgraph1 的链接：会保留 subgraph1 的方向
    outside --> subgraph1
    %% subgraph2 内部的链接：
    %% subgraph2 继承顶层图（LR）的方向
    outside ---> top2
```
````

<div id="syntax">
  ## 语法
</div>

要创建 Mermaid 图表，请将图表定义写在 Mermaid 代码块中。

````mdx
```mermaid
// 在此编写你的 Mermaid 图表代码
```
````