画流程图利器PlantUML+vscode

写文档或者blog，遇到画图实在是花时间，通常我都是用draw.io来画流程图，draw.io已经类似visio了，但是有时候拖拉起来也挺麻烦，所以想到找个工具用代码生成流程图。网上实际上工具蛮多的，typora就可以自带流程图，但是不是那么强大，也不如PlantUML专业，另一方面就是github不支持扩展的markdown语法。

所以我的做法就是用plantuml+vscode来解决画流程图的问题。

准备工作

1.PlantUML解析server

PlantUML的源文件支持*.wsd, *.pu, *.puml, *.plantuml, *.iuml. 但是我们需要搭建一个server用来解析内容。

最简单的做法肯定使用docker咯，直接执行以下命令来创建一个PlantUML：

docker run -d -p 8080:8080 plantuml/plantuml-server:jetty

等待image下完，就可以访问http://localhost:8080啦，你就可以在该网址上编辑自己的流程图文件啦。

不过这样你就体会不到快捷键以及文件管理的爽快了，这时就推荐使用vscode，并且装上PlantUML的插件。

2.vscode+PlantUML插件

直接进vscode的插件应用，搜索PlantUML并且安装，我们就可以在vscode里面愉快的使用PlantUML了。

简单编辑一个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

恩，看看生成结果：

example.png

实际上流程图很强大，可以参考官方手册画更多的流程图。

总结

PlantUML+vscode可能比我描述得还要爽歪歪，另外由于通过代码的方式，每个人的风格和标准都会一样，大家画图的时候也只用关心所要表达的逻辑。另外PlantUML实际上支持画各种图，在官网上大家可以看到相关的例子。