基於VUE和JSPlumb的在線繪製流程圖工具

基於VUE和JSPlumb的在線繪製流程圖工具

介紹

• VUE FLOW DESIGN流程設計器，基於Vue + Ant Design Vue + JSPlumb，該組件目的是爲了使用在Vue項目中，它前身是原生版流程設計器。
• Vue版本以全新的技術棧重構了代碼，並在原版基礎上實現了更好的操作方式，新版會作爲優先版本持續迭代。

效果演示

• 基礎面板
  
• 拖拽節點到繪圖區連線
  
• 拖拽對齊或使用自動對齊
  
• 顯示/隱藏網格
  
• 設置節點和連線的屬性
  
• 單節點、多節點移動(按住CTRL鍵)
  
• 改變節點對齊的排序順序(按住Ctrl鍵一個一個單擊選中要對齊的節點，單擊的順序就是對齊的排列順序)
  
• 清空畫布，重新繪製
  
• 保存流程圖(會生成一段json數據，後臺可以保存這段數據，爲了便於調試，生成的json數據可以通過快捷鍵CTRL+ALT+T打開的測試窗口看到。同時也可以從該窗口載入其他的符合流程圖的json數據)
  
• 保存流程圖爲圖片保存到本地
  
• 通過設置頁面(CTRL+ALT+S)可以設置相關參數
  
• 快捷鍵說明
  
• 。。。。。。

QQ交流羣：637230519