本文從使用角度入手，循序漸進的講述 DrawIO 是什麼，為什麼要基於 DrawIO 進行二次開發以及 DrawIO 二次開發的核心技術細節並抽象出瞭一套通用二開架構，因此文章內容較長，不同階段的讀者可以根據需求進行閱讀。本文整體結構如下：

1 - DrawIO 二次開發需求背景 （一入 DrawIO 深似海）

2 - DrawIO 是什麼以及使用方法簡介 （揭開 DrawIO 的神秘面紗）

3 - DrawIO 二次開發的準備階段 （山重水復疑無路，老淚縱橫的跑通 DrawIO 代碼）

4 - DrawIO 二次開發的技術細節 （柳暗花明又一村，掌握 DrawIO 核心二開代碼）

5 - DrawIO 二次開發架構詳解 （三省吾身，抽象出通用的 DrawIO 開發架構）

背景

對於繪制各種圖表，諸如流程圖、原型圖、拓撲圖、UML 圖以及思維導圖等等，你是不是還在用微軟功能龐大但必須下載客戶端同時體積也很龐大的 Visio？抑或是你還在用 ProcessOn 免費版，十張圖緊緊巴巴來回替換繪制，畫完這張圖下載下來刪除再重新畫另一張（當然如果你是氪金玩傢，那麼我隻能說，大佬開心就好～）？在上述諸多問題的背景之下有瞭這篇文章，看完過後希望不同讀者能夠得到相應收獲。

• 單純的使用人員，可以獲得一個簡單免費無限空間的高級繪圖工具。
• 進階的開發人員，可以為自己和團隊非常簡單快速的搭建一個免費無限空間且功能強大的繪圖工具。
• 高階的二開人員（瞭解並嘗試過 DrawIO 二開），可以掌握一種新的二次開發模式，逐漸成為捕魚達人。

扯得這麼高大上，弄的都有些不好意思瞭。重新闡述一下原因就是目前筆者在雲音樂主要負責的工作是提升研發線效率，某天產品和後端同學提出瞭一個需求，大體上意思就是團隊需要一個內部圖表工具，這個圖表工具能和現今公司工作流串聯起來完成流程閉環，因為目前的工作模式就是產品/研發用 ProcessOn 或者其他繪圖工具繪制圖表後，截圖/保存到本地然後再進行粘貼，因為 ProcessOn 有空間限制並且也不必所有人都開會員 ，因此還不如幹脆就內部搞一個瞭。

基於上述官方/非官方種種原因，筆者開始著手調研這個內部圖表系統的搭建，觀望一圈之後最終確認技術選型 —— 以 DrawIO 為基礎進行二次開發。

目前來說這個繪圖系統的基本功能（繪制/存取等）已經開發完成並內測使用中，並且筆者還為網站起瞭一個高端大氣上檔次的名字 —— Overmind-X Graph，一起來看看網站現階段效果：

DrawIO 簡介

既然是基於 DrawIO 進行二開，首先就來瞭解一下 DrawIO 到底是什麼，跟著筆者視角先去 DrawIO 官網去看一圈，官網首頁截圖如下所示：

簡要來說DrawIO 是一個支持繪制各種形式圖表並且支持多位置存儲能力的網站和工具。繪制圖表的功能就不多說瞭，這也是 DrawIO 自身的核心功能，這裡著重介紹一下 DrawIO 的多位置存儲能力，通過 DrawIO 繪制的圖表可以存在網絡上的很多地方，比如：瀏覽器緩存、本機文件夾、遠程存儲（Github、Gitlab 和 Google Drive 等）。存儲瀏覽器和本機文件夾很簡單不做介紹，這裡以 Github 為例簡單講解一下通過 DrawIO 繪制的圖表如何進行遠程存儲。

存儲 DrawIO 到 Github 倉庫

• 1 - 在 Github 新建一個倉庫

這裡筆者新建瞭一個名為 drawio-folder 的倉庫，裡面隻有一個 README.md 文件，如下圖所示：

ca994415115d585916908a1d8fb8c371

• 2 - 繪圖時選擇 GitHub 作為存儲空間

然後從官網點擊 Start 按鈕進入繪圖頁面，第一次進入頁面不出意外會出現一個如下圖所示選擇存儲空間的選項，然後選擇 Github（其他遠程存儲原理一樣）。

• 3 - 選擇對應的倉庫然後繪制圖片

點擊選擇存儲到 Github 倉庫，然後選擇新建一個圖表，命名之後點擊新建 Create 按鈕完成圖表的創建。

• 4 - 授權選取存儲倉庫

圖標創建成功後，會出現一個授權登錄的彈窗，授權登錄過後 DrawIO 就能獲取到賬戶下的所有倉庫信息，選擇剛才創建的 drawio-folder 倉庫，然後進行圖表的繪制。

143c38ba981c9135d4fd576cd4ffaedd

• 5 - 繪圖完畢保存文檔

繪制過程中，每一次的保存操作，都會創建一條 commit message，就相當於正常的倉庫修改並提交，如下圖所示：

c71cf6b5ce73e657eccb1cce774bfbfa

當一次圖表繪制完成並保存後，可以去 Github 倉庫看看是否存儲成功。

可以看到，剛才創建的圖表已經成功存儲到瞭 Github 倉庫，非常的便捷，基本上就等於你已經有瞭一個無限制的圖表雲盤一樣。

至此相信大傢應該已經瞭解瞭 DrawIO 如何繪圖以及它強大的存儲功能，在文章的開頭提到過，如果你是一個單純的使用者，那麼文章讀到這裡已經足夠瞭，你已經擁有瞭一個免費且強大的繪圖工具（不需要開通會員不需要註冊也沒有繪制數限制）以及很多類型的無限存儲空間，相比還要收費的 Some Apps 它不香嗎？

為什麼要進行 DrawIO 二開

既然 DrawIO 本身已經這麼香瞭，為啥還要進行二開呢？在這簡單總結幾點為什麼要進行二開或者可能需要進行二開的原因：

• 首先，對於一個團隊來說需要的不僅僅是一個純繪圖工具，而是一個包含繪圖功能的一體化管理平臺，繪圖隻是其中最核心的部分，其餘還有一些必不可少的功能。
• 其次，在一些特殊業務需求中，需要把圖表和自身的業務結合起來以發揮圖表更大的能力或者基於業務進行特殊改造，這種場景的話二開就是必然的。
• 最後，就是所謂的逼格問題，直白點說就是能放到自己公司獨立部署服務的，為啥放在外面？免費版萬一有一天不免費瞭或者有限制瞭那就被動瞭。（雖然可能性極低，但是也要考慮這種因素）

DrawIO 二開 —— 流程準備

環境準備

• 前端開發環境

這裡就不多說啥瞭，其實 DrawIO 的開發還真就是完全屬於前端范疇，所以各位前端同學如果遇到類似的需求，就迎難而上吧～

• 編譯構建相關的環境 —— Java 和 Ant

至於為啥要用到這倆，後面構建部署過程會介紹到，因為前端開發同學的電腦裡大概率不會安裝這倆，所以這裡也簡單講一下安裝步驟。