[toc]
# 时序图
## 什么是时序图
* 时序图, 又名序列图、循序图、顺序图,是一种UML交互图。
* 它通过描述对象之间发送消息的时间顺序显示多个对象之间的动态协作。
* 它可以表示用例的行为顺序
## 时序图的作用
* 用来描述接口的功能, 弥补原型图在逻辑细节上的不足
![](https://box.kancloud.cn/3e81527f2a916a0bc8c6c89205cfd521_894x1042.png)
## 时序图的语法
```sequence
Andrew->China: Says Hello
Note right of China: China thinks\nabout it
China-->Andrew: How are you?
Andrew->>China: I am good thanks!
```
```[sequence]
Andrew->China: Says Hello
Note right of China: China thinks\nabout it
China-->Andrew: How are you?
Andrew->>China: I am good thanks!
```
---
```sequence
Title: Here is a title
A->B: Normal line
B-->C: Dashed line
C->>D: Open arrow
D-->>A: Dashed open arrow
```
```[sequence]
Title: Here is a title
A->B: Normal line
B-->C: Dashed line
C->>D: Open arrow
D-->>A: Dashed open arrow
```
---
```sequence
# Example of a comment.
Note left of A: Note to the\n left of A
Note right of A: Note to the\n right of A
Note over A: Note over A
Note over A,B: Note over both A and B
```
```[sequence]
# Example of a comment.
Note left of A: Note to the\n left of A
Note right of A: Note to the\n right of A
Note over A: Note over A
Note over A,B: Note over both A and B
```
---
```sequence
participant C
participant B
participant A
Note right of A: By listing the participants\n you can change their order
```
```[sequence]
participant C
participant B
participant A
Note right of A: By listing the participants\n you can change their order
```
---
## 一张图看懂时序图
![](https://box.kancloud.cn/6100805af5f6d728e986b4802f00c880_624x382.jpg)
## 复现微信支付时序图
```[sequence]
title: 微信支付时序图
participant 微信支付用户 as user
participant 微信客户端 as wxc
participant 商户APP客户端 as appc
participant 商户后台系统 as apps
participant 微信支付系统 as wxs
user->appc:1.打开商户APP客户端()
appc->appc:2.选择商品下单()
appc->apps:3.请求生成支付订单()
apps->wxs:4.调用统一下单API()
wxs->wxs:生成预付单()
wxs-->>apps:5.返回预付单信息(prepay_id)
apps->apps:6.生成带签名的客户端支付信息()
apps-->>appc:7:返回信息(prepay_id,sign等)
user->appc:8:用户确认支付()
appc-->wxc:9:支付参数通过调用SDK调起微信支付()
wxc->wxs:10.发起支付请求()
wxs->wxs:验证支付参数, APP支付权限等()
wxs-->>wxc:11.返回需要支付授权()
user->wxc:12.用户确认支付, 输入密码()
wxc->wxs:13:提交支付授权()
wxs->wxs:验证授权, 完成支付交易()
wxs-->>apps:15.异步通知商户支付结果()
apps->apps:接收和保存支付通知()
apps->>wxs:16.返回告知已成功接收处理()
wxs-->wxc:14.返回支付结果, 发送微信消息提示()
wxc->appc:将支付状态通过商户APP已实现的回调接口执行回调()
appc->apps:后台查询实际支付结果()
apps->wxs:调用微信查询API查询支付结果()
wxs-->>apps:返回支付结果()
apps-->appc:返回支付结果
appc-->user:展示支付结果()
appc->appc:商户发货()
```
```sequence
title: 微信支付时序图
participant 微信支付用户 as user
participant 微信客户端 as wxc
participant 商户APP客户端 as appc
participant 商户后台系统 as apps
participant 微信支付系统 as wxs
user->appc:1.打开商户APP客户端()
appc->appc:2.选择商品下单()
appc->apps:3.请求生成支付订单()
apps->wxs:4.调用统一下单API()
wxs->wxs:生成预付单()
wxs-->>apps:5.返回预付单信息(prepay_id)
apps->apps:6.生成带签名的客户端支付信息()
apps-->>appc:7:返回信息(prepay_id,sign等)
user->appc:8:用户确认支付()
appc-->wxc:9:支付参数通过调用SDK调起微信支付()
wxc->wxs:10.发起支付请求()
wxs->wxs:验证支付参数, APP支付权限等()
wxs-->>wxc:11.返回需要支付授权()
user->wxc:12.用户确认支付, 输入密码()
wxc->wxs:13:提交支付授权()
wxs->wxs:验证授权, 完成支付交易()
wxs-->>apps:15.异步通知商户支付结果()
apps->apps:接收和保存支付通知()
apps->>wxs:16.返回告知已成功接收处理()
wxs-->wxc:14.返回支付结果, 发送微信消息提示()
wxc->appc:将支付状态通过商户APP已实现的回调接口执行回调()
appc->apps:后台查询实际支付结果()
apps->wxs:调用微信查询API查询支付结果()
wxs-->>apps:返回支付结果()
apps-->appc:返回支付结果
appc-->user:展示支付结果()
appc->appc:商户发货()
```
- 打造高逼格接口管理平台
- 开篇
- 课程简介
- 聊聊接口平台
- 接口平台简介
- 优雅的使用看云
- 接口和markdown
- 接口文档版本演进
- 微软的硬菜--vscode
- markdown基础语法
- markdown进阶语法--流程图
- markdown进阶语法--时序图
- markdown进阶语法--API文档
- 接口文档的基本概念
- 接口管理平台的基本元素
- 编写接口文档并且发布更新
- 接口安全
- 文档安全
- 接口安全
- Git化你的文档
- 使用Git管理文档
- 自动化
- 自动化文档更新
- 收尾
- 如何反馈问题
- 课程总结
- 示例
- 更新信息
- 查询历史天气
- markdown语法示例
- 流程图示例
- 时序图示例
- 登录/注册
- 数据字典示例
- 课程问题解答