PlantUML --- 使用代码快速绘制时序图、思维导图

本篇思维导图

@startmindmap
<style>
mindmapDiagram {
  .green {
    BackgroundColor lightgreen
  }
  .rose {
    BackgroundColor #FFBBCC
  }
  .bule_black {
    BackgroundColor lightblue
  }

}
</style>
* PlantUML <<rose>>
** PlantUML简介 <<green>>
** 时序图基本使用 <<rose>>
*** 开始、结束
*** 对象表示
*** 消息传递
*** 生命线
*** 分支、循环
*** 生命线的更简易写法
** 思维导图基本使用(正在开发中) <<bule_black>>
*** 开始、结束
*** 子主题生成和分支方向选择
*** 内容多行表示
*** 颜色更改
** uml时序图简介 <<bule_black>>
** vscode下配置plantuml <<bule_black>>
@endmindmap

一、前言

不管是在工作还是学习，特别是在项目计划初期，我们需要画大量的图将工作内容、项目方案等进行可视化描述，包括但不限于时序图、类图、思维导图等等。

但是对于不经常画图，或者经常使用键盘的孩子，手工画图或者使用软件进行画图都是一件比较头疼的操作，特别是像我这种有强迫症的孩子，任何歪歪扭扭的地方都会让我极其不舒服想要将图画的尽量笔直和完美。

所以，如果可以直接敲代码，就可以生成想要的图，对于工作效率和专注度都有极大的提升，另外，将图上的逻辑用代码描述出来，本身就又能加深自己的理解。

好在，我在工作中偶然发现了这样的一个开源项目，PlantUML！！！真的，强烈安利，程序员必备、计算机学生必备，只敲代码，真的是方便了许多，我在画时序图的时候，一个对象可能要画2-3分钟，从找标识到手工对齐，添加对象名，但是用代码只需要一行解决！！！啊，这个优点已经好到必须要亲自体会了！！！强烈安利！！！它已经是我画图时必用的一款神奇，和markdown一样不可忽视。

二、PlantUML简介

PlantUml是一个开源项目，可以用写代码的方式快速回至出各种自己想要的图。此外，不仅支持画UML，还支持很多常用的，比如思维导图、ER图等等。戳官网：PlantUML

下面我就我自己的使用分享一些简单常用的使用方法

三、时序图篇

官网使用文档:时序图

1. 开始和结束

@startuml表示开始

@enduml表示结束

2. 对象表示

常用对象：

actor: 实体对象，比如人、操作员等
participant: 参与者，可以是类、服务名等
database: 数据库
queue: 队列，比如kafka队列就可以用这个表示

定义对象：

格式对象类型 对象名 [as 对象别名] [ ] 里面的内容为可选项，即可以为对象定义别名，这个别名是为了在代码中引用对象方便，实际图中对象的名字还是我们定义的对象名。

例子：

actor 用户： 定义一个实体对象，对象名为“用户”
database mysql： 定义一个数据库，名字为“mysql”
participant SQLServer as db： 定义一个参与者，服务名为“SQLServer”，别名为“db”，在代码中可以直接用db表示SQLServer
queue kafka： 定义一个queue对象，名为 kafka

'单引号是代码注释
@startuml
'对象定义
actor 用户
participant SQLServer as db
database mysql
queue kafka
'结束
@enduml

@startuml
'单引号是代码注释
'对象定义
actor 用户
participant SQLServer as db
database mysql
queue kafka
@enduml

3. 消息传递

时序图主要是为了展示项目中的数据流走向，因此消息传递是时序图的重要部分。

->表示消息传递走向，默认箭头类型是单向直线，PlantUML手册中有很多样式可以通过代码自定义颜色和样式

-->是单向虚直线箭头，一般是用来传递消息返回信息

用户->mysql: 数据库请求

mysql-->用户: 请求结果

4. 生命线的激活与撤销

一般完整的时序图中都会包含生命周期，当某个服务被触发，从开始工作到工作结束返回请求的这段时间，就是这个服务当下的生命周期，在PlantUML中，使用activate和deactivate来激活、销毁生命周期

'单引号是代码注释
@startuml
actor 用户
participant SQLServer as db
database mysql
queue kafka
'消息传递
用户->mysql: 数据库请求
'激活mysql生命线
activate mysql
'消息传递
mysql-->用户: 请求结果
'销毁mysql生命线
deactivate mysql
@enduml

@startuml
'单引号是代码注释
'对象定义
actor 用户
participant SQLServer as db
database mysql
queue kafka
'消息传递
用户->mysql: 数据库请求
'激活mysql生命线
activate mysql
mysql-->用户: 请求结果
'销毁mysql生命线
deactivate mysql
@enduml

5. 分支和循环表示

某些复杂情况下需要处理一些分支和循环的内容，PlantUML中用 alt-else-end 表示分支， 用 loop-end表示循环

分支

alt 查询
    用户->mysql: 数据库查询请求
    activate mysql
    mysql-->用户: 请求结果
    deactivate mysql
else 插入
    用户->mysql: 数据库插入请求
    activate mysql
    mysql-->用户: 请求结果
    deactivate mysql
end

@startuml
'单引号是代码注释
'对象定义
actor 用户
participant SQLServer as db
database mysql
queue kafka
'消息传递
alt 查询
    用户->mysql: 数据库查询请求
    activate mysql
    mysql-->用户: 请求结果
    deactivate mysql
else 插入
    用户->mysql: 数据库插入请求
    activate mysql
    mysql-->用户: 请求结果
    deactivate mysql
end
@enduml

循环

loop 查询1000次
    用户->mysql: 数据库查询请求
    activate mysql
    mysql-->用户: 请求结果
    deactivate mysql
end

@startuml
'单引号是代码注释
'对象定义
actor 用户
participant SQLServer as db
database mysql
queue kafka
'消息传递
loop 查询1000次
    用户->mysql: 数据库查询请求
    activate mysql
    mysql-->用户: 请求结果
    deactivate mysql
end
@enduml

另外，分支和循环都是可以嵌套的。

6. 一些更简洁的语法

++可以直接激活生命线

return msg可以结束生命线并返回传递消息msg

一般成对使用

4中的激活生命线+消息传递的代码可以直接写成这样

'激活mysql生命线 & 消息传递
用户->mysql++: 数据库请求
'销毁mysql生命线 & 传递返回结果
return 请求结果

四、思维导图篇

目前据官网，这个正在开发中，某些语法可能会发生变化，但是先用着不是？官网手册：思维导图

1. 开始和结束

@startmindmap开始

@endmindmap结束

2. 子主题

使用+或-新建分支，用符号数量表示层级，+表示分支向右边生长，-表示分支向左边生长

'这里是注释
@startmindmap
+ 思维导图
++ 主题1
+++ 子主题1.1
++ 主题2
-- 主题3
--- 子主题3.1
--- 子主题3.2
-- 子主题4
@endmindmap

@startmindmap
+ 思维导图
++ 主题1
+++ 子主题1.1
++ 主题2
-- 主题3
--- 子主题3.1
--- 子主题3.2
-- 子主题4
@endmindmap

3.内容多行表示

使用:开始多行内容，;结束多行内容。目前如果要使用: ;只能用*新建分支

'这里是注释
@startmindmap
* templates
**: Example1
今天是520
我在公司开心上班
;
@endmindmap

@startmindmap
* templates
**: Example1
今天是520
我在公司开心上班
;
@endmindmap

4.颜色改变

没有颜色的思维导图是没有灵魂的

具体语法建议查看官网手册

'这里是注释
@startmindmap
<style>
mindmapDiagram {
  .green {
    BackgroundColor lightgreen
  }
  .rose {
    BackgroundColor #FFBBCC
  }
  .your_style_name {
    BackgroundColor lightblue
  }
}
</style>
* Colors
** Green <<green>>
** Rose <<rose>>
** Blue <<your_style_name>>
@endmindmap

@startmindmap
<style>
mindmapDiagram {
  .green {
    BackgroundColor lightgreen
  }
  .rose {
    BackgroundColor #FFBBCC
  }
  .your_style_name {
    BackgroundColor lightblue
  }
}
</style>
* Colors
** Green <<green>>
** Rose <<rose>>
** Blue <<your_style_name>>
@endmindmap

五、UML时序图简介

对于还不清楚什么是UML时序图的同学，可以看下这两篇文章哦

步步为营UML建模系列五、时序图（Squence diagram)

UML序列图总结(Loop、Opt、Par和Alt)

六、vscode下配置PlantUML

使用VS CODE+PlantUML高效画图

Vscode plantuml UML图 配置使用

vscode下配置好plantuml后，可以使用Alt + D 预览plantuml文档（.uml文件）

如何从vscode导出plantuml图？ F1 或 ctrl+shift+p; 选择 PlantUML:导出当前图表；选择导出格式svg；导出即可。[png 对于较大的导出不全]

解决导出png不完整： vscode 打开设置 --> edit settings.json --> 添加如下：

    "plantuml.jarArgs": [
		"-DPLANTUML_LIMIT_SIZE=8129"
	]