一款基于 .NET Vue 编写的仿钉钉的开源低代码工作流引擎支持多种数据库开箱即用为什么需要低代码工作流引擎在企业信息化建设中审批流程如请假、报销、合同审批是刚需。传统开发模式下每新增一个流程就要写大量重复代码表单页面、流程状态机、审批逻辑、消息通知……维护成本极高。而低代码工作流引擎可以将这些共性抽象为可视化配置让业务人员通过拖拽就能搭建流程开发人员只需关注核心业务逻辑。今天要介绍的这款开源项目FlowWise化名基于 .NET 8 Vue 3 构建完全仿照钉钉的审批体验支持 SQL Server、MySQL、PostgreSQL、SQLite 四种数据库内置了表单设计器、流程设计器、权限管理、待办中心等模块真正做到了开箱即用。## 核心架构设计### 后端.NET 8 Workflow CoreFlowWise 后端采用 .NET 8使用Workflow Core作为流程引擎核心。该库支持持久化、事件驱动、定时任务且与数据库无关。我们通过自定义PersistenceProvider来适配不同数据库。csharp// Program.cs - 配置多数据库支持using FlowWise.Core;using FlowWise.Persistence;using Microsoft.EntityFrameworkCore;var builder WebApplication.CreateBuilder(args);// 从 appsettings.json 读取数据库类型var dbType builder.Configuration[Database:Type];builder.Services.AddDbContextFlowWiseDbContext(options { switch (dbType) { case SqlServer: options.UseSqlServer(builder.Configuration.GetConnectionString(Default)); break; case MySql: options.UseMySql(builder.Configuration.GetConnectionString(Default), new MySqlServerVersion(new Version(8, 0, 36))); break; case PostgreSql: options.UseNpgsql(builder.Configuration.GetConnectionString(Default)); break; case Sqlite: options.UseSqlite(builder.Configuration.GetConnectionString(Default)); break; default: throw new NotSupportedException($Unsupported database type: {dbType}); }});// 注入工作流服务builder.Services.AddWorkflow(cfg { cfg.UsePersistence(sp sp.GetRequiredServiceFlowWiseDbContext()); // 使用 EF Core 持久化 cfg.UseSqlServer(sp sp.GetRequiredServiceFlowWiseDbContext().Database.GetConnectionString(), true);});var app builder.Build();app.Run();### 前端Vue 3 仿钉钉 UI前端使用 Vue 3 Element Plus 自定义拖拽组件。表单设计器基于form-create二次封装流程设计器基于bpmn-js定制界面风格与钉钉高度一致左侧组件库、中间画布、右侧属性面板。vue!-- FlowDesigner.vue - 流程设计器核心组件 --template div classflow-designer !-- 左侧节点组件库 -- div classnode-palette draggable v-modelnodeTypes :group{ name: nodes } :clonecloneNode div v-fornode in nodeTypes :keynode.type classpalette-item i :classnode.icon/i span{{ node.label }}/span /div /draggable /div !-- 中间画布区域使用 bpmn-js 渲染 -- div refcanvasContainer classcanvas-container/div !-- 右侧属性面板 -- div classproperty-panel el-form v-ifselectedNode :modelselectedNode label-width80px el-form-item label节点名称 el-input v-modelselectedNode.name / /el-form-item el-form-item label审批人类型 el-select v-modelselectedNode.approverType el-option label指定成员 valueuser / el-option label部门主管 valuemanager / el-option label发起人自选 valueself / /el-select /el-form-item /el-form /div /div/templatescript setupimport { ref, onMounted } from vue;import BpmnModeler from bpmn-js/lib/Modeler;import draggable from vuedraggable;// 节点类型定义仿钉钉的审批节点const nodeTypes ref([ { type: approval, label: 审批人, icon: el-icon-user }, { type: condition, label: 条件分支, icon: el-icon-share }, { type: copy, label: 抄送人, icon: el-icon-message },]);// 克隆拖拽的节点到画布const cloneNode (original) ({ ...original, id: node_${Date.now()}, name: original.label, approverType: user,});const canvasContainer ref(null);let modeler null;onMounted(() { // 初始化 bpmn-js 模型器 modeler new BpmnModeler({ container: canvasContainer.value, keyboard: { bindTo: document }, }); // 默认创建一个空流程 const xml ?xml version1.0 encodingUTF-8? bpmn:definitions xmlns:bpmnhttp://www.omg.org/spec/BPMN/20100524/MODEL ... bpmn:process idProcess_1 isExecutabletrue bpmn:startEvent idStartEvent_1 / /bpmn:process /bpmn:definitions; modeler.importXML(xml);});/scriptstyle scoped.flow-designer { display: flex; height: 100%; }.node-palette { width: 180px; border-right: 1px solid #ddd; }.canvas-container { flex: 1; }.property-panel { width: 300px; border-left: 1px solid #ddd; }/style## 工作流引擎的核心机制### 1. 流程定义与实例化流程定义通过可视化设计器生成 JSON 格式的描述文件后端解析后注册到 Workflow Core。当用户发起申请时引擎创建流程实例并执行。csharp// WorkflowService.cs - 启动审批流程public class WorkflowService{ private readonly IWorkflowHost _host; public async Taskstring StartApprovalAsync(ApprovalRequest request) { // 1. 根据流程定义ID创建实例 var workflowId await _host.StartWorkflow( request.WorkflowDefinitionId, new WorkflowData { Applicant request.ApplicantId, FormData request.FormData, // 其他业务数据 }); // 2. 记录到业务表方便业务查询 await _dbContext.Approvals.AddAsync(new ApprovalRecord { WorkflowInstanceId workflowId, Title request.Title, CurrentNode 审批节点1, Status Running }); return workflowId; }}### 2. 审批动作处理审批人点击“同意”或“拒绝”时需要将动作传递给工作流引擎。这里通过自定义步骤体StepBody来实现。csharp// ApprovalStep.cs - 自定义审批步骤public class ApprovalStep : StepBody{ public string ApproverId { get; set; } public string Action { get; set; } // approve 或 reject public override ExecutionResult Run(IStepExecutionContext context) { var data (WorkflowData)context.Workflow.Data; // 记录审批历史 data.ApprovalHistory.Add(new ApprovalRecord { NodeId context.Step.Id, ApproverId ApproverId, Action Action, Time DateTime.Now }); // 如果拒绝则终止流程 if (Action reject) { data.Status Rejected; return ExecutionResult.End(); } // 判断是否还有下一个节点 if (data.CurrentNodeIndex data.NodeSequence.Count - 1) { data.Status Approved; return ExecutionResult.End(); } // 继续执行下一个节点 data.CurrentNodeIndex; return ExecutionResult.Next(); }}## 低代码能力可视化表单与流程### 表单设计器用户可以通过拖拽生成表单字段类型包括输入框、数字、日期、下拉选择、附件上传等。生成的表单结构为 JSON Schema前端动态渲染后端自动存储为结构化数据。json{ schema: { type: object, properties: { applyReason: { type: string, title: 请假原因 }, startDate: { type: string, format: date, title: 开始日期 }, days: { type: number, title: 请假天数 }, attachment: { type: string, format: file, title: 附件 } } }}### 流程设计器除了拖拽节点还支持设置条件分支如金额大于1000走总监审批、会签多人同时审批等高级功能。所有配置最终转为 BPMN 2.0 XML 或自定义 JSON由引擎解析执行。## 数据库兼容性设计FlowWise 通过 EF Core 的 Provider 模式完美支持四种数据库。在appsettings.json中仅需切换数据库类型和连接字符串json{ Database: { Type: PostgreSql, ConnectionString: Hostlocalhost;Databaseflowwise;Usernameadmin;Passwordsecret }}此外引擎还提供了数据库迁移脚本首次启动时自动创建所有表结构无需手动操作。## 部署与使用FlowWise 支持 Docker 一键部署bash# docker-compose.yml 示例docker run -d -p 8080:80 \ -e Database__TypeMySql \ -e Database__ConnectionStringServermysql;Databaseflowwise;Uidroot;Pwd123456 \ flowwise:latest启动后访问http://localhost:8080使用默认管理员账号admin/123456登录即可开始创建流程。## 总结FlowWise 作为一款开源低代码工作流引擎具有以下亮点1.仿钉钉交互体验前端 UI 精仿钉钉用户零学习成本。2.多数据库支持无需修改代码切换数据库只需改配置。3.可视化设计器表单和流程均可拖拽配置降低开发门槛。4.开箱即用提供 Docker 镜像和完整示例代码几分钟内即可启动。对于中小企业而言FlowWise 可以直接作为 OA 系统的审批中心对于开发团队它的模块化设计也便于二次扩展。如果你正在寻找一个轻量但功能完整的工作流引擎FlowWise 值得一试 项目地址示例https://github.com/yourname/flowwise 实际使用时请替换为真实仓库地址