不会真的有人不会画 UML 图吧

如果我是前端,如果我不会画 UML 图,你还会爱我吗?

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

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

PlantUML

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

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

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

  1. 安装 Java 环境

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

Java

  1. 安装 Graphviz

Mac 下安装 Graphviz 更简单,直接用 Homebrew 安装即可:

$ brew install graphviz
  1. 安装 VSCode 插件

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

PlantUML

Graphviz Preview

  1. 渲染 UML

重启 VSCode,新建文档,输入以下测试代码:

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

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

UML

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

UML

时序图

查看评论