Flowable 自定义流程设计器 - 架构设计与实现方案

一、项目概述

在 Flowable 6.8.1.36 源码之外，构建一个全新的 独立 Spring Boot 项目，通过 Maven 依赖集成 Flowable 引擎组件（flowable-spring-boot-starter-process），前端使用 Vue 3 + Element Plus + bpmn.js 实现现代化的流程设计器。

核心目标

  • 简单场景：审批流程通过可视化拖拽即可完成，零代码开发

  • 复杂场景：支持服务任务、脚本、消息事件、子流程等高级 BPMN 元素配置

  • 生产就绪：输出标准 BPMN 2.0 XML，由 Flowable 引擎直接执行

二、总体架构

三、技术选型

后端技术栈

组件技术说明
基础框架Spring Boot 2.7.x与 Flowable 6.8 兼容
流程引擎flowable-spring-boot-starter-process 6.8.1.36核心流程引擎
JSON转换flowable-json-converter 6.8.1.36JSON 与 BPMN 模型互转
ORMMyBatis-Plus自定义表管理
数据库MySQL 8.0 / PostgreSQL引擎表 + 业务表
安全Spring Security + JWT认证授权
接口文档Swagger / SpringDocAPI 文档

前端技术栈

组件技术说明
框架Vue 3 + TypeScript组合式 API
UI库Element Plus企业级组件
流程设计器bpmn.js + bpmn-js-properties-panelBPMN 2.0 标准设计器
表单设计器form-create / VForm动态表单构建
状态管理Pinia全局状态
HTTPAxios请求封装
构建Vite快速构建

四、项目结构

后端目录结构

flowable-designer/
  flowable-designer-backend/
    src/main/java/com/yourcompany/flowdesigner/
      config/                    # 配置类
        FlowableConfig.java      # Flowable 引擎配置
        SecurityConfig.java      # 安全配置
        CorsConfig.java          # 跨域配置
      controller/                # REST 控制器
        ProcessDesignController  # 流程设计 API
        ProcessRuntimeController # 流程运行 API
        TaskController           # 任务管理 API
        FormController           # 表单管理 API
        OrgController            # 组织人员 API
        MonitorController        # 监控统计 API
      service/                   # 业务服务层
        design/                  # 设计器相关
          ModelService           # 模型管理
          BpmnConvertService     # BPMN 转换
          StencilSetService      # Stencil 配置
        runtime/                 # 运行时相关
          ProcessService         # 流程实例管理
          TaskService            # 任务管理
          FormService            # 表单服务
        org/                     # 组织相关
          UserService            # 用户管理
          DepartmentService      # 部门管理
          RoleService            # 角色管理
      domain/                    # 领域模型
        entity/                  # 数据库实体
        dto/                     # 数据传输对象
        vo/                      # 视图对象
      mapper/                    # MyBatis Mapper
      listener/                  # 流程监听器
        GlobalTaskListener       # 全局任务监听
        ApprovalTaskListener     # 审批任务监听
      handler/                   # 自定义处理器
        AssigneeHandler          # 审批人处理
        NotificationHandler      # 通知处理
      common/                    # 公共模块
        Result.java              # 统一响应
        BaseException.java       # 异常体系
    src/main/resources/
      application.yml            # 应用配置
      mapper/                    # MyBatis XML

前端目录结构

flowable-designer/
  flowable-designer-frontend/
    src/
      views/
        designer/                # 流程设计器
          index.vue              # 设计器主页面
          components/
            BpmnDesigner.vue     # bpmn.js 封装
            PropertiesPanel.vue  # 属性面板
            NodePalette.vue      # 节点面板
            ApprovalWizard.vue   # 审批流程向导(简单模式)
        form/                    # 表单设计器
        process/                 # 流程管理
        task/                    # 任务中心
        monitor/                 # 流程监控
      components/
        bpmn/                    # bpmn.js 相关
          customModeler/         # 自定义建模器
          customPalette/         # 自定义工具栏
          customRenderer/        # 自定义渲染器
          customProperties/      # 自定义属性面板
      api/                       # API 调用
      store/                     # Pinia 状态
      utils/                     # 工具函数
      types/                     # TypeScript 类型

五、核心模块设计

5.1 流程设计器（核心）

设计器分为 简单模式 和 高级模式：

简单模式 - 审批流程向导

简单模式针对审批场景封装，用户无需理解 BPMN 概念：

  • 可用节点：审批节点、抄送节点、条件分支、并行分支

  • 审批人配置：指定人员 / 部门负责人 / 角色 / 发起人自选 / 上级审批（逐级）

  • 审批方式：或签（任一人通过）/ 会签（所有人通过）/ 依次审批

  • 条件分支：基于表单字段的可视化条件配置（如"金额 > 5000"）

  • 表单关联：直接绑定表单设计器创建的表单

实现原理：简单模式的 JSON 数据结构在保存时，由后端 BpmnConvertService 转换为标准 BPMN 2.0 XML：

// 简单模式 JSON -> BPMN XML 转换核心逻辑
public class ApprovalProcessConverter {
    public BpmnModel convertFromSimpleModel(SimpleProcessDTO dto) {
        BpmnModel model = new BpmnModel();
        Process process = new Process();
        process.setId(dto.getProcessKey());
        process.setName(dto.getProcessName());
​
        // 创建开始事件
        StartEvent startEvent = new StartEvent();
        startEvent.setId("startEvent1");
        process.addFlowElement(startEvent);
​
        // 遍历审批节点，转换为 UserTask
        for (ApprovalNodeDTO node : dto.getNodes()) {
            UserTask userTask = createUserTask(node);
            process.addFlowElement(userTask);
        }
​
        // 处理条件分支 -> ExclusiveGateway
        // 处理并行分支 -> ParallelGateway
        // 处理会签 -> MultiInstanceLoopCharacteristics
        // ...
​
        model.addProcess(process);
        return model;
    }
}
高级模式 - 完整 BPMN 设计器

基于 bpmn.js 封装，支持完整的 BPMN 2.0 元素：

  • 事件：开始/结束/中间事件（定时器、消息、信号、错误）

  • 任务：用户任务、服务任务、脚本任务、邮件任务、HTTP 任务

  • 网关：排他、并行、包容、事件网关

  • 子流程：嵌套子流程、调用活动

  • 连接：顺序流（含条件表达式）

  • 泳道：泳池和泳道

自定义属性面板：替换 bpmn.js 默认的属性面板，使用 Element Plus 组件构建中文化的属性配置界面：

审批人设置面板:
  |- 指定用户（用户选择器）
  |- 候选用户（多用户选择器）
  |- 候选组/角色（角色选择器）
  |- 动态审批人（表达式配置 ${expression}）
  |- 多实例设置（会签/或签）
​
条件表达式面板:
  |- 可视化条件构建器（字段 + 操作符 + 值）
  |- 高级模式（直接编辑 UEL 表达式）
​
表单配置面板:
  |- 关联表单设计器表单
  |- 字段权限设置（可见/可编辑/必填/隐藏）
​
监听器配置面板:
  |- 执行监听器
  |- 任务监听器

5.2 表单设计器

独立的可视化表单构建器，供流程节点绑定使用：

  • 基础组件：输入框、下拉框、日期、数字、文本域、上传

  • 高级组件：部门选择、人员选择、关联数据

  • 布局组件：栅格、标签页、分组

  • 表单存储：JSON Schema 格式存储，运行时动态渲染

5.3 流程运行时

六、关键 API 设计

6.1 流程设计 API

POST   /api/model                       # 创建模型
GET    /api/model/{id}                   # 获取模型详情
PUT    /api/model/{id}                   # 更新模型
DELETE /api/model/{id}                   # 删除模型
GET    /api/model/list                   # 模型列表(分页)
POST   /api/model/{id}/deploy           # 部署流程
GET    /api/model/{id}/xml              # 导出 BPMN XML
POST   /api/model/import                # 导入 BPMN XML
POST   /api/model/{id}/simple-to-bpmn   # 简单模式转 BPMN
POST   /api/model/validate              # 验证流程模型

6.2 流程运行 API

POST   /api/process/start               # 发起流程
GET    /api/process/{id}                 # 流程实例详情
DELETE /api/process/{id}                 # 撤销/终止流程
GET    /api/process/{id}/diagram        # 流程跟踪图
GET    /api/process/{id}/history        # 审批记录
POST   /api/process/{id}/suspend        # 挂起流程
POST   /api/process/{id}/activate       # 激活流程

6.3 任务 API

GET    /api/task/todo                    # 我的待办
GET    /api/task/done                    # 我的已办
GET    /api/task/initiated               # 我发起的
POST   /api/task/{id}/complete           # 完成任务(同意)
POST   /api/task/{id}/reject            # 驳回
POST   /api/task/{id}/delegate          # 委派
POST   /api/task/{id}/transfer          # 转办
POST   /api/task/{id}/add-sign          # 加签
POST   /api/task/{id}/countersign       # 会签
GET    /api/task/{id}/form              # 获取任务表单
POST   /api/task/{id}/comment           # 添加审批意见

6.4 表单 API

POST   /api/form                         # 创建表单
GET    /api/form/{id}                    # 获取表单定义
PUT    /api/form/{id}                    # 更新表单
GET    /api/form/list                    # 表单列表
GET    /api/form/{id}/render            # 渲染表单(运行时)
POST   /api/form/{id}/data              # 提交表单数据

七、数据库设计

自定义业务表（Flowable 引擎表由引擎自动管理）

-- 流程模型表（设计器数据）
CREATE TABLE fd_model (
    id            BIGINT PRIMARY KEY AUTO_INCREMENT,
    name          VARCHAR(200) NOT NULL,
    model_key     VARCHAR(200) NOT NULL UNIQUE,
    category      VARCHAR(100),
    description   VARCHAR(500),
    model_type    TINYINT DEFAULT 0,        -- 0:简单模式 1:高级模式
    model_json    LONGTEXT,                 -- 设计器 JSON 数据
    bpmn_xml      LONGTEXT,                 -- BPMN XML（部署用）
    form_id       BIGINT,                   -- 关联表单
    version       INT DEFAULT 1,
    status        TINYINT DEFAULT 0,        -- 0:草稿 1:已部署
    thumbnail     MEDIUMBLOB,
    create_by     VARCHAR(64),
    create_time   DATETIME,
    update_by     VARCHAR(64),
    update_time   DATETIME,
    tenant_id     VARCHAR(64)
);
​
-- 表单定义表
CREATE TABLE fd_form (
    id            BIGINT PRIMARY KEY AUTO_INCREMENT,
    name          VARCHAR(200) NOT NULL,
    form_key      VARCHAR(200) NOT NULL UNIQUE,
    description   VARCHAR(500),
    form_json     LONGTEXT,                 -- 表单 JSON Schema
    version       INT DEFAULT 1,
    status        TINYINT DEFAULT 0,
    create_by     VARCHAR(64),
    create_time   DATETIME,
    update_by     VARCHAR(64),
    update_time   DATETIME
);
​
-- 表单数据表
CREATE TABLE fd_form_data (
    id                  BIGINT PRIMARY KEY AUTO_INCREMENT,
    form_id             BIGINT NOT NULL,
    process_instance_id VARCHAR(64),
    task_id             VARCHAR(64),
    form_data           LONGTEXT,           -- 表单数据 JSON
    create_by           VARCHAR(64),
    create_time         DATETIME
);
​
-- 审批意见表
CREATE TABLE fd_comment (
    id                  BIGINT PRIMARY KEY AUTO_INCREMENT,
    process_instance_id VARCHAR(64) NOT NULL,
    task_id             VARCHAR(64),
    task_name           VARCHAR(200),
    action_type         VARCHAR(50),        -- approve/reject/delegate/transfer
    comment             VARCHAR(2000),
    create_by           VARCHAR(64),
    create_time         DATETIME
);
​
-- 组织部门表
CREATE TABLE fd_department (
    id            BIGINT PRIMARY KEY AUTO_INCREMENT,
    name          VARCHAR(100) NOT NULL,
    parent_id     BIGINT DEFAULT 0,
    sort          INT DEFAULT 0,
    leader_id     VARCHAR(64),              -- 部门负责人
    status        TINYINT DEFAULT 0
);

八、核心实现要点

8.1 Maven 依赖（后端 pom.xml 核心部分）

<parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>2.7.18</version>
</parent>
​
<properties>
    <flowable.version>6.8.1</flowable.version>
</properties>
​
<dependencies>
    <!-- Flowable 流程引擎 -->
    <dependency>
        <groupId>org.flowable</groupId>
        <artifactId>flowable-spring-boot-starter-process</artifactId>
        <version>${flowable.version}</version>
    </dependency>
    <!-- Flowable JSON 转换器（简单模式 <-> BPMN） -->
    <dependency>
        <groupId>org.flowable</groupId>
        <artifactId>flowable-json-converter</artifactId>
        <version>${flowable.version}</version>
    </dependency>
    <!-- Flowable 流程验证 -->
    <dependency>
        <groupId>org.flowable</groupId>
        <artifactId>flowable-process-validation</artifactId>
        <version>${flowable.version}</version>
    </dependency>
    <!-- Spring Boot Web -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <!-- MyBatis-Plus -->
    <dependency>
        <groupId>com.baomidou</groupId>
        <artifactId>mybatis-plus-boot-starter</artifactId>
    </dependency>
    <!-- MySQL -->
    <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
    </dependency>
</dependencies>

8.2 简单模式到 BPMN 的转换逻辑

这是本方案最关键的创新点。简单模式前端定义如下 JSON 结构：

{
  "processKey": "leave-approval",
  "processName": "请假审批流程",
  "formId": 1,
  "nodes": [
    {
      "type": "approval",
      "name": "部门经理审批",
      "assigneeType": "departmentLeader",
      "approvalMode": "single",
      "properties": { "level": 1 }
    },
    {
      "type": "condition",
      "conditions": [
        { "branch": "days > 3", "label": "请假天数>3天" },
        { "branch": "days <= 3", "label": "请假天数<=3天" }
      ]
    },
    {
      "type": "approval",
      "name": "HR审批",
      "assigneeType": "role",
      "roleKey": "hr-manager",
      "approvalMode": "or",
      "conditionBranch": "days > 3"
    },
    {
      "type": "cc",
      "name": "抄送通知",
      "ccType": "user",
      "userIds": ["user1", "user2"]
    }
  ]
}

后端将此 JSON 转换为包含 UserTask、ExclusiveGateway、MultiInstanceLoopCharacteristics 等元素的标准 BpmnModel，再通过 Flowable 的 BpmnXMLConverter 输出 BPMN 2.0 XML。

8.3 审批人动态解析

通过自定义 TaskListener 实现审批人动态解析：

@Component
public class DynamicAssigneeTaskListener implements TaskListener {
    @Override
    public void notify(DelegateTask task) {
        String assigneeType = (String) task.getVariable("assigneeType");
        switch (assigneeType) {
            case "departmentLeader":
                // 查询发起人所在部门负责人
                break;
            case "superiorApproval":
                // 逐级上级审批
                break;
            case "role":
                // 设置候选组
                break;
            case "selfSelect":
                // 发起人自选
                break;
        }
    }
}

8.4 前端 bpmn.js 集成要点

// BpmnDesigner.vue 核心逻辑
import BpmnModeler from 'bpmn-js/lib/Modeler'
import customModule from './customModeler'
import flowableExtension from './flowableExtension'
​
const modeler = new BpmnModeler({
  container: '#bpmn-canvas',
  propertiesPanel: { parent: '#properties-panel' },
  additionalModules: [
    customModule,       // 自定义面板、调色板、渲染器
  ],
  moddleExtensions: {
    flowable: flowableExtension  // Flowable 命名空间扩展
  }
})
​
// 导入 XML
async function importXml(xml: string) {
  await modeler.importXML(xml)
  modeler.get('canvas').zoom('fit-viewport')
}
​
// 导出 XML
async function exportXml(): Promise<string> {
  const { xml } = await modeler.saveXML({ format: true })
  return xml
}

九、流程设计器两种模式的切换

十、部署架构

  • 前后端分离部署，前端通过 Nginx 托管

  • 后端单体 Spring Boot 应用（初期足够），后续可拆分微服务

  • 数据库与 Flowable 引擎共用同一 MySQL 实例（引擎表前缀 ACT，业务表前缀 FD）

# java # maven # spring boot
Logo
https://edu.csdn.net/learn/39067/627173?utm_source=2019755004

汇聚全球AI编程工具，助力开发者即刻编程。

更多推荐

cover

当 AI 修图师装上“万能插头“：MCP 如何改变修图工作流

avatar AI编程社区
cover

2026年8月开发者实战指南：ChatGPT Plus / Pro + Codex 如何协同完成需求分析、编码、测试、调试与代码审查

avatar AI编程社区
cover

投资一台B300，部署Claude Opus 5多久才能回本？

avatar AI编程社区