Mermaid 时序图常用语法

2023-10-09 08:21:05 浏览数 (3)

# 基础语法

# 参与者

可以隐式地定义参与者,也可以显式地定义参与者。

代码语言:javascript复制
sequenceDiagram
  Alice ->> Bob: Hello Bob!
  Bob-->> Alice: Hi Alice!

可以使用 participant 关键字显式地定义参与者:

代码语言:javascript复制
sequenceDiagram
  participant Alice
  participant Bob
  Alice ->> Bob: Hello Bob!
  Bob-->> Alice: Hi Alice!

也可以给参与者指定别名:

代码语言:javascript复制
sequenceDiagram
  participant A as Alice
  participant B as Bob
  A ->> B: Hello Bob!
  B-->> A: Hi Alice!

# 角色

可以使用 actor 关键字定义角色:

代码语言:javascript复制
sequenceDiagram
  actor Alice
  actor Bob
  Alice ->> Bob: Hello Bob!
  Bob-->> Alice: Hi Alice!

# 分组或框

可以对角色或参与者进行分组:

代码语言:javascript复制
sequenceDiagram
  box A & B
  participant Alice
  participant Bob
  end
  box J & J
  participant John
  participant Jane
  end
  Alice ->> Bob: Hello Bob!
  Bob-->> Alice: Hi Alice!
  John ->> Alice: Hello Alice!
  Alice-->> John: Hi John!
  John ->> Jane: Hello Jane!
  Jane-->> John: Hi John!

可以设置分组颜色:

代码语言:javascript复制
sequenceDiagram
  box pink A & B
  participant Alice
  participant Bob
  end
  box J & J
  participant John
  participant Jane
  end
  Alice ->> Bob: Hello Bob!
  Bob-->> Alice: Hi Alice!
  John ->> Alice: Hello Alice!
  Alice-->> John: Hi John!
  John ->> Jane: Hello Jane!
  Jane-->> John: Hi John!

# 消息

消息可以是实线,也可以是虚线,语法:

[Actor][Arrow][Actor]: Message

代码语言:javascript复制
sequenceDiagram
  Alice -> Bob: 无箭头实线!
  Bob --> Alice: 无箭头虚线!
  Alice ->> Bob: 有箭头实线!
  Bob -->> Alice: 有箭头虚线!
  Alice -x Bob: 带×的实线!
  Bob --x Alice: 带×的虚线!
  Alice -) Bob: 带空心箭头的实线!(表示异步)
  Bob --) Alice: 带空心箭头的虚线!(表示异步)

# 激活

可以激活和取消激活参与者:

代码语言:javascript复制
sequenceDiagram
  Alice ->> Bob: Hello Bob!
  activate Bob
  Bob-->> Alice: Hi Alice!
  deactivate Bob

快捷语法:

代码语言:javascript复制
sequenceDiagram
  Alice ->>  Bob: Hello Bob!
  Bob -->>- Alice: Hi Alice!

激活状态可以叠加:

代码语言:javascript复制
sequenceDiagram
  Alice ->>  Bob: Hello Bob!
  Alice ->>  Bob: Hi Bob!
  Bob -->>- Alice: Hi Alice!
  Bob -->>- Alice: Hello Alice!

# 备注

代码语言:javascript复制
sequenceDiagram
  participant Alice
  participant Bob
  Note left of Alice: Alice is a participant
  Note right of Bob: Bob is a participant too
  Alice ->> Bob: Hello Bob!
  Bob-->> Alice: Hi Alice!

跨越多个参与者或角色的备注:

代码语言:javascript复制
sequenceDiagram
  participant Alice
  participant Bob
  Note over Alice, Bob: Alice and Bob are participants
  Alice ->> Bob: Hello Bob!
  Bob-->> Alice: Hi Alice!

备注可以支持换行符:

代码语言:javascript复制
sequenceDiagram
  participant Alice
  participant Bob
  Note over Alice, Bob: Alice and Bob are participants <br/> and this is a very long note.
  Alice ->> Bob: Hello Bob!
  Bob-->> Alice: Hi Alice!

# 循环

代码语言:javascript复制
sequenceDiagram
  Alice ->> Bob: Hello Bob!
  loop Every minute
    Bob-->> Alice: Hi Alice!
  end

# 替代和可选

可替代路径:

代码语言:javascript复制
sequenceDiagram
  Alice ->> Bob: Hello Bob!
  alt is sick
    Bob-->> Alice: Not feeling well.
  else is well
    Bob-->> Alice: Feeling well.
  end

可选路径:

代码语言:javascript复制
sequenceDiagram
  Alice ->> Bob: Hello Bob!
  Bob -->> Alice: Hello Alice!
  opt Extra response
    Bob-->> Alice: Thanks Bob!
  end

# 并行

表示并行发生的动作:

代码语言:javascript复制
sequenceDiagram
  Alice ->> Bob: Hello Bob!
  par Alice to Bob
    Alice -->> Bob: How are you?
  and Alice to Carol
    Alice -->> Carol: How are you?
  end
  Bob-->> Alice: Fine!
  Carol-->> Alice: Fine!

# 条件处理

对情况进行条件判断做出不同的处理:

代码语言:javascript复制
sequenceDiagram
  critical Establish a connection to the database
    Service-->Database: connect
  option Network timeout
    Service-->Service: Log error
  option Reject
    Service-->Service: Log reject error
  end

# 停止

表示流内序列停止:

代码语言:javascript复制
sequenceDiagram
  Alice ->> Bob: Hello Bob!
  Bob-->> Alice: Hi Alice!
  break when Bob is sick
  Bob--x Alice: I am sick!
  end
  Alice ->> Bob: Hello Bob!
  Bob-->> Alice: Hi Alice!

# 背景突出

可以使用彩色矩形背景突出显示一些内容:

代码语言:javascript复制
sequenceDiagram
  participant Alice
  participant Bob
  participant John as John<br/>Second Line
  participant Jane as Jane<br/>Second Line
  rect rgb(0, 255, 0)
    note right of Alice: Alice thinks a long time<br/>about what to do.
    Alice ->> Bob: Hello Bob!
    Bob-->> Alice: Hi Alice!
    rect rgb(255, 0, 0)
      John ->> Alice: Hello Alice!
      Alice-->>John: Hi John!
    end
    note left of Jane: Jane does somehing else
    John ->> Jane: Hello Jane!
    Jane-->> John: Hi John!
  end

# 注释

可以使用 %% 注释掉一些内容:

代码语言:javascript复制
sequenceDiagram
  Alice ->> Bob: Hello Bob!
  %% Bob-->> Alice: Hi Alice!

# 开启序号

可以使用 autonumber 关键字开启序号:

代码语言:javascript复制
sequenceDiagram
  autonumber
  Alice ->> Bob: Hello Bob!
  Bob-->> Alice: Hi Alice!

0 人点赞