网站导航
> 技术文档 > Flowable-UI 详解_flowable ui

Flowable-UI 详解_flowable ui

网友: 技术文档 2025-09-02 19:12:25

Flowable-UI 是 Flowable 官方提供的可视化流程套件，包含流程设计器（Modeler）、任务应用（Task App）、管理控制台（Admin App）三大核心模块，用于实现流程的建模、调试、监控和用户交互。以下从功能架构、部署方式、核心模块详解及企业级应用实践角度全面解析：

一、Flowable-UI 整体架构

#mermaid-svg-lKNWIrXS8xWGH3qD {font-family:\"trebuchet ms\",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-lKNWIrXS8xWGH3qD .error-icon{fill:#552222;}#mermaid-svg-lKNWIrXS8xWGH3qD .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-lKNWIrXS8xWGH3qD .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-lKNWIrXS8xWGH3qD .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-lKNWIrXS8xWGH3qD .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-lKNWIrXS8xWGH3qD .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-lKNWIrXS8xWGH3qD .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-lKNWIrXS8xWGH3qD .marker{fill:#333333;stroke:#333333;}#mermaid-svg-lKNWIrXS8xWGH3qD .marker.cross{stroke:#333333;}#mermaid-svg-lKNWIrXS8xWGH3qD svg{font-family:\"trebuchet ms\",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-lKNWIrXS8xWGH3qD .label{font-family:\"trebuchet ms\",verdana,arial,sans-serif;color:#333;}#mermaid-svg-lKNWIrXS8xWGH3qD .cluster-label text{fill:#333;}#mermaid-svg-lKNWIrXS8xWGH3qD .cluster-label span{color:#333;}#mermaid-svg-lKNWIrXS8xWGH3qD .label text,#mermaid-svg-lKNWIrXS8xWGH3qD span{fill:#333;color:#333;}#mermaid-svg-lKNWIrXS8xWGH3qD .node rect,#mermaid-svg-lKNWIrXS8xWGH3qD .node circle,#mermaid-svg-lKNWIrXS8xWGH3qD .node ellipse,#mermaid-svg-lKNWIrXS8xWGH3qD .node polygon,#mermaid-svg-lKNWIrXS8xWGH3qD .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-lKNWIrXS8xWGH3qD .node .label{text-align:center;}#mermaid-svg-lKNWIrXS8xWGH3qD .node.clickable{cursor:pointer;}#mermaid-svg-lKNWIrXS8xWGH3qD .arrowheadPath{fill:#333333;}#mermaid-svg-lKNWIrXS8xWGH3qD .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-lKNWIrXS8xWGH3qD .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-lKNWIrXS8xWGH3qD .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-lKNWIrXS8xWGH3qD .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-lKNWIrXS8xWGH3qD .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-lKNWIrXS8xWGH3qD .cluster text{fill:#333;}#mermaid-svg-lKNWIrXS8xWGH3qD .cluster span{color:#333;}#mermaid-svg-lKNWIrXS8xWGH3qD div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\"trebuchet ms\",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-lKNWIrXS8xWGH3qD :root{--mermaid-font-family:\"trebuchet ms\",verdana,arial,sans-serif;} 浏览器 Flowable-UI 应用 Flowable-IDM 认证中心 Flowable-Engine 引擎 数据库

  • 前端：基于 AngularJS + Bootstrap 的响应式 Web 应用
  • 后端：Spring Boot 微服务架构
  • 核心服务：
    • Flowable-IDM：统一身份认证（用户/组/权限）
    • Flowable-Modeler：BPMN/DMN/CMMN 可视化设计器
    • Flowable-Task：用户任务处理应用
    • Flowable-Admin：流程运维监控台

二、四大核心模块详解

1. Flowable Modeler - 流程设计器
  • 核心功能：
    • 拖拽式建模：支持 BPMN 2.0、DMN 1.3、CMMN 1.1 规范
    • 实时校验：自动检查节点连通性、属性完整性
    • 版本管理：保存历史版本并对比差异
    • 表单设计：集成 Form Builder 设计动态表单（需商业版）
  • 操作示例： #mermaid-svg-fMAddLKTDiWmfU4g {font-family:\"trebuchet ms\",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-fMAddLKTDiWmfU4g .error-icon{fill:#552222;}#mermaid-svg-fMAddLKTDiWmfU4g .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-fMAddLKTDiWmfU4g .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-fMAddLKTDiWmfU4g .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-fMAddLKTDiWmfU4g .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-fMAddLKTDiWmfU4g .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-fMAddLKTDiWmfU4g .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-fMAddLKTDiWmfU4g .marker{fill:#333333;stroke:#333333;}#mermaid-svg-fMAddLKTDiWmfU4g .marker.cross{stroke:#333333;}#mermaid-svg-fMAddLKTDiWmfU4g svg{font-family:\"trebuchet ms\",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-fMAddLKTDiWmfU4g .label{font-family:\"trebuchet ms\",verdana,arial,sans-serif;color:#333;}#mermaid-svg-fMAddLKTDiWmfU4g .cluster-label text{fill:#333;}#mermaid-svg-fMAddLKTDiWmfU4g .cluster-label span{color:#333;}#mermaid-svg-fMAddLKTDiWmfU4g .label text,#mermaid-svg-fMAddLKTDiWmfU4g span{fill:#333;color:#333;}#mermaid-svg-fMAddLKTDiWmfU4g .node rect,#mermaid-svg-fMAddLKTDiWmfU4g .node circle,#mermaid-svg-fMAddLKTDiWmfU4g .node ellipse,#mermaid-svg-fMAddLKTDiWmfU4g .node polygon,#mermaid-svg-fMAddLKTDiWmfU4g .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-fMAddLKTDiWmfU4g .node .label{text-align:center;}#mermaid-svg-fMAddLKTDiWmfU4g .node.clickable{cursor:pointer;}#mermaid-svg-fMAddLKTDiWmfU4g .arrowheadPath{fill:#333333;}#mermaid-svg-fMAddLKTDiWmfU4g .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-fMAddLKTDiWmfU4g .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-fMAddLKTDiWmfU4g .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-fMAddLKTDiWmfU4g .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-fMAddLKTDiWmfU4g .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-fMAddLKTDiWmfU4g .cluster text{fill:#333;}#mermaid-svg-fMAddLKTDiWmfU4g .cluster span{color:#333;}#mermaid-svg-fMAddLKTDiWmfU4g div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\"trebuchet ms\",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-fMAddLKTDiWmfU4g :root{--mermaid-font-family:\"trebuchet ms\",verdana,arial,sans-serif;} 通过 开始 用户审批 调用API 结束
  • 企业级特性：
    • 协作模式：多人同时编辑（基于 WebSocket 同步）
    • 自定义模板：预置行业标准流程模板（如 ISO 审核）
2. Flowable Task App - 任务处理中心
  • 用户功能：
    • 待办列表：自动拉取分配给用户的流程任务
    • 任务处理：审批/填写表单/上传附件/添加批注
    • 委托与转办：临时移交任务给其他用户
    • 流程跟踪：图形化展示当前任务位置
  • 管理员功能：
    • 任务重分配：强制修改任务负责人
    • 设置截止时间：动态计算 SLA 超时预警
  • 集成扩展：
    • 消息中心：邮件/钉钉/企业微信通知
    • 移动端适配：PWA (Progressive Web App) 支持
3. Flowable Admin - 运维监控台
  • 核心监控维度： 模块 监控指标 流程引擎 运行中实例数/任务积压/DB连接池 异步作业 作业队列深度/失败重试次数 性能分析 平均任务处理时间/节点停留时长
  • 关键操作：
    • 流程实例干预：挂起/激活/删除运行中实例
    • 历史数据审计：精确查询任意节点的变量快照
    • 批处理任务：批量清理历史数据（保留策略配置）
  • 企业级插件：
    • Prometheus 导出器：监控指标对接 Grafana 看板
    • 日志追踪：关联业务 ID 的分布式链路跟踪
4. Flowable IDM - 统一身份服务
  • 功能架构： #mermaid-svg-OsoRwFAIsZWYlzRL {font-family:\"trebuchet ms\",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-OsoRwFAIsZWYlzRL .error-icon{fill:#552222;}#mermaid-svg-OsoRwFAIsZWYlzRL .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-OsoRwFAIsZWYlzRL .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-OsoRwFAIsZWYlzRL .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-OsoRwFAIsZWYlzRL .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-OsoRwFAIsZWYlzRL .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-OsoRwFAIsZWYlzRL .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-OsoRwFAIsZWYlzRL .marker{fill:#333333;stroke:#333333;}#mermaid-svg-OsoRwFAIsZWYlzRL .marker.cross{stroke:#333333;}#mermaid-svg-OsoRwFAIsZWYlzRL svg{font-family:\"trebuchet ms\",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-OsoRwFAIsZWYlzRL .label{font-family:\"trebuchet ms\",verdana,arial,sans-serif;color:#333;}#mermaid-svg-OsoRwFAIsZWYlzRL .cluster-label text{fill:#333;}#mermaid-svg-OsoRwFAIsZWYlzRL .cluster-label span{color:#333;}#mermaid-svg-OsoRwFAIsZWYlzRL .label text,#mermaid-svg-OsoRwFAIsZWYlzRL span{fill:#333;color:#333;}#mermaid-svg-OsoRwFAIsZWYlzRL .node rect,#mermaid-svg-OsoRwFAIsZWYlzRL .node circle,#mermaid-svg-OsoRwFAIsZWYlzRL .node ellipse,#mermaid-svg-OsoRwFAIsZWYlzRL .node polygon,#mermaid-svg-OsoRwFAIsZWYlzRL .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-OsoRwFAIsZWYlzRL .node .label{text-align:center;}#mermaid-svg-OsoRwFAIsZWYlzRL .node.clickable{cursor:pointer;}#mermaid-svg-OsoRwFAIsZWYlzRL .arrowheadPath{fill:#333333;}#mermaid-svg-OsoRwFAIsZWYlzRL .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-OsoRwFAIsZWYlzRL .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-OsoRwFAIsZWYlzRL .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-OsoRwFAIsZWYlzRL .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-OsoRwFAIsZWYlzRL .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-OsoRwFAIsZWYlzRL .cluster text{fill:#333;}#mermaid-svg-OsoRwFAIsZWYlzRL .cluster span{color:#333;}#mermaid-svg-OsoRwFAIsZWYlzRL div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\"trebuchet ms\",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-OsoRwFAIsZWYlzRL :root{--mermaid-font-family:\"trebuchet ms\",verdana,arial,sans-serif;} LDAP/AD Flowable-IDM 数据库 Keycloak Modeler/Task/Admin
  • 核心能力：
    • 多源认证：同步 LDAP/Active Directory/数据库用户
    • 细粒度授权：基于 RBAC 控制模块访问权限
    • 租户隔离：为不同客户分配独立用户体系
  • 配置示例（idm-application.properties）： 
    # 启用LDAP同步idm.sync.ldap.enabled=trueidm.sync.ldap.server=ldap://corp.com:389idm.sync.ldap.baseDn=ou=users,dc=corp,dc=com

三、部署方案详解

方案 1：All-in-One 快速启动（开发环境）
# 下载官方War包wget https://repo.flowable.com/nexus/content/groups/public/org/flowable/flowable-ui/6.7.2/flowable-ui.war# 启动嵌入式Tomcatjava -jar flowable-ui.war
  • 访问 http://localhost:8080/flowable-ui 默认账号 admin/test
方案 2：Docker 容器化部署（生产推荐）
# docker-compose.ymlversion: \'3\'services: flowable-ui: image: flowable/flowable-ui:latest ports: - \"8080:8080\" environment: - SPRING_DATASOURCE_URL=jdbc:postgresql://db:5432/flowable - SPRING_DATASOURCE_USERNAME=flowable - SPRING_DATASOURCE_PASSWORD=Secret123! db: image: postgres:14 volumes: - pgdata:/var/lib/postgresql/datavolumes: pgdata:
方案 3：Kubernetes 高可用部署
# flowable-ui-deployment.yamlapiVersion: apps/v1kind: Deploymentmetadata: name: flowable-uispec: replicas: 3 selector: matchLabels: app: flowable-ui template: spec: containers: - name: ui image: flowable/flowable-ui:7.0.0 envFrom: - configMapRef: name: flowable-config---# 通过Ingress暴露服务apiVersion: networking.k8s.io/v1kind: Ingressmetadata: name: flowable-ingressspec: rules: - host: bpm.corp.com http: paths: - path: / pathType: Prefix backend: service: name: flowable-ui-service port:  number: 8080

四、企业级集成实践

1. 单点登录集成（OAuth 2.0）
# application.propertiessecurity.oauth2.client.client-id=flowable-clientsecurity.oauth2.client.client-secret=@KEYRANDOM@security.oauth2.client.access-token-uri=https://sso.corp.com/oauth/tokensecurity.oauth2.client.user-authorization-uri=https://sso.corp.com/oauth/authorizesecurity.oauth2.resource.user-info-uri=https://sso.corp.com/userinfo
2. 自定义扩展开发
  • 添加新菜单（修改 app-cfg.js）： 
    FLOWABLE.CONFIG = { \"apps\": [ {\"id\": \"tasks\", \"title\": \"待办任务\", \"url\": \"/task\"}, {\"id\": \"custom-report\", \"title\": \"自定义报表\", \"url\": \"/custom-report\"} ]};
  • 开发自定义表单控件： 
    angular.module(\'flowableModeler\') .controller(\'CustomFormCtrl\', function($scope) { $scope.customField = { value: \'\' }; // 与后端变量绑定 $scope.$watch(\'customField.value\', function(v) { $scope.field.value = v; }); });

五、关键问题解决方案

问题场景 根因分析 解决方案 设计器保存时报权限错误 IDM未配置模型保存权限 在Admin控制台分配 modeler:models:edit 权限 任务列表加载缓慢 历史数据表未分区 对 ACT_HI_TASKINST 按时间分区 流程图渲染位置错乱 BPMN文件包含非法坐标 使用Modeler的 Auto Layout 功能重新排版 集成LDAP后登录失败 用户属性映射错误 检查 idm.ldap.attribute.email 映射配置

六、最佳实践建议

  1. 生产环境优化：
    • 启用 GZIP 压缩前端资源
    • 配置 CDN 加速静态文件（/flowable-ui/static/**）
    • 数据库连接池使用 HikariCP 替代 DBCP
  2. 安全加固：
    • 强制 HTTPS 访问
    • 定期轮转 flowable-default.key 加密密钥
    • 禁用 Swagger 等开发接口（flowable.rest.app-enabled=false）
  3. 高可用设计：
    • 前端层：Nginx 负载均衡 + Keepalived
    • 后端层：Redis 共享会话 + 数据库读写分离

注：Flowable-UI 开源版本部分功能受限（如高级表单设计器、移动端SDK），完整功能需 Flowable Work 商业版支持。

通过 Flowable-UI，企业可快速构建覆盖流程设计→任务处理→运维监控的全生命周期管理平台，大幅降低 BPM 系统的实施复杂度。建议结合自身需求选择模块化部署（如独立部署 Modeler 给业务分析师），并通过扩展开发实现深度业务集成。

网络标签：

相关问题