lowflow-design：低代码流程设计器，让流程搭建更简单！

嗨，大家好，我是小华同学，关注我们获得“最新、最全、最优质”开源项目和高效工作学习方法

简介

lowflow-design 是一个基于 Vue3、Vite、TypeScript、Element-Plus 等技术栈开发的，适用于低代码或无代码开发平台的流程设计器。它让普通人也能通过简单配置快速搭建流程，并提供了将 json 转换为 xml 的后端代码：lowflow-design-converter。

在线预览

• lowflow-design: https://tsai996.github.io/lowflow-design/

• 成品案例: https://demo.lowflow.vip/

项目源码

• 后端源码 (lowflow-design-converter):

  • github: https://github.com/tsai996/lowflow-design-converter

  • 码云: https://gitee.com/cai_xiao_feng/lowflow-design-converter

• 前端源码 (lowflow-design):

  • github: https://github.com/tsai996/lowflow-design

  • 码云: https://gitee.com/cai_xiao_feng/lowflow-design

lowflow-design

1. 克隆 lowflow-design 项目代码：git clone https://github.com/tsai996/lowflow-design.git

2. 安装依赖：npm install

3. 启动开发服务器：npm run dev

4. 访问 http://localhost:3000/，开始使用 lowflow-design 设计流程

示例图

节点项

属性面板

特性

• 节点: 支持多种节点类型，包括审批人、抄送人、互斥分支、计时等待、消息通知等。

• 状态: 所有节点都支持状态配置，可以根据不同的状态进行不同的处理。

• 描述: 可以对每个节点进行描述，方便理解节点的作用。

• 审批人: 支持单人、多人、角色、部门、发起人、上级领导、自定义审批人等多种审批人类型。

• 抄送人: 支持单人、多人、角色、部门、发起人、上级领导、自定义抄送人等多种抄送人类型。

• 互斥分支: 支持或/且条件组，条件组组合，可以灵活配置分支条件。

• 计时等待: 支持秒、分、时、天、周、月、自定义时间等待，可以满足各种时间等待需求。

• 消息通知: 支持站内、邮件、企业微信、钉钉、飞书、短信、自定义通知内容，可以满足各种通知需求。

目录结构

├── public
├── src
│   ├── api                                     # 接口
│   │   ├── index.ts                            # 接口统一管理
│   │   ├── modules                             # 接口模块
│   │   │   ├── role.ts                         # 角色接口
│   │   │   ├── user.ts                         # 用户接口
│   │   │   └── model.ts                        # 流程模型接口
│   ├── assets                                  # 静态资源
│   │   ├── logo.png
│   │   └── ...
│   ├── components                              # 公共组件
│   │   ├── AdvancedFilter                      # 高级条件筛选
│   │   ├── Render                              # 组件渲染器
│   │   ├── RoleSelector                        # 角色选择器
│   │   ├── SvgIcon                             # svg图标
│   │   ├── UserSelector                        # 用户选择器
│   │   └── ...
│   ├── mock                                    # mock模拟数据
│   │   ├── index.ts
│   │   ├── role.ts                             # 角色接口
│   │   ├── user.ts                             # 用户接口
│   │   └── ...
│   ├── router                                  # 路由
│   │   ├── index.ts
│   │   └── ...
│   ├── stores                                  # 状态管理
│   │   ├── index.ts
│   │   └── ...
│   ├── styles                                  # 全局样式
│   │   ├── index.scss
│   │   └── ...
│   ├── typings                                 # 全局类型
│   │   ├── index.scss
│   │   └── ...
│   ├── views     
│   │   ├── flowDesign                          # 流程设计器     
│   │   │   ├── nodes                           # 流程节点  
│   │   │   │   ├── Add.vue                     # 添加节点
│   │   │   │   ├── ApprovalNode.vue            # 审批人节点
│   │   │   │   ├── CcNode.vue                  # 抄送人节点
│   │   │   │   ├── ConditionNode.vue           # 条件节点
│   │   │   │   ├── EndNode.vue                 # 结束节点
│   │   │   │   ├── ExclusiveNode.vue           # 互斥分支节点
│   │   │   │   ├── GatewayNode.vue             # 网关节点
│   │   │   │   ├── Node.vue                    # 节点
│   │   │   │   ├── StartNode.vue               # 开始节点
│   │   │   │   ├── NotifyNode.vue              # 消息通知节点
│   │   │   │   ├── TimerNode.vue               # 计时等待节点
│   │   │   │   ├── TreeNode.vue                # 节点树
│   │   │   │   └── type.ts                     # 节点类型
│   │   │   ├── panels                          # 属性面板  
│   │   │   │   ├── ApprovalPanel.vue           # 审批人配置面板
│   │   │   │   ├── CcPanel.vue                 # 抄送人配置面板
│   │   │   │   ├── ConditionPanel.vue          # 条件配置面板
│   │   │   │   ├── index.vue                   # 属性面板抽屉
│   │   │   │   ├── StartPanel.vue              # 开始配置面板
│   │   │   │   ├── NotifyPanel.vue             # 消息通知配置面板
│   │   │   │   └── TimerPanel.vue              # 计时等待配置面板
│   │   ├── home                                # 首页
│   │   └── ...
│   ├── App.vue
│   ├── main.ts
│   └── shims-vue.d.ts
├── .gitignore
├── package.json
├── README.md
├── unocss.config.ts
└── vite.config.ts

应用场景

lowflow-design可以应用于以下场景：

• 企业内部流程管理: 例如请假流程、报销流程、采购流程等。

• 在线办公平台: 例如OA系统、CRM系统、ERP系统等。

• 低代码/无代码开发平台: 作为低代码/无代码开发平台的流程设计组件。

同类项目

• Activiti: Activiti 是一个开源的工作流和业务流程管理 (BPM) 平台，用于构建企业级应用程序。它支持 BPMN 2.0 标准，并提供了一套丰富的功能，包括流程设计、流程引擎、任务管理、用户管理等。

• Flowable: Flowable 是一个轻量级的工作流和业务流程管理 (BPM) 平台，用于构建企业级应用程序。它支持 BPMN 2.0 标准，并提供了一套丰富的功能，包括流程设计、流程引擎、任务管理、用户管理等。

• Camunda: Camunda 是一个开源的工作流和决策自动化平台，用于构建企业级应用程序。它支持 BPMN 2.0 和 DMN 1.1 标准，并提供了一套丰富的功能，包括流程设计、流程引擎、任务管理、用户管理、决策管理等。

总结

lowflow-design 是一个功能强大且易于使用的低代码流程设计器，可以帮助您快速构建各种流程应用。它具有丰富的节点类型、灵活的配置选项和友好的用户界面，是您构建流程应用的理想选择。