Vue 3 + jsPlumb 打造可视化流程图组件（支持图标与颜色配置）

一、项目简介

本文基于 Vue 3 + jsPlumb 实现一个完整的流程图组件，具备以下功能：

• 支持节点拖拽添加
• 支持节点之间连接与删除
• 节点支持自定义图标与颜色选择
• 支持导入导出 JSON 数据
• 支持视图缩放与自动居中
• 支持快捷键删除、右键菜单操作
• 支持自动布局拓展
• 具备组件封装能力，可复用

二、流程图基础结构搭建

2.1 安装依赖

npm install jsplumb

2.2 基础组件结构

<template>
  <div class="flow-container" ref="container">
    <div
      v-for="node in nodes"
      :key="node.id"
      class="flow-node"
      :id="node.id"
      :style="getNodeStyle(node)"
      @contextmenu.prevent="showContextMenu(node, $event)"
    >
      <div class="icon">{
   
   {
   
    node.icon }}</div>
      <div class="label">{
   
   {
   
    node.label }}</div>
    </div>

    <context-menu
      v-if="context.visible"
      :node="context.node"
      :x="context.x"
      :y="context.y"
      @update="updateNode"
      @delete="deleteNode"
    />
  </div>
</template>

三、节点拖拽与连接逻辑

3.1 拖拽添加节点

function addNode(label = '新节点') {
   
   
  const id = 'node-' + Date.now();
  nodes.value.push({
   
   
    id,
    label,
    icon: '📦',
    color: '#409EFF',
    left: 200,
    top: 150
  });
  nextTick(()