1.1 Vue Flow 的定位
Vue Flow 本质上是一个饿了么组件库之于表单那样的存在——它把流程图编辑的标准能力封装成一套 Vue 3 组件，你拿来就能用。
它的核心架构很清晰：
- 节点（Node）是图中的基本单元，
- 边（Edge）是节点间的连线，
- 手柄（Handle）是节点上的连接点。这三样构成了流程图的一切。
在开始之前，确保你的环境满足：
- Node.jsv20 或更高
- Vue3.3 或更高
- 包管理器（npm / pnpm / yarn 任选）
不在本地搭环境也行，官方提供了在线沙盒：JavaScript 版 或 TypeScript 版，浏览器打开就能跑。
1.3 安装
用你喜欢的包管理器安装 Vue Flow 核心库：
npm install @vue-flow/core
# 或者
pnpm add @vue-flow/core
# 或者
yarn add @vue-flow/core
当前最新版本：v1.48.2（2026 年 1 月发布，MIT 许可）
1.4 第一个流程图
新建一个 Vue 组件，粘贴以下代码：
solid #ddd;">
两个关键点：
- 样式必须导入：style.css 是必需的，不导入画布无法正常显示；theme-default.css 是可选默认主题，推荐加上
- 外层容器必须有高度：Vue Flow 会填满父容器的高度，如果父容器没高度，画布就看不见
⚠️ @import 不要加 scoped，否则样式不会生效。
预览效果——一个纵向排列的三节点流程图，「开始→处理中→结束」，节点可以拖拽移动，可以滚轮缩放，第一条边的动画箭头流转不绝。
1.5 核心概念速览节点数据模型
interface Node {
id: string // 唯一标识
type?: string // 节点类型（input/default/output/自定义）
position: { x: number; y: number } // 坐标位置
data: Record // 自定义数据
// 还有更多可选属性，后续章节展开
}
边数据模型
interface Edge {
id: string // 唯一标识
source: string // 源节点 ID
target: string // 目标节点 ID
type?: string // 边类型（bezier/straight/step/smoothstep/自定义）
animated?: boolean // 是否动画
data?: Record
}
三种内置节点
类型
外观
input
入口节点
蓝色边框，圆形角
default
默认节点
灰色边框，默认类型
output
输出节点
绿色边框，圆形角
四种内置边
类型
bezier（默认）
贝塞尔曲线
straight
直线
step
直角阶梯线
smoothstep
平滑阶梯线
1.6 添加附加组件
Vue Flow 自带几个增强组件，加上后体验更好：
- Background：背景网格或点阵
- MiniMap：右下角小地图缩略图，方便在大图中快速定位
- Controls：左下角缩放控制按钮（放大/缩小/适配）
你已经在 10 分钟内跑起来了第一个流程图。核心收获：
- Vue Flow 是 Vue 3 的流程图组件库，v1.48.2
- 三要素：节点（Node）+ 边（Edge）+ 手柄（Handle）
- 三件套：Background + MiniMap + Controls 增强体验
下一章，我们深入节点和边的每一个配置细节，看看它们到底能玩出什么花样。
热门跟贴