利器 之 PlantUML

Posted 2021-04-17 吴小龙同学

君子生非异也，善假于物也。

我的刚需

最近把背光调节的源码梳理了一遍，到了要画个时序图，Visio 是个不错的选择，拖拖挺方便，但我不想用了，修改起来比较麻烦，我需要一劳永逸，就像 Markdown 这样的利器，文本书写，写完一篇文章，全平台通用。

Mermaid

我本身知道 Markdown 是支持时序图的，那就是 Mermaid，Mermaid 可用于画流程图、状态图、时序图、甘特图，使用 JS 进行本地渲染，广泛集成于许多 Markdown 编辑器中。

sequenceDiagram
title: 序列图sequence(示例)
participant A
participant B
participant C

note left of A: A左侧说明
note over B: 覆盖B的说明
note right of C: C右侧说明

A->>A:自己到自己
A-->A:自己到自己
A->>B:实线带箭头
A->C:实线不带箭头
C-->>B:虚线带箭头
B-->A:虚线不带箭头
A-xB:实线箭头带叉
B--xC:虚线箭头带叉

在了解 Mermaid 时序图语法，跟着示例画出了个时序图后，惊叹牛逼，我以为有了大利器，当我实际去画图，涉及类很多，Mermaid 暴露了缺点，显示出的时序图是模糊的，因此本篇不打算花大篇幅介绍 Mermaid 了，大家知道 Mermaid 可以画简单的时序图这点就够了。

PlantUML

我的刚需还没有解决，需要继续寻找利器，就不得不试试 PlantUML，我本身也是知道 PlantUML，因为 PlantUML 配置复杂以及其语法看起来也比较复杂，因此一直没有去学习 PlantUML，好吧，遇到困难真的不能选择回避，它一定会在某个时候再找回来的。

安装

下载 VSCode

https://code.visualstudio.com/Download

下载 Graphviz

可选的，建议安装，如果想绘制除时序图和活动图以外的图，就需要安装 Graphviz 软件。

• Ubuntu

sudo apt-get install graphviz

• Windows

  http://www.graphviz.org/download/

• Mac

  https://mac.filehorse.com/download-graphviz/

VSCode 安装插件

• PlantUML

• Markdown Preview Enhanced

时序图预览

@startuml
title: 序列图sequence(示例)
participant A
participant B
participant C
participant D
participant E

note left of A: A左侧说明
note over D: 覆盖D的说明
note right of F: F右侧说明

A ->x B: 丢失的消息
B -> C: 实线箭头
C ->> D: 实线细箭头
D - E: 实线半箭头
E -\ F: 实线半箭头
F --/ E: 虚线半箭头
E -->o D: 虚线箭头加圈
D --o C: 虚线半箭头加圈
C <--> B: 实线双向箭头
A --> A: 自己到自己
@enduml

是不是语法和 Mermaid 有点像啊，所以说 PlantUML 语法也没那么难。

PlantUML 官网：https://plantuml.com ，有详细的语法文档，先都过一遍，用到时可以去查下。

最后

其实 android Studio 也可以安装 PlantUML，当我装了，准备 Markdown 写文章时，发现 Android Studio 只能画图，没有满足我的刚需，最后才采用 VSCode + Graphviz + PlantUML + Markdown Preview Enhanced，效果也是杠杠的。

PlantUML 除了能画时序图，还能画用例图、类图、活动图、组件图、状态图、对象图、部署图等，功能实在太强大了，后面有需要，再一一介绍。

---