当前位置:首页 > 技术分析 > 正文内容

很香的几款开源免费的流程设计器

ruisui882个月前 (04-09)技术分析25

1、LogicFlow

(1) 介绍:

LogicFlow 是一款流程图编辑框架,提供了一系列流程图交互、编辑所必需的功能和灵活的节点自定义、插件等拓展机制。LogicFlow支持前端研发自定义开发各种逻辑编排场景,如流程图、ER图、BPMN流程等。在工作审批配置、机器人逻辑编排、无代码平台流程配置上都有较好的应用。

(2) 源码下载:

https://github.com/didi/LogicFlow

(3) 项目说明:

http://logic-flow.org/guide/start.html#%E5%AE%89%E8%A3%85

(4) 效果截图:


2、easy-flow

(1) 介绍:

easy-flow 基于VUE+ElementUI+JsPlumb的流程设计器,通过 vuedraggable 插件来实现节点拖拽。

(2) 源码下载:

https://gitee.com/xiaoka2017/easy-flow#%E9%A1%B9%E7%9B%AE%E4%BB%8B%E7%BB%8D

(3) 项目说明:

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

(4) 效果截图:




3、vue-flow-design-plus

(1) 介绍:

VUE FLOW DESIGN PLUS流程设计器,基于Vue + Ant Design Vue + JSPlumb,该组件目的是为了使用在Vue项目中,它前身是VFD流程设计器。

Vue版本以全新的技术栈重构了代码,并在原版基础上实现了更好的操作方式,新版会作为优先版本持续迭代。

(2) 源码下载:

https://gitee.com/zhangyeping/vue-flow-design-plus

(3) 项目说明:

VUE3 FLOW DESIGN 流程设计器,基于 Vue3 + TypeScript + Vite + Ant Design Vue 3 + JSPlumb。

(4) 效果截图:

4、approvalFlow--仿钉钉流程设计器

(1) 介绍:

一款模仿钉钉审批流程开发的表单+流程设计器,可以实现类似钉钉审批流程界面效果,前端使用vue开发。

(2) 源码下载:

https://github.com/SNFocus/approvalFlow

(3) 项目说明:

表单配置(form-generator)

  • 拖拽表单,生成布局页面
  • 配置拖拽组件属性,定制组件形态
  • 生成JSON数据并生成预览页面

流程节点配置(仿钉钉界面)

  • 创建审批流程(发起人,审批人,条件节点,抄送人)
  • 配置节点详细数据,包括条件节点表达式及期望值等
  • 配置节点对表单的权限(目前并未在预览页面中做控制)
  • 必填节点校验

(4) 效果截图:

扫描二维码推送至手机访问。

版权声明:本文由ruisui88发布,如需转载请注明出处。

本文链接:http://www.ruisui88.com/post/3395.html

标签: vue 流程图
分享给朋友:

“很香的几款开源免费的流程设计器” 的相关文章

突发!微信全面封禁字节跳动旗下办公产品飞书

日前,字节跳动旗下办公套件飞书发布官方公告称,飞书相关域名无故被微信全面封禁,并且被单方面关闭微信分享API接口。和讯科技对此进行了尝试,发现“feishu”相关域名链接在微信内均无法打开,显示“如需浏览,请长按网址复制后使用浏览器访问”,而在飞书内也无法直接跳转微信分享,显示“未获得分享权限”。据...

一篇文章搞懂同步与异步、阻塞与非阻塞

要想掌握好Java NIO需要涉及了解同步与异步、阻塞与非阻塞,本文通过相关例子让你深入理解其本质@mikechen阻塞阻塞与非阻塞是对同一个线程来说的,在某个时刻,线程要么处于阻塞,要么处于非阻塞。阻塞调用是指调用结果返回之前,当前线程会被挂起,调用线程只有在得到结果之后才会返回。举一个例子:当一...

前端开发3年了,竟然不知道什么是 Vue 脚手架?(上)

一、脚手架认识和使用前提CLI 是什么意思?CLI -- Command-Line Interface 命令行界面,俗称脚手架。脚手架就是一个大概的框架,是建筑学上的一个概念。1.1、什么是Vue-cli?Vue-cli 是官方发布 vue.js 项目脚手架,使用 Vue-cli 可以快速搭建 vu...

使用 Vue 脚手架,为什么要学 webpack?(一)

先问大家一个很简单的问题:vue init webpack prjectName 与 vue create projectName 有什么区别呢?它们是 Vue-cli 2 和 Vue-cli3 创建项目的两个命令,之所以两个命令不同,根本原因是 Vue-cli2 是基于webpack 3,而 vu...

VUE高效开发 - 脚手架

哈喽哈喽 大家好,今天跟大家分享一下关于vue开发的一些小技巧。目前前端最主流的两个 开发 模式 就是 react 和 vue 。他们的特点显明,一个是类似 jsp的jsx语言,js动态拼凑html片段,一个是模板与控制分开,各有千秋,都有大量的支持者。今天主要给大家介绍一个基于vue的项目,从哪些...

微信小程序开发教程1(从0基础到学会UI组件开发)

1、体验官方提供的小程序组件/接口等可以点击进入相关组件看看效果和如何使用。2、提前了解小程序的开发与发布2.1 注册一个小程序的开发账号https://mp.weixin.qq.com/wxamp/home/guide?lang=zh_CN&token=1313416074个人只能注册个人的账号,...