BPMN 流程设计器
BPMN 设计器基于 BPMN.js,让你可视化地设计流程图。
进入设计器
- 进入 流程中心 → 流程模型
- 点卡片上的 设计(先出「正在打开流程设计器」)
- 也可以直接开
/flow/design(空画布)或/flow/design?id={模型ID}
演示里两种模式界面不一样:
- 审批流程:画布是「发起人 →(+)→ 结束」,顶栏有流程设计 / 更多设置 / 更改记录 / AI生成 / 保存草稿 / 发布部署
- 业务流程:完整 BPMN 画布,从组件面板拖节点

2026-08-26 演示站实拍(/flow/design 空审批画布)。
从「业务流程」模型点 设计,打开的是 BPMN 全屏画布:

顶栏同样是关闭 / 流程设计 / 更多设置,以及更改记录、AI生成、保存草稿、发布部署。工具条有预览 XML、验证流程,元件条是手型、框选、连线、开始/结束事件、网关、用户任务、服务任务等。画布上先有一个「开始」。底栏快捷键:撤销 / 重做 / 复制 / 粘贴 / 删除 / 全选 / 缩放 / 平移。
界面布局
| 区域 | 位置 | 说明 |
|---|---|---|
| 模式切换 | 顶栏左 | 流程设计 / 更多设置 |
| 操作 | 顶栏右 | 更改记录、AI生成、保存草稿、发布部署 |
| 画布 | 中间 | 审批模式点 + 插节点;业务流程模式拖 BPMN 元件 |
| 缩放 | 左下 | 百分比、适应画布 |
节点类型
| 节点 | 图标 | 说明 |
|---|---|---|
| 开始事件 | 圆形 | 流程起点,每个流程只有一个 |
| 用户任务 | 圆角矩形 | 需要人工处理的任务节点 |
| 排他网关 | 菱形(X) | 条件分支,只走一条路径 |
| 并行网关 | 菱形(+) | 并行执行所有路径 |
| 结束事件 | 圆形(粗边) | 流程终点 |
连线条件
排他网关的出口连线需要配置条件表达式:
| 条件类型 | 语法 | 示例 |
|---|---|---|
| 数字比较 | ${变量 运算符 值} | ${days > 3} |
| 字符串相等 | ${变量 == '值'} | ${type == 'urgent'} |
| 逻辑组合 | ${条件1 && 条件2} | ${days > 3 && type == 'personal'} |
表单绑定
用户任务节点可绑定表单,审批人在处理任务时填写:
- 选中用户任务节点
- 在属性面板的「表单 Key」字段中填写表单标识
- 运行时,任务处理页面根据表单 Key 渲染对应表单
监听器配置
节点和连线支持配置监听器,在特定事件触发时执行逻辑:
| 监听器类型 | 触发时机 | 典型用途 |
|---|---|---|
| 创建监听器 | 任务创建时 | 设置候选人的候选组 |
| 完成监听器 | 任务完成时 | 记录处理日志 |
| 分配监听器 | 任务分配处理人时 | 发送待办通知 |
监听器可通过 Java 类名或表达式配置:
java
// Java 类名方式
com.mdframe.forge.flow.listener.TaskCreateListener
// 表达式方式
${taskCreateListener.execute(execution)}设计规范
- 每个流程必须有且只有一个开始事件和一个结束事件
- 用户任务必须配置处理人(assignee 或候选人)
- 排他网关的出口连线至少有一条配置条件
- 连线不能形成闭环
