Draw.io部署教程 - Ning- - 博客园 - 程序猿·D·安宇雨 DeepMind

Draw.io部署教程 - Ning- - 博客园

安宇雨 - 随手采集
2025-07-15 13:09:08
随手采集
0000-未整理-等待研究

Draw.io是GitHub上的一个开源的免费流程图绘制工具，功能非常的丰富，使用上和ProcessOn基本上是一致的，但是ProcessOn是收费的。 Draw.io也有在线网页版，可以直接访问（https://www.draw.io/）进行使用。也有桌面版，桌面版下载地址：https://github.com/jgraph/drawio-desktop/releases。不管是桌面版还是在线网页版都是需要联网使用的，这就导致了在外网访问不稳定或在无法访问外网的情况下久没有办法使用。好在Draw.io是开源的，所以针对外网访问不稳定或在访问不了外网的情况，我们可以将其部署到我们本地，也就是把本地当作服务端。本文将一步一步介绍具体部署步骤。

1. 下载

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

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

2. 部署

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

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

3. 配置

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

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

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

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

在 urlParams 函数内，加上 result[‘offline’] = ‘1’ 即可：

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

3. 问题

页面报错显示：

Error: Failed to load js/extensions.min.js at http://xx.xxx.xxx.xxx:81/draw/js/app.min.js:12768:169 at s.onerror (http://xx.xxx.xxx.xxx:81/draw/?offline=1:182:7)

这个警告的原因是你的浏览器插件造成的。