Skip to content

泳道图

🌐 Swimlanes Diagram

自 MERMAID_RELEASE_VERSION 起可用。

警告

这是 Mermaid 中的一种新图表类型。其语法在未来版本中可能会有所变化。

泳道图显示按责任划分的过程。每条泳道代表一个参与者、团队、系统或阶段,泳道内的节点显示在那里发生的工作。箭头显示工作的顺序和泳道之间的交接。

🌐 A swimlane diagram shows a process divided by responsibility. Each lane represents an actor, team, system, or phase, and the nodes inside the lane show the work that happens there. Arrows show the order of work and the handoffs between lanes.

当最重要的问题不仅是“下一步发生什么?”而且是“谁负责这一步?”时,请使用泳道图。它们适用于审批流程、支持流程、交付工作流程以及任何跨团队或系统的工作流程。

🌐 Use swimlane diagrams when the most important question is not only "what happens next?" but also "who owns this step?" They are useful for approval flows, support processes, delivery workflows, and any process where work crosses teams or systems.

基本示例

🌐 Basic Example

本页面上呈现的示例使用了 Neo 外观和 Redux 主题。开箱即用时,泳道使用你配置的默认外观和主题。

代码:
mermaid
⌘ + 回车键|

语法

🌐 Syntax

泳道图以 swimlane 关键字开始。你可以在关键字后可选地添加一个方向。

🌐 A swimlane diagram starts with the swimlane keyword. You can optionally add a direction after the keyword.

swimlane
swimlane LR

支持的方向有:

🌐 The supported directions are:

方向含义
TB从上到下
TD自上而下,与 TB 相同
BT从下到上
LR从左到右
RL从右到左

如果未设置方向,图表将使用 TB

🌐 If no direction is set, the diagram uses TB.

车道

🌐 Lanes

使用 subgraph 来创建一个泳道。在泳道图中,顶层子图显示为泳道。一个泳道以 end 结束。

🌐 Use subgraph to create a lane. In a swimlane diagram, top-level subgraphs are rendered as swimlanes. A lane ends with end.

代码:
mermaid
⌘ + 回车键|

你可以给车道一个内部ID和显示标签。当标签包含空格或当你想要一个用于样式的稳定ID时,这很有用。

🌐 You can give a lane an internal id and a display label. This is useful when the label contains spaces or when you want a stable id for styling.

代码:
mermaid
⌘ + 回车键|

节点

🌐 Nodes

节点使用流程图风格的形状语法。ID 最先写入,标签写在形状内部。

🌐 Nodes use flowchart-style shape syntax. The id is written first, and the label is written inside the shape.

代码:
mermaid
⌘ + 回车键|

最常见的节点形式有:

🌐 The most common node forms are:

语法形状常用用途
id[Text]矩形任务或活动
id(Text)圆角矩形步骤或事件
id([Text])椭圆形开始或结束
id{Text}决策分支问题
id((Text))圆形连接器或标记

有关完整的形状目录、图标、图片、Markdown 字符串、类和样式选项,请参见 流程图语法

🌐 For the complete shape catalog, icons, images, markdown strings, classes, and styling options, see Flowchart syntax.

边缘

🌐 Edges

边缘也使用流程图风格的语法。它们可以连接同一泳道中的节点或跨泳道的节点。

🌐 Edges also use flowchart-style syntax. They can connect nodes in the same lane or across lanes.

代码:
mermaid
⌘ + 回车键|

常见边缘形式:

🌐 Common edge forms:

语法含义
A --> B箭头
A --- B无箭头的线
A -->|Label| B带标签的箭头
A -.-> B虚线箭头
A ==> B粗箭头

有关完整的边语法,包括多方向箭头和最小链接长度,请参见 流程图语法

🌐 For the full edge syntax, including multi-directional arrows and minimum link length, see Flowchart syntax.

可访问性

🌐 Accessibility

使用 accTitleaccDescr 来提供可访问的标题和描述。

🌐 Use accTitle and accDescr to provide an accessible title and description.

代码:
mermaid
⌘ + 回车键|

良好做法

🌐 Good Practices

让每条车道代表一种所有权类型

🌐 Make Each Lane Mean One Kind of Ownership

选择能够回答“谁拥有这一步?”的流程。除非图表的重点是区分,否则不要在同一图表中混合团队、阶段和状态。

🌐 Choose lanes that answer "who owns this step?" Avoid mixing teams, phases, and statuses in the same diagram unless that distinction is the point of the diagram.

代码:
mermaid
⌘ + 回车键|

标记跨车道交接

🌐 Label Cross-Lane Handoffs

跨车道箭头表示责任的变更。当移交依赖于文档、决策、信息或条件时,请标注箭头。

🌐 A cross-lane arrow is where responsibility changes. Label the arrow when the handoff depends on a document, decision, message, or condition.

代码:
mermaid
⌘ + 回车键|

保持长过程可读

🌐 Keep Long Processes Readable

当车道或交接无法在一个视图中容纳时,将大型流程拆分为几个图表。一个有用的泳道图通常在不需要多次跟踪每个箭头的情况下即可阅读。

🌐 Split a large process into several diagrams when the lanes or handoffs stop fitting in one view. A useful swimlane diagram is usually readable without tracing every arrow twice.

代码:
mermaid
⌘ + 回车键|

使用稳定 ID

🌐 Use Stable Ids

对节点和车道使用简短、有意义的 ID。标签可以更改,而不会破坏链接、样式或后续引用。

🌐 Use short, meaningful ids for nodes and lanes. The label can change without breaking links, styles, or later references.

代码:
mermaid
⌘ + 回车键|

将决策放在做出决策的地方

🌐 Put Decisions Where They Are Made

在拥有决策的泳道中放置一个决策节点。然后将结果分配到对结果采取行动的泳道中。

🌐 Place a decision node in the lane that owns the decision. Then route the outcomes to the lanes that act on the result.

代码:
mermaid
⌘ + 回车键|

何时使用另一个图表

🌐 When to Use Another Diagram

当不重要归属关系且只需要展示顺序或分支时,使用常规流程图。当关注点是参与者之间随时间的消息时,使用时序图。当关注点是某个事物如何改变状态时,使用状态图

🌐 Use a regular flowchart when ownership is not important and you only need to show sequence or branching. Use a sequence diagram when the focus is messages over time between participants. Use a state diagram when the focus is how one thing changes state.

Opens in mermaid.ai