寫文檔或者blog，遇到畫圖實(shí)在是花時(shí)間，通常我都是用draw.io來畫流程圖，draw.io已經(jīng)類似visio了，但是有時(shí)候拖拉起來也挺麻煩，所以想到找個(gè)工具用代碼生成流程圖。網(wǎng)上實(shí)際上工具蠻多的，typora就可以自帶流程圖，但是不是那么強(qiáng)大，也不如PlantUML專業(yè)，另一方面就是github不支持?jǐn)U展的markdown語法。
所以我的做法就是用plantuml+vscode來解決畫流程圖的問題。
準(zhǔn)備工作
1.PlantUML解析server
PlantUML的源文件支持*.wsd, *.pu, *.puml, *.plantuml, *.iuml. 但是我們需要搭建一個(gè)server用來解析內(nèi)容。
最簡單的做法肯定使用docker咯，直接執(zhí)行以下命令來創(chuàng)建一個(gè)PlantUML：
docker run -d -p 8080:8080 plantuml/plantuml-server:jetty
等待image下完，就可以訪問http://localhost:8080啦，你就可以在該網(wǎng)址上編輯自己的流程圖文件啦。
不過這樣你就體會不到快捷鍵以及文件管理的爽快了，這時(shí)就推薦使用vscode，并且裝上PlantUML的插件。
2.vscode+PlantUML插件
直接進(jìn)vscode的插件應(yīng)用，搜索PlantUML并且安裝，我們就可以在vscode里面愉快的使用PlantUML了。
簡單編輯一個(gè)wsd源文件：
"plantuml.server": "http://localhost:8080"
@startuml
participant User
User -> A: DoWork
activate A
A -> B: << createRequest >>
activate B
B -> C: DoWork
activate C
C --> B: WorkDone
destroy C
B --> A: RequestCreated
deactivate B
A -> User: Done
deactivate A
@enduml
恩，看看生成結(jié)果：
實(shí)際上流程圖很強(qiáng)大，可以參考官方手冊畫更多的流程圖。
總結(jié)
PlantUML+vscode可能比我描述得還要爽歪歪，另外由于通過代碼的方式，每個(gè)人的風(fēng)格和標(biāo)準(zhǔn)都會一樣，大家畫圖的時(shí)候也只用關(guān)心所要表達(dá)的邏輯。另外PlantUML實(shí)際上支持畫各種圖，在官網(wǎng)上大家可以看到相關(guān)的例子。
