[toc] # 時序圖 ## 什么是時序圖 * 時序圖, 又名序列圖、循序圖、順序圖，是一種UML交互圖。 * 它通過描述對象之間發送消息的時間順序顯示多個對象之間的動態協作。 * 它可以表示用例的行為順序 ## 時序圖的作用 * 用來描述接口的功能, 彌補原型圖在邏輯細節上的不足  ## 時序圖的語法 ```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 ``` --- ## 一張圖看懂時序圖  ## 復現微信支付時序圖 ```[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:商戶發貨() ```