主要用css+flex布局實現樣式部分，vue實現組件邏輯。首先看下效果吧：
當空間不夠時還可以使用拖拽功能
接下來說明下實現思路
1.首先是實現單個節點樣式，這個很簡單不談了，節點后都跟有一小段連接線，只有葉子節點沒有連接線。使用偽元素after實現連接線，子節點添加額外樣式來取消連接線。
2.然后是父子節點之間的連接線，因為有兩種情況（a.只有一個子節點的；b.有多個子節點），所以要分情況實現
2.1子節點公共樣式process-tree-childNodes設置為inline-block；vertical-align: middle;以此來實現與父節點的樣式對齊； 緊跟的div設置為flex豎排布局
2.2單個子節點添加額外樣式single-node，設置他的偽元素before為橫向連接線,；多個子節點添加額外樣式multiply-node，設置偽元素before為豎向的連接線
2.3多個子節點時的豎向連接線會多出來一部分，通過設置第一個子樹節點的after偽元素和最后一個子樹節點的after偽元素來遮蓋住超出部分，其余的橫向連接線都通過設置子樹節點的before偽元素實現
好了樣式部分的大體思路就是這樣了。
然后是vue部分的實現，主要是各種樣式的添加，樹結構的數據要求組件應該可以遞歸使用
最后是拖拽功能，通過指令實現
首先在外部包裝一層，設置overflow：hidden，內部的流程樹組件設置scrolll
initDomwidth方法用來設置樹的寬度，通過獲取所有葉子節點的距離根節點左邊的距離，取最大值做為樹的寬度，防止寬度不夠導致樹變形。為了能夠拖拽，在乘以一個系數作為最終的樹寬度。
我已經上傳了組件到npm，感興趣的盆友可以試試看，npm install process-tree-vue。
最后，這個只是試驗性質的demo，因為流程圖多用於做展示，展示要求各種各樣，可以在此基礎上做調整修改來適應要求。
github地址：https://github.com/sc1992sc/processTree