Markdown時序圖--基礎語法

時序圖

​ 序列圖是一種交互圖，它顯示了流程以何種順序相互操作。

Mermaid可以渲染序列圖，如下定義。

sequenceDiagram
    Alice->>John:Message  Hello John, how are you?
    John-->>Alice:Message Great!
    Alice-xJohn:Message See you later!

sequenceDiagram Alice ->> John: Hello John, how are you? John -->> Alice: Great! Alice-x John: See you later!

1.1 ：定義序列圖的參與者

​ 參與者可以隱式定義，如上圖例子----即參與者在圖表源文本中按照出現的順序呈現。但有時，您可能希望以不同於在第一條消息中顯示的順序顯示參與者。可以通過以下步驟指定行動者的出現順序:

sequenceDiagram
    participant John
    participant Alice
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!

sequenceDiagram participant John participant Alice Alice->>John: Hello John, how are you? John-->>Alice: Great!

1.2:為參與者設置別名

​ 參與者可以有一個便於識別的ID和一個描述性的標簽

sequenceDiagram
    participant A as Alice
    participant J as John
    A->>J: Hello John, how are you?
    J->>A: Great!

sequenceDiagram participant A as Alice participant J as John A->>J: Hello John, how are you? J->>A: Great!

一：語法----時序圖

[][][][] [參與者A] [線(箭頭)] [參與者B] ：Message(關鍵字可忽略) 文本描述

語法可解讀：即 參與者A與參與者B通過線連接 ：連接的線上可以描述A與B的關系

​ 現在有6種類型的線（箭頭）

Type	Description
->	Solid line without arrow
-->	Dotted line without arrow
->>	Solid line with arrowhead
-->>	Dotted line with arrowhead
-x	Solid line with a cross at the end
--x	Dotted line with a cross at the end.

1.2：我們可以定義參與的的主動（activate）和被動（activate）的關系。

sequenceDiagram
    Alice->>John: Hello John, how are you?
    activate John
    John-->>Alice: Great!
    deactivate John

sequenceDiagram Alice->>John: Hello John, how are you? activate John John-->>Alice: Great! deactivate John

即通過“activate John”關鍵字activate 定義對象“John”為主動發起開始，“deactivate John”關鍵字deactivate定義John結束。如上。

備注：簡寫activate和deactivate通過在":"后追加+/-

sequenceDiagram
    Alice->>+John: Hello John, how are you?
    John-->>-Alice: Great!

1.2.1 : activate可以連續標示同一個參與者

sequenceDiagram
    Alice->>+John: Hello John, how are you?
    Alice->>+John: John, can you hear me?
    John-->>-Alice: Hi Alice, I can hear you!
    John-->>-Alice: I feel great!

sequenceDiagram Alice->>+John: Hello John, how are you? Alice->>+John: John, can you hear me? John-->>-Alice: Hi Alice, I can hear you! John-->>-Alice: I feel great!

二：設置筆記

我們可以為一個時序圖設置筆記，語法如下

​ Note [ right of | left of | over ] [Actor]: 筆記內容

​ 語法解讀：關鍵字 Note [ 右邊 | 左邊 | 上面 ] [參與者]: 筆記內容

sequenceDiagram
    participant John
    Note right of John: Text in note

sequenceDiagram participant John Note right of John: Text in note

備注：也可以在橫跨兩個對象

sequenceDiagram
    Alice->John: Hello John, how are you?
    Note over Alice,John: A typical interaction

sequenceDiagram Alice->John: Hello John, how are you? Note over Alice,John: A typical interaction

三：循環

​ 我們可以在時序圖中表達一個循環，語法如下。

loop Loop text
... statements ...
end

舉例：

sequenceDiagram
    Alice->John: Hello John, how are you?
    loop Every minute
        John-->Alice: Great!
    end

sequenceDiagram Alice->John: Hello John, how are you? loop Every minute John-->Alice: Great! end

四：Alt選擇

​ 我們還可以在時序圖中表達選擇，即二選一的表示，語法如下

alt Describing text
... statements ...
else
... statements ...
end

OR

opt Describing text
... statements ...
end

舉例如下

sequenceDiagram
    Alice->>Bob: Hello Bob, how are you?
    alt is sick
        Bob->>Alice: Not so good :(
    else is well
        Bob->>Alice: Feeling fresh like a daisy
    end
    opt Extra response
        Bob->>Alice: Thanks for asking
    end

sequenceDiagram Alice->>Bob: Hello Bob, how are you? alt is sick Bob->>Alice: Not so good :( else is well Bob->>Alice: Feeling fresh like a daisy end opt Extra response Bob->>Alice: Thanks for asking end

五：並行

​ 在時序圖中表達並行，語法如下

par [Action 1]
... statements ...
and [Action 2]
... statements ...
and [Action N]
... statements ...
end

舉例1：簡單並行

sequenceDiagram
		par Alice to Bob
    Alice->>Bob: Hello Bob, I am Alice.
    and Alice to John
    Alice->>John: Hello Bob, I am Alice.
    end
    Bob->>Alice: Hello Alice.
    John->>Alice: Hello Alice.

sequenceDiagram par Alice to Bob Alice->>Bob: Hello Bob, I am Alice. and Alice to John Alice->>John: Hello Bob, I am Alice. end Bob->>Alice: Hello Alice. John->>Alice: Hello Alice.

舉例2: 嵌套並行,即par內嵌套子par語句

六：設置背景

​ 我們可以為時序圖的部分語句進行塗色，語法如下

rect rgb(0, 255, 0)
... content ...
end

例如

sequenceDiagram par Alice to Bob rect rgb(0, 255, 0) Alice->>Bob: Hello Bob, I am Alice. end and Alice to John Alice->>John: Hello Bob, I am Alice. end rect rgb(255, 0, 0) Bob->>Alice: Hello Alice. John->>Alice: Hello Alice. end

七：設置備注

即為程序可讀性提高，可以為時序圖設置備注，語法如下

sequenceDiagram
    Alice->>John: Hello John, how are you?
    %% this is a comment
    John-->>Alice: Great!

sequenceDiagram Alice->>John: Hello John, how are you? %% this is a comment John-->>Alice: Great!