用 Vue Flow 绘制流程图：让你的代码和审美一起放飞自我

本文链接：https://blog.csdn.net/zj0411zdh/article/details/149266553

六、实战：绘制一个 "程序员的一天" 流程图

七、高级玩法：让流程图不止于流程

八、总结：让流程图成为你的加分项

一、当流程图不再是程序员的噩梦

还记得第一次画流程图的场景吗？打开某款 "专业" 工具，对着满屏工具栏发呆半小时，最后画出来的东西比你家猫抓过的毛线团还乱。产品经理指着屏幕说 "我要的是思维导图不是迷宫地图" 时，你恨不得把键盘扣在他头上 —— 别否认，我们都经历过这种至暗时刻。

但自从 Vue Flow 横空出世，前端工程师们终于可以扬眉吐气了。这款基于 Vue 的流程图库就像给设计师装了作弊器，让你在 10 分钟内画出的流程图，既能满足产品经理的 "艺术追求"，又能通过 Git 提交时不被后端同事吐槽 "这玩意能跑吗"。

想象一下：产品经理说要加个交互节点，你微微一笑，在代码里加一行 props；UI 设计师嫌连线太丑，你轻松切换成贝塞尔曲线，顺便调整成渐变色；后端大哥要导出 JSON 格式，你点下按钮完成任务 —— 这不是梦，这是 Vue Flow 带给你的流程图自由。

二、Vue Flow：流程图界的乐高积木

如果把传统流程图工具比作老式诺基亚，那 Vue Flow 就是最新款智能手机。它的核心理念是 "组件化思维"，把流程图拆解成可自由组合的节点（Nodes）、连线（Edges）和控制器（Controls），就像乐高积木一样任你发挥。

先看个最简单的 "Hello World" 级流程图：

<template>

<VueFlow

:nodes="nodes"

:edges="edges"

class="vue-flow-container"

>

<Controls />

</VueFlow>

</template>

<script setup>

import { VueFlow, Controls, useVueFlow } from 'vue-flow'

import 'vue-flow/dist/style.css'

const nodes = [

{

id: '1',

position: { x: 100, y: 100 },

data: { label: '产品提需求' },

},

{

id: '2',

position: { x: 300, y: 100 },

data: { label: '开发说不行' },

}

]

const edges = [

{

id: 'e1-2',

source: '1',

target: '2',

label: '每天一次'

}

]

</script>

<style>

.vue-flow-container {

width: 100%;

height: 500px;

}

</style>

这段代码运行后，你会看到两个节点用连线连起来，生动再现了互联网公司的日常。最神奇的是，你可以直接用鼠标拖拽节点，就像玩拼图一样轻松调整位置 —— 这在传统工具里可能需要点击三个按钮加两次确认。

三、节点：流程图里的乐高积木

Vue Flow 的节点系统堪称 "前端乐高"，你可以用它搭出任何形状的流程图。默认节点已经足够美观，但真正的高手都喜欢自定义样式，就像给乐高积木喷上限量版涂装。

比如这个带头像的用户节点：

<template>

<div class="user-node">

<img :src="data.avatar" alt="用户头像" class="avatar">

<div class="name">{{ data.name }}</div>

<div class="role">{{ data.role }}</div>

</div>

</template>

<script setup>

defineProps(['data'])

</script>

<style scoped>

.user-node {

border: 2px solid #42b983;

border-radius: 8px;

padding: 8px;

background: white;

min-width: 120px;

}

.avatar {

width: 40px;

height: 40px;

border-radius: 50%;

margin: 0 auto;

}

.name {

font-weight: bold;

text-align: center;

margin-top: 4px;

}

.role {

font-size: 12px;

color: #666;

text-align: center;

}

</style>

然后在流程图中使用这个自定义节点：

const nodes = [
  {
    id: 'user1',
    position: { x: 100, y: 100 },
    data: { 
      name: '产品经理', 
      role: '需求制造机',
      avatar: 'https://picsum.photos/id/1/40/40'
    },
    type: 'userNode' // 对应自定义节点的类型
  },
  {
    id: 'user2',
    position: { x: 300, y: 100 },
    data: { 
      name: '程序员', 
      role: '需求粉碎机',
      avatar: 'https://picsum.photos/id/2/40/40'
    },
    type: 'userNode'
  }
]

效果就像给流程图装上了人脸识别系统，再也不用对着一堆干巴巴的文字节点发呆了。产品经理看了直呼 "这才是我想要的流程图"，而你只用了不到 100 行代码。

四、连线：流程图里的月老红线

如果说节点是流程图的肉体，那连线就是流程图的灵魂。Vue Flow 的连线系统就像月老的红线，不仅能把节点连起来，还能传递信息、表达关系，甚至耍点小脾气。

看看这个会 "说话" 的连线：

const edges = [

{

id: 'e1-2',

source: 'user1',

target: 'user2',

label: '这个需求很简单',

labelBgStyle: { fill: '#fff', padding: 4, borderRadius: 4 },

labelStyle: { fill: '#ff4d4f', fontSize: 12 },

style: { stroke: '#ff4d4f', strokeWidth: 2 }

},

{

id: 'e2-1',

source: 'user2',

target: 'user1',

label: '下周上线不可能',

labelBgStyle: { fill: '#fff', padding: 4, borderRadius: 4 },

labelStyle: { fill: '#1890ff', fontSize: 12 },

style: { stroke: '#1890ff', strokeWidth: 2, strokeDasharray: '5,5' }

}

]

这段代码创建了两条带有对话的连线，红色实线代表产品经理的 "简单需求"，蓝色虚线代表程序员的 "无情拒绝"。连线上的文字就像漫画里的对话框，让整个流程图瞬间有了剧情。

更厉害的是，Vue Flow 还支持曲线连线、箭头自定义，甚至可以给连线加动画，让它像心电图一样跳动 —— 非常适合表现 "开发进度条" 这种让人心脏骤停的场景。

五、交互：给流程图装上抖音的手势控制系统

传统流程图就像博物馆里的展品，只能看不能摸。但 Vue Flow 的流程图就像抖音上的互动视频，你可以缩放、平移、拖拽，甚至给节点点赞（如果开发这个功能的话）。

这些交互功能默认就开启了，你不需要写一行额外代码：

鼠标滚轮：缩放视图，看清每一个细节

按住鼠标左键拖动：平移整个画布，就像在地图上导航

拖拽节点：调整位置，让布局更合理

双击空白处：创建新节点（需要配置）

点击节点：选中它，准备进行操作

如果你想自定义交互行为，Vue Flow 也提供了丰富的 API。比如这个双击节点显示详情的功能：

<template>

<VueFlow

:nodes="nodes"

:edges="edges"

@node-double-click="handleNodeDoubleClick"

>

<Controls />

</VueFlow>

</template>

<script setup>

import { ref } from 'vue'

const nodes = ref([/* 节点数据 */])

const edges = ref([/* 连线数据 */])

const handleNodeDoubleClick = (event, node) => {

alert(`你双击了${node.data.name}，他的真实身份是${node.data.secret}`)

}

</script>

想象一下，产品经理双击 "用户登录流程" 节点，弹出详细的逻辑说明；测试工程师双击 "支付接口" 节点，看到完整的测试用例 —— 这哪里是流程图，分明是一个小型的项目管理系统。

六、实战：绘制一个 "程序员的一天" 流程图

光说不练假把式，我们来用 Vue Flow 绘制一个 "程序员的一天" 流程图，看看它到底有多强大。

先规划一下主要节点：

起床（挣扎 10 分钟）

上班（路上买咖啡）

晨会（听产品经理画饼）

写代码（实际是改昨天的 bug）

午休（外卖 + 刷手机）

继续改 bug（发现新的 bug）

下班（被领导叫住）

加班（真正开始写今天的代码）

睡觉（梦里还在 debug）

然后编写代码实现这个流程图：

<template>

<div class="app-container">

<h1>程序员的一天</h1>

<VueFlow

:nodes="nodes"

:edges="edges"

:nodesDraggable="true"

:nodesConnectable="false"

:zoom-on-scroll="true"

:fit-view="true"

>

<Controls />

<Background type="dots" gap={20} size={2} />

</VueFlow>

</div>

</template>

<script setup>

import { ref } from 'vue'

import { VueFlow, Controls, Background } from 'vue-flow'

import 'vue-flow/dist/style.css'

// 节点数据

const nodes = ref([

{

id: '1',

position: { x: 100, y: 50 },

data: { label: '起床<br/>(挣扎10分钟)' },

style: { width: 100, height: 60, background: '#fffbe6', border: '1px solid #faad14' }

},

{

id: '2',

position: { x: 100, y: 180 },

data: { label: '上班<br/>(买咖啡)' },

style: { width: 100, height: 60, background: '#e6f7ff', border: '1px solid #1890ff' }

},

{

id: '3',

position: { x: 100, y: 310 },

data: { label: '晨会<br/>(听画饼)' },

style: { width: 100, height: 60, background: '#f6ffed', border: '1px solid #52c41a' }

},

{

id: '4',

position: { x: 300, y: 310 },

data: { label: '写代码<br/>(改昨天的bug)' },

style: { width: 120, height: 60, background: '#fff1f0', border: '1px solid #f5222d' }

},

{

id: '5',

position: { x: 300, y: 440 },

data: { label: '午休<br/>(外卖+刷手机)' },

style: { width: 120, height: 60, background: '#f0f2ff', border: '1px solid #722ed1' }

},

{

id: '6',

position: { x: 300, y: 570 },

data: { label: '继续改bug<br/>(发现新bug)' },

style: { width: 120, height: 60, background: '#fff1f0', border: '1px solid #f5222d' }

},

{

id: '7',

position: { x: 100, y: 570 },

data: { label: '下班<br/>(被领导叫住)' },

style: { width: 120, height: 60, background: '#fff0f6', border: '1px solid #eb2f96' }

},

{

id: '8',

position: { x: 100, y: 700 },

data: { label: '加班<br/>(写今天的代码)' },

style: { width: 120, height: 60, background: '#e8f4f8', border: '1px solid #36cbcb' }

},

{

id: '9',

position: { x: 100, y: 830 },

data: { label: '睡觉<br/>(梦里debug)' },

style: { width: 120, height: 60, background: '#f6ffed', border: '1px solid #52c41a' }

}

])

// 连线数据

const edges = ref([

{

id: 'e1-2',

source: '1',

target: '2',

type: 'smoothstep'

},

{

id: 'e2-3',

source: '2',

target: '3',

type: 'smoothstep'

},

{

id: 'e3-4',

source: '3',

target: '4',

type: 'smoothstep',

label: '10:00'

},

{

id: 'e4-5',

source: '4',

target: '5',

type: 'smoothstep',

label: '12:00'

},

{

id: 'e5-6',

source: '5',

target: '6',

type: 'smoothstep',

label: '13:30'

},

{

id: 'e6-7',

source: '6',

target: '7',

type: 'smoothstep',

label: '18:00'

},

{

id: 'e7-8',

source: '7',

target: '8',

type: 'smoothstep',

label: '被迫'

},

{

id: 'e8-9',

source: '8',

target: '9',

type: 'smoothstep',

label: '21:00+'

},

{

id: 'e9-1',

source: '9',

target: '1',

type: 'smoothstep',

label: '循环',

style: { strokeDasharray: '5,5' }

}

])

</script>

<style>

.app-container {

width: 100%;

height: 100vh;

padding: 20px;

box-sizing: border-box;

}

h1 {

text-align: center;

color: #333;

margin-bottom: 20px;

}

</style>

这段代码创建了一个色彩丰富、互动性强的流程图，生动展现了程序员从起床到睡觉的完整一天。每个节点都有不同的颜色和样式，连线上标注了时间点，最后还有一条虚线表示 "无限循环"—— 这简直是程序员的真实写照。

运行这个程序，你可以：

缩放查看整体流程和细节

拖拽节点调整位置

清晰看到每个环节的时间线

感受到程序员生活的 "快乐"

七、高级玩法：让流程图不止于流程

Vue Flow 的强大之处在于，它不只是一个绘图工具，更是一个可视化引擎。你可以基于它开发各种高级功能，让流程图变成项目管理工具、数据分析平台，甚至是游戏。

比如这个 "任务进度跟踪" 功能：

<template>

<div class="task-flow">

<VueFlow

:nodes="nodes"

:edges="edges"

@node-click="handleNodeClick"

>

<Controls />

</VueFlow>

<!-- 任务详情弹窗 -->

<div v-if="selectedNode" class="task-modal">

<h3>{{ selectedNode.data.label }}</h3>

<p>进度: {{ selectedNode.data.progress }}%</p>

<input

type="range"

min="0"

max="100"

v-model="selectedNode.data.progress"

@input="updateNodeProgress"

>

<button @click="selectedNode = null">关闭</button>

</div>

</div>

</template>

<script setup>

import { ref, watch } from 'vue'

import { VueFlow, Controls } from 'vue-flow'

const nodes = ref([

{

id: 't1',

position: { x: 100, y: 100 },

data: { label: '需求分析', progress: 80 },

style: {

background: `linear-gradient(90deg, #52c41a ${80}%, #f0f2f5 ${80}%)`

}

},

// 更多任务节点...

])

const edges = ref([/* 连线数据 */])

const selectedNode = ref(null)

const handleNodeClick = (event, node) => {

selectedNode.value = node

}

const updateNodeProgress = () => {

// 更新节点的进度条样式

const node = nodes.value.find(n => n.id === selectedNode.value.id)

node.style.background = `linear-gradient(90deg, #52c41a ${node.data.progress}%, #f0f2f5 ${node.data.progress}%)`

}

</script>

这个例子中，流程图的节点变成了可交互的任务卡片，点击节点可以调整进度，节点背景会实时显示进度条。这已经不是简单的流程图了，而是一个轻量级的项目管理工具。

你还可以发挥想象力，实现更多功能：

给节点添加评论功能，变成团队协作平台

连接后端 API，实时显示数据状态

加入动画效果，让流程图变成数据可视化大屏

甚至开发一个 "流程图 RPG 游戏"，节点就是怪物，连线就是地图

八、总结：让流程图成为你的加分项

在这个 "颜值即正义" 的时代，一个美观、交互性强的流程图不仅能提高工作效率，还能让你在团队中脱颖而出。想象一下，当别人还在用 Excel 画框框时，你已经能用 Vue Flow 创建出会动、会说话、能交互的流程图 —— 这波操作，老板看了直呼加薪。

Vue Flow 的优势在于：

极致灵活：从简单的流程图到复杂的可视化系统，都能胜任

易于使用：基于 Vue 的 API 设计，前端开发者上手毫无压力

高度可定制：节点、连线、交互都可以按照需求定制

性能优秀：即使有上百个节点，也能保持流畅运行

最后，送所有前端开发者一句话：好的工具能让你事半功倍。与其在各种绘图工具间来回切换，不如花一天时间学习 Vue Flow，从此让流程图成为你的加分项，而不是负担。

现在，打开你的代码编辑器，开始绘制第一个 Vue Flow 流程图吧。记住，最好的流程图永远是下一个 —— 因为有了 Vue Flow，你总能画出更好的。