一般開發這種需求，首先要了解幾個概念性的東西，才能更好的熟練使用這些框架。
- 節點 (就是每個圖形),有矩形、圖形，或者自義定圖形,像jsplumb它是通過svg和dom結合渲染
- 端點 （圖形上面的錨點）一般情況都固定圖形的上下左右
- 連接線 (從起始端點連接到結束端點的線).線有很多種、直線、貝塞爾、折線.
另外還有一些其它圖形方面可能用到的
- 圖形渲染框架.g6、jsplumb、fabric、zrender
- 圖形佈局（如樹圖、流程圖、力導向圖） d3、graphlib
基於g6
g6:支持canvas或svg渲染.
g6是一個更底層的框架，它更多的是渲染一些節點佈局，它自帶一套佈局系統，也可以自定義佈局。如果把它用來開發編輯器，很多需要自己來處理。可以通過註冊插件擴展應用、註冊行爲去擴展交互、註冊節點擴展節點多樣化、註冊連接線擴展線的多樣化
基於jsplumb
是基於dom和svg渲染。它相比較g6，g6更底層一些，g6很多東西需要自己實現。而jsplumb都有現成的
- 它的節點需要自己定義創建，需要靈活也很高，你可以自己用div設計一個很漂亮和高交互的層.
- 默認樣式配置很豐富，樣式除了通過動態js配置，也可以通過css來控制
- 各種攔載事件與監聽事件很完善
- 沒有對應節點對象，所以節點上面的事件或交互需要自己來寫
![在這裏插入圖片描述]()
