文章目錄

• • • 靜態訪問
    • 修改靜態文件源
    • 解決無用提示
    • 將幫助中的搜索改為百度搜索
    • 從url打開文件》重點
    • 發布預覽
    • 自定義存儲和打開方式

draw.io是一個很好的作圖工具，完全免費開源。
遵守Apache-2.0 License開源協議，
倉庫地址：https://github.com/jgraph/drawio
官網演示地址：https://app.diagrams.net/
這里記錄一下改造過程

靜態訪問

使用nginx直接映射到webapps目錄下

server {listen 893;location / {alias D:\study\drawio\src\main\webapp/;} }

然后訪問地址http://localhost:893即可打開
在地址欄后面增加?dev=1可以打開調試模式，打開調試模式后頁面不能顯示是因為靜態資源文件從drawio官方地址下載，需要做一些改動

修改靜態文件源

根據地址欄請求，可知有些js文件是從devhost.jgraph.com這個地址請求的，因此在源碼中全局搜索，看到index.html和teams.html文件中有相關地址聲明

// Used to request grapheditor/mxgraph sources in dev mode var mxDevUrl = document.location.protocol + '//devhost.jgraph.com/drawio/src/main'; // Used to request draw.io sources in dev mode var drawDevUrl = document.location.protocol + '//devhost.jgraph.com/drawio/src/main/webapp/'; var geBasePath = drawDevUrl + '/js/grapheditor'; var mxBasePath = mxDevUrl + '/mxgraph';

而相關請求文件在目錄webapps下都有，因此改造如下

var drawDevUrl = ''; var mxDevUrl = '';

解決無用提示

此時已經可以訪問，但是打開頁面時會提示“[Dev] Bootstrap script change requires update of CSP”，這個不影響使用，不過還是要解決掉它。搜索這句提示文字，可以看到在D:\study\drawio\src\main\webapp\js\diagramly目錄下有App.js和app.min.js兩個文件，這里在開發模式下，我們只需要看未壓縮的App.js文件，注釋掉下面一段代碼

if (scripts != null && scripts.length > 0) {var content = mxUtils.getTextContent(scripts[0]);if (CryptoJS.MD5(content).toString() != 'b02227617087e21bd49f2faa15164112'){console.log('Change bootstrap script MD5 in the previous line:', CryptoJS.MD5(content).toString());alert('[Dev] Bootstrap script change requires update of CSP');} }

將幫助中的搜索改為百度搜索

// this.editorUi.openLink('https://www.diagrams.net/search?src=' + // EditorUi.isElectronApp? 'DESKTOP' : encodeURIComponent(location.host) + // '&search=' + encodeURIComponent(term)); this.editorUi.openLink('https://www.baidu.com/s?ie=UTF-8&wd=' + encodeURIComponent(term));

從url打開文件》重點

drawio自帶的打開中就有從url中打開，但是用這種文件卻總是打不開，分析代碼了很久，回過頭發現新打開的地址自動變成了https，導致我的http服務無法使用
更改方式就是把新窗口開頭的https改為http，全路徑是
http://172.16.201.206:893/#Uhttp://172.16.201.206:893/z/1.drawio
其實就是在頁面后增加了個這#Uhttp://172.16.201.206:893/z/1.drawio

調通這個之后，想要在自己系統中嵌入就很好實現了

發布預覽

默認的發布預覽是跳轉到了一個這樣的地址
https://viewer.diagrams.net/?tags=%7B%7D&highlight=0000ff&edit=_blank&layers=1&nav=1#R……
如果直接把前面的地址改成自己的部署地址，也是不能訪問的。
經分析，這里是通過插件的方式實現的，于是
這里實際上是需要顯式加載插件，把前面的那一段替換為http://172.16.201.206:893/?chrome=0&p=ex，即修改為
http://172.16.201.206:893/?chrome=0&p=ex&tags=%7B%7D&highlight=0000ff&edit=_blank&layers=1&nav=1#R……
這樣可以達到預覽的效果

插件描述文檔頁面位于：https://www.diagrams.net/doc/faq/plugins

另外，如果覺得這個地址太長，可以參照前面編輯頁面中的傳參方式，把#R……換成#U地址，
全路徑為：http://172.16.201.206:893/?chrome=0&p=ex&tags=%7B%7D&highlight=0000ff&edit=_blank&layers=1&nav=1#Uhttp://172.16.201.206:893/z/1.drawio
就是用#R攜帶文件內容，#U攜帶文件路徑

自定義存儲和打開方式

以Drive和Dropbox為例分析，在diagramly下分別包含以下文件，這些文件要在app.js文件中使用

• Drive

src\main\webapp\js\diagramly\DriveClient.js src\main\webapp\js\diagramly\DriveComment.js src\main\webapp\js\diagramly\DriveFile.js src\main\webapp\js\diagramly\DriveLibrary.js

• Dropbox

src\main\webapp\js\diagramly\DropboxClient.js src\main\webapp\js\diagramly\DropboxFile.js src\main\webapp\js\diagramly\DropboxLibrary.js

在此基礎上進行自己存儲邏輯的開發
ZnClient主要是與gitee服務端的交互，創建，獲取，更新文件等操作。
ZnFile是提交的文件格式，每個類型對應一個文件格式，分別對應各自的屬性。
ZnLibrary是自定義的庫，暫時用不到。

總結

以上是生活随笔為你收集整理的draw.io二次开发改造过程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。