節省你生命的一個小技術No.193

可視化工具是大多數人畫圖的選擇typescript

目前來講，只要是寫原創比較多的小夥伴，你們寫文章都會使用 markdown。可是一談到畫流程圖架構圖類圖什麼的，你們都會使用 staruml，drawio，ProcessOn 這類工具，我也一直用這些工具在進行一些流程的梳理減小與相關同窗的溝通成本，也做爲一個可視化的文檔沉澱下來。惋惜，存在一些問題實在是浪費我太多太多生命。markdown

框框對不齊是效率最低下的核心緣由架構

有沒有經歷過這種場景，就是圖所有都拖拉上去完事了，剛剛準備保存。發現整個圖都七歪八倒的，而後就開始調整，選中框A框B框C，嗯左對齊，頂部對齊，而後發現EDF跟ABC對不齊了，兩個框的鏈接線也飄了，越調整越崩潰，爲了達到比較好的效果，花費了90%的精力在調整這些線框的位置。ide

架構變動對圖的傷害最大是次要緣由工具

咱們好不容易畫好了一版，結果老闆說了一句，A這個地方加這個不太合理啊，應該是在B那裏加這個，完蛋了，有架構變動了。從A變到B卻是好變，拖一下就行了，而後你就會發現，全部跟A和B相關的線和框都須要換位置，甚至本來已經對齊的版本也再也不好使了，繼續重頭來一遍對齊。佈局

兩個字，崩潰。學習

我認爲更好的工具-PlantUMLspa

上面這些拖拽的都會遇到我說的問題，這些工具我也都用過，對於入門不願學習的或者就是臨時畫一張圖的同窗都很適合。對於咱們這種一天要畫三張圖以上的，不太合理，太浪費時間了。插件

怎麼破呢？我在偶然的機會裏瞭解到了 PlantUML。我給大家演示一下。3d

@startuml
小紅 -> 小蕉: 拍一拍
小蕉 -> 小蕉 : 摸了摸本身的腹肌
小蕉 --> 小紅: 反手給了一拳並甩了一臉
@enduml

你看，這樣就定義好了一個流程圖，只須要用箭頭來表示就行了，不管是正向逆向仍是什麼調用方式，都能很是很是方便。

若是有流程調整，你只須要ctrl c + ctrl v 就解決了，不須要本身一直去調整這些圖，並且你會發現一個很是很是很是關鍵的點，若是你沒有特殊的定義，這個圖他會調整本身的佈局，不須要本身調整，還挺好看。

@startuml
小紅 -> 小蕉: 拍一拍
小蕉 --> 小紅: 反手給了一拳並甩了一臉
小蕉 -> 小蕉 : 摸了摸本身的腹肌
@enduml

若是你想要加上調用的順序號，只須要加上 autonumber 就行了。

@startuml
autonumber
小紅 -> 小蕉: 拍一拍
小蕉 --> 小紅: 反手給了一拳並甩了一臉
小蕉 -> 小蕉 : 摸了摸本身的腹肌
@enduml

若是想加上標題，加上" title 用戶流程圖  "就行了。

@startuml
title 大蕉蕉的打架圖
autonumber
小紅 -> 小蕉: 拍一拍
小蕉 --> 小紅: 反手給了一拳並甩了一臉
小蕉 -> 小蕉 : 摸了摸本身的腹肌
@enduml

結語

不知道大家感受如何，我反正挺喜歡，節省了我很是很是多的時間，我很喜歡，也但願能節省大家的生命，用這些省下來的時間去作更多有意義的事情。詳細用法直接去 PlantUml 官網找，插件IDEA裏搜索 PlantUml 插件，複雜圖的可視化庫直接裝 brew install graphviz

以上，配圖是天秤寶寶的天秤叮噹貓，喜歡嗎。最近也比較忙，一直在很努力處理一些事情，工做的事情也很忙，本身的事情也很忙，期待往更好的方向去走，因此相對仍是比較充實，嘿嘿嘿，但願大家也好好珍惜每一分鐘。簡單~就醬