javascript流程圖繪製技術mxGraph (javascript程式庫)

作者: Fred F.M. Wang (FW知識瑣記) 日期:2021-7-3

前幾周完成的流程圖研究是使用flowcharty.js技術將儲存在資料庫的流程設定轉以流程圖顯示

出來。可以用於流程圖形化顯示與流程進度追蹤。但是，無法用於流程設計。

本周開始研究流程圖形化設計技術。找到一個不錯的程式庫mxGraph，以下是幾點mxGraph

的介紹敘述 : 

 "mxGraph是2005年開始開發，一個互動式的JavaScript HTML 5圖表程式庫。
mxGraph是一個完全客戶端(client side)程式庫，它使用 SVG 和 HTML來呈現您的模型。

例如，該程式庫被使用在 Draw.io。
mxGraph不使用第三方軟體，不需要插件，幾乎可以整合到任何框架中。 "

 

mxGraph包含一般流程圖，UML，BPMN等繪圖元件。

  

 

mxGraph網路資源 : 

1 mxGraph下載一

2 mxGraph下載二

3 mxGraph User Manual – JavaScript Client

4 mxGraph 用戶手冊中文 – JavaScript客戶端

5 mxGraph教程

6 mxGraph 入門例項教程 

7 mxGraph JavaScript範例  

8 mxgraph的艱難入門 

9 mxGraph-PHP - PHP backend model for mxGraph

10 mxGraph進階一 mxGraph教程-開發入門指南 

11 mxgraph進階二 mxgraph的初步介紹與開發入門 

12 mxgraph進階 三 Web繪圖——mxGraph項目實戰 精華篇 

13 mxgraph進階四 mxGraph再啟程

14 mxgraph進階五 搭建mxGraph簡單應用

     

我計畫修改其範例程式，整合進自己開發好的流程系統。

整合的概念如下:

建立新的流程的步驟 :

1 使用mxGraph Flowchart Editor繪製流程圖

2 儲存成xml格式檔案(using mxGraph API)

3 再將xml轉換成流程設定(結構化資料)，並儲存在資料庫。

修改舊的流程的步驟 :

1. 讀取儲存在資料庫的流程設定，轉換成xml

2. 讀取xml到mxGraph Flowchart Editor上呈現成流程圖(using mxGraph API)

3. 使用mxGraph Flowchart Editor修改流程圖。

4. 儲存成xml格式檔案(using mxGraph API)

5. 再將xml轉換成流程設定(結構化資料)，並儲存在資料庫。

今天有一些突破, 已經可以將流程圖編輯器繪製完的流程圖(如上圖)以xml方式儲存下來, 也可

以讀取儲存好的xml檔, 再以流程圖的方式呈顯在流程圖編輯器, 進行流程圖修改。再下來只

要可以將xml轉換成流程設定(結構化資料), 儲存到資料庫就可以了。

 

圖形範例如下 :