使用PlantUML，画图如丝般流畅（时序图-1）

Posted 2021-04-02 须弥零一

须弥零一

使用PlantUML，画图如丝般流畅（时序图-1）

平常工作中，不管是写文档，做设计都少不了画图。流程图、时序图、类图、部署图等等。关于画图的工具也有很多，比图：Visio、StarUML、亿图、Enterprise Architect、ArgoUML、astah等诸多工具软件。但这些工具都有需要安装客户端，都需要拖拽组件，并且有的软件收费颇高。
     这个时候是不是想找一个画图速度快且轻量级的工具？恭喜你！PlantUML可以满足你的这些需求，甚至远远超出您的预期。

什么是PlantUML

PlantUML是一个开源项目 (https://github.com/plantuml/plantuml)，支持快速绘制 时序图、 用例图、 类图、 对象图、 活动图、 组件图、 部署图、 状态图、 定时图。除此之外，PlantUML还支持的非UML图有： JSON data、 YAML data、 网络图 (nwdiag)、线框图形界面、 架构图、 规范和描述语言 (SDL)、Ditaa diagram、 甘特图、 思维导图、 工作分解结构图、 以 AsciiMath 或 JLaTeXMath 符号的数学公式、 实体关系图。

怎么样？是不是超出了你的预期。当然，超出你预期并不止这一点。PlantUML的使用方式多到你无法想象，下面这些都是现在支持的使用的方式：

如需了解更多的使用方式可以去 https://plantuml.com/zh/running翻阅，此处就不做搬运了。本文主要介绍怎么用PlantUML来绘制时序图的语法。其他语法后期陆续再做介绍，敬请关注 须弥零一公众号，第一时间获取最新资讯。

使用什么工具

因为本人的工作原因，下文就使用JetBrains IDEA的PlantUML插件为例介绍。您也可以访问 http://www.plantuml.com/plantuml在线编辑，或者从如下的工具中选择一个你拿手的进行尝试：

怎么画时序图 - 1

简单画法

你可以用 ->来绘制参与者之间传递的消息， 而不必显式地声明参与者。
你也可以使用  --> 绘制一个虚线箭头。
另外，你还能用  <- 和  <--，这不影响绘图，但可以提高可读性。
注意：仅适用于时序图，对于其它示意图，规则是不同的。
示例语法：

@startuml用户 -> 认证中心: 登录操作认证中心 -> 缓存: 存放(key=token+ip,value=token)token用户 <- 认证中心 : 认证成功返回token用户 -> 认证中心: 下次访问头部携带token认证认证中心 <- 缓存: key=token+ip获取token其他服务 <- 认证中心: 存在且校验成功则跳转到用户请求的其他服务其他服务 -> 用户: 信息@enduml

示例效果：

声明参与者

关键字 participant 用于改变参与者的先后顺序。你也可以使用其它关键字来声明参与者：

•actor•boundary•control•entity•database•collections

示例语法：

@startumlactor Foo1boundary Foo2control Foo3entity Foo4database Foo5collections Foo6Foo1 -> Foo2 : To boundaryFoo1 -> Foo3 : To controlFoo1 -> Foo4 : To entityFoo1 -> Foo5 : To databaseFoo1 -> Foo6 : To collections
@enduml

示例效果：

关键字 as 用于重命名参与者

可以使用RGB值或者颜色名修改 actor 或参与者的背景颜色。
示例语法：

@startumlactor Bob #red' The only difference between actor'and participant is the drawingparticipant Aliceparticipant "I have a really
long name" as L #99FF99Alice->Bob: Authentication RequestBob->Alice: Authentication ResponseBob->L: Log transaction@enduml

示例效果：

关键字 order 用于自定义顺序来打印参与者

示例语法：

@startumlparticipant Last order 30participant Middle order 20participant First order 10@enduml

示例效果：

在参与者中使用非字母符号

可以使用引号定义参与者，还可以用关键字 as 给参与者定义别名。
示例语法：

@startumlAlice -> "Bob()" : Hello"Bob()" -> "This is very
long" as Long' You can also declare:' "Bob()" -> Long as "This is very
long"Long --> "Bob()" : ok@enduml

示例效果：

给自己发消息

参与者可以给自己发信息，消息文字可以用 来换行。
示例语法：

@startumlAlice->Alice: This is a signal to self.
It also demonstrates
multiline 
text@enduml

示例效果：

文本对齐

将响应消息显示在箭头下方

如果你想将相应消息显示在箭头下面，则可以使用skinparam responseMessageBelowArrow true命令完成。
示例语法：

@startumlskinparam responseMessageBelowArrow trueBob -> Alice : helloAlice -> Bob : ok@enduml

示例效果：

修改箭头样式

修改箭头样式的方式有以下几种：

•表示一条丢失的消息：末尾加 x•让箭头只有上半部分或者下半部分：将<和>替换成或者/•细箭头：将箭头标记写两次 (如 >> 或 //)•虚线箭头：用 -- 替代 -•箭头末尾加圈：->o (这是个字母o)•双向箭头：<->

示例语法：

@startumlBob ->x AliceBob -> AliceBob ->> AliceBob - AliceBob \- AliceBob //-- Alice
Bob ->o AliceBob o\-- Alice
Bob <-> AliceBob <->o Alice@enduml

示例效果：

修改箭头颜色

我们可以用以下记号修改箭头的颜色：
示例语法：

@startumlBob -[#red]> Alice : helloAlice -[#0000FF]->Bob : ok@enduml

示例效果：

对消息序列编号

关键字 autonumber 用于自动对消息编号。
示例语法：

@startumlautonumberBob -> Alice : Authentication RequestBob <- Alice : Authentication Response@enduml

示例效果：

语句 autonumber 数字用于指定编号的初始值，而 autonumber 数字 数字 可以同时指定编号的初始值和每次增加的值。
示例语法：

@startumlautonumberBob -> Alice : Authentication RequestBob <- Alice : Authentication Response
autonumber 15Bob -> Alice : Another authentication RequestBob <- Alice : Another authentication Response
autonumber 40 10Bob -> Alice : Yet another authentication RequestBob <- Alice : Yet another authentication Response
@enduml

示例效果：

我们可以在双引号内指定编号的格式。格式是由 Java 的DecimalFormat类实现的：(0 表示数字；# 也表示数字，但默认为0)。也可以用 html 标签来制定格式。
示例语法：

@startumlautonumber "<b>[000]"Bob -> Alice : Authentication RequestBob <- Alice : Authentication Response
autonumber 15 "<b>(<u>##</u>)"Bob -> Alice : Another authentication RequestBob <- Alice : Another authentication Response
autonumber 40 10 "<font color=red><b>Message 0 "Bob -> Alice : Yet another authentication RequestBob <- Alice : Yet another authentication Response
@enduml

示例效果：

还可以用语句  autonumber stop 和  autonumber resume 数字 格式 来表示暂停或继续使用自动编号。
示例语法：

@startumlautonumber 10 10 "<b>[000]"Bob -> Alice : Authentication RequestBob <- Alice : Authentication Response
autonumber stopBob -> Alice : dummy
autonumber resume "<font color=red><b>Message 0 "Bob -> Alice : Yet another authentication RequestBob <- Alice : Yet another authentication Response
autonumber stopBob -> Alice : dummy
autonumber resume 1 "<font color=blue><b>Message 0 "Bob -> Alice : Yet another authentication RequestBob <- Alice : Yet another authentication Response@enduml

示例效果：

页面标题,页眉,页脚

使用 title 关键词增加标题
使用 header 关键词增加页眉
使用 footer 关键词增加页脚
示例语法：

@startuml
header Page Headerfooter Page %page% of %lastpage%
title Example Title
Alice -> Bob : message 1Alice -> Bob : message 2
@enduml

示例效果：

分割示意图

关键字 newpage 用于把一张图分割成多张。
在 newpage 之后添加文字，作为新的示意图的标题。
示例语法：

@startuml
Alice -> Bob : message 1Alice -> Bob : message 2
newpage
Alice -> Bob : message 3Alice -> Bob : message 4
newpage A title for the
last page
Alice -> Bob : message 5Alice -> Bob : message 6@enduml

示例效果：

组合消息

我们可以通过以下关键词将组合消息：

•alt/else•opt•loop•par•break•critical•group 后面紧跟着消息内容

并且可以在标头 header 添加需要显示的文字 (group除外) 。关键词 end 用来结束分组。
注意，分组可以嵌套使用。
示例语法：

@startumlAlice -> Bob: Authentication Request
alt successful case
 Bob -> Alice: Authentication Accepted
else some kind of failure
 Bob -> Alice: Authentication Failure group My own label Alice -> Log : Log attack start loop 1000 times Alice -> Bob: DNS Attack end Alice -> Log : Log attack end end
else Another type of failure
 Bob -> Alice: Please repeat
end@enduml

示例效果：

最后

怎么样？是不是有点感兴趣了？用这种方式画图是不是感觉流畅很多了，因为时间和篇幅问题，本节就先展示到这，后面几期会继续将剩下的语法补充完毕。关注公众号 须弥零一，后面更精彩！

END

---