Vue Flow：绘制你的Vue 3流程图，让设计更自由！

Vue Flow 是一个用于 Vue 3 的流程图和图表组件，它提供了一个响应式的图编辑解决方案。以下是一个简单的 Vue 3 示例，展示如何使用 Vue Flow 来绘制流程图：

首先，确保你已经安装了 Vue 3 和 Vue Flow：

npm install vue@next vue-flow-chart

然后，你可以在 Vue 3 应用中这样使用 Vue Flow：

<template>
  <div id="app">
    <VueFlow :nodes="nodes" :edges="edges" />
  </div>
</template>
 
<script>
import { VueFlow } from 'vue-flow-chart';
 
export default {
  components: {
    VueFlow,
  },
  data() {
    return {
      nodes: [
        { id: '1', type: 'input', label: 'Node 1', position: { x: 100, y: 100 } },
        { id: '2', type: 'default', label: 'Node 2', position: { x: 200, y: 100 } },
        // ... more nodes
      ],
      edges: [
        { id: 'e1-2', source: '1', target: '2', label: 'This is an edge' },
        // ... more edges
      ],
    };
  },
};
</script>
 
<style>
/* Import Vue Flow styles */
@import 'vue-flow-chart/dist/style.css';
</style>

在这个例子中，我们定义了两个节点和一条边，它们分别代表了输入和默认节点类型。节点和边的数据都可以动态绑定，这样你就可以根据你的应用逻辑来更新流程图了。