阅读 400

利器 之 PlantUML

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

我的刚需

最近把背光调节的源码梳理了一遍,到了要画个时序图,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

code.visualstudio.com/Download

下载 Graphviz

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

  • Ubuntu
sudo apt-get install 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 官网:plantuml.com ,有详细的语法文档,先都过一遍,用到时可以去查下。

最后

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

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

更多文章请关注公号:吴小龙同学

关注下面的标签,发现更多相似文章
评论