市面上的绘图工具琳琅满目，桌面版与在线版本都不少。选择多了，团队成员使用的工具也难统一，有vsd、edx、odg……各种后缀名的图文件，这些文件对版本管理工具也不友好。
希望找一款免费、便于版本管理、形式丰富的绘图工具。寻寻觅觅，终于找到了——PlantUML（中文官网：plantuml.com/zh/）。
最让人欣喜的是，在vscode里面有plantuml插件，markdown对plantuml的支持也是非常棒的。见下图
用plantuml绘图是要写代码，这种代码和编程语言不太一样。是一种专业领域语言（DSL， Domain Specific Language ），可以用少量的声明式代码，实现复杂图形的绘制。代码的绘图方式，容易做到跨终端，对版本管理也是非常友好的。
环境准备
1、在vscode上安装好plantuml插件
2、vscode中，修改plantuml配置
plantuml.render，选择PlantUMLServer
plantuml.server，设为 https://www.plantuml.com/plantuml
3、建立markdown文件，打开markdown预览
plantuml其他功能，可以在shift + command + p，输入plantuml关键词看到
推荐一个在线plantuml绘图项目，可以快速体验一下：plantuml-editor.kkeisuke.com/
架构图
图标
（在markdown中要放在```plantuml 里面）
![]()
```plantuml
@startuml
rectangle "<img:https://raw.githubusercontent.com/Roemer/plantuml-office/master/office2014/Users/user.png>\r User" as user
rectangle "<img:https://raw.githubusercontent.com/Roemer/plantuml-office/master/office2014/Services/lync_web_app_client.png>\r Client" as client
rectangle "<img:https://raw.githubusercontent.com/Roemer/plantuml-office/master/office2014/Servers/trusted_application_server.png>\r Server1" as s1
rectangle "<img:https://raw.githubusercontent.com/Roemer/plantuml-office/master/office2014/Concepts/app_part.png>\r Server1\n日志中间件" as m1
rectangle "<img:https://raw.githubusercontent.com/Roemer/plantuml-office/master/office2014/Servers/database_server.png>\r DB" as db2
rectangle "<img:https://raw.githubusercontent.com/Roemer/plantuml-office/master/office2014/Communications/lync_control_panel.png>\r controller" as c
db2 <-> s1
s1 <--> client
client <.left.> user
@enduml
```
布局
方向：top to bottom direction（默认）、left to right direction
可以通过给箭头添加left, right, up或down等关键字来改变方向。
@startuml
'两个短横线箭头-->或者两个点箭头..>，表示的是箭头方向是垂直的，由上指向下。如果使用单横线箭头->或者单点箭头.>则箭头方向水平。
[中间] --> [下面]
[中间] -> [右边]
[左边] <. [中间]
[上面] <.. [中间]
'加入left、right、up、down关键字
[中间] -right-> [右边]
[中间] -down-> [下面]
[中间] .left.> [左边]
[中间] .up.> [上面]
@enduml
便签的方位：note left of 、 note right of 、 note top of 、 note bottom of
更多内容可参考：plantuml.com/zh/archimat…
类图
代码如下
@startuml
abstract 车
class 身份证{
-private
#protected
~package private
+public
-private()
#protected()
~package private()
+public()
}
小汽车 .up.|> 车
自行车 .up.|> 车
小汽车 *-left- 发动机
小汽车 *-- 轮胎
SUV --|> 小汽车
学生 ..> 自行车
学生 --o 班级
学生 -- 身份证
@enduml
- 车的类图标示A，表示车是一个抽象类；
- 它有两个继承类：小汽车和自行车；它们之间的关系为实现关系(realize，表现为继承抽象类)，使用带空心箭头的虚线表示。小汽..|>车 （中间的up用来控制箭头方向）
- 小汽车为与SUV之间也是继承关系，它们之间的关系为泛化关系(generalization，表现为继承非抽象类)，使用带空心箭头的实线表示。SUV--|>小汽车
- 小汽车与发动机之间是组合关系(composition，一种强依赖的特殊聚合关系，如果整体不存在了，则部分也不存在了)，使用带实心箭头的实线表示； 小汽车*--发动机
- 学生与班级之间是聚合关系(aggregation，表示整体由部分构成的语义。与组合关系不同的是，整体和部分不是强依赖的，即使整体不存在了，部分仍然存在，has-a)，使用带空心箭头的实线表示。学生--o班级
- 学生与身份证之间为关联关系(association，描述不同类的对象之间的结构关系；它是一种静态关系， 通常与运行状态无关，一般由常识等因素决定的；它一般用来定义对象之间静态的、天然的结构； 所以，关联关系是一种“强关联”的关系；)，使用一根实线表示。学生--身份证
- 学生上学需要用到自行车，与自行车是一种依赖关系(dependency，它是一种临时性的关系，通常在运行期间产生，并且随着运行时的变化； 依赖关系也可能发生变化；)，使用带箭头的虚线表示。学生..>自行车
标志 | 可见性类型 |
+ | Public |
| # | Protected |
| - | Private |
| ~ | Package private |
更多内容可参考 plantuml.com/zh/class-di…
时序图
关键字 participant 用于改变参与者的先后顺序。
你也可以使用其它关键字来声明参与者：
actor
boundary
control
entity
database
@startuml
'参与者声明，控制参与者的先后顺序。actor等关键字控制形状
participant par
actor act
boundary bou
control con
entity ent
database dat
par -> act++: 实心箭筒，同步
par <- act--: 实心箭筒，同步返回
par ->> act: 实线箭头，异步
par <<-- act : 虚线箭头，异步返回
bou -> bou: 反身消息
'各种箭头
con --> dat
con ->x dat
con -\ dat
con -\\ dat
con /-- dat
con //-- dat
con ->o dat
con <-> dat
con <-->o dat
con o<-->x dat
@enduml
对象的创建和撤销
++ 激活目标-- 源目标失活**创建目标实例!! 销毁目标实例
更多内容可参考：plantuml.com/zh/sequence…
参考文献
[1] 看懂UML类图和时序图 design-patterns.readthedocs.io/zh_CN/lates…
[2]UML 2 顺序图 sparxsystems.cn/resources/u…
