EasyFlow Vue是一個基于Vue.js的輕量級流程圖設計器，可以方便地創建和編輯流程圖。它提供了可拖拽、可縮放的視圖和工具欄，支持各種自定義節點、連線和標簽等。這篇文章將介紹如何在Vue項目中使用EasyFlow Vue。

首先，在Vue項目中安裝EasyFlow Vue：

npm install easyflow-vue

在需要使用的組件中引入：

import EasyFlowVue from 'easyflow-vue';
export default {
components: {
EasyFlowVue,
},
}

在模板中使用EasyFlowVue：

<easy-flow-vue :data="flowData" @update="updateFlowData" />

其中，flowData是流程圖數據，updateFlowData是更新流程圖數據的回調函數。

接下來，定義流程圖數據的格式：

flowData: {
nodes: [{
id: 'node1',
x: 100,
y: 100,
label: 'Node 1',
type: 'task',
}],
edges: [{
id: 'edge1',
source: 'node1',
target: 'node2',
label: 'Edge 1',
}],
}

其中，nodes數組表示節點列表，edges數組表示連線列表。節點和連線都需要指定id和type屬性，type屬性定義了節點或連線的類型，如task、decision、start、end等。

最后，可以在回調函數中獲取更新后的流程圖數據：

updateFlowData(data) {
console.log(data);
}

以上就是使用EasyFlow Vue創建流程圖的簡單過程。輕松快速地在Vue項目中集成流程圖設計器，嘗試去構建自己的流程圖吧！