作图可以说是程序员的必备技能,最近发现身边同学们主要还是在用 OmniGraffle、ProcessOn、draw.io 这类软件作图,用的过程中可以思考一下下面这些问题是否困扰了你:
鉴于上述困扰,忍不住要向大家安利一下 PlantUML,上述问题迎刃而解。
PlantUML 是一款开源的绘图工具,不,是绘图语言!所以它和 OmniGraffle 们并不是一个维度的东西。 PlantUML 优点多多:
具体语法没必要展开讲,和 markdown 一样简单,官网讲得非常清楚:https://plantuml.com
语雀对 PlantUML 有非常好的支持,两者搭配食用更佳,编辑模式插入“文本绘图”即可开始作图:
一直强调学习成本超低,因为语雀提供了大量现成模板,照葫芦画瓢即可:
至此,你就已经能在语雀上画 UML 图了,上手真的很快,而且再也不用担心下次要修改图片找不到源文件了,换个人一样能修改,而且语雀的加持还有修改记录。
但如果你对脱离语雀如何单独使用 PlantUML 感兴趣,请接着往下看。
如果有些站点没有支持 PlantUML 的渲染,那么需要先进行本地创作,再借助服务进行渲染,渲染后的图片链接可以随处使用,而创作的文本用 gitlab 之类的版本控制软件进行管理,便于团队成员共同维护图片的编辑。
.puml
PlantUML
: https://marketplace.visualstudio.com/items?itemName=jebbs.plantuml。开启预览的效果:对于java开发者,则更推荐使用IDEA的插件
PlantUml integration
,这款插件渲染图片的速度比vscode的插件更快,每次渲染时间都有显示(测试结果简单的图只要100ms就能渲染好),以前渲染过的图都有缓存立马能加载出来。功能也会更多。
.puml
文件推送到远端,便于大家共同维护源文件RAW
按钮以生成 raw 的链接,将 raw 链接借助 PlantUML proxy 渲染服务生成最终的图片地址,这个 url 就可以自由引用了。代理服务地址的填写样式: http://www.plantuml.com/plantuml/proxy?cache=no&src=xxx 方式一(借助官网服务渲染)示例:
- 源地址:<https://github.com/viper140/painting/blob/main/plantuml/usecase/bank-domain.puml>
- RAW地址:<https://raw.githubusercontent.com/viper140/painting/main/plantuml/usecase/bank-domain.puml>
- 代理后的地址:<http://www.plantuml.com/plantuml/proxy?cache=no&src=https://raw.githubusercontent.com/viper140/painting/main/plantuml/usecase/bank-domain.puml>
test.puml
自动生成图片test.png
当我跳出 PlantUML 的诸多优点,思考我追求的东西的本质是什么,其实就是用文本替代二进制文件,因为文本的可维护性强、易于团队协作、版本管理容易。
这里希望用 PlantUML 来描述设计图;再往早些看,尤其是研发人员喜欢用 markdown 来替代 word 甚至 excel 的最基础功能;再有,我个人会用 vscode 插件Markdown Preview Enhanced
来做 ppt https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced。这些精神是一脉相承的。