3. Mermaid 教程 — 序列圖
事實(shí)上,序列圖這個(gè)翻譯或許不那么準(zhǔn)確,也可以稱為時(shí)序圖、順序圖等等,但這里我們還是稱其為序列圖。
sequenceDiagram
效果如下:

Boy
這樣的結(jié)構(gòu)同樣地稱為一個(gè)節(jié)點(diǎn)(id)。如果像上面一樣沒(méi)有指定形式的話,那么它默認(rèn)就是矩形的。順便說(shuō)一句,上圖也是這種類型的圖表的基本框架,主要由節(jié)點(diǎn)及自身的連線、箭頭及信息(兩者我們稱為路徑
顯示為:

注意,樣式的聲明順序也會(huì)影響節(jié)點(diǎn)的出現(xiàn)順序。上面一個(gè)例子中 Boy
是先于 Girl
出現(xiàn)的。
可以使用類似 樣式 別名 as 節(jié)點(diǎn)
B
、G
分別代替了 Boy
、Girl
這里的信息指的是,箭頭上面的文本。
mermaid 提供的箭頭類型有以下幾種:

而箭頭與附帶的消息的代碼格式如下(不需要帶上[]):
id1
指向 id2
的箭頭和信息( id1
與 id2
效果如下:

Activations 這個(gè)概念說(shuō)實(shí)話我也并不是很清楚它在中文里的意思。先看下面一段代碼:
效果:

使用 activate id
標(biāo)記起始位置,使用 deactivate id
標(biāo)記結(jié)束位置。而這里的位置都是從上下文中的 id1 arrow id2
中的 id1
和 id2
※ 起始位置和結(jié)束位置所選節(jié)點(diǎn)應(yīng)該是相同的,畢竟,Activations 不能在兩條線上產(chǎn)生。

+
/-
+
、-
是成對(duì)出現(xiàn)的,且 +
出現(xiàn)位置后面的節(jié)點(diǎn)通常作為起始位置(如上面的 A),而對(duì)應(yīng)的 -
你也可以嵌套使用 Activations。例如:
它的效果是這樣的:

可以發(fā)現(xiàn), Activations 的嵌套是類似計(jì)算機(jī)編程中的嵌套的(由內(nèi)而外?)。
上面的代碼首先定義了一個(gè) B 節(jié)點(diǎn),然后在其自身的連線右側(cè)(right)插入了一個(gè)標(biāo)注,內(nèi)容為 Note。
這種定義是在節(jié)點(diǎn)自身連線邊上插入標(biāo)注,形式如 Note 位置描述 節(jié)點(diǎn)
,位置描述有以下幾種:

Note 位置描述 節(jié)點(diǎn)1,節(jié)點(diǎn)2
的格式在箭頭上標(biāo)注,此時(shí)位置只有 over
效果如下:

和 Activations 一樣,Note 也會(huì)找上下文中最近的箭頭進(jìn)行標(biāo)注。
所謂的區(qū)域,其實(shí)就是一個(gè)框框:D。先看一個(gè)例子。
顯示如:

loop
定義了一個(gè)區(qū)域,其后緊接著的文本則定義了回路的文本(這不是必須的,也就是說(shuō),你可以直接使用 loop
), end
loop
外,還可以使用 alt
、par
等關(guān)鍵字定義此類區(qū)域(這些都是可以嵌套使用的
loop
,alt
多了一個(gè) else
它的顯示效果如下:

也可以用來(lái)定義一個(gè)區(qū)域,字面上它表示一個(gè)可選區(qū)域。而語(yǔ)法上,它和 loop
它顯示為:

and