mermaid画序列图

序列图

  画出序列图的方法如下：

sequenceDiagram
    A ->   B : 无箭头实线
    A -->  B : 无箭头虚线(点线)
    A ->>  B : 有箭头实线
    A -->> B : 有箭头实线
    A -x   B : 有箭头实线，加上叉
    A --x  B : 有箭头虚线，加上叉

结果如下：

  如果想让John出现在前面，可以让mermaid通过设定参与者(participants)来实现：

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

结果如下：

别名

  可以给角色起一个简短的别名，以方便书写：

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

结果如下：

便签

  给序列图增加便签的语法如下：

sequenceDiagram
    participant John
    Note left of John : Text in note

代码如下：

  跨越两个Actor的便签：

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

代码如下：

  只在一个Actor上的便签：

sequenceDiagram
    Alice -> John : Hello John, how are you?
    Note over Alice : Ha Ha Ha

结果如下：

循环

  在序列图中也可以使用循环：

sequenceDiagram
    Alice ->> John : Hello!
    loop Reply every minute
        John ->> Alice : Great!
    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适用于可选的分支
    opt Extra response
        Bob ->> Alice : Thanks for asking
    end

结果如下：

区域高亮

  在序列图中也可以进行区域高亮：

sequenceDiagram
rect rgba(0, 255, 255, .6)
    Bob ->> Alice : Thanks for asking
end

结果如下：