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

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!

Markdown時序圖--基礎語法