目錄

一 說明

二 源碼地址以及下載

三 開發環境搭建

1. 前端工程地址

2. 配置開發環境

（1）安裝 node.js?

（2）安裝 serve?服務器

3. 運行

四 最后? ? ?

---

一 說明

? ? ? ? 應公司項目要求，需要對draw.io進行二次開發，并將html界面通過iframe 嵌入到本公司產品中使用，但是由于功能限制，做到最后還是放棄了使用draw.io。但是之前的研究內容可不能浪費。便準備寫個專欄進行記錄，希望能夠幫到需要將draw.io進行二次開發的朋友，其中有涉及到不正確的地方還請大家多包涵！

二 源碼地址以及下載

? ? ? ? 網頁版在線使用地址：體驗和使用地址（https://app.diagrams.net/）

? ? ? ? draw.io源碼地址：git 下載地址（https://github.com/jgraph/drawio）

? ? ? ? 在界面可以看到，當前最新版本為：v24.3.1（我做開發的時候版本為23.1.5，版本更新的還是挺快的），點擊進去并下載，然后拿出來放到自己的地方進行解壓，準備開發使用。

三 開發環境搭建

1. 前端工程地址

? ? ? ? 打開文件夾可以看到，main里面包含三個文件夾，但是前端代碼在：src\main\webapp 中，Java文件夾用處不大（因為我們要求數據保存到本地，所以Java這邊沒有用到）。

2. 配置開發環境

（1）安裝 node.js?

????????作為前端開發，node.js 肯定是已經安裝好了的，就不多說，如果沒有安裝，網上有很多安裝教程，看著安裝了即可。

（2）安裝 serve?服務器

? ? ? ? 為了將draw.io運行起來，我使用了serve 服務器。這樣就不用去修改package.json 文件了。

? ? ? ? 安裝很簡單，使用npm命令即可：npm install -g serve

3. 運行

? ? ? ? ? 在ide中（我是webstorm）進入到webapp文件夾下面，運行：serve 命令，成果后會有鏈接。如下圖（我的serve版本有點低了，再提示最新版本，可以忽略）所示，就成功了，點擊下面的鏈接，就會進入到draw.io的主界面。

四 最后? ? ?

? ? ? ? 通過上面的步驟，就再本地通過代碼運行起來了draw.io網頁版。下一篇文章將進行draw.io的二次開發流程。