draw.io- 取代 visio 的流程图绘制工具

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 嵌入式开发技术分享』,后台回复“微信”添加作者微信,便可邀请进入技术交流群。

版权声明: 本文为 InfoQ 作者【Rice嵌入式开发技术分享】的原创文章。
原文链接:【http://xie.infoq.cn/article/b273222f281ecc3cffb943136】。
本文遵守【CC-BY 4.0】协议,转载请保留原文出处及本版权声明。
评论