Mermaid之序列图(sequenceDiagram)

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

mermaid关键字sequenceDiagram

连接线

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

参与者

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

mermaid

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!

null

备注

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

mermaid

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

null

抉择(alt)

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

mermaid

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

null

选项(opt)

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

mermaid

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: 给你可乐

null

循环(loop)

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

mermaid

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

null

并行(par)

并行发生的序列

mermaid

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

null

参与者菜单

只对participant有效

mermaid

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"}

null

综合示例

null

Mermaid之序列图(sequenceDiagram) ​

连接线 ​

参与者 ​

备注 ​

抉择(alt) ​

选项(opt) ​

循环(loop) ​

并行(par) ​

参与者菜单 ​

综合示例 ​

Mermaid之序列图(sequenceDiagram)

连接线

参与者

备注

抉择(alt)

选项(opt)

循环(loop)

并行(par)

参与者菜单

综合示例