# vue-flow-design-plus

**Repository Path**: zhangyeping/vue-flow-design-plus

## Basic Information

- **Project Name**: vue-flow-design-plus
- **Description**: Vue Flow Design Plus流程设计器，基于Vue + Ant Design Vue + JSPlumb
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: https://a63149300.github.io/vue-flow-design-plus
- **GVP Project**: No

## Statistics

- **Stars**: 262
- **Forks**: 97
- **Created**: 2021-06-09
- **Last Updated**: 2025-07-29

## Categories & Tags

**Categories**: vue-extensions

**Tags**: Vue, JSPlumb, flow-design, Ant-Design

## README

#### 在线演示

[点击预览](https://a63149300.github.io/vue-flow-design-plus)

#### 介绍

- VUE FLOW DESIGN PLUS 流程设计器，基于 Vue + Ant Design Vue + JSPlumb，该组件目的是为了使用在 Vue 项目中，它前身是[VFD 流程设计器](https://github.com/ZFSNYJ/VFD)。
- Vue 版本以全新的技术栈重构了代码，并在原版基础上实现了更好的操作方式，新版会作为优先版本持续迭代。

#### Vue3 版本开源

- VUE3 FLOW DESIGN 流程设计器，基于 Vue3 + TypeScript + Vite + Ant Design Vue 3 + JSPlumb。[vue3-flow-design](https://gitee.com/zhangyeping/vue3-flow-design)。

#### 优化内容

- 解决之前 VFD 遗留的 BUG
- 将 jquery-ui 换成原生写法
- 将 jquery 换成原生写法
- 修改 that 为 this 写法，改写箭头函数
- 注解添加
- 持续优化
- ...

#### 操作命令

- 安装项目 node_modules 包：yarn

- 启动项目：yarn start

- 构建项目 dist 文件夹资源：npm run build

#### 效果演示

- 最新界面效果
  ![01](README.assets/01.png)

- 基础面板

  ![02](README.assets/02.jpg)

- 拖拽节点到绘图区连线

  ![03](README.assets/03.gif)

- 拖拽对齐或使用自动对齐

  ![04](README.assets/04.gif)

- 显示/隐藏网格

  ![05](README.assets/05.gif)

- 设置节点和连线的属性

  ![06](README.assets/06.gif)

- 单节点、多节点移动(按住 CTRL 键)

  ![07](README.assets/07.gif)

- 改变节点对齐的排序顺序(按住 Ctrl 键一个一个单击选中要对齐的节点，单击的顺序就是对齐的排列顺序)

  ![08](README.assets/08.gif)

- 清空画布，重新绘制

  ![09](README.assets/09.gif)

- 保存流程图(会生成一段 json 数据，后台可以保存这段数据，为了便于调试，生成的 json 数据可以通过快捷键 CTRL+ALT+T 打开的测试窗口看到。同时也可以从该窗口载入其他的符合流程图的 json 数据)

  ![10](README.assets/10.gif)

- 保存流程图为图片保存到本地

  ![11](README.assets/11.gif)

- 画布拖拽、缩放

  ![12](README.assets/12.gif)

- 通过设置页面(CTRL+ALT+S)可以设置相关参数

  ![13](README.assets/13.gif)

- 快捷键说明

  ![14](README.assets/14.gif)

- 。。。。。。

```

```