背景

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

PlantUML 介绍

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

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

IDEA 中安装 PlantUML 插件

在 IDEA 中安装PlantUML比较方便,直接搜索 PlantUML Integration,选择下载,下载完成后重启 IDEA 安装完成。

安装完成后,新建新的文件,会发现在新建列表上会多出一个 PlantUML File 选项,选择后创建文件,将一下代码复制进去,可以看到预览效果。

@startuml
autonumber
actor "用户" as User
participant "浏览器" as Browser
participant "服务端" as Server #orange
activate UserUser -> Browser: 输入 URL
activate BrowserBrowser -> Server: 请求服务器
activate ServerServer -> Server: 模板渲染
note right of Server: 这是一个注释Server -> Browser: 返回 HTML
deactivate ServerBrowser --> User
@enduml


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

PlantUML 绘制时序图

时序图是什么?

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

基本用法

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

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

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

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

使用 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 10F -> M: 开始到中间
L <-- M: 中间到最后
@enduml

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

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

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

注意,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

分段以及分页

使用 ==关键字将时序图分割为不同的逻辑部分,方便阅读查看。

关键词 newpage可以将一张时序图分割成多张图,后面跟上标题表示当前页的标题,适用于长图分页打印的场景。

注释

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

可以使用 note left ofnote right ofnote over在节点(participant)的相对位置放置注释。
还可以通过修改背景色来高亮显示注释。

写在最后

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

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

  1. 使用 PlantUML 绘制时序图

    目录 一.简介 二.安装 1.1 安装插件到PyCharm 2.2 验证 2.2.1 插件检查是否安装 2.2.2 新建PlantUML文件 一.简介 Github地址:https://github. ...

  2. 机械动作时序图怎么画_还在用Visio画时序图?赶紧试试这两款好用的时序图工具(修订版)...

    对于电路设计者来说,在写文档的时候有一款能快速上手又好用的画时序图工具太重要了.之前我们推荐了AndyTiming(详情 好物分享:画时序图利器AndyTiming),能解决不少日常应用.然而,And ...

  3. PlantUML 绘制时序图

    PlantUML系列文章 PlantUML绘制活动图https://blog.csdn.net/zhangwei_david/article/details/125507374PlantUML绘制类图 ...

  4. 分享一款绘制时序图的实用小工具

    转自 | 果果小师弟 今天分享一款实用小工具:WaveDrom,它是一个免费开源的在线数字时序图渲染引擎.它可以使用JavaScript, HTML5和SVG来将时序图的WaveJSON描述转成SVG ...

  5. java时序图工具_开源在线绘图工具,界面美观,功能丰富,总有一款适合你

    俗话说,一图胜千言,一张小小的图片可以替代大段的文字说明,更可以形象直观地描述业务流程.展示算法...,下面给大家带来几款我最近收藏的开源在线绘图工具. Ant Design Pro 项目地址:htt ...

  6. 2022 PlantUML 这款 IDEA 插件能搞,流程图、架构图,N种图... 简直神器!

    2022 PlantUML 这款 IDEA 插件能搞,流程图.架构图,N种图- 简直神器! 文章目录 2022 PlantUML 这款 IDEA 插件能搞,流程图.架构图,N种图... 简直神器! P ...

  7. PlantUML绘制类图

    系列文章目录 PlantUML绘制活动图https://blog.csdn.net/zhangwei_david/article/details/125507374 PlantUML 绘制时序图htt ...

  8. PlantUML绘制活动图

    PlantUML系列文章 PlantUML 绘制时序图https://blog.csdn.net/zhangwei_david/article/details/125451459 PlantUML绘制 ...

  9. 推荐一款超级好用的开源画图工具:用例图、架构图、时序图、类图、E-R图、甘特图

    在项目开发的过程中需要各种类型的图来进行支撑,比如用例图.系统架构图.时序图.类图.E-R图,甚至项目管理的甘特图等等.为了画这些图我们往往需要寻找各类付费.免费的软件进行操作. 今天给大家推荐一款开 ...

最新文章

  1. DeeCamp 2020 赛题大公开!快来看你想选哪个
  2. js 判断对象是否为空
  3. Netweaver和CloudFoundry的服务器日志
  4. PWN-PRACTICE-BUUCTF-3
  5. abap 添加alv上的工具栏的按钮_你需要属于自己的PPT工具栏!
  6. 190916-二级format补齐
  7. Python常用数据结构之heapq模块
  8. html div图片定位,html中div定位练习
  9. 级联分类器-opencv使用
  10. 《代码敲不队》第八次团队作业:Alpha冲刺 第五天
  11. Java回顾之Spring基础
  12. Linux字符设备驱动中container_of宏的作用
  13. 七日Python之路--第八天(一些琐碎)
  14. oracle一步一步01
  15. opencv中滚动条操作
  16. php 横杠箭头,为什么我的箭头下面有一横线?
  17. PFC颗粒6.0软件模拟---工程案例
  18. 青囊如可授 从此访鸿蒙的意思,《坛滴槐花露,香飘柏子风。》
  19. 微信公众号js复制到手机剪贴板
  20. java的setbounds_Java Label.setBounds方法代码示例

热门文章

  1. 特征提取算法的综合实验(多种角度比较sift/surf/brisk/orb/akze)
  2. 阿里云网盘公测_阿里云网盘开始公测预约 免费不限速!
  3. Ubuntu修改时区为UTC/CST时间
  4. CSDN更换博客皮肤教程
  5. VSLAM视觉里程计总结
  6. Hook神器—Frida安装
  7. android动画详解二 属性动画原理
  8. STM32入门教程——串口通讯
  9. 大数据知识(六):Hadoop练习
  10. AX版Flash 1月12日之后继续使用Flash的方法