draw.io 简介
它是一个 web 端的流程图绘制工具,不需要进行安装,只需要打开它的网站 http://draw.io 就可以了。而且界面简洁清晰,最重要的是免费的,visio 不是免费的。还有其他很多好处,它跨平台,还提供了 Chrome 插件和 VScode 插件,而且支持多语言,很友好。这么多好处,那必须搞起来啊。作者已经完成从 visio 转移到 draw.io。下来我们一一品尝。

draw.io 的应用说明
打开网页(http://draw.io),它可以导入已有的工程,或新建工程。

可以选择不同形式的流程框图,基本和 visio 一致

左边是框图选择,右上角是语言选择,右边是样式编辑

这个工具可以支持不同格式的输出文件。这一点非常友好

绘制图表操作基本跟 Visio 一致,你不需要从新学习

保存的方式也提供了很多种,本地/远端都支持

如下,这是保存为 png 的格式效果

Chrome 插件
在谷歌浏览器中的插件市场搜索‘drawDesktop’,点击安装。浏览器的右上角就可以查看你的插件

VScode 插件
在VScode中查找组件drawio安装

创建文件后缀为.drawio或.svg,然后自动弹出跳出画原理图的界面。界面跟网页版的一样。

但是目前vscode的有些功能没有,在vscode的简介说明中提到,在vscode的新版本会更新。期待更新,这样就更加方便。

关注微信公众号『Rice嵌入式开发技术分享』,后台回复“微信”添加作者微信,便可邀请进入技术交流群。