欢迎光临散文网 会员登陆 & 注册

3. Mermaid 教程 — 序列图

2022-05-18 09:34 作者:没有理想的理想国  | 我要投稿

事实上,序列图这个翻译或许不那么准确,也可以称为时序图、顺序图等等,但这里我们还是称其为序列图。

序列图使用关键字 sequenceDiagram 定义。看下面一个例子:

效果如下:

sequenceDiagram01

我们把 Boy 这样的结构同样地称为一个节点(id)。如果像上面一样没有指定形式的话,那么它默认就是矩形的。顺便说一句,上图也是这种类型的图表的基本框架,主要由节点及自身的连线、箭头及信息(两者我们称为路径)组成。

3.1 节点样式与别名

在开始部分,我们可以声明节点的样式,使用 participantsactor 。其中 participants 与默认样式是一致的,而 actor 将会显示为一个小人。

显示为:

sequenceDiagram02


注意,样式的声明顺序也会影响节点的出现顺序。上面一个例子中 Boy 是先于 Girl 出现的。

可以使用类似 样式 别名 as 节点 的格式声明节点的别名。例如:

这个例子和上一个例子的效果是一致的,但在这里我们使用了 BG 分别代替了 BoyGirl

3.2 箭头与信息

这里的信息指的是,箭头上面的文本。

mermaid 提供的箭头类型有以下几种:

箭头

而箭头与附带的消息的代码格式如下(不需要带上[]):

这定义了一个从 id1 指向 id2 的箭头和信息( id1id2 可以相同)。看下面一个例子。

效果如下:

sequenceDiagram03

3.3 激活 Activations

Activations 这个概念说实话我也并不是很清楚它在中文里的意思。先看下面一段代码:

效果:

sequenceDiagram04

我个人的理解是,它(Activations)标记了一个焦点位置,或者说是“对话”的重要部分。使用 activate id 标记起始位置,使用 deactivate id 标记结束位置。而这里的位置都是从上下文中的 id1 arrow id2 中的 id1id2 选择的。看下面一个例子:

※ 起始位置和结束位置所选节点应该是相同的,毕竟,Activations 不能在两条线上产生。

上述代码效果:

sequenceDiagram05

也可以使用简便写法,在箭头后面加上 +/- 定义起始位置和结束位置。

它的效果同上一个例子是一致的(别忘了通过声明设置节点出现顺序)。注意,这样的写法里面,+- 是成对出现的,且 + 出现位置后面的节点通常作为起始位置(如上面的 A),而对应的 - 会自动确定结束位置(根据起始节点一致)。

你也可以嵌套使用 Activations。例如:

它的效果是这样的:

sequenceDiagram06

可以发现, Activations 的嵌套是类似计算机编程中的嵌套的(由内而外?)。

3.4 标注

我们可以在节点自身的连线或者箭头上做标注,使用关键字 Note

上面的代码首先定义了一个 B 节点,然后在其自身的连线右侧(right)插入了一个标注,内容为 Note。

这种定义是在节点自身连线边上插入标注,形式如 Note 位置描述 节点,位置描述有以下几种:

位置描述

使用同样的方法,我们可以使用 Note 位置描述 节点1,节点2 的格式在箭头上标注,此时位置只有 over 可选。

效果如下:

sequenceDiagram07

和 Activations 一样,Note 也会找上下文中最近的箭头进行标注。

3.5 路径区域

所谓的区域,其实就是一个框框:D。先看一个例子。

显示如:

sequenceDiagram08

很显然,loop 定义了一个区域,其后紧接着的文本则定义了回路的文本(这不是必须的,也就是说,你可以直接使用 loop ), end 结束了定义。结构内部包含的“消息”则是区域将会框住的部分。它的语法格式如下:

除了 loop 外,还可以使用 altpar 等关键字定义此类区域(这些都是可以嵌套使用的)。

3.5.1 alt 和 opt

alt 的语法格式形如:

相比 loopalt 多了一个 else 部分(但它不是必须部分),它会在区域中加入一个内部分割线,看下面一个示例代码:

它的显示效果如下:

sequenceDiagram09

opt 也可以用来定义一个区域,字面上它表示一个可选区域。而语法上,它和 loop 的使用方法一致。这里从略。

3.5.2 par

使用 par 可以显示并行发生的路径。

它显示为:

sequenceDiagram10

par 的语法格式为:

事实上,and 部分也不是必选的。




3. Mermaid 教程 — 序列图的评论 (共 条)

分享到微博请遵守国家法律