主题
泳道图
🌐 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.
swimlaneswimlane 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
使用 accTitle 和 accDescr 来提供可访问的标题和描述。
🌐 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.