前言

本文的原文連線是: https://blog.csdn.net/freewebsys/article/details/83689187
未經博主允許不得轉載。
博主地址是：http://blog.csdn.net/freewebsys

1，關於draw.io

是一個線上的編輯畫圖的軟體。
軟體可以進行流程圖的編輯設計。非常的棒。
可以儲存到網路盤上或者下載到本地。

網站地址：
https://www.draw.io/?lang=zh
網站的引數說明：
https://desk.draw.io/support/solutions/articles/16000042546-what-url-parameters-are-supported

通過修改
https://www.draw.io/?dev=1
可以在chrome 上面看到原始碼對映：

當然本身也是開源軟體，apache 開源協議的。
github地址：
https://github.com/jgraph/drawio
7000 多個星星呢。

2，使用

非常方便的使用：

可以畫簡單，複雜的系統流程圖，工作流程引擎啥的呢。
下載git程式碼，然後可以本地執行。
還有封裝的桌面版本可以使用。

https://github.com/jgraph/drawio-desktop

下載專案之後。是個普通的java 工程。不是maven的。
依賴的jar 特別的少。

前後臺的全部程式碼都有呢。主要還是前端的程式碼。
後端程式碼，主要是負責賬戶登入。儲存啥的。很少的程式碼。
主要還是前端的程式碼。
不是node的專案呢。還是純js的程式碼呢。學習使用起來肯定好。
程式碼量也挺大的呢。慢慢看，最好改裝成啥功能。或者參考下自己也做個拖拽的專案。才能學的很好。

同時還使用了 https://electronjs.org/ 專案做桌面版本的支援呢。
還是非常好的專案。
但是這個web 工程裡面沒有原始碼是壓縮之後的。

在這個專案：
https://github.com/jgraph/mxgraph

其中npm 對應的lib 在：

https://www.npmjs.com/package/mxgraph

https://jgraph.github.io/mxgraph/javascript/examples/grapheditor/www/index.html
這個才是前端的程式碼。
https://github.com/jgraph/mxgraph/tree/master/javascript/examples
下面有好多例子學習。

4，總結

draw.io 是一個圖形編輯器。網站只是一個演示。
真正的程式碼是在 mxgraph 下面。有java js php 的。

將這個轉換成自己的專案還需要多研究研究。

本文的原文連線是:
https://blog.csdn.net/freewebsys/article/details/83689187

博主地址是：http://blog.csdn.net/freewebsys