PlantUML 之时序图

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
PlantUML 之时序图_第1张图片

安卓app使用token登录逻辑

这里简单使用PlantUML画一个使用token登录的时序图
PlantUML 之时序图_第2张图片

@startuml
hide footbox
title login by token
actor "学术袁" as Y #red

Y->"App客户端" as A :启动
activate A
A->A : 检测本地登录信息

alt 有本地记录
    alt token有效
           deactivate A
           A-> "后台服务器" as H :token自动登陆
    else token无效
           A-> Y : 提示登录
           Y-> A : 输入手机号+密码
           A-> H : 手机号+密码登录
           H-> A : 返回新的token
           A-> A : token保存
    end
else 无本地记录
 A-> Y : 提示输入手机号
 A-> H : 请求发送验证码
 H->A : 返回验证码
 Y->A : 输入验证码
 A->H : 请求后台验证
    alt 已注册
        A-> Y : 提示登录
        Y-> A : 输入手机号+密码
        A-> H : 手机号+密码登录
        H-> A : 返回新的token
        A-> A : token保存
    else 未注册
        A-> Y : 提示注册
        Y-> A : 输入两次密码
        A-> H : 请求注册
        H-> A : 返回新的token
        A-> A : token保存
    end
end
@enduml

UML Sequence 介绍

【1】图标样式

PlantUML 之时序图_第3张图片

@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】箭头样式+着色

使用各种箭头来标识消息的方向,并可以加以颜色区分
PlantUML 之时序图_第4张图片

@startuml
  hide footbox
  actor "学术袁" #red
  "学术袁" -[#912CEE]> Tencent : message
  Tencent--> Alibaba : message
  Mi<<- Alibaba : message
  Jd<<-- Mi : message
  Jd-\ VIP : message
  Jd--\ VIP : message
  Jd--\\ VIP : message
  Tencent<--> VIP : message
  Tencent<-> VIP : message
  Tencent-[#7FFF00]>o Jd : message
  Tencent-->o User : message
  "媳妇儿"--\o VIP : message
@enduml

【4】分页+消息序号

PlantUML 之时序图_第5张图片

@startuml
autonumber
  title page one
    "产品经理" -> "程序员" : 你应该把这个图标缩小1px
    "程序员" -> "产品经理" : 先问问我手中的大刀

  newpage page two
    autonumber 20
    "产品经理" -> "程序员" : 下班回家吧
    "产品经理" <- "程序员" : 我是有梦想的人

    autonumber 38 10 "Message 0  "
    "产品经理" -> "程序员" : 说笑呢
    "产品经理" <- "程序员" : 我是认真的

  newpage  title for the\nlast page
    autonumber "[100]"
    "程序员" <- "产品经理" : 要不再改下UI
    "程序员" -> "产品经理" : 一起回

    autonumber 18 "(##)"
    "程序员" <- "产品经理" : 你留下来加会班
    "程序员" -> "产品经理" : 好的,那就不请你吃火锅了
@enduml

【5】消息分组

PlantUML 之时序图_第6张图片

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

###【6】消息注解+HTML格式
PlantUML 之时序图_第7张图片

@startuml
hide footbox
  "小新" as A -> "美伢" as B : hello
  note left: 向母亲打招呼

  B -> A : ok
  note right: 母亲回应

  A -> A : 自忖
  note left
       要零花钱
       应该要多少合适
       找什么借口
  end note
@enduml

PlantUML 之时序图_第8张图片

@startuml
hide footbox
 "小新" as A -> "美芽" as B : A 我要零花钱 10元
  note right of  B
    没有 零钱了
    不信 给你看.
  end note
  note left of A
    小新 认真 思考
    不太相信 母亲的话哦!
  end note
  note over A, B
    但事实 是这里出现了图片哦 
  end note
@enduml

###经典时序图共赏
PlantUML 之时序图_第9张图片

@startuml
hide footbox
actor 学术袁 as A #red
database 后端服务 as B #green
entity 有文化的司机 as C #orange

activate 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 A

activate 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

PlantUML 之时序图_第10张图片

note right: Note on right

B-->A: message
deactivate B
activate A

A->A: message
activate A
deactivate A
deactivate A

A->o C
note right: 箭头样式

A-[#blue]>C
note right: 箭头颜色

alt AD
    A->D: message
else DA
    A->D: message
end
note over D #FFAAAA: 组合消息

D->E:message
note right: Creole和HTML
note right of E
  This 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:message

box "包裹参与者DEF" #LightBlue
    participant D
    participant E
    participant F
end box
@enduml

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

你可能感兴趣的:(Android,PlantUML)