节省你生命的一个小技术No.193

可视化工具是大多数人画图的选择

目前来说，只要是写原创比较多的小伙伴，大家写文章都会使用 markdown。但是一谈到画流程图架构图类图什么的，大家都会使用 staruml，drawio，ProcessOn 这类工具，我也一直用这些工具在进行一些流程的梳理减少与相关同学的沟通成本，也作为一个可视化的文档沉淀下来。可惜，存在一些问题实在是浪费我太多太多生命。

框框对不齐是效率最低下的核心原因

有没有经历过这种场景，就是图全部都拖拉上去完事了，刚刚准备保存。发现整个图都七歪八倒的，然后就开始调整，选中框A框B框C，嗯左对齐，顶部对齐，然后发现EDF跟ABC对不齐了，两个框的连接线也飘了，越调整越崩溃，为了达到比较好的效果，花费了90%的精力在调整这些线框的位置。

架构变更对图的伤害最大是次要原因

我们好不容易画好了一版，结果老板说了一句，A这个地方加这个不太合理啊，应该是在B那里加这个，完蛋了，有架构变更了。从A变到B倒是好变，拖一下就好了，然后你就会发现，所有跟A和B相关的线和框都需要换位置，甚至原本已经对齐的版本也不再好使了，继续重头来一遍对齐。

两个字，崩溃。

我认为更好的工具-PlantUML

上面这些拖拽的都会遇到我说的问题，这些工具我也都用过，对于入门不肯学习的或者就是临时画一张图的同学都很适合。对于我们这种一天要画三张图以上的，不太合理，太浪费时间了。

怎么破呢？我在偶然的机会里了解到了 PlantUML。我给你们演示一下。

@startuml
小红 -> 小蕉: 拍一拍
小蕉 -> 小蕉 : 摸了摸自己的腹肌
小蕉 --> 小红: 反手给了一拳并甩了一脸
@enduml

你看，这样就定义好了一个流程图，只需要用箭头来表示就好了，无论是正向逆向还是什么调用方式，都能非常非常方便。

如果有流程调整，你只需要ctrl c + ctrl v 就解决了，不需要自己一直去调整这些图，而且你会发现一个非常非常非常关键的点，如果你没有特殊的定义，这个图他会调整自己的布局，不需要自己调整，还挺好看。

@startuml
小红 -> 小蕉: 拍一拍
小蕉 --> 小红: 反手给了一拳并甩了一脸
小蕉 -> 小蕉 : 摸了摸自己的腹肌
@enduml

如果你想要加上调用的顺序号，只需要加上 autonumber 就好了。

@startuml
autonumber
小红 -> 小蕉: 拍一拍
小蕉 --> 小红: 反手给了一拳并甩了一脸
小蕉 -> 小蕉 : 摸了摸自己的腹肌
@enduml

如果想加上标题，加上" title 用户流程图 "就好了。

@startuml
title 大蕉蕉的打架图
autonumber
小红 -> 小蕉: 拍一拍
小蕉 --> 小红: 反手给了一拳并甩了一脸
小蕉 -> 小蕉 : 摸了摸自己的腹肌
@enduml

结语

不知道你们感觉如何，我反正挺喜欢，节省了我非常非常多的时间，我很喜欢，也希望能节省你们的生命，用这些省下来的时间去做更多有意义的事情。详细用法直接去 PlantUml 官网找，插件IDEA里搜索 PlantUml 插件，复杂图的可视化库直接装 brew install graphviz

以上，配图是天秤宝宝的天秤叮当猫，喜欢吗。最近也比较忙，一直在很努力处理一些事情，工作的事情也很忙，自己的事情也很忙，期待往更好的方向去走，所以相对还是比较充实，嘿嘿嘿，希望你们也好好珍惜每一分钟。简单~就酱