UML Sequence

今晚上借着燥热的天气学习下UML图的使用，然后开始连续3篇，时序图、活动图、类图的学习记录，为对项目开发中混沌的业务逻辑还以清晰.

UML Sequence
UML Class
UML Activity

Unified Modeling Language (UML)又称统一建模语言或标准建模语言，是始于1997年一个OMG标准，它是一个支持模型化和软件系统开发的图形化语言。PlantUML是快速创建UML图形的一个组件。

Android Studio 安装插件

使用PlantUML很多平台可以，需要你进行安装使用。这里我使用了我的开发工具Android Studio，在菜单选项中选中File/Settings/Plugins/Browse repositories...输入PlantUML搜索，然后找到后点击Install安装重启IDE即可。如果不显示效果图，你需要安装Graphviz

安卓app使用token登录逻辑

这里简单使用PlantUML画一个使用token登录的时序图

@startuml
hide footbox
title login by token
actor "学术袁" as Y #redY->"App客户端" as A :启动
activate A
A->A : 检测本地登录信息alt 有本地记录alt token有效deactivate AA-> "后台服务器" as H :token自动登陆else token无效A-> Y : 提示登录Y-> A : 输入手机号+密码A-> H : 手机号+密码登录H-> A : 返回新的tokenA-> A : token保存end
else 无本地记录A-> Y : 提示输入手机号A-> H : 请求发送验证码H->A : 返回验证码Y->A : 输入验证码A->H : 请求后台验证alt 已注册A-> Y : 提示登录Y-> A : 输入手机号+密码A-> H : 手机号+密码登录H-> A : 返回新的tokenA-> A : token保存else 未注册A-> Y : 提示注册Y-> A : 输入两次密码A-> H : 请求注册H-> A : 返回新的tokenA-> A : token保存end
end
@enduml

UML Sequence 介绍

【1】图标样式

@startuml
hide footbox
actor actor #red
boundary boundary #yellow
control control #blue
entity entity #green
database database #EE4000
"学术袁" -> Blog :方形
@enduml

【2】注解方式

分为行注解使用英文符号 '+行内容
多行注解使用英文符号/' + 内容 + '/

@startuml
hide footbox
'actor actor #red
boundary boundary #yellow
control control #blue
entity entity #green
database database #EE4000
/'"学术袁" -> Blog :方形
[o->P:圈圈'/
@enduml

【3】箭头样式+着色

使用各种箭头来标识消息的方向，并可以加以颜色区分

@startumlhide footboxactor "学术袁" #red"学术袁" -[#912CEE]> Tencent : messageTencent--> Alibaba : messageMi<<- Alibaba : messageJd<<-- Mi : messageJd-\ VIP : messageJd--\ VIP : messageJd--\\ VIP : messageTencent<--> VIP : messageTencent<-> VIP : messageTencent-[#7FFF00]>o Jd : messageTencent-->o User : message"媳妇儿"--\o VIP : message
@enduml

【4】分页+消息序号

@startuml
autonumbertitle page one"产品经理" -> "程序员" : 你应该把这个图标缩小1px"程序员" -> "产品经理" : 先问问我手中的大刀newpage page twoautonumber 20"产品经理" -> "程序员" : 下班回家吧"产品经理" <- "程序员" : 我是有梦想的人autonumber 38 10 "<font color=red>Message 0  ""产品经理" -> "程序员" : 说笑呢"产品经理" <- "程序员" : 我是认真的newpage  title for the\nlast pageautonumber "<b>[100]""程序员" <- "产品经理" : 要不再改下UI"程序员" -> "产品经理" : 一起回autonumber 18 "<b>(<u>##</u>)""程序员" <- "产品经理" : 你留下来加会班"程序员" -> "产品经理" : 好的，那就不请你吃火锅了
@enduml

【5】消息分组

@startuml
hide footbox
alt 成功"小新" -> "父亲广志": 要零花钱10元else 失败"小新" <- "父亲广志": 反遭挨骂group 继续要钱"父亲广志" -> "母亲美伢" : 别给小新零花钱loop 30 次"小新" -> "父亲广志": 给我零花钱..endloop 35 次"小新" -> "母亲美伢": 给我零花钱..end"父亲广志" <-> "母亲美伢" : 要不就给他点吧？endelse 失败"小新" -> "父亲广志": 我要补习班费
end
@enduml

###【6】消息注解+HTML格式

@startuml
hide footbox"小新" as A -> "美伢" as B : hellonote left: 向母亲打招呼B -> A : oknote right: 母亲回应A -> A : 自忖note left要零花钱应该要多少合适找什么借口end note
@enduml

@startuml
hide footbox"小新" as A -> "美芽" as B : A <i>我要零花钱</i> 10元note right of  B没有 <back:cadetblue><size:18>零钱了</size></back><u>不信</u> 给你看.end notenote left of A<u:red>小新</u> 认真 <color #118888>思考</color><b><color purple>不太相信</color> <s:red>母亲的话</strike>哦！</b>end notenote over A, B<w:#FF33FF>但事实</w> 是这里出现了图片哦 <img ./src/main/res/mipmap-mdpi/ic_launcher.png>end note
@enduml

###经典时序图共赏

@startuml
hide footbox
actor 学术袁 as A #red
database 后端服务 as B #green
entity 有文化的司机 as C #orangeactivate A #red
note over A : 完成登录
A-[#red]>A : 定位起始位置，\n展示规划线路
A-[#red]>B : 打车，呼叫司机
deactivate A
B-[#green]>C : 订单池中派发
activate C #orange
C-[#orange]>C : 提醒司机接单
C-[#orange]>B : 接单
deactivate C
B-[#green]>A : 转发通知，\n司机已接单activate A #red
A-[#red]>A : 更新已接单状态，\n展示乘客和司机间的距离路线
note over of A : 等待司机到达乘车位置..
note over of C : 接驾驾驶开始
C-[#orange]>B : 行驶中..
B-[#green]>A : 转发通知，\n司机定位行驶状态..
A-[#red]>A : 更新乘客、司机定位状态
...
note over of C : 行驶到接驾地点
C-[#orange]>B : 到达乘车位置
B-[#green]>A : 转发通知，\n司机已到乘车位置
A-[#red]>A : 提示乘客前往用车
deactivate Aactivate C #orange
C-[#orange]>B : 已接到乘客
B-[#green]>A : 转发通知，即将启程
activate A #red
A-[#red]>A : 更新定位状态，\n展示前往目的地的线路note over of C : 前往目的地驾驶开始
deactivate A
C-[#orange]>B : 行驶中..
B-[#green]>A : 转发通知，司机行驶状态..
A-[#red]>A : 更新乘客距离目的地的定位状态
...
note over of C : 行驶到目的地
C-[#orange]>B : 结束行程
deactivate C
B-[#green]>A : 转发通知，\n已到达目的地
activate A #red
A-[#red]>A : 提示支付
note over of A:支付deactivate A@enduml

note right: Note on rightB-->A: message
deactivate B
activate AA->A: message
activate A
deactivate A
deactivate AA->o C
note right: 箭头样式A-[#blue]>C
note right: 箭头颜色alt ADA->D: message
else DAA->D: message
end
note over D #FFAAAA: 组合消息D->E:message
note right: Creole和HTML
note right of EThis is **bold**This is //italics//This is ""monospaced""This is --stroked--This is __underlined__This is ~~waved~~
end note== 分隔符 ==E->F: message...
note over A:延迟
F->A:messagebox "包裹参与者DEF" #LightBlueparticipant Dparticipant Eparticipant F
end box
@enduml

参考内容：
https://www.cnblogs.com/Jeson2016/

PlantUML 之时序图相关推荐

PlantUML 绘制时序图
PlantUML系列文章 PlantUML绘制活动图https://blog.csdn.net/zhangwei_david/article/details/125507374PlantUML绘制类图 ...
Intellij IDEA中安装使用PlantUML画时序图、类图等
转载自 https://www.jianshu.com/p/a6bd7e3048ef 一.在Intellij安装PlantUML插件在菜单栏Intellij IDEA打开插件安装窗口(版本不一样,可 ...
使用 PlantUML 绘制时序图
目录一.简介二.安装 1.1 安装插件到PyCharm 2.2 验证 2.2.1 插件检查是否安装 2.2.2 新建PlantUML文件一.简介 Github地址:https://github. ...
捣鼓PlantUML（三、时序图）
简单介绍时序图(Sequence Diagram),又名序列图.循序图.顺序图,是一种UML交互图.它通过描述对象之间发送消息的时间顺序显示多个对象之间的动态协作.它可以表示用例的行为顺序,当执行一 ...
PlantUML：一款让你爽到起飞的高效代码绘制时序图工具
背景对于工作中遇到一些复杂的业务逻辑场景,需要借助图形工具去准确的表达,会更高效的理解和梳理复杂的逻辑,同时在跟领导和同事汇报时也更能清晰.准确.快速的表达想法以及方案.比如梳理源码常用的时序图以及 ...
PlantUML绘制类图
系列文章目录 PlantUML绘制活动图https://blog.csdn.net/zhangwei_david/article/details/125507374 PlantUML 绘制时序图htt ...
用代码画时序图！YYDS
前言最近通过代码来画时序图,UML用例图,感觉很不错,所以给大家分享一下. 日常开发,一般在设计阶段,我们都需要画时序图.用例图等等.大家平时画图的时候,是用draw.io还是processOn呢? ...
用代码画时序图！绝了！
日常开发,一般在设计阶段,我们都需要画时序图.用例图等等.大家平时画图的时候,是用draw.io还是processOn呢?用它们画出的图,其实都很挺好看的.但是呢,今天田螺哥介绍一个款开源的,画图神器 ...
PlantUML绘制活动图
PlantUML系列文章 PlantUML 绘制时序图https://blog.csdn.net/zhangwei_david/article/details/125451459 PlantUML绘制 ...

PlantUML 之时序图