这堂关于时序图 (Sequence Diagram) 的课程。如果说流程图关注的是“做什么”,那么时序图关注的就是“谁和谁,在什么时候,说了什么话”。它是一种专门用来描述系统中不同组件之间交互流程和时间顺序的图表。本课程的所有示例都非常简短,强烈建议您打开 Mermaid 官方的在线编辑器 mermaid.live,一边学习一边亲手尝试下面的每一个小步骤。
第二部分:常用图表绘制
第4章:时序图 (Sequence Diagram) – 描述交互流程
4.1 时序图声明与参与者
4.1.1 sequenceDiagram 关键字
第一步:声明图表类型
与流程图的graph类似,任何一个时序图都必须以sequenceDiagram这个关键字开头。这行代码告诉Mermaid渲染引擎:“我接下来要画的是一个时序图”。
我们先写下这最基本的第一行:
代码段
sequenceDiagram
第二步:让Mermaid自动创建参与者
Mermaid非常智能。即使你没有明确定义图中的角色,当你开始描述他们之间的对话时,Mermaid也会自动地创建它们。
我们来添加一条简单的消息:
代码段
sequenceDiagram
Alice->>Bob: 你好,Bob!
-
在这个例子中,Mermaid会自动创建出名为“Alice”和“Bob”的两个参与者。
4.1.2 participant 和 actor 的定义与别名
虽然可以自动创建,但更专业、更清晰的做法是在图表的开头就明确地声明所有参与交互的角色。
好比说:这就像写剧本一样,在剧本的开头先列出一个“角色表”。
第一步:使用 participant 声明普通参与者
participant 关键字用来声明一个普通的系统组件或模块,它在图上通常显示为一个矩形。
我们来明确地定义 Alice 和 Bob:
代码段
sequenceDiagram
participant Alice
participant Bob
Alice->>Bob: 你好,Bob!
第二步:使用 actor 声明用户参与者
actor 关键字在功能上与 participant 完全一样,但它在图上会被渲染成一个**“小人”的图标。这通常用来代表一个真实的用户**或外部系统的操作者。
让我们把 Alice 定义为一个用户:



