介绍

easyflow是一个码云上开源的一款流程设计器项目，基于VUE+ElementUI+JsPlumb，通过 vuedraggable 插件来实现节点拖拽。

仓库地址

https://gitee.com/xiaoka2017/easy-flow

https://github.com/BiaoChengLiu/easy-flow

功能概述

• 支持拖拽添加节点
• 点击线进行设置条件
• 支持给定数据加载流程图
• 支持画布拖拽
• 支持连线样式、锚点、类型自定义覆盖
• 支持力导图

如何集成到自己的项目

• 下载源码
• 在自己的vue工程中找到package.json，并引入如下依赖（不用额外引入jsplumb）

"element-ui": "2.9.1",
  "lodash": "4.17.15",
  "vue": "^2.5.2",
  "vue-codemirror": "^4.0.6",
  "vuedraggable": "2.23.0"

• 将easy-flow/src/components/ef 目录复制到自己工程的一个目录下（如/src/views）
• 修改main.js，引入elementUI和easy-flow样式

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import '@/这个为复制后的目录，src就不要写了/ef/index.css'
Vue.use(ElementUI, {size: 'small'})

项目启动

# 下载工程
git clone  https://github.com/BiaoChengLiu/easy-flow.git

# 安装依赖包
npm install

# 启动
npm run dev

# 访问地址
 http://localhost:8080

总结

easy-flow是非常好的一个Web端流程设计器，简单易用，界面美观、操作流畅！