螞蟻金服數據可視化團隊曾經開源了一款 G6-Editor，但后來停止了對外支持，學習成本太高
好在后來他們團隊的大牛高力結合 React + G6 開源了一個 GG-Editor（其實就是G6-Editor）
不過相關的文檔還是太少，實際的使用依然是一個不斷摸索的過程...
常見問題: https://github.com/gaoli/GGEditor/issues/130
一、引用 GG-Editor
直接通過 npm 或 yarn 安裝依賴
npm install --save gg-editor
由於對 GG-Editor 不熟悉，所以我將它自帶的 Demo 作為模版，在此基礎上進行開發
將 node_modules/gg-editor/demo/src/ 下的 Flow 目錄和 components、common 目錄拷出來，放到開發目錄下進行改造
這個 demo 基於 ant 開發，所以需要引入 ant
npm install --save antd
另外 demo 使用了 CSS Modules，需要在項目配置中啟用
比如在我的項目中，就把原本的 index.css 重命名為 index.module.css，然后修改相應的引入路徑
由於只是開發可視化流程，所以 components 目錄下多余的文件（以 Koni 和 Mind 開頭的文件）都以刪掉
然后將 Flow/index.js 提出來作為項目入口，改造后的目錄如下：
二、 Item 節點配置
demo 啟動之后的界面是這樣的
左邊是 gg-editor 提供的四種基礎節點類型，其對應的組件是 /components/EditorItemPanel
這個組件下引入了四個 gg-deitor <Item> 組件，官方提供的 API 如下：
http://ggeditor.com/docs/api/itemPanel.zh-CN.html
其中 type 有 node 和 edge 兩個值可選，node 就是節點，edge 是連接節點的連線
shape 可選參數有：圓形 'flow-circle' | 圓角矩形 'flow-rect' | 菱形 'flow-rhombus' | 橢圓矩形 'flow-capsule'
src 可以引入一張圖片作為當前節點的預覽樣式
也可以自定義子節點，<Item /> 會接收 props.children 作為預覽樣式
需要注意的是，不管是 src 還是子節點，都只是一個預覽樣式，並不等於編輯器畫板中的樣式
而畫板中的樣式，由 model 決定，其配置項如下：
model: { color: '#333', // 節點主題色（選中顏色、激活顏色基於該值）
size: [10, 10], // [x, y] 節點尺寸
shape: 'cirle', // 圖形：圓形 circle | 圓角矩形 rect | 菱形 rhombus | 橢圓矩形 capsule
style: { // 關鍵形樣式(可覆蓋color的普通樣式，但激活、選中依然無效，坑！)
fill: 'red', // 填充背景
stroke: 'blue' // 形狀描邊
}, label: { // 節點標簽
text: '開始節點', // 文本內容
fill: 'green' // 文本顏色
}, index: 1 // 渲染層級
}
不過 model 默認會繼承 <Item> 組件的 props.shape 和 props.size，所以通常 model 只需配置 color、label
這里有個比較難受的地方：畫板中的節點樣式由 model 控制，而節點預覽樣式由 CSS 或者圖片控制，要想保證二者統一，就會需要很多額外的工作
三、自定義節點
如果 <Item> 自帶的參數不滿足需求，可以使用 <ReisterNode> 來封裝自己的 <Item>
<ReisterNode> 可以接收上面三個參數，其中 name 是組件名稱
在 <Item> 的 shape 屬性中指定 name，就能拖拽生成自定義的節點
extend 可以繼承一個基本圖形（'flow-circle', 'flow-rect' 等）
config 可以參考官方的 Issues：https://github.com/gaoli/GGEditor/issues/76
假如需要自定義一個 start-node，就可以自行封裝一個 node 組件
然后在 ItemPanel 中的 <Item> 指定組件名稱
最后在 <Flow> 組件下面引入
如果還是不明白 <ReisterNode> 如何使用，可以參考這個 Demo：https://codesandbox.io/s/4j62moqy0w
四、Flow 編輯器配置
官方文檔地址：http://ggeditor.com/docs/api/flow.zh-CN.html
組件默認可以將連線到空白處，設置 noEndEdge 為 false 就只能在節點之間連線
align 參數可以設置對齊的樣式，比如對齊線：
<Flow align={{ line: { stroke: 'blue', // 對齊線顏色 lineWidth: 2 // 對齊線寬度 } }} />
shortcut 可以配置內置的快捷鍵命令，支持的命令有：
但經過試驗，只有適用頁面為 All 的命令可配置，而其它命令（如 Ctrl+C）都無效
組件本身默認的連線是曲線 'flow-smooth'，在編輯時可以手動修改，也可以在 graph 中限定連線類型：
<Flow graph={{edgeDefaultShape: 'flow-polyline-round'}}/>
更多關於 graph 的配置項可以參考這里：https://www.yuque.com/antv/g6/api-graph
在 <FLow> 組件上，最重要的是監聽事件：
<Flow onNodeClick={(e) => { console.log(e); }} />
事件是整個編輯器的靈魂，下面將重點介紹一下 GG-Editor 的 Page Events
五、頁面事件 Page Events
官方文檔：http://ggeditor.com/docs/api/pageEvents.zh-CN.html
文檔中對支持的事件和事件對象都有說明，這里不再細說，主要分享幾個場景
// 事件總覽參考 /node_modules/gg-editor/src/common/constants.js
1. 拖拽節點，區分新節點還是舊節點
監聽拖拽放置事件：onDrop
從 <ItemPanel> 拖拽新節點到畫布的時候，onDrop 返回的事件對象是這樣的：
這時 currentItem 和 currentShape 都是 undefined
而如果只是挪動舊節點的位置，這兩個字段會記錄拖拖動的圖形圖項
或者監聽節點拖動結束事件：onNodeDragEnd
這個事件只會在拖動畫布上的節點才會觸發
2. 錨點連線取消
連線觸發的事件很多，比如 onDrop、onDragEnd，不過個人推薦監聽 onAfterChange
當子項更改的時候會觸發 onAfterChange 事件，如果是連線，事件對象如下：
如果有需求，當目標節點已經連線的時候，就取消連線，就可以根據 item 或者 model 對象中的參數進行判斷
最后用結合異步函數和 <withPropsAPI> 組件取消連線：
這里用到的 <withPropsAPI> 組件，是 GG-Editor 自帶的包裝組件
經過 <withPropsAPI> 包裝的組件，會自帶 propsAPI 屬性
executeCommand() 方法可以執行上面第四部分 (shortcut) 提到的所有命令
3. 保存
上面 <withPropsAPI> 提供的 propsAPI 屬性中，包含了 save() 方法
可以封裝一個 SaveButton 組件，暴露一個 onSave 事件
然后用 <withPropsAPI> 包裝該組件
詳情可以參考這個 Demo: https://codesandbox.io/s/r4kzkn441m
4. 自定義鍵盤操作
上面提到過，Ctrl + C 的復制快捷鍵無效
但這個功能十分關鍵，可以通過監聽 onKeyDown 和 onKeyUp 手動創建這個快捷命令
創建一個 keysDown 字段來記錄按下的按鍵，keyUp 時清空
小結：
上面的內容只介紹了 GG-Editor 核心的幾個組件和功能
像 <Minimap>、<ContextMenu>、<Toolbar> 這些組件參考 Demo 就足夠，所以並沒有提及
基於上面的介紹，已經能夠使用 GG-Editor 進行開發，如果有其它疑問，可以在 GitHub 倉庫提 Issues
最后發一下牢騷：閱讀源碼這種事，必須配一個程序員鼓勵師才能開展