前期公司的一個項目需要繪製流程圖，設計師給的效果大致是這樣的

對，全是馬賽克。

項目的大致要求如下：

1. 點擊流程節點後會彈出對應的流程詳情，可以查看和編輯
2. 最好是支持流程節點的拖拽來實現節點之間的層級改動
3. 流程節點儘可能的居中

我就大致搜了下，找了不少不錯的，但是都是付費的居多，比如gojs。

自己也看了幾個開源的可以製作流程圖的庫，生成的全部是svg。

flowchart.js

效果圖

缺點：

1. 這樣的數據結構真心讓人喜歡不起來，連數組都不是
2. 數據的位置完全把控不了

優點：

1. 不用自己指定流程節點的位置

obfc

obfc.js部分源代碼 效果圖

缺點：

1. 庫寫的太簡陋了，全部都用的是全局方法和變量。。。
2. 需要指定流程節點的座標位置（硬傷啊）

優點

1. 庫比較容易進行二次封裝

Rappid/jointjs

它居然有開源版jointjs 缺點

1. 流程節點的連線默認使用弧線連接的

優點

1. 不用自己指定流程節點位置
2. 流程節點會自己儘量居中

可以自己改造下，加一層節點，再想辦法讓它連續變成直線。

本來我是想拆分出裏面的自動居中算法的，然後再結合前面幾個庫實現產品要求。看了它依賴幾個庫，一個是backbone，一個是dagre.js（裏面又依賴graphlib.js）

這幾個其實都不滿意。

G6

前幾天跟一個朋友說了下，他問我看過G6沒有？G6？我聽到沒聽過啊。看來我是孤陋寡聞了。

阿里的開源圖可視化引擎，使用canvas畫圖的。

這是我根據產品要求用G6寫的demo，怎麼樣？是不是很符合產品的要求啊。 哈哈，感謝朋友的推薦，感謝G6。

缺點：

1. canvas，不是svg，感覺沒有svg那樣更容易控制，得全靠對api的熟悉程度
2. 需要多熟悉熟悉文檔

優點：

1. 不用自己指定流程節點的位置
2. 背後有阿里
3. 可以不指定位置，然後自己根據內容的寬高再調整位置 4.繼續發掘

最終的選型很明顯了，肯定用G6了啊。