mirror of
https://github.com/mintlify/docs.git
synced 2026-09-14 13:35:46 +08:00
locadex-agent[bot]
7e5cadb4ba
Co-authored-by: locadex-agent[bot] <217277504+locadex-agent[bot]@users.noreply.github.com>
140 lines
3.5 KiB
Plaintext
140 lines
3.5 KiB
Plaintext
---
|
||
title: "Mermaid"
|
||
description: "使用 Mermaid 语法创建流程图、图表和可视化内容。"
|
||
keywords: ["Mermaid", "flowcharts", "diagrams"]
|
||
---
|
||
|
||
[Mermaid](https://mermaid.js.org/) 支持使用文本与代码构建流程图、时序图、甘特图及其他各类图表。
|
||
|
||
有关支持的图表类型与语法的完整列表，请参阅 [Mermaid 文档](https://mermaid.js.org/intro/)。
|
||
|
||
```mermaid placement="top-right"
|
||
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
|
||
```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
|
||
```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
|
||
```mermaid actions={false}
|
||
flowchart LR
|
||
A --> B
|
||
```
|
||
````
|
||
|
||
将控件显示在左上角：
|
||
|
||
````mdx
|
||
```mermaid placement="top-left"
|
||
flowchart LR
|
||
A --> B
|
||
```
|
||
````
|
||
|
||
同时使用这两个属性：
|
||
|
||
````mdx
|
||
```mermaid placement="top-left" actions={true}
|
||
flowchart LR
|
||
A --> B
|
||
```
|
||
````
|
||
|
||
|
||
<div id="syntax">
|
||
## 语法
|
||
</div>
|
||
|
||
要创建 Mermaid 图表，请将图表定义写入 Mermaid 代码块中。
|
||
|
||
````mdx
|
||
```mermaid
|
||
// 在此处编写您的 mermaid 图表代码
|
||
```
|
||
````
|