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!

巴特西