前端流程图vueflow

npm add @vue-flow/core

npm install @vue-flow/background @vue-flow/minimap @vue-flow/controls

• VueFlow 负责画布本体
• nodes 负责节点数据
• edges 负责连线数据
• Background 负责网格背景
• MiniMap 负责右下角缩略图
• Controls 负责缩放、重置等控制

type

这是节点类型。

Vue Flow 里有默认类型，比如：

• input：起始节点
• output：结束节点
• default：普通节点

it-view-on-init

这个参数表示：

页面初始化完成后，自动把画布内容缩放到合适的可视范围。

<template>
  <div class="page">
    <VueFlow :nodes="nodes" :edges="edges" fit-view-on-init>
      <Background />
      <MiniMap />
      <Controls />
    </VueFlow>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

import { VueFlow } from '@vue-flow/core'

import { Background } from '@vue-flow/background'
import { MiniMap } from '@vue-flow/minimap'
import { Controls } from '@vue-flow/controls'

// 样式
import '@vue-flow/core/dist/style.css'
import '@vue-flow/core/dist/theme-default.css'

import '@vue-flow/minimap/dist/style.css'
import '@vue-flow/controls/dist/style.css'

const nodes = ref([
  {
    id: '1',
    position: { x: 100, y: 100 },
    data: { label: '开始节点1' },
    type: 'input',
  },
  {
    id: '2',
    position: { x: 400, y: 100 },
    data: { label: '处理节点32' },
  },
    {
    id: '3',
    position: { x: 800, y: 100 },
    data: { label: '处理节点32' },
  },
])

const edges = ref([
  {
    id: 'e1-2',
    source: '1',
    target: '3',
  },
    {
    id: 'e1-1',
    source: '2',
    target: '3',
  },
])
</script>

<style scoped>
.page {
  width: 100vw;
  height: 100vh;
}
</style>