draw.io 简介
它是一个 web 端的流程图绘制工具,不需要进行安装,只需要打开它的网站 http://draw.io 就可以了。而且界面简洁清晰,最重要的是免费的,visio 不是免费的。还有其他很多好处,它跨平台,还提供了 Chrome 插件和 VScode 插件,而且支持多语言,很友好。这么多好处,那必须搞起来啊。作者已经完成从 visio 转移到 draw.io。下来我们一一品尝。
![](https://rice_chen_1.gitee.io/picture/draw.io/1_.png)
draw.io 的应用说明
-
打开网页(http://draw.io),它可以导入已有的工程,或新建工程。
![](https://rice_chen_1.gitee.io/picture/draw.io/2_.png)
-
可以选择不同形式的流程框图,基本和 visio 一致
![](https://rice_chen_1.gitee.io/picture/draw.io/3_.png)
-
左边是框图选择,右上角是语言选择,右边是样式编辑
![](https://rice_chen_1.gitee.io/picture/draw.io/4_.png)
-
这个工具可以支持不同格式的输出文件。这一点非常友好
![](https://rice_chen_1.gitee.io/picture/draw.io/5_.png)
-
绘制图表操作基本跟 Visio 一致,你不需要从新学习
![](https://rice_chen_1.gitee.io/picture/draw.io/6_.png)
-
保存的方式也提供了很多种,本地/远端都支持
![](https://rice_chen_1.gitee.io/picture/draw.io/7_.png)
-
如下,这是保存为 png 的格式效果
![](https://rice_chen_1.gitee.io/picture/draw.io/8_.png)
Chrome 插件
-
在谷歌浏览器中的插件市场搜索‘drawDesktop’,点击安装。浏览器的右上角就可以查看你的插件
![](https://rice_chen_1.gitee.io/picture/draw.io/9_.png)
VScode 插件
-
在VScode中查找组件drawio安装
![](https://rice_chen_1.gitee.io/picture/draw.io/10_.png)
-
创建文件后缀为.drawio或.svg,然后自动弹出跳出画原理图的界面。界面跟网页版的一样。
![](https://rice_chen_1.gitee.io/picture/draw.io/11_.png)
-
但是目前vscode的有些功能没有,在vscode的简介说明中提到,在vscode的新版本会更新。期待更新,这样就更加方便。
![](https://rice_chen_1.gitee.io/picture/draw.io/12_.png)
关注微信公众号『Rice嵌入式开发技术分享』,后台回复“微信”添加作者微信,便可邀请进入技术交流群。