返回模板页

时序图示例

下面这些案例涵盖了开发者最常记录的系统交互场景：认证、支付流程、异步消息和第三方 API 集成。每个案例都展示了消息顺序和方向，方便你根据自己的技术栈调整。

使用这个模板返回模板页
时序图示例

真实案例

JWT 认证流程

使用场景: 后端开发者，设计或记录认证系统

客户端 → API 网关：POST /login {email, password}
API 网关 → 认证服务：验证凭证
认证服务 → 用户数据库：SELECT user WHERE email
用户数据库 → 认证服务：用户记录
认证服务 → 认证服务：bcrypt 比对
认证服务 → API 网关：{access_token, refresh_token}
API 网关 → 客户端：200 OK {tokens}

这样组织的原因: 把 bcrypt 比对画成认证服务生命线上的自调用，能清楚表明密码验证发生在服务内部而不是数据库层——这是新工程师入职时最常见的误解之一。

电商结账流程

使用场景: 后端或全栈开发者，设计支付集成

用户 → 前端：点击下单
前端 → 订单服务：POST /orders
订单服务 → 库存服务：锁定商品
库存服务 → 订单服务：锁定确认
订单服务 → 支付网关：扣款
支付网关 → 订单服务：支付成功
订单服务 → 通知服务：发送确认邮件
订单服务 → 前端：订单已创建

这样组织的原因: 时序图清楚地表明库存锁定必须在扣款之前发生——顺序反了会导致对可能已缺货的商品成功扣款。

OAuth 2.0 授权码流程

使用场景: 开发者，集成第三方 OAuth 提供商

用户 → 应用：点击使用 Google 登录
应用 → 浏览器：重定向到 Google /authorize
浏览器 → Google：授权请求
Google → 浏览器：登录和授权页面
用户 → Google：确认授权范围
Google → 应用：携带 code 重定向回来
应用 → Google：POST /token {code, client_secret}
Google → 应用：access_token + id_token

这样组织的原因: OAuth 流程因为涉及三方和多次重定向而出了名地难以解释——时序图是唯一能清楚展示重定向链而不让读者迷失的格式。

WebSocket 实时聊天

使用场景: 开发者，构建实时消息功能

客户端 A → 服务器：WebSocket 连接
客户端 B → 服务器：WebSocket 连接
客户端 A → 服务器：发送消息 {room, text}
服务器 → 服务器：存入数据库
服务器 → 客户端 A：消息已送达
服务器 → 客户端 B：新消息事件
客户端 B → 客户端 B：渲染消息

这样组织的原因: 服务器向多个客户端的扇出推送是实时消息的核心模式——把它画成从服务器出发的两条独立箭头，广播行为一目了然。

微服务事件驱动流程

使用场景: 后端工程师，设计事件驱动架构

订单服务 → 消息中间件：发布 OrderPlaced 事件
消息中间件 → 库存服务：投递 OrderPlaced
库存服务 → 库存服务：扣减库存
库存服务 → 消息中间件：发布 StockUpdated
消息中间件 → 数据分析服务：投递 StockUpdated
消息中间件 → 仓储服务：投递 StockUpdated

这样组织的原因: 事件驱动流程很难用文字说清楚——时序图能展示哪些服务消费哪些事件，同时不暗示它们之间存在直接的同步耦合。

密码重置流程

使用场景: 开发者，实现或记录密码重置功能

用户 → 应用：点击忘记密码
应用 → 认证服务：POST /password-reset {email}
认证服务 → 数据库：创建重置 Token，设置过期时间
认证服务 → 邮件服务：发送重置链接
邮件服务 → 用户：包含链接的邮件
用户 → 应用：点击链接 → GET /reset?token=xxx
应用 → 认证服务：验证 Token，更新密码
认证服务 → 应用：成功

这样组织的原因: 在时序图中加入 Token 过期时间步骤，能提醒团队实现这个功能——不画图的情况下，过期机制是密码重置实现中最常被遗漏的安全要求。

使用技巧

  • 参与者名称保持简短——用服务名或角色名，不用完整类名，确保图表能放在一屏内。
  • 把错误和失败路径画成样式不同的箭头；只有正常路径的时序图是不完整的规范。
  • 即使是异步调用也要画出返回箭头，让读者知道响应去向——只出不进的箭头意味着 fire-and-forget，这应该是有意为之，而不是被遗漏。
  • 消息顺序不明显时，按顺序编号——读者跟着编号读比在宽幅图中追踪箭头路径快得多。

在线开始编辑

回到模板页，直接替换成你的课程主题、章节和复习重点，就可以继续使用这套结构。

使用这个模板： /editor/new?template=sequence-diagram

使用这个模板