你还在为画各种流程图头疼吗？

1.官方文档

vueflow.dev/

Vue Flow 简介

Vue Flow 是一个专为 Vue 3 设计的可视化流程编辑库，灵感来自 React Flow。它提供了拖拽、缩放、连接、高亮等一系列交互能力，适合用于流程图、业务流程编排、数据流、低代码画布等场景。核心特点：

组件化节点：节点、边都可用 Vue 组件自定义，易于扩展。
强交互性：内置拖拽、选择框、多选、键盘快捷键等交互。
可视化状态管理 ：通过 useVueFlow 暴露节点/边/视图状态与增删改查 API。
插件生态：MiniMap、Background、Controls 等增强组件可直接引入。
性能优化：虚拟化渲染、事件去抖等，适合中大型画布。

文档入口：vueflow.dev/guide/intro... | Vue Flow"）

最小示例 Demo

以下示例展示两节点一条边的基本用法，可直接放在 Vue SFC 中运行（例如 Vue Flow Playground 或 Vite 项目）。

php 复制代码

<template>
  <div style="width: 100%; height: 500px">
    <VueFlow
      v-model:nodes="nodes"
      v-model:edges="edges"
      fit-view
    >
      <Background />
      <Controls />
    </VueFlow>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { VueFlow, Background, Controls } from '@vue-flow/core'
import '@vue-flow/core/dist/style.css'
import '@vue-flow/core/dist/theme-default.css'

const nodes = ref([
  {
    id: '1',
    position: { x: 0, y: 50 },
    data: { label: '开始' },
  },
  {
    id: '2',
    position: { x: 200, y: 150 },
    data: { label: '结束' },
  },
])

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

关键点说明：

VueFlow 组件接收 nodes、edges 数组，可通过 v-model 实时同步状态。
节点 data.label 默认会在内置 Node 中渲染；也可通过 vueFlow.registerNode 或插槽自定义。
fit-view 自动将视图缩放居中到所有节点。
Background、Controls 是官方提供的 UI 插件，分别渲染网格背景和缩放/定位控件。
若需要事件处理（如拖拽回调、连线校验），可通过 useVueFlow() 获取 onEdgeUpdate, addEdges 等 API。

需要更复杂的例子（自定义节点、交互、动态加载等），可以在文档中的 "Examples" 或 "Cookbook" 章节查阅。