时序图

扫码支付下单时序图模板

用户、商户前端、商户后端、支付平台四方的扫码支付下单时序图:创建订单、统一下单拿二维码、用户扫码付款、异步通知、验签更新订单、前端轮询结果。接入支付、写技术方案和毕业设计时改成自己的系统,免费导出 PNG、SVG、Word、PPT。

支付平台商户后端商户前端支付平台商户后端商户前端loop[每 2 秒]用户点击去支付创建订单统一下单返回二维码链接订单号与二维码展示二维码扫码并确认付款付款成功异步通知支付结果验签并核对金额更新订单为已支付返回接收成功查询订单状态已支付跳转支付成功页用户
预览用的是「靛蓝」主题,打开编辑器后可以换

适用场景

第一次接入扫码支付、写技术方案评审文档、毕业设计里画「支付模块时序图」时使用。图上把两条通道分开了:用户看到的结果靠前端轮询,订单的真实状态只认支付平台的异步通知,这是支付接入里最容易搞混的地方。

怎么改成你的

  • 参与者名字换成你的系统模块,例如把「商户后端」拆成订单服务和支付服务。
  • 不轮询、改用长连接推送的,把 loop 那一段换成「后端推送支付结果」。
  • 需要画超时未支付的情况,在最后加一个 alt 分支写「超时关闭订单」。

Mermaid 代码

qr-payment-sequence.mmd
sequenceDiagram
    actor U as 用户
    participant F as 商户前端
    participant B as 商户后端
    participant P as 支付平台
    U->>F: 点击去支付
    F->>B: 创建订单
    B->>P: 统一下单
    P-->>B: 返回二维码链接
    B-->>F: 订单号与二维码
    F-->>U: 展示二维码
    U->>P: 扫码并确认付款
    P-->>U: 付款成功
    P->>B: 异步通知支付结果
    B->>B: 验签并核对金额
    B->>B: 更新订单为已支付
    B-->>P: 返回接收成功
    loop 每 2 秒
        F->>B: 查询订单状态
        B-->>F: 已支付
    end
    F-->>U: 跳转支付成功页

让 AI 按这个结构生成一份

把下面这段发给豆包、DeepSeek、Kimi 或元宝,再把它的回复整段粘贴到编辑器,会自动识别其中的代码。

prompt.txt
请用 Mermaid 的 sequenceDiagram 语法画一张扫码支付下单时序图:参与者有用户、商户前端、商户后端、支付平台;流程是用户点击去支付,前端请求后端创建订单,后端向支付平台统一下单并拿到二维码链接,前端展示二维码,用户扫码付款,支付平台异步通知后端,后端验签、核对金额、更新订单并返回接收成功;同时前端用 loop 每 2 秒查询订单状态,最后跳转支付成功页。只输出 mermaid 代码块。

常见问题

为什么不能只信前端跳转的结果?

前端的跳转可能被用户关闭或伪造。订单是否付款应以支付平台发到后端的通知为准,并验证签名和金额。

重复收到通知怎么表示?

在「更新订单」前加一条自调用消息「判断是否已处理」,说明处理是幂等的。

具体接口字段以什么为准?

以你接入的支付平台官方文档为准。这张图只表示交互顺序,不包含具体参数。

同类模板

全部模板

更新于 2026-11-11