前言
之前一直使用processon来画思维导图,但是需要付费.如果使用免费版本有存储限制,这些手动拖拽的工具很难对齐并且最近发现导出svg格式都需要会员了,所以果断遗弃
现在比较常用的图表工具分别是PlantUML和Mermaid.PlantUML使用一种类似于编程语言的语法,被各种IDE集成.而Mermaid更接近自然语言,基于js库,可以被各种浏览器支持
本文内容参照PlantUML_zh.pdf内的教程学习整理
PlantUML的语法更适合程序员,所以本文介绍的是PlantUML的使用方式
typora等基于浏览器的工具对UML的实现完全依靠js-sequence只能画序列图,不支持PlantUML中更加复杂的语法
UML
UML统一建模语言的简称,它是一种由一整套图表组成的标准化建模语言.UML可以帮助我们通过面向对象的方式来更清晰的表达项目结构.旨在为系统分析和设计提供一种通用的语言,使得开发团队更好地理解和沟通软件系统的结构
语法
序列图
使用
标记 首先定义一个uml语法通过
@startuml
和@enduml
来标记代码的开始和结束连接 可以使用
->
来连接两个参与者之间的信息,如果想使用虚线的箭头可以使用-->
用户向服务器发送了2次认证请求,并且服务器也对用户进行了2次认证响应
PlantUML还对UML进行了增强提高了可读性,支持反方向箭头
<-
和<--
@startuml
User -> Server: Authentication Request
Server --> User: Authentication Response
User -> Server: Another authentication Request
User <-- Server: Another authentication Response
@enduml
给自己发送消息
@startuml
Server <- Server: The server is alived and not down
@enduml
参与者
定义参与者 可以通过一系列关键字来定义参与者,可以使用下列不同的关键字来定义参与者的形状
participant参与者
actor角色
boundary边界
control控制
entity实体类
database数据库
collections集合
queue队列
如果不定义参与者,默认的参与者是participant
使用别名 如果手动声明了参与者,可以通过AS关键字的方式起别名
也可以使用
<->
和<-->
来定义双箭头
@startuml
actor User as Foo
participant WebApp as Foo1
boundary OrderService as Foo2
control OrderProcessor as Foo3
entity Order as Foo4
collections OrderCollection as Foo6
queue OrderQueue as Foo7
database OrderDB as Foo5
Foo -> Foo1 : Submit order form
Foo1 -> Foo2 : Send order details
Foo2 -> Foo3 : Validate order
Foo3 <--> Foo4 : Create order entity
Foo3 -> Foo6 : Add order to collection
Foo6 -> Foo7: Queue order for processing
Foo7 -> Foo5 : Save order to DB
@enduml
隐藏 隐藏多余参与者
默认就将所有参与者都渲染出来,通过
hide unlinked
隐藏没有交互的参与者
@startuml
hide unlinked
participant Server
participant User
participant DB
Server -> User : submit
@enduml
注释
备注信息 在页面上渲染出标签来解释对应的信息
note left
和note right
指定备注位置end note
标注为多行备注note left of
、note right of
、note over
指定基于节点的位置
@startuml
actor User
participant WebApp
boundary OrderService
control OrderProcessor
entity Order
collections OrderCollection
queue OrderQueue
database OrderDB
User -> WebApp : Submit order form
note right: 用户提交订单
WebApp -> OrderService : Send order details
OrderService -> OrderProcessor : Validate order
note right: 创建实体类
OrderProcessor <--> Order : Create order entity
note right: 将实体类封装到集合中
OrderProcessor -> OrderCollection : Add order to collection
note right: 存入消息队列中
OrderCollection -> OrderQueue : Queue order for processing
note right of OrderQueue
从消息队列中取出
并存入订单数据库db中!
end note
OrderQueue -> OrderDB : Save order to DB
@enduml
代码注释 类似代码的注释,添加注释不会影响到uml最终的渲染
单行注释
'
多行注释,注释开始
/'
,注释结束'/
注意注释必须在单独一行,确保此行之前没有uml语句
@startuml
actor User
participant WebApp
boundary OrderService
control OrderProcessor
entity Order
collections OrderCollection
queue OrderQueue
database OrderDB
' 用户提交订单
User -> WebApp : Submit order form
WebApp -> OrderService : Send order details
OrderService -> OrderProcessor : Validate order
/'
封装到集合中,丢入队列中,最终存储到数据库
'/
OrderProcessor <--> Order : Create order entity
OrderProcessor -> OrderCollection : Add order to collection
OrderCollection -> OrderQueue : Queue order for processing
OrderQueue -> OrderDB : Save order to DB
@enduml
样式
修改颜色
在参与者右侧定义参与者颜色
在箭头中间定义箭头颜色
plantuml没有严格限制,
-[#0000FF]->
和--[#0000FF]>
亦可
@startuml
actor User #red
participant Server #99FF99
User -> Server: Authentication Request
Server --[#0000FF]> User: Authentication Response
User -> Server: Another authentication Request
User <-- Server: Another authentication Response
@enduml
箭头样式 plantuml对箭头几乎没有做任何限制
可以在
-
或--
的前后任意组合x
、<
、>
、o
但是plantuml语法不支持重复箭头样式堆叠在一起,如
User ->xx Server
就是不被支持的
@startuml
User ->x Server
User x-> Server
User -> Server
User ->> Server
User <-> Server
User -\ Server
User \\- Server
User //-- Server
User ->o Server
User o\\-- Server
User <-> Server
User <->o Server
@enduml
与/
或\
组合
同样
User \\\- Server
不被支持
@startuml
User \\- Server
User \- Server
User /- Server
User //- Server
@enduml
多行定义 通过
[]
定义多行参与者名称
使用
=
可以使字体加粗
@startuml
actor User
participant Server [
=超快
----
服务器
]
User -> Server: Authentication Request
Server --> User: Authentication Response
User -> Server: Another authentication Request
User <-- Server: Another authentication Response
@enduml
顺序
顺序 通过order关键字的大小来对参与者从左到右排序
@startuml
actor User order 20
participant Server order 10
User -> Server: Authentication Request
Server --> User: Authentication Response
User -> Server: Another authentication Request
User <-- Server: Another authentication Response
@enduml
编号 使用autonumber关键字对消息自动编号
可以在autonumber后指定初始值和依次增加的值,不指定默认为1
@startuml
autonumber 15
User -> Server : Another authentication Request
User <- Server : Another authentication Response
autonumber 40 10
User -> Server : Yet another authentication Request
User <- Server : Yet another authentication Response
@enduml
使用序号
inc 关键字标注自增位置,如A就代表增加第一位的位置,原为1.1.1,自增后为2.1.1.同理inc B,2.2.1自增后为2.3.1
如果参与者交互没有指定inc关键字,就自增最后一位
@startuml
autonumber 1.1.1
autonumber inc A
User -> Server: Another authentication request
Server --> User: Response
autonumber inc B
User -> Server: Another authentication request
Server --> User: Response
@enduml
分组
以下关键字进行逻辑判断,以下每个关键字结尾都需要end
表示表达式结束
抉择 alt/else
alt表示一种条件分支,else为另一种条件分支
@startuml
User -> Server: 请求
alt 条件1
Server -> User: 响应1
else 条件2
Server -> User: 响应2
else 条件3
Server -> User: 响应3
end
@enduml
选项 opt 和
alt
类似,但是可以单独出现
虽然plantuml中opt可以alt混用,但是会导致语意混乱,虽然不会报错但是不推荐使用
@startuml
User -> Server: 请求
opt 条件
Server -> User: 响应
end
@enduml
循环 loop
@startuml
loop 10次
User -> Server: 请求
Server -> User: 响应
end
@enduml
par 并行
@startuml
par
User -> Server1: 请求1
User -> Server2: 请求2
end
@enduml
break 中断
@startuml
User -> Server: 请求
break 出现错误
User <- Server: 错误响应
end
@enduml
Critical 关键
指示此片段中的消息不得与其他消息交错,用于表示一些需要原子性执行的操作
@startuml
Alice -> Bob: 请求开始
critical 关键操作
User -> Server: 执行步骤1
User -> Server: 执行步骤2
end
Alice -> Bob: 请求结束
@enduml
group
@startuml
Alice -> Bob: 认证请求
Bob -> Alice: 认证失败
group 我自己的标签 [我自己的标签2]
Alice -> Log : 开始记录攻击日志
loop 1000次
Alice -> Bob: DNS攻击
end
Alice -> Log : 结束记录攻击日志
end
@enduml
次级group
@startuml
Alice -> Bob: 认证请求
Bob -> Alice: 认证失败
group 我自己的标签 [我自己的标签2]
Alice -> Log : 开始记录攻击日志
loop 1000次
Alice -> Bob: DNS攻击
end
Alice -> Log : 结束记录攻击日志
end
@enduml