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

背景

对于工作中遇到一些复杂的业务逻辑场景,需要借助图形工具去准确的表达,会更高效的理解和梳理复杂的逻辑,同时在跟领导和同事汇报时也更能清晰、准确、快速的表达想法以及方案。比如梳理源码常用的时序图以及流程图等,之前在画这些图都会想到使用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 官网

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 193,495评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,469评论 2 369
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 140,825评论 0 318
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 51,974评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 60,849评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 45,990评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,415评论 3 380
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,125评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,351评论 1 288
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,474评论 2 307
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,249评论 1 324
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,119评论 3 310
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,496评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,838评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,118评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,366评论 2 340
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,573评论 2 335

推荐阅读更多精彩内容