Draw.io使用指南

发表于 更新于 本文字数： 700 阅读时长 ≈ 1 分钟
本文是作者对Draw.io使用指南的介绍，包括Draw.io使用指南的优势、实现细节、相关资料等，这些步骤可以帮助作者提高Draw.io使用指南的效率。

工作中，工时超过三天的功能开发需要技术评审，因此画图能力就是刚需了。

我司内部鼓励的是使用draw.io绘图，在使用中也越来越觉得这工具太棒了。因此关于使用，这里Mark下基本的说明。

https://www.drawio.com/assets/img/blog/connector-flow-animation.svg

平台

Draw.io是免费的，同时跨平台支持。

  • Web

  • App

    采用的Electron，因此支持各OS。

开源？

  • Draw.io是开源项目，可以商业化/二次开发。同时Draw.io采用的是Apache2协议还是比较宽松的。

  • 我司内部使用的是Draw.io集成Confluence之类的，方便Wiki直接创建绘图。

项目地址戳这里

使用

具体使用的话，推荐去看官方视频教程即可。这里只说一些小技巧

  1. 注意热键的使用。

    Draw.io也有一套比较表意的快捷键，推荐刻意练习下，这样绘图起来效率更高。

    https://drawio-app.com/tutorials/shortcuts/

  2. Draw.io支持连线开启动画，正如文章一开始的图片一样，看起来很酷吧。

  3. 支持跨线设置，这样线条相交也可以看着很清晰。

  4. 善用左侧的搜索功能。

  5. 导出的话，如果是希望保留连线动画，可以选择SVG，之后再转GIF即可。

  6. 在创建图时，善用模版，个人用的较少，但通过模版是个很好的学习方式。

等等，使用技巧很多，这里就不一一说明了。

学习渠道

那如何学习下使用技巧呢，推荐以下频道可以学习。

QuickView支持？

不支持，因此如果想本地可以预览，有以下2个方式

  1. VSC/JB之类的IDE安装插件进行打开
  2. 本地Draw.io App打开
  3. 直接导出为图片打开

写在最后

Draw.io是个免费且优秀的绘图软件，推荐大家试试看。