流程图绘制工具 Draw.io 离线版部署教程

Draw.io 是 GitHub 上一个开源的流程图绘制工具,功能丰富,而且免费(不是免费试用的那种“免费”哦!)。

它不仅有在线网页版,直接访问(https://www.draw.io/)就可使用,还有桌面版。桌面版下载地址:https://github.com/jgraph/drawio-desktop/releases

由于 Draw.io 是开源的,所以针对 外网访问不稳定或在公司内网访问不了在线版 的情况,我们可以将其网页版自己部署一套离线版。本文章将一步一步介绍具体部署步骤。

下载

下载 Draw,地址:https://github.com/jgraph/drawio/releases,Draw.io 是 Java 开发的,所以可以直接下载编译好的 draw.war 包,省去编译步骤。

1578470785749

War 包需要部署到 Tomcat 下才能访问,所以还需下载 Tomcat,地址:http://www.apache.org/dist/tomcat/tomcat-8/,建议使用 Tomcat8,经测试使用 Tomcat8 是可以的。

部署

1578470673805

然后在 Tomcat/bin 目录,执行 startup.bat 启动 Tomcat。当控制台出现 Server startup in xxx ms 时表示 Tomcat 启动好了:

1578471077904

最后打开浏览器访问:http://127.0.0.1:8080/draw,显示如下页面就表示 Draw 部署好了。

1578471307514

配置

如上只是把 Draw 启起来了,查看 Chrome 请求的资源会发现请求了一些外部的资源,所以还不是真正的离线版。

1578471590827

要做到真正的离线版很简单,Draw 已经提供了相关参数配置,在访问的 URL 中加上 offline=1:http://127.0.0.1:8080/draw?offline=1即可实现真正的离线版:

1578471776417

但部署好的离线版一般是要给别人用的,可能还会绑定到域名,所以如果每次都都要在 URL 后加参数会比较麻烦。

解决办法就是找到首页 index.html 代码,

1578472062490

在 urlParams 函数内,加上 result['offline'] = '1' 即可:

1578472227037

Draw 还支持其它参数,如是否支持保存到本地或浏览器等。具体参数配置项含义可参考:https://desk.draw.io/support/solutions/articles/16000042546-what-url-parameters-are-supported

总结

按如上步骤就把 Draw.io 部署到自己电脑上了,以后不管有没有网都可自由的使用,也可以共享给内网里的其他人。

这里讲的是 Windows 环境下操作,因为 Java 是跨平台的,所以在 Linux 环境下部署也基本一样。