快捷導(dǎo)航

Draw.io部署詳細(xì)步驟

更新時(shí)間：2023年10月07日 10:26:16 作者：Ning-

Draw.io 是 GitHub 上的一個(gè)開源的免費(fèi)流程圖繪制工具,功能非常的豐富,Draw.io 是開源的,所以針對(duì)外網(wǎng)訪問不穩(wěn)定或在訪問不了外網(wǎng)的情況,我們可以將其部署到我們本地,也就是把本地當(dāng)作服務(wù)端,本文將一步一步介紹具體部署步驟,感興趣的朋友一起看看吧

Draw.io 是 GitHub 上的一個(gè)開源的免費(fèi)流程圖繪制工具，功能非常的豐富，使用上和ProcessOn基本上是一致的，但是ProcessOn是收費(fèi)的。 Draw.io 也有在線網(wǎng)頁(yè)版，可以直接訪問（https://www.draw.io/）進(jìn)行使用。也有桌面版，桌面版下載地址：https://github.com/jgraph/drawio-desktop/releases。不管是桌面版還是在線網(wǎng)頁(yè)版都是需要聯(lián)網(wǎng)使用的，這就導(dǎo)致了在外網(wǎng)訪問不穩(wěn)定或在無(wú)法訪問外網(wǎng)的情況下久沒有辦法使用。好在 Draw.io 是開源的，所以針對(duì)外網(wǎng)訪問不穩(wěn)定或在訪問不了外網(wǎng)的情況，我們可以將其部署到我們本地，也就是把本地當(dāng)作服務(wù)端。本文將一步一步介紹具體部署步驟。

1. 下載

下載 Draw.io ，下載地址：https://github.com/jgraph/drawio/releases， Draw.io 是Java開發(fā)的，所以可以直接下載編譯好的 draw.war 包，省去編譯步驟。

War 包需要部署到 Tomcat 下才能訪問，所以還需下載 Tomcat，地址：http://www.apache.org/dist/tomcat/tomcat-8/，建議使用 Tomcat8，經(jīng)測(cè)試使用 Tomcat8 是可以的。

2. 部署

然后在 Tomcat/bin 目錄，執(zhí)行 startup.bat 啟動(dòng) Tomcat。當(dāng)控制臺(tái)出現(xiàn) Server startup in xxx ms 時(shí)表示 Tomcat 啟動(dòng)好了：

最后打開瀏覽器訪問：http://127.0.0.1:8080/draw，顯示如下頁(yè)面就表示 Draw 部署好了。

3. 配置

如上只是把 Draw 啟起來(lái)了，查看 Chrome 請(qǐng)求的資源會(huì)發(fā)現(xiàn)請(qǐng)求了一些外部的資源，所以還不是真正的離線版。

要做到真正的離線版很簡(jiǎn)單，Draw 已經(jīng)提供了相關(guān)參數(shù)配置，在訪問的 URL 中加上 offline=1：http://127.0.0.1:8080/draw?offline=1即可實(shí)現(xiàn)真正的離線版：

但部署好的離線版一般是要給別人用的，可能還會(huì)綁定到域名，所以如果每次都都要在 URL 后加參數(shù)會(huì)比較麻煩。

解決辦法就是找到首頁(yè) index.html 代碼，

在 urlParams 函數(shù)內(nèi)，加上 result[‘offline’] = ‘1’ 即可：

Draw 還支持其它參數(shù)，如是否支持保存到本地或?yàn)g覽器等。具體參數(shù)配置項(xiàng)含義可參考：https://desk.draw.io/support/solutions/articles/16000042546-what-url-parameters-are-supported。

3. 問題

頁(yè)面報(bào)錯(cuò)顯示：

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)

這個(gè)警告的原因是你的瀏覽器插件造成的。