PlantUML:一款让你爽到起飞的高效代码绘制时序图工具

  • Post author:
  • Post category:其他

背景

对于工作中遇到一些复杂的业务逻辑场景,需要借助图形工具去准确的表达,会更高效的理解和梳理复杂的逻辑,同时在跟领导和同事汇报时也更能清晰、准确、快速的表达想法以及方案。比如梳理源码常用的时序图以及流程图等,之前在画这些图都会想到使用processOn、Visio等,今天要介绍一款只要学会就会爱不释手,并且大大提高效率的代码绘图工具:PlantUML 绘制时序图。

PlantUML 介绍

PlantUML 是一个可以让你快速使用代码编写UML图的工具。它可以用来绘制时序图、流程图、用例图、ER图、类图以及思维导图等。
PlantUML 语法简单易学,一次学习,到处受用。现在很多主流的笔记工具已经支持PlantUML 工具,比如有道云笔记、语雀,可以直接使用PlantUML 语法绘图。
语雀的PlantUML支持

同时对于很多编程工具做了适配,比如常用的eclipse、idea 都有相对应的插件。如下图,idea中插件可以支持一边编辑一边预览,非常方便。

IDEA 中安装 PlantUML 插件

在 IDEA 中安装PlantUML比较方便,直接搜索 PlantUML Integration,选择下载,下载完成后重启 IDEA 安装完成。
idea PlantUML 插件下载
安装完成后,新建新的文件,会发现在新建列表上会多出一个 PlantUML File 选项,选择后创建文件,将一下代码复制进去,可以看到预览效果。

@startuml
autonumber
actor "用户" as User
participant "浏览器" as Browser
participant "服务端" as Server #orange
activate User

User -> Browser: 输入 URL
activate Browser

Browser -> Server: 请求服务器
activate Server

Server -> Server: 模板渲染
note right of Server: 这是一个注释

Server -> Browser: 返回 HTML
deactivate Server

Browser --> User
@enduml

idea 绘制 PlantUML 时序图
注意,如果要实时预览时序图外的图,比如流程图,需要安装 Graphviz 插件

PlantUML 绘制时序图

时序图是什么?

时序图(Sequence Diagram),又名序列图、循序图,是一种UML交互图。它通过描述对象之间发送消息的时间顺序显示多个对象之间的动态协作。它可以表示用例的行为顺序,当执行一个用例行为时,其中的每条消息对应一个类操作或状态机中引起转换的触发事件。

基本用法

->来绘制参与者之间传递的消息,-->表示虚线。
各种箭头的写法:

@startuml
Bob ->x Alice
Bob -> Alice
Bob ->> Alice
Bob -\ Alice
Bob \\- Alice
Bob //-- Alice

Bob ->o Alice
Bob o\\-- Alice

Bob <-> Alice
Bob <->o Alice
@enduml

PlantUML 各种箭头的语法

关键字 autonumber用于自动对消息编号

@startuml
Alice -> Bob: Authentication Request
Bob --> Alice: Authentication Response

Alice -> Bob: Another authentication Request
Alice <-- Bob: Another authentication Response
@enduml

PlantUML 自动编号语法

使用 as关键字来重新命名参与者,你可以把它理解成定义变量一样, as后面跟着的就是变量,声明后我们后面就可以使用这个变量了。
使用 order关键字来定制参与者的显示顺序,数字越小,越往前排。
使用 title关键字定义时序图的标题。
参与者后加上冒号(:),后面跟上当前连线上的说明。如果连线上的文本过长,可以使用 \n使长文本换行展示,不至于导致连线过长。

@startuml
title 测试PlantUML绘图
participant Last as L order 30
participant Middle as M order 20
participant First as F order 10

F -> M: 开始到中间
L <-- M: 中间到最后
@enduml

PlantUML 语法示例

使用 activatedeactivate表示参与者的生命线。比如上面例子,如果加上参与者的生命线,一旦参与者被激活,生命线就会被显示出来,会变成这个样子。
destroy表示一个参与者的生命线的终结。

PlantUML 生命线表示方法

还可以使用嵌套的生命线,并且运行给生命线添加颜色。

PlantUML 给生命线添加颜色

上面例子可以看出,每次需要手写关键字激活,不是很方便,也可以使用自动激活关键字(autoactivate),这需要与 return关键字配合:

PlantUML 自动激活生命线

注意,return返回的点是导致最近一次激活生命线的点。

声明参与者

使用关键字 participant可以来声明参与者,默认使用长方形表示参与者,参与者如果没有明确指定类型,默认是 participant类型。
PlantUML 还预制了一些默认参与者,其形状不同。
actor(角色)
boundary(边界)
control(控制)
entity(实体)
database(数据库)
collections(集合)
queue(队列)

@startuml
participant Participant as Foo
actor       Actor       as Foo1
boundary    Boundary    as Foo2
control     Control     as Foo3
entity      Entity      as Foo4
database    Database    as Foo5
collections Collections as Foo6
queue       Queue       as Foo7
Foo -> Foo1 : To actor 
Foo -> Foo2 : To boundary
Foo -> Foo3 : To control
Foo -> Foo4 : To entity
Foo -> Foo5 : To database
Foo -> Foo6 : To collections
Foo -> Foo7: To queue
@enduml

PlantUML 各种参与者示例

分段以及分页

使用 ==关键字将时序图分割为不同的逻辑部分,方便阅读查看。
PlantUML 时序图逻辑分段
关键词 newpage可以将一张时序图分割成多张图,后面跟上标题表示当前页的标题,适用于长图分页打印的场景。
PlantUML 时序图分页示例

注释

可以使用 note leftnote right关键字在信息后面加上注释。
你可以使用 end note关键字有一个多行注释。
PlantUML 时序图注释示例

可以使用 note left ofnote right ofnote over在节点(participant)的相对位置放置注释。
还可以通过修改背景色来高亮显示注释。
PlantUML 时序图指定参与者示例

写在最后

本文主要介绍如何使用 PlantUML 绘制时序图,并对时序图中的一些关键字做讲解,有兴趣的朋友可以关注 PlantUML 官网


版权声明:本文为hacker_empire原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。