3. Mermaid 教程 — 序列图
事实上,序列图这个翻译或许不那么准确,也可以称为时序图、顺序图等等,但这里我们还是称其为序列图。
sequenceDiagram
效果如下:

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

注意,样式的声明顺序也会影响节点的出现顺序。上面一个例子中 Boy
是先于 Girl
出现的。
可以使用类似 样式 别名 as 节点
B
、G
分别代替了 Boy
、Girl
这里的信息指的是,箭头上面的文本。
mermaid 提供的箭头类型有以下几种:

而箭头与附带的消息的代码格式如下(不需要带上[]):
id1
指向 id2
的箭头和信息( id1
与 id2
效果如下:

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

使用 activate id
标记起始位置,使用 deactivate id
标记结束位置。而这里的位置都是从上下文中的 id1 arrow id2
中的 id1
和 id2
※ 起始位置和结束位置所选节点应该是相同的,毕竟,Activations 不能在两条线上产生。

+
/-
+
、-
是成对出现的,且 +
出现位置后面的节点通常作为起始位置(如上面的 A),而对应的 -
你也可以嵌套使用 Activations。例如:
它的效果是这样的:

可以发现, Activations 的嵌套是类似计算机编程中的嵌套的(由内而外?)。
上面的代码首先定义了一个 B 节点,然后在其自身的连线右侧(right)插入了一个标注,内容为 Note。
这种定义是在节点自身连线边上插入标注,形式如 Note 位置描述 节点
,位置描述有以下几种:

Note 位置描述 节点1,节点2
的格式在箭头上标注,此时位置只有 over
效果如下:

和 Activations 一样,Note 也会找上下文中最近的箭头进行标注。
所谓的区域,其实就是一个框框:D。先看一个例子。
显示如:

loop
定义了一个区域,其后紧接着的文本则定义了回路的文本(这不是必须的,也就是说,你可以直接使用 loop
), end
loop
外,还可以使用 alt
、par
等关键字定义此类区域(这些都是可以嵌套使用的
loop
,alt
多了一个 else
它的显示效果如下:

也可以用来定义一个区域,字面上它表示一个可选区域。而语法上,它和 loop
它显示为:

and