Mermaid

Mermaid 支持使用文本与代码构建流程图、时序图、甘特图及其他各类图表。有关支持的图表类型与语法的完整列表，请参阅 Mermaid 文档。

Mermaid flowchart example

```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
```

ELK 布局支持

Mintlify 支持将 ELK（Eclipse Layout Kernel）布局引擎用于 Mermaid 图表。ELK 会优化元素排布，减少重叠并提升可读性，对大型或复杂图表尤其有用。要在 Mermaid 图表中使用 ELK 布局，请在图表定义的开头添加 %%{init: {'flowchart': {'defaultRenderer': 'elk'}}}%% 指令：

ELK layout example

```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
```

交互式控件

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

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

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

在编辑器中编辑图表

在 Web 编辑器中，每个 Mermaid 图表都有一个工具栏，可用于缩放、重置视图、显示或隐藏图表代码，以及设置 actions 和 placement 属性。要编辑大型图表，请点击图表工具栏中的 Open fullscreen。全屏视图会在实时预览旁显示图表代码，让你在输入时即可编辑代码并查看结果。可使用工具栏按钮、鼠标滚轮或 + 和 - 键进行缩放。按 0 重置视图，按 Esc 关闭全屏视图。

属性

boolean

显示或隐藏交互控件。设置该属性后会覆盖默认行为（当图表的 height 超过 120px 时显示控件）。

string

默认值:"bottom-right"

交互控件的位置。可选值：top-left、top-right、bottom-left、bottom-right。

string

应用于图表容器的额外 CSS 类。

示例

在示意图中隐藏控件：

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

将控件显示在左上角：

```mermaid placement="top-left"
flowchart LR
    A --> B
```

同时使用这两个属性：

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

语法

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

```mermaid
// 在此处编写您的 mermaid 图表代码
```

快速入门

创建内容

管理站点

Agent

Assistant

面向 Agent 的内容

搜索与 SEO

编写 API 文档

集成

参考

ELK 布局支持

交互式控件

在编辑器中编辑图表

属性

示例

语法

​ELK 布局支持

​交互式控件

​在编辑器中编辑图表

​属性

​示例

​语法

ELK 布局支持

交互式控件

在编辑器中编辑图表

属性

示例

语法