现在很多公司都出现这么一个现象,干活的不如汇报的,写代码的不如写PPT的,谁说程序猿就不会画图写PPT,今天我们以第三方支付为例,教你怎么画图,随后我们再教如何写PPT。
程序猿画技术图,最少需要3张图,第一张是用例图,主要给不会技术的老板们看的,这个图主要用来描述用户个系统之间的关系,第二个图是模块图,用来描述相应功能涉及到哪些模块,第三个图是时序图,进一步描述二图中各个模块的调用先后关系。
在此之前,我们已经简单地介绍了PlantUml地简单语法,接下来,就让我们学习怎么使用吧。首先我们学习画第一张图。
这张图中,主要描述了用户行为,1,查看订单,发起支付,2使用第三方支付,3查看支付状态。从这张图种,我们就会发现第三方支付其实第1跟第3步是跟我们自身地后台发生交互,而第2步是跟支付后台发生交互。
这个图的语法为:
@startuml
:用户: as admin
(商城)#yellow
(第三方支付后台)#green
admin ---> (商城) : 1.查看订单,发起支付
admin --> (第三方支付后台) : 2.支付
admin ---> (商城)#blue :3.查看支付状态
@enduml
语法非常的简单,开始结束是plantuml画图工具的语法,紧接着,声明了用户、商城、第三方支付后台3个模块,最后是他们之间的调用关系。
紧接着,我们画第二张图,为模块间的调用关系。从这一张图,我们可以了解到,一次支付,我们后台需要用到4个模块,支付模块会去订单模块上面查询订单信息,再去商家模块上查询商家信息,再去用户模块查询用户信息,最后像第三方支付发起第三方支付的请求。
下面是上面这个图的语法:
@startum
actor 用户
(第三方支付)
rectangle 商城后台系统 #Gold{
用户 -- (支付模块)
(支付模块) --> (订单模块) :查询
(支付模块) --> (用户模块) :查询
(支付模块) --> (商家模块) :查询
(支付模块) -down- (第三方支付) :发起支付
}
@enduml
语法也是非常的简单,这里相对于上一个图,我们只是把后台模块用一个rectangle圈起来。有了这个图,相信每一个技术人员都能清楚了了解了模块间的调用关系了,但是还不够,因为我们还不知道先后顺序,所以我们还需要一个时序图。
有了这个图,相信你已经对整个第三方支付的流程非常熟悉了,而画这个图的语法也是非常的简单。我们来看看这个图的语法。
@startuml 用户 -> 交易系统
交易系统 -> 订单系统 :查询订单数据
交易系统
交易系统 -> 用户系统 :查询用户数据
交易系统
交易系统 -> 商家系统 :查询商家数据
交易系统
交易系统 -> 第三方支付系统 : 发起支付
交易系统
用户
用户 -> 第三方支付系统 : 支付
用户
交易系统
交易系统 -> 订单系统 :更新支付结果
@enduml
箭头的方向就是流程的方向,而文本的顺序就是支付的顺序了。好了,相信到这里,各位聪明的程序猿已经学会了如何画图去描述问题了。语法非常的简单,但还是需要多加练习,在我前几天的文章种可以找到PlantUML的安装方法,希望对你有用,谢谢大家。
再也不怕老板叫画图了,程序员画图神器Get
关注我之后,在菜单栏有画图的所有语法的所有教程,欢迎取用。(功能审核中,24小时候生效)。