介绍两个免费画时序图的网站

下面是一个参考 微信支付流程 的 UML 时序图（Sequence Diagram），涵盖了三大参与者：

1. Client（客户端）
2. Server（商户服务器）
3. WeChat Platform（微信支付平台）

涵盖的主要步骤如下：

示例流程（以“Native 支付”或“JSAPI 支付”为例）：

1. 客户端发起支付请求
2. 服务端向微信平台获取支付预订单（prepay_id）
3. 服务端将支付参数返回给客户端
4. 客户端调起微信支付组件
5. 微信平台处理支付并通知服务端
6. 服务端通知客户端支付结果

时序图（文本形式）

Client -> Server: 请求发起支付（商品信息）
Server -> WeChat Platform: 创建统一下单接口（prepay_id）
WeChat Platform -> Server: 返回预支付信息（prepay_id）
Server -> Client: 返回支付参数（appId, timeStamp, nonceStr, sign 等）

Client -> WeChat Platform: 调起微信支付（带 prepay_id 参数）
WeChat Platform -> Client: 返回支付成功/失败界面

WeChat Platform -> Server: 支付结果异步通知（notify_url）
Server -> WeChat Platform: 返回通知接收成功（HTTP 200 OK）

Client -> Server: 查询支付结果
Server -> Client: 返回支付状态（成功/失败）

可视化 UML 时序图（建议工具）

你可以把上面的文本复制到以下工具生成时序图：

• https://www.plantuml.com/plantuml/
• https://sequencediagram.org/
• 或使用 IDE 插件（如 IntelliJ 的 PlantUML 插件）

PlantUML 代码（你可以复制进工具中生成图）

@startuml
actor Client
participant Server
participant "WeChat Platform" as WeChat

Client -> Server: 发起支付请求（商品信息）
Server -> WeChat: 创建预订单（统一下单 API）
WeChat --> Server: 返回 prepay_id 等支付参数
Server -> Client: 返回调起支付的参数包

Client -> WeChat: 使用参数调起微信支付
WeChat --> Client: 返回支付成功/失败界面

WeChat -> Server: 支付结果异步通知（notify_url）
Server --> WeChat: 返回通知接收成功（HTTP 200）

Client -> Server: 查询支付状态
Server --> Client: 返回支付成功/失败
@enduml

下面是www.plantuml.com结果：

下面是sequencediagram.org结果(免费)：

其中PlantUML 也可以画流程图(免费)：

@startuml
start

:客户端发起支付请求;
:服务端生成订单信息;

:服务端调用微信统一下单接口;
if (微信平台返回 prepay_id?) then (是)
  :服务端将支付参数返回客户端;
else (失败)
  stop
endif

:客户端调用微信支付组件;

:用户确认并完成支付;

:微信平台发起支付请求;
:微信平台处理支付;

if (支付成功?) then (是)
  :微信平台异步通知服务端;
  :服务端验证签名和订单状态;
  :服务端更新订单状态为“已支付”;
  :服务端返回接收成功 (HTTP 200);
else (失败)
  :支付失败，平台或客户端提示;
endif

:客户端查询支付结果;
:服务端返回支付状态;

stop
@enduml

出图：

下面是不免费的

https://www.processon.com/ 确实要好看很多