> ## Documentation Index
> Fetch the complete documentation index at: https://www.mintlify.com/docs/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 placement="top-right" theme={null}
  flowchart LR
    subgraph subgraph1
        direction TB
        top1[top] --> bottom1[bottom]
    end
    subgraph subgraph2
        direction TB
        top2[top] --> bottom2[bottom]
    end
    %% ^ These subgraphs are identical, except for the links to them:

    %% Link *to* subgraph1: subgraph1 direction is maintained
    outside --> subgraph1
    %% subgraph2 内部的链接:
    %% subgraph2 继承顶级图的方向 (LR)
    outside ---> top2
```

````mdx Mermaid flowchart example theme={null}
```mermaid placement="top-right"
  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="elk-layout-support">
  ## ELK 布局支持
</div>

Mintlify 支持将 [ELK（Eclipse Layout Kernel）](https://www.eclipse.org/elk/) 布局引擎用于 Mermaid 图表。ELK 会优化元素排布，减少重叠并提升可读性，对大型或复杂图表尤其有用。

要在 Mermaid 图表中使用 ELK 布局，请在图表定义的开头添加 `%%{init: {'flowchart': {'defaultRenderer': 'elk'}}}%%` 指令：

````mdx ELK layout example theme={null}
```mermaid
%%{init: {'flowchart': {'defaultRenderer': 'elk'}}}%%
flowchart LR
    A[Start] --> B[Process 1]
    B --> C[Process 2]
    B --> D[Process 3]
    C --> E[End]
    D --> E
```
````

<div id="interactive-controls">
  ## 交互式控件
</div>

所有 Mermaid 图表都包含交互式缩放和平移控件。默认情况下，当图表 height 超过 120px 时会显示这些控件。

* **放大/缩小**：使用缩放按钮来放大或缩小图表。
* **平移**：使用方向箭头在图表中移动视图。
* **重置视图**：点击重置按钮返回到初始视图。

在处理无法完全显示在视口中的大型或复杂图表时，这些控件尤其有用。

<div id="properties">
  ## 属性
</div>

<ResponseField name="actions" type="boolean">
  显示或隐藏交互控件。设置该属性后会覆盖默认行为（当图表的 height 超过 120px 时显示控件）。
</ResponseField>

<ResponseField name="placement" type="string" default="bottom-right">
  交互控件的位置。可选值：`top-left`、`top-right`、`bottom-left`、`bottom-right`。
</ResponseField>

<div id="examples">
  ### 示例
</div>

在示意图中隐藏控件：

````mdx theme={null}
```mermaid actions={false}
flowchart LR
    A --> B
```
````

将控件显示在左上角：

````mdx theme={null}
```mermaid placement="top-left"
flowchart LR
    A --> B
```
````

同时使用这两个属性：

````mdx theme={null}
```mermaid placement="top-left" actions={true}
flowchart LR
    A --> B
```
````

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

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

````mdx theme={null}
```mermaid
// 在此处编写您的 mermaid 图表代码
```
````


## Related topics

- [概览](/zh/components/index.md)
- [自定义脚本](/zh/customize/custom-scripts.md)
- [创建和编辑页面](/zh/editor/pages.md)