跳到正文
misoto22 design

图示

SequenceFigure 时序图

一条随时间展开的调用链:谁问谁、按什么顺序、又回来了什么。

来自@misoto22/design/diagrams

什么时候用它

唯一一张纵轴有含义的图。消息带显式的 y,所以相隔八个单位的两次调用是同时发生的,相隔两百个单位的不是。

示例

default

A cache miss

The vertical axis is time, not layout.
A cache miss4 elements and 6 relationships. The vertical axis is time, not layout.CLIENTWeb appReactSERVICEAPIhandlerDATARedisDATAPostgres

4 elements and 6 relationships. The vertical axis is time, not layout.

  • Web app (frontend) — React
  • API (backend) — handler
  • Redis (database)
  • Postgres (database)
  • Web appAPI: GET /me
  • APIRedis: read
  • RedisAPI: miss
  • APIPostgres: select
  • PostgresAPI: rows
  • APIWeb app: 200 JSON
Key
  • Primary path
  • Call
  • Return

说明

一条随时间展开的调用链:谁问谁、按什么顺序、又回来了什么。

这是这里唯一一张纵轴有含义的图。其他每张图的 y 都是布局;时序图的 y 是时间——所以消息带的是显式的 y 而不是序号:相隔 8 个单位的两次调用是同时发生的,相隔 200 个单位的不是;把消息等距排开会一边显得更整齐、一边把这个区别抹掉。

生命线是细线而不是实线,因为它们是坐标轴而不是内容。一条画得跟消息一样重的生命线,会让七条竖线和十二条横线互相抢戏。

激活条说的是谁正忙着,这正是一张时序图能承载、而一份调用清单承载不了的事实——第三个参与者的条和第二个重叠,才是画它们的理由。

区段把纵轴分成几个阶段——请求、回退、响应——印成一条线加一行等宽说明,而不是一块着色的面板,理由和架构图的边界一样:图里的第二层地面会压在每一条消息标签的遮罩下面。

return 消息既是虚线用空心箭头。两个信号而不是一个,因为在一条密集的调用链里,回包是读者最常需要挑出来的东西,而单靠虚线,做的已经是 dashed 在异步调用上做过的那份工作。

属性

SequenceFigure props
属性类型默认值说明
spec必填SequenceSpec

同时接受 FigureChrome 里的全部属性,它们会直接透传给底层元素,不再逐条列出。

无障碍

  • 返回消息既是虚线、又用空心箭头——两个信号,因为在一条密集的调用链里,读者最常要挑出来的就是回包。
  • 图旁边的消息列表按顺序读,那就是纵轴的绘制顺序。