vue3+ts 绘制流程图 vueflow 附代码及效果图

在Vue 3和TypeScript中使用VueFlow绘制流程图的示例代码如下：

首先，确保安装了VueFlow：

npm install @vueflow/vueflow

接下来，在Vue组件中使用VueFlow：

<template>
  <VueFlow :nodes="nodes" :edges="edges" />
</template>
 
<script lang="ts">
import { defineComponent } from 'vue';
import { VueFlow, Node, Edge } from '@vueflow/vueflow';
 
export default defineComponent({
  components: {
    VueFlow,
  },
  data() {
    return {
      nodes: [
        {
          id: '1',
          position: { x: 250, y: 5 },
          data: {
            label: 'Node 1',
          },
        },
        {
          id: '2',
          position: { x: 250, y: 150 },
          data: {
            label: 'Node 2',
          },
        },
      ] as Node[],
      edges: [
        {
          id: 'e1-2',
          source: '1',
          target: '2',
          label: 'Label',
        },
      ] as Edge[],
    };
  },
});
</script>
 
<style>
/* 在这里添加VueFlow的样式 */
</style>

这段代码定义了一个Vue 3组件，它使用VueFlow来显示一个简单的流程图，包含两个节点和一条边。nodes数组包含流程图的节点，edges数组包含流程图的连线。这个例子提供了基本的流程图绘制功能。