Skip to content

BPMN 流程设计器

BPMN 设计器基于 BPMN.js,让你可视化地设计流程图。

进入设计器

  1. 进入 流程中心 → 流程模型
  2. 点卡片上的 设计(先出「正在打开流程设计器」)
  3. 也可以直接开 /flow/design(空画布)或 /flow/design?id={模型ID}

演示里两种模式界面不一样:

  • 审批流程:画布是「发起人 →(+)→ 结束」,顶栏有流程设计 / 更多设置 / 更改记录 / AI生成 / 保存草稿 / 发布部署
  • 业务流程:完整 BPMN 画布,从组件面板拖节点

审批画布

2026-08-26 演示站实拍(/flow/design 空审批画布)。

从「业务流程」模型点 设计,打开的是 BPMN 全屏画布:

BPMN 画布

顶栏同样是关闭 / 流程设计 / 更多设置,以及更改记录、AI生成、保存草稿、发布部署。工具条有预览 XML、验证流程,元件条是手型、框选、连线、开始/结束事件、网关、用户任务、服务任务等。画布上先有一个「开始」。底栏快捷键:撤销 / 重做 / 复制 / 粘贴 / 删除 / 全选 / 缩放 / 平移。

界面布局

区域位置说明
模式切换顶栏左流程设计 / 更多设置
操作顶栏右更改记录、AI生成、保存草稿、发布部署
画布中间审批模式点 + 插节点;业务流程模式拖 BPMN 元件
缩放左下百分比、适应画布

节点类型

节点图标说明
开始事件圆形流程起点,每个流程只有一个
用户任务圆角矩形需要人工处理的任务节点
排他网关菱形(X)条件分支,只走一条路径
并行网关菱形(+)并行执行所有路径
结束事件圆形(粗边)流程终点

连线条件

排他网关的出口连线需要配置条件表达式:

条件类型语法示例
数字比较${变量 运算符 值}${days > 3}
字符串相等${变量 == '值'}${type == 'urgent'}
逻辑组合${条件1 && 条件2}${days > 3 && type == 'personal'}

表单绑定

用户任务节点可绑定表单,审批人在处理任务时填写:

  1. 选中用户任务节点
  2. 在属性面板的「表单 Key」字段中填写表单标识
  3. 运行时,任务处理页面根据表单 Key 渲染对应表单

监听器配置

节点和连线支持配置监听器,在特定事件触发时执行逻辑:

监听器类型触发时机典型用途
创建监听器任务创建时设置候选人的候选组
完成监听器任务完成时记录处理日志
分配监听器任务分配处理人时发送待办通知

监听器可通过 Java 类名或表达式配置:

java
// Java 类名方式
com.mdframe.forge.flow.listener.TaskCreateListener

// 表达式方式
${taskCreateListener.execute(execution)}

设计规范

  1. 每个流程必须有且只有一个开始事件和一个结束事件
  2. 用户任务必须配置处理人(assignee 或候选人)
  3. 排他网关的出口连线至少有一条配置条件
  4. 连线不能形成闭环

下一步