图示
SequenceFigure 时序图
一条随时间展开的调用链:谁问谁、按什么顺序、又回来了什么。
来自@misoto22/design/diagrams
什么时候用它
唯一一张纵轴有含义的图。消息带显式的 y,所以相隔八个单位的两次调用是同时发生的,相隔两百个单位的不是。
示例
default
A cache miss
4 elements and 6 relationships. The vertical axis is time, not layout.
- Web app (frontend) — React
- API (backend) — handler
- Redis (database)
- Postgres (database)
- Web app → API: GET /me
- API → Redis: read
- Redis → API: miss
- API → Postgres: select
- Postgres → API: rows
- API → Web app: 200 JSON
Key
说明
一条随时间展开的调用链:谁问谁、按什么顺序、又回来了什么。
这是这里唯一一张纵轴有含义的图。其他每张图的 y 都是布局;时序图的 y 是时间——所以消息带的是显式的 y 而不是序号:相隔 8 个单位的两次调用是同时发生的,相隔 200 个单位的不是;把消息等距排开会一边显得更整齐、一边把这个区别抹掉。
生命线是细线而不是实线,因为它们是坐标轴而不是内容。一条画得跟消息一样重的生命线,会让七条竖线和十二条横线互相抢戏。
激活条说的是谁正忙着,这正是一张时序图能承载、而一份调用清单承载不了的事实——第三个参与者的条和第二个重叠,才是画它们的理由。
区段把纵轴分成几个阶段——请求、回退、响应——印成一条线加一行等宽说明,而不是一块着色的面板,理由和架构图的边界一样:图里的第二层地面会压在每一条消息标签的遮罩下面。
return 消息既是虚线又用空心箭头。两个信号而不是一个,因为在一条密集的调用链里,回包是读者最常需要挑出来的东西,而单靠虚线,做的已经是 dashed 在异步调用上做过的那份工作。
属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| spec必填 | SequenceSpec | — |
同时接受 FigureChrome 里的全部属性,它们会直接透传给底层元素,不再逐条列出。
无障碍
- 返回消息既是虚线、又用空心箭头——两个信号,因为在一条密集的调用链里,读者最常要挑出来的就是回包。
- 图旁边的消息列表按顺序读,那就是纵轴的绘制顺序。