企业官网建设流程全解析

接口联调时，一段文字写「App 调订单服务，订单服务再调库存服务」，读三遍还是分不清谁在等谁。

核心观点：时序图横向排参与者、纵向按时间往下走，一条箭头就是一次调用；分清同步、异步和返回三种箭头，再用 alt、loop 片段表达分支和重复，接口关系就一目了然。

时序图的5个基本元素

时序图由参与者、生命线、激活条、消息和组合片段 5 种元素组成，先认形状再动手画。
这些画法出自 UML 2 的顺序图（Sequence Diagram），国内常叫时序图。

箭头怎么选：同步异步

实线实心箭头是同步调用，实线开口箭头是异步消息，虚线箭头是返回，三种不要混用。

• 同步：调用方发出后停下来等结果，比如查询库存。
• 异步：发出去就接着往下走，不等结果，比如往消息队列发一条「订单已创建」。
• 返回：同步调用的结果，用虚线从被调方指回调用方，线上写返回了什么。

用 Mermaid 写时，->>是同步，-)是异步，-->>是返回。

按4步画下单时序图

以「用户提交订单」为例，按排参与者、写消息、补返回、加片段 4 步画。

1. 排参与者：按调用顺序从左到右排，发起方放在左端。
2. 写消息：从上往下写，每条写成「动词 + 对象」，如「扣减库存」。
3. 补返回：每个同步调用都画一条虚线返回，写清返回内容。
4. 加片段：有分支用 alt，要重复用 loop。

下面的代码可以直接粘贴进支持 Mermaid 的编辑器出图（系统为虚构）

组合片段按场景选

分支用 alt，条件满足才做用 opt，重复用 loop，并行用 par，片段左上角写类型、方括号里写条件。

• alt：互斥分支，用虚线分成几格，每格写一个条件，如「库存充足」「库存不足」。
• opt：条件不满足就跳过，如「用了优惠券才校验券」。
• loop：重复执行，写清次数或停止条件。
• par：几件事同时进行，如发短信和推送。

常见的4个画错

画错多半错在 4 处：参与者乱排、消息写得空、漏画返回、一张图塞太多。

• 参与者乱排：没按调用顺序排，箭头左右来回穿，读图要来回找。
• 消息写得空：只写「调用」「请求」，看不出这一步做什么。
• 漏画返回：同步调用没有返回线，看不出结果从哪回来；把异步画成同步，也会误导排查。
• 一张图塞太多：参与者超过 6 个或消息超过 20 条，就按场景拆成几张图。

总结

画时序图先排参与者，再从上往下写消息，同步、异步、返回三种箭头分清楚，分支和重复交给 alt、loop。守住这几条，谁调了谁、谁在等谁一眼就清楚。

互动问题：你手上正在画哪个接口？评论区写出参与者和调用顺序，我帮你看看哪条该用同步、哪条该用异步。