Skip to main content

Sequence Diagram 时序图

序列图（Sequence Diagram），亦称为循序图、时序图，是一种UML行为图。描述物件在时间序列中的交叉作用。序列图会描绘在此情境下有关的物件，以及此物件和其他物件交换讯息的顺序。

维基百科

时序图基于 Mermaid 8.9 ，并加上了一些新的语法。

简单示意​

sequenceDiagram
  title: 时序图例子
  autonumber
  participant [<actor> 用户]
  用户->>Pintora: 帮我画张时序图（图表 DSL）
  activate Pintora
  Pintora->>Pintora: 解析 DSL，绘制图像
  alt DSL 正确
    Pintora->>用户: 返回绘制好的图表
  else DSL 有误
    Pintora->>用户: 返回报错信息
  end
  deactivate Pintora
  @note left of Pintora
  渲染目标不同，结果媒介会有所不同
  1. 浏览器，可直接渲染到页面上 svg / canvas
  2. Node.js，默认 canvas，输出 PNG 位图
  @end_note

消息样式​

可使用标记给消息指定不同的线和箭头的样式

标记描述
->无箭头实线
-->无箭头虚线
->>有箭头的实线
-->>有箭头的虚线
-x终点为 x 的实线
--x终点为 x 的虚线
sequenceDiagram
  John->Alice: Line example 1
  John-->Alice: Line example 2
  John->>Alice: Line example 3
  John-->>Alice: Line example 4
  John-xAlice: Line example 5
  John--xAlice: Line example 6

消息文本支持多行​

sequenceDiagram
  李商隐-->>妻: 何当共剪西窗烛\n却话巴山夜雨时

给消息添加备注​

在消息后面添加 @note，以及带上方位指示词和参与者来添加便签样式的备注。

  1. 方位词 left of 和 right of 表示在参与者的左/右添加备注
  2. 方位词 over 和用 , 分隔的参与者名字列表，表示备注横跨参与者
  3. 可添加多行备注，在结尾使用 @end_note 结束
sequenceDiagram
  Frida-->>Georgia: Flowers are beautiful
  @note over Frida,Georgia: Painters
  @note right of Georgia: Right
  @note left of Georgia
  multiline
  note
  @end_note

自定义分组颜色​

在分组关键词（例如 loop/alt/par）后添加以 # 开始的 6 位 16 进制颜色值，可以更改该分组的背景色。

sequenceDiagram
  loop #88bbf4 with bg color
    A-->B: message inside loop
  end
  alt #ccdd77 Success
    A-->B: Congrats!
  else #ee776f Fail
    A-->B: error handling
  end

分隔符​

可使用 == 描述词 == 来画出分隔符，给图表分块。注意 = 和描述词之间的空格不可少。

sequenceDiagram
  Frida->>Georgia: 你画的花很美
  == 一段时间后 ==
  Georgia->>Frida: 你的自画像很有特色
  == 另一段时间后 ==
  Frida-->>Frida: 花在我身上很美

Participants 包裹盒​

在 box 和 endbox 关键字区域内声明的 participant 会被盒子包裹。

背景色和双引号括起来的盒子标题都是可选的。

sequenceDiagram
  box #e7f2ff "英语角"
  participant A
  participant B
  endbox

  A ->> B: Hello
  B ->> C: 你好

分类​

可以使用以下语法对 participant 指定类别(classifer)。

participant [<classifier> Name]

类别可以影响绘制时参与者的符号或形状，在 pintora 内部有一个中心化的 symbolRegistry，可以使用 pintora.symbolRegisty.register 进行扩展，关于扩展性会在文档的其他篇章中阐述。

一些内建的符号有：

  • actor
  • database
  • node
sequenceDiagram
  participant [<actor> A]
  participant [<database> B] as "Storage"
  participant [<node> C]
  A-->B: Hello

覆盖设置​

可以使用 @param 指令覆盖图表的部分设置。

可设置项的说明请见 Config page.

sequenceDiagram
  @param loopLineColor #79caf1
  @param actorBackground #61afef
  @param actorTextColor #ffffff
  @param {
    messageFontFamily Consolas
    dividerTextColor #61afef
  }
  User->>Pintora: render this
  activate Pintora
  loop Check input
    Pintora-->>Pintora: Has input changed?
  end
  == Divider ==