如果我是前端，如果我不会画 UML 图，你还会爱我吗？

这就是个伪标题，管你是什么端都给我学！不会真的有人不会画 UML 图吧？诶，巧了，写这篇文章的人就不会，不过写完他应该就会了。

回想起上次画 UML 图的时候，还是上次，学生时代。为了应付软件工程考试下了狠手，“刻苦”学习一小时，终于在第二天顺利通过考试，终于在第三天忘得一干二净。如今做了搬砖仔，每天都能在各路大佬的文档看到时它的身影，真牛。虽说看得懂，可咱不会画鸭，书到用时方恨少。终于，咱装不下去，不能让人家看了笑话，咱得学！学习，学个屁！真香！

PlantUML

工欲善其事，必先利其器。

用软件拖拖拽拽画个图多 LOW 啊，这图就得用“文化人”的方式去画。PlantUML 就是一套类似 MarkDown 的脚本语言，写几行代码就能生成规范又漂亮的 UML 图。

PlantUML 本身只是一套脚本语言，需要配合 Graphviz 绘制图片，而 Graphviz 又跑在 Java 环境。下面记个流水账，论如何在 Mac 和 VSCode 平台下配置 PlantUML。

1. 安装 Java 环境

Mac 下配置 Java 环境很简单，在官网下载 dmg 包一步步安装即可。

Java

2. 安装 Graphviz

Mac 下安装 Graphviz 更简单，直接用 Homebrew 安装即可：

$ brew install graphviz

3. 安装 VSCode 插件

首先你得先安装 VSCode 牌记事本，然后在 VSCode 中安装 PlantUML 和 Graphviz Preview 这两个插件。

PlantUML

Graphviz Preview

4. 渲染 UML

重启 VSCode，新建文档，输入以下测试代码：

@startuml
  ClassA <-- ClassB:关联
  ClassA <.. ClassB : 依赖
  ClassA o-- ClassB:聚集
  ClassA <|-- ClassB:泛化
  ClassA <|.. ClassB:实现
@enduml

按下 option + D 键即可生成预览 UML 状态图。如果提示报错请确认前置步骤，其他平台的配置方式大同小异。

UML

tips: 右键点击图片可以复制到剪切板

语雀

还得是语雀啊，自带示例不怕忘了语法，真香！

语雀

UML

时序图

未完待续……