Vue Flow：Vue 3 流程图组件的安装、数据结构与样式导入坑

• GitHub：
• 官网/文档：
• 语言：TypeScript，GitHub 6.9k stars

定位

Vue Flow 是面向 Vue 3 的高度可定制流程图组件。缩放平移基于 React Flow（Webkid）与 D3.js 实现，组合式工具来自 VueUse。

内置能力：缩放与平移、元素拖拽、选择；节点、边、连接线均可自定义；响应式追踪，只重渲染发生变化的元素；提供 graph helper 与 state composable。全部用 TypeScript 编写。

安装

npm i @vue-flow/core
# 或
pnpm add @vue-flow/core
# 或
yarn add @vue-flow/core

数据结构

elements = nodes + edges，每个元素都需要一个唯一 id。

• node 必须有 position: { x, y }
• edge 必须有 source / target，取值是节点 id

Quickstart

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

const nodes = ref([
{ id: '1', type: 'input', label: 'Node 1', position: { x: 0, y: 0 } },
{ id: '2', label: 'Node 2', position: { x: 200, y: 100 } },
])

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

样式必须单独导入，且不能用 scoped

Vue Flow 的样式不在组件内部自带，要在入口手动引入：

import '@vue-flow/core/dist/style.css'
import '@vue-flow/core/dist/theme-default.css' // 默认主题，可选

关键点：这两行不能放进 。scoped 会给选择器加上作用域属性，而 Vue Flow 内部渲染出的 DOM 上没有这个属性，样式会直接不生效。写在入口文件里，或者用不带 scoped 的 。

额外组件

• Background：画布背景，内置两种图案
• MiniMap：右下角缩略图
• Controls：左下角缩放控制面板

版本限制

只支持 Vue 3，不支持 Vue 2。

本地开发

要求 Node 20+、pnpm 9+。

pnpm dev     # 运行 examples
pnpm build   # 构建所有包

仓库带 Dev Container：VSCode 装 Docker 扩展后，用 Open Folder in Container 打开即可。

社区在 Discord；项目致谢 React Flow（Webkid）、D3.js 和 VueUse。