当前位置：首页 > 科技 > 软件

PlantUML画时序图，真香！

来源：责编：时间：2024-05-16 09:04:12 79观看

导读引言大家好，我是老三，最近在做系统设计的时候，发现要画不少时序图，以前我用的最顺手的工具是draw.io，后来也尝试了语雀自带的画图工具，感觉画画简单的图还行，但是复杂一点的，就比较吃力了。图片哎，这条线怎么又歪了？布局怎么又

引言

大家好，我是老三，最近在做系统设计的时候，发现要画不少时序图，以前我用的最顺手的工具是draw.io，后来也尝试了语雀自带的画图工具，感觉画画简单的图还行，但是复杂一点的，就比较吃力了。

图片

哎，这条线怎么又歪了？布局怎么又乱了？这个条怎么又对不齐了？……手忙脚乱才画好一张图，这时候我就想，有没有其它更专业的画图工具呢？大部分同事都在用Visio，辉哥给我推荐了PlantUML，说非常好用！这时候旁边来了一句—— “他就是装比！”

还有这样的事？那我不能让他一个人都装了。

最开始看下官方文档，发现PlantUML类似MarkDown，似乎需要一点学习成本，简单用了一下，曲线还是挺平缓的，上手相当快！推荐大家也用一下试试。

一、什么是PlantUML？

PlantUML是一个多功能组件，可快速、直接地创建图表。用户可以使用简单直观的语言起草各种图表。

PlantUML是一个开源工具，它允许我们用简单的文本描述来创建UML图，包括序列图、用例图、类图、对象图、活动图、组件图、部署图、状态图，以及我们今天要讲的时序图。

图片

除了UML图之外，PlantUML 还支持一系列其他图表，例如JSON数据、YAML数据、EBNF图表、架构图等等。PlantUML的一大优势，是图表完全用文本代码描述，这就意味着它可以作为文档嵌入到源代码中，也非常方便版本控制和多人协作，不管是迭代设计、文档编写、系统建模，PlantUML都能胜任。

二、快速入门

PlantUML插件

为了便捷地使用PlantUML，许多流行的IDE和代码编辑器提供了集成PlantUML的插件，如Visual Studio Code、IntelliJ IDEA、Eclipse等。插件提供了实时预览、语法高亮和图表导出等功能，能帮助我们更快捷，更高效地画图，整体上IDEA的插件用起来体验最好，但是IDEA大家懂的，太占内存了，VS Code相对而言，用起来就会轻量很多。

IntelliJ IDEA：比如 "PlantUML integration" 可以让我们直接在 IDE 中查看和编辑 PlantUML 图表

图片

PlantUML integration

插件使用效果

图片

VS Code：https://marketplace.visualstudio.com/items?itemName=jebbs.plantuml

插件市场：

图片

插件使用效果：

图片

Hello World!

我们先来看个最简单的例子，通过-> 、-->和 :就可以在参与者之间传递消息，不用明确声明参与者。

@startuml老张 -> 老王 : 老王，你好啊老王--> 老张: 老张，你好啊老张 -> 老王: 最近有空一起喝茶老张 <-- 老王: OK@enduml

图片

三、PlantUML时序图语法

接下来，我们看看PlantUML时序图的一些具体语法。

声明参与者

我们使用关键字participant 来声明参与者，就可以对该参与者进行更多的控制。声明的顺序就是默认的显示顺序。我们也可以用这些关键字来声明参与者，给参与者设置不同的形状。

actor（角色）
boundary（边界）
control（控制）
entity（实体）
database（数据库）
collections（集合）
queue（队列）

我们还可以通过 as关键字重命名参与者。

@startumlparticipant Participant as Fooactor       Actor       as Foo1boundary    Boundary    as Foo2control     Control     as Foo3entity      Entity      as Foo4database    Database    as Foo5collections Collections as Foo6queue       Queue       as Foo7@enduml

参与者

默认的颜色比较单调，也可以通过#来设置参与者的颜色：

@startumlactor Bob #blue' The only difference between actor'and participant is the drawingparticipant Alice #SkyBlueparticipant "I have a really/nlong name" as L #00ff00Alice->Bob: Authentication RequestBob->Alice: Authentication ResponseBob->L: Log transaction@enduml

上颜色的参与者

消息传递

在不同参与者之间，通过箭头+:来表示消息传递。

同步消息：

A -> B: 同步消息文本

同步消息

异步消息：由发送者A指向接收者B，表示A发送后不需要等待B立即处理。

A ->> B: 异步消息文本

异步消息

返回消息：通常从接收者返回到发送者，标识一个回应。

A <-- B: 返回消息文本

返回消息

自调用：一个参与者直接发送消息给自己，表示自我处理或运算。

A ->A: 自调用

自调用

生命线（Lifeline）与激活条（Activation Bar）

在时序图中，生命线表示对象在一段时间内的活动状态，也就是从参与者往下延伸的那条虚线。激活条用来表示参与者或对象在处理某个任务期间的活动状态，是生命线的一部分，矩形条形式出现。

生命线的激活与撤销：可以用下面这些关键字来控制生命线的激活与撤销

activate: 显示参与者的活动状态开始

deactivate: 指示参与者的活动状态结束。

destroy: 用于表示参与者的生命线终结，通常表示对象生命周期的结束。

@startumlparticipant UserUser -> A: DoWorkactivate AA -> B: << createRequest >>activate BB -> C: DoWorkactivate CC --> B: WorkDonedestroy CB --> A: RequestCreateddeactivate BA -> User: Donedeactivate A@enduml

生命线的激活与撤销

生命线的嵌套与颜色：我们还可以使用嵌套激活条来表示内部调用，并可以给生命线添加颜色。

@startumlparticipant UserUser -> A: DoWorkactivate A #FFBBBBA -> A: Internal callactivate A #DarkSalmonA -> B: << createRequest >>activate BB --> A: RequestCreateddeactivate Bdeactivate AA -> User: Donedeactivate A@enduml

生命线的嵌套与颜色

自动激活：在发送消息时自动显示激活条。

A->B++: 激活B并发送消息

自动激活

自动去激活：在接收回应时自动隐藏激活条。

A->B++: 激活B并发送消息A <--B--: B去激活并回应消息

自动去激活

分组和替代

分组：用于逻辑上分组一系列交互。

group 分组名A -> B: 消息...end group

分组

替代（Alt/Else）：表示基于条件的替代执行流程。

alt 条件1A -> B: 满足条件1的消息else 条件2A -> B: 满足条件2的消息end

替代

注释

注释用于添加说明性文本。

可以用note left of，note right of或note over来控制注释相对节点的位置，还可以通过修改背景色来高亮显示注释。

@startumlparticipant Aliceparticipant Bobnote left of Alice #aquaThis is displayedleft of Alice.end notenote right of Alice: This is displayed right of Alice.note over Alice: This is displayed over Alice.note over Alice, Bob #FFAAAA: This is displayed/n over Bob and Alice.note over Bob, AliceThis is yet anotherexample ofa long note.end note@enduml

注释

颜色

Choosing colors在 PlantUML 中，我们可以对时序图的各个元素自定义颜色，比如参与者（actors）、对象（objects）、激活条（activation bars)等，来让我们的时序图更加美观。在声明元素时，可以直接指定颜色，格式为#颜色代码。颜色代码可以是不同的形式：

直接指定颜色：颜色代码可以是一个十六进制颜色值，也可以是预定义的颜色名称。

@startumlactor 用户  #Greenparticipant 参与者  #B4A7E5用户-[#red]>参与者:消息activate 参与者 #Blue@enduml

直接指定颜色

使用 skinparam 设置颜色：除了直接为特定元素指定颜色外，还可以使用 skinparam 全局设置时序图中的颜色。用这种方式更改元素的默认颜色比较方便：

@startumlskinparam ActorBorderColor #DarkOrangeskinparam ParticipantBackgroundColor #SkyBlueactor 用户participant 参与者@enduml

使用 skinparam 设置颜色

当使用 skinparam 时，我们可以设置许多不同属性的颜色，如边框颜色（BorderColor）、背景颜色（BackgroundColor）、字体颜色（FontColor）和激活条颜色（SequenceGroupBodyBackgroundColor）。更多语法可以直接查看官方文档：顺序图的语法和功能，目前这些内容，已经足够我们常见的时序图需求了。

四、完整实例

我们接下来看一个稍微完整一点的例子，在这个例子中，我们的需求，是要在原本的登录的基础上，引入Google登录。

@startumlskinparam ParticipantBackgroundColor #DeepSkyBlueactor 用户 as c  #DeepSkyBlueparticipant "客户端" as clientparticipant "服务网关" as gaparticipant "用户服务" as userdatabase "数据库" as DB  #DeepSkyBlueparticipant "Google服务" as google  #LightCoralactivate c #DeepSkyBlueactivate client #DeepSkyBluec->client:用户登录group#LightCoral #LightCoral Google登录客户端流程  client -> google : 请求Google OAuth登录            activate google #DeepSkyBlue            google-->client:登录url            client->google:跳转登录页            google -> google : 用户登录            google --> client : Google登录Token            deactivate googleend|||client -> ga : 登录请求note right#LightCoral:新增登录方式，三方登录请求实体activate ga #DeepSkyBluega ->user:请求转发activate user #DeepSkyBluealt#DeepSkyBlue 常规登录    user -> DB : 查询用户信息    activate DB #DeepSkyBlue    DB -> user : 用户信息    deactivate DB    user->user:登录密码校验|||else Google登录    group#LightCoral #LightCoral Google登录服务端流程          user->google:验证token          activate google #DeepSkyBlue          google-->user:用户信息          deactivate google          user->user:存储或更新用户信息    end groupenduser-->ga:登录结果deactivate userga -> client : 响应deactivate gaalt#DeepSkyBlue 成功        client -> c : 登录成功else 失败        client -> c : 登录失败enddeactivate client|||@enduml

登录时序图

五、总结

PlantUML使用起来整体上还是非常舒服的，对我而言，这几个特点让我爱不释手：

提供了类似MarkDown的所见即所得的使用体验，免去调整图形之扰
PlantUML本质是文本，可以进行版本控制，多人协同
语雀支持文本画图的功能，可以嵌入PlantUML文本，支持在语雀文档里直接修改

本文链接：http://www.28at.com/showinfo-26-88327-0.htmlPlantUML画时序图，真香！

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇：我用 Flutter、React Native 和 Ionic 构建了相同的应用程序

下一篇：这一次，彻底搞懵 CRDT

标签：

热门焦点

小米平板5 Pro 12.4简评：多专多能兼顾影音娱乐的大屏利器

疫情带来了网课，网课盘活了安卓平板，安卓平板市场虽然中途停滞了几年，但好的一点就是停滞的这几年行业又有了新的发展方向，例如超窄边框、高刷新率、多摄镜头组合等，这就让安卓
vivo TWS Air开箱体验：真轻臻好听

在vivo S15系列新机的发布会上，vivo的最新款真无线蓝牙耳机vivo TWS Air也一同发布，本次就这款耳机新品给大家带来一个简单的分享。外包装盒上，vivo TWS Air保持了vivo自家产
一篇文章带你了解 CSS 属性选择器

属性选择器对带有指定属性的 HTML 元素设置样式。可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。一、了解属性选择器CSS属性选择器提供了一种简单而
消费结构调整丨巨头低价博弈，拼多多还卷得动吗？

来源：征探财经作者：陈香羽随着流量红利的退潮，电商的存量博弈越来越明显。曾经主攻中高端与品质的淘宝天猫、京东重拾“低价”口号。而过去与他们错位竞争的拼多多，靠
网传小米汽车开始筛选交付中心建筑面积不低于3000平方米

7月7日消息，近日有微博网友@长三角行健者爆料称，据经销商集团反馈，小米汽车目前已经开始了交付中心的筛选工作，要求候选场地至少有120个车位，建筑不能低
机构称Q2国内智能手机销量同比下滑4% vivo份额重回第1

7月29日消息，根据市场调查机构Counterpoint Research公布的最新报告，2023年第2季度中国智能手机销量同比下降4%，创新自2014年以来第2季度销量新低。报
AI芯片初创公司Tenstorrent获三星和现代1亿美元投资

Tenstorrent是一家由芯片行业资深人士Jim Keller领导的加拿大初创公司，专注于开发人工智能芯片，该公司周三表示，已经从现代汽车集团和三星投资基金等
2299元起！iQOO Pad开启预售：性能最强天玑平板

5月23日，iQOO如期举行了新品发布会，除了首发安卓最强旗舰处理器的iQOO Neo8系列新机外，还在发布会上推出了旗下首款平板电脑——iQOO Pad，其搭载了天玑
苹果140W USB-C充电器：采用氮化镓技术

据10 月 30 日 9to5 Mac 消息报道，当苹果推出新的 MacBook Pro 2021 时，该公司还推出了新的 140W USB-C 充电器，附赠在 MacBook Pro 16 英寸机型的盒子里，也支