利用UML绘制微信支付流程图

本人有若干成套学习视频, 可试看! 可试看! 可试看, 重要的事情说三遍 包含Java, 数据结构与算法, iOS, 安卓, python, flutter等等, 如有需要, 联系微信tsaievan.

UML, Unified Modeling Language, (统一建模语言或者标准建模语言)你可以把它理解为一种可视化的建模语言
先看一下下面这幅图:
利用UML绘制微信支付流程图_第1张图片
微信支付交互时序图

是不是交互的过程和步骤都一目了然呢? 我们现在就试着来模仿微信的支付交互时序图. 通过这个过程, 我们不仅仅可以理顺逻辑, 还可以学着使用UML, 在未来我们需要来构建公司业务逻辑的时候, 我们也可以做出这样的交互时序图

  • 首先, 我们需要安装StarUML

软件下载链接

利用UML绘制微信支付流程图_第2张图片
StarUML软件
  • 新建一个空白的时序图, 可以看到的是, 这个软件可以画的图还是相当的多的.
    ![Uploading Snip20170327_8_206535.png . . .]


    利用UML绘制微信支付流程图_第3张图片
    Snip20170327_6.png
  • 给书序图起一个名字

利用UML绘制微信支付流程图_第4张图片
Snip20170327_8.png
  • 微信支付涉及到的角色还是很多的
    • 微信支付用户
  • 微信客户端
  • 商户APP客户端
  • 商户后台系统
  • 微信支付系统
利用UML绘制微信支付流程图_第5张图片
微信支付涉及到的角色

那么我们就需要建立对应生命线

利用UML绘制微信支付流程图_第6张图片
生命线
建立生命线
  • 第一步, 我们需要用户打开商家的APP
    那么就是同步发送消息, 用户打开商家APP, 交互的双方是用户和商家APP, 我们就需要这样连线
利用UML绘制微信支付流程图_第7张图片
同步发送消息
  • 第二步, 选择商品下单其实是客户单内部的一个逻辑, 那就是自己发送消息
利用UML绘制微信支付流程图_第8张图片
自发送消息
  • 第三步, 生成请求订单, 就是APP与后台交互了, 这个时候异步发送一个请求, 注意异步消息和同步消息的箭头是不一样的
利用UML绘制微信支付流程图_第9张图片
发送异步消息
  • 服务器返回消息, 使用的是虚线箭头
利用UML绘制微信支付流程图_第10张图片
服务器返回消息
  • 添加组合片段
    当我们的时序图中包含小的模块或者片段的时候, 我们可以添加组合片段
利用UML绘制微信支付流程图_第11张图片
添加组合片段
  • 为模块着色, 提示需要实现的逻辑
利用UML绘制微信支付流程图_第12张图片
着色, 完善时序图
经过以上的步骤, 我们自己就可以画出类似的时序图, 今后无论是分析逻辑, 还是理清思路, 都大有帮助
利用UML绘制微信支付流程图_第13张图片
自己画的微信交互时序图

PS. 本人有若干成套学习视频, 包含Java, 数据结构与算法, iOS, 安卓, python, flutter等等, 如有需要, 联系微信tsaievan.

你可能感兴趣的:(利用UML绘制微信支付流程图)