Mermaid之序列图(sequenceDiagram)

序列图

它通过描述对象之间发送消息的时间顺序显示多个对象之间的动态协作。它可以表示用例的行为顺序，当执行一个用例行为时，时序图中的每条消息对应了一个类操作或状态机中引起转换的触发事件。

mermaid关键字sequenceDiagram

连接线

连线名称	代码	效果
直线 ->	sequenceDiagram participant Alice as Alice participant Bob as Bob Alice->Bob: 直线	`sequenceDiagram participant Alice as Alice participant Bob as Bob Alice->Bob: 直线`
直线箭头 ->>	sequenceDiagram participant Alice as Alice participant Bob as Bob Alice->>Bob: 直线箭头	`sequenceDiagram participant Alice as Alice participant Bob as Bob Alice->>Bob: 直线箭头`
虚线 -->	sequenceDiagram participant Alice as Alice participant Bob as Bob Alice-->Bob: 虚线	`sequenceDiagram participant Alice as Alice participant Bob as Bob Alice-->Bob: 虚线`
虚线箭头 -->>	sequenceDiagram participant Alice as Alice participant Bob as Bob Alice-->>Bob: 虚线箭头	`sequenceDiagram participant Alice as Alice participant Bob as Bob Alice-->>Bob: 虚线箭头`
直叉线箭头 -x	sequenceDiagra participant Alice as Alice participant Bob as Bob Alice-xBob: 直叉线箭头	`sequenceDiagram participant Alice as Alice participant Bob as Bob Alice-xBob: 直叉线箭头`
虚叉线箭头 --x	sequenceDiagra participant Alice as Alice participant Bob as Bob Alice--xBob: 虚叉线箭头	`sequenceDiagram participant Alice as Alice participant Bob as Bob Alice--xBob: 虚叉线箭头`
直线圆弧箭头 -)	sequenceDiagra participant Alice as Alice participant Bob as Bob Alice-)Bob: 直线圆弧箭头	`sequenceDiagram participant Alice as Alice participant Bob as Bob Alice-)Bob: 直线圆弧箭头`
虚线圆弧箭头 --)	sequenceDiagra participant Alice as Alice participant Bob as Bob Alice--)Bob: 虚线圆弧箭头	`sequenceDiagram participant Alice as Alice participant Bob as Bob Alice--)Bob: 虚线圆弧箭头`

参与者

参与者可以是participant或actor，可以通过as别名。

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


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

备注

备注语法note [right of | left of | over ] [Actor]

sequenceDiagram
    A ->> B: I'm A
    note right of B: note right of B
    note left of A: note left of A
    note over A, B: note over A, B


sequenceDiagram
    A ->> B: I'm A
    note right of B: note right of B
    note left of A: note left of A
    note over A, B: note over A, B

抉择(alt)

用来指明在两个或很多其它的消息序列之间的相互排斥的选择，相当于if..else..

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


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)

表示一个可能或不可能发生的序列

sequenceDiagram
    actor C as 顾客
    actor A as 售货员
    C ->> A: 买瓶可乐
    opt 代金券
    C ->> A: 我有代金券
    end
    A ->> C: 给你可乐


sequenceDiagram
    actor C as 顾客
    actor A as 售货员
    C ->> A: 买瓶可乐
    opt 代金券
    C ->> A: 我有代金券
    end
    A ->> C: 给你可乐

循环(loop)

片段反复一定次数。能够在临界中指示片段反复的条件

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

并行(par)

并行发生的序列

sequenceDiagram
    actor u1 as user1
    actor u2 as user2
    participant w as PasseRR's Blog
    par user1 visit blog
        u1 ->> w: click blog page
    and user2 visit open source
        u2 ->> w: click open source page
    end
    w -->> u1: blog page view
    w -->> u2: open source page view


sequenceDiagram
    actor u1 as user1
    actor u2 as user2
    participant w as PasseRR's Blog
    par user1 visit blog
        u1 ->> w: click blog page
    and user2 visit open source
        u2 ->> w: click open source page
    end
    w -->> u1: blog page view
    w -->> u2: open source page view

参与者菜单

只对participant有效

sequenceDiagram
    participant Alice
    participant John
    link Alice: blog @ https://www.xiehai.win
    link Alice: ebook @ https://www.xiehai.win/ebook.html
    links John: {"open source": "https://www.xiehai.win/open-source.html", "message board": "https://www.xiehai.win/messages-board.html"}

sequenceDiagram
    participant Alice
    participant John
    link Alice: blog @ https://www.xiehai.win
    link Alice: ebook @ https://www.xiehai.win/ebook.html
    links John: {"open source": "https://www.xiehai.win/open-source.html", "message board": "https://www.xiehai.win/messages-board.html"}
    Alice ->> John: visit the website!!

综合示例

sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts<br/>prevail...
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!

PasseRR