【VScode】画出逻辑清晰的UML
背景
无论是作为程序员还是产品经理，都不可避免的需要输出逻辑清晰的UML【时序图/活动图（流程图）/状态图等等】，从而清晰的表达展示自己内心想法。但多数情况，大部分人面对复杂的业务逻辑，往往将图示绘制得复杂难懂，反而失去了应减轻理解逻辑成本的基本目的。故，不才总结自己面对实际情况的经验并分享出来，共勉。
跳过介绍，直奔主题：
什么是UML
UML是统一建模语言的简称，详细可见：
https://www.visual-paradigm.com/cn/guide/uml-unified-modeling-language/what-is-uml/
PlantUML是一个可以让你快速编写UML图的组件，详细可见：
本人常用的图为：模块图/状态图（流程图）+ 时序图
为什么选择PlantUML
Strengths:
- 由代码自动生成图片，避免由于逻辑调整反复挪动图片排版，浪费时间
- 编写语言简洁易懂，学习成本不高
- 汇总建模语言，时序图、流程图、状态图、类图等等概括非常全
Weaknesses:
- 支持在线编写PlantUML的平台不多，目前腾讯文档、石墨、蓝湖等常用的在线协作平台都不支持
- 生成的样式有点80年代风格，若想调整，自定义较为麻烦
Opportunities:
- Markdown画写流程图的语法较为繁琐，且不同类型的图需要安装不同的插件（mermaid/flow..），学习成本高，一旦设计复杂逻辑，代码会显得复杂且难以通用
- drawio、processon、visio等图形绘制，涉及逻辑改动往往会大篇幅调整（本人也常常因为强迫症调整排版而耗费大量时间精力，实在可惜）
Threats:
- （没什么吧..）
绘制UML环境选择
-
语雀
- （优点）直接支持在文本中输入
/PlantUML进行绘制 - （缺点）个人非常喜欢语雀，在撰写文档的时候使用非常顺滑，可惜权限设置太严格，不适用于移动端快速分享权限，故放弃。
- （优点）直接支持在文本中输入
-
PlantUML官网
- （优点）可快速试用：http://www.plantuml.com/plantuml/uml/SyfFKj2rKt3CoKnELR1Io4ZDoSa70000
- （缺点）仅适用于试用场景
-
VScode + PlantUML（个人推荐🥇）
- （优点）：vscode插件很多，直接markdown + plantuml导出非常方便，另作为研发，对vscode情有独钟
- （优点）：不再受限于平台，导出png后想放哪放哪
- （缺点）：都是离线导出文件，再贴出去，肯定是没有语雀这种在线协作来得方便
使用PlantUML
-
下载VSCode插件
ext install plantuml
-
准备plantuml需要的环境
软件要求：
Java: 是运行PlantUML的必需条件, 请在您的环境中安装Java。
graphviz-dot: 可选的, 但是建议安装 (如果想绘制 除时序图和活动图以外的图, 就需要安装 Graphviz 软件)。a. MacOS
brew install --cask temurin brew install graphvizb. Windows
准备好VScode、PlantUML插件、JAVA环境、graphviz就行，不做赘述。(可直接参考PlantUML的VScode插件介绍)
-
进入VScode新建文件*.puml
-
测试代码
模块图示例
描述登陆相关的页面交互
@startuml
frame 登陆页
frame 微信扫码页
frame 首页 {
frame 首页头像弹窗 {
frame "绑定/解绑"
note right {
（支持微信号及手机号的绑定与解绑）
}
frame "修改密码"
frame "退出登陆"
}
}
frame 修改密码页
登陆页 -right-> 首页:手机号/账号 + 密码登陆
登陆页 -down-> 微信扫码页:微信扫码登陆
微信扫码页 --> 首页
修改密码 -up-> 修改密码页
修改密码页 -up-> 登陆页
退出登陆 -up-> 登陆页
@enduml
PlantUML Preview:
泳道图 + 流程图示例
描述审批相关示例
@startuml
|发起人|
start
:发起审批;
|审批人|
:收到审批待办通知;
:操作审批;
split
|发起人|
:收到审批结果通知;
end
split again
|审批人|
if (审批是否通过) then (No)
|审批人|
end
else (Yes)
|抄送人|
:收到审批结果(已通过)通知;
endif
end
@enduml
PlantUML Preview:
个人绘图心得随笔
- 一个图上尽量保证仅存在一个start以及一个end
- 绘图尽量保证水平/垂直的线型，end应尽量放在最末尾处，而不是图示中间形成一个螺旋状，会增加理解成本
- 涉及多模块交互时采用模块图
- 单模块多线程可考虑
fork {stuff} fork again {stuff} end fork语法 - 多模块多角色可考虑泳道图/时序图
