工作流引擎系列

activiyi

activiti-demo 多实例会签、子流程并行审批、动态设置下一节点执行人员、任务超时自动完成

spring boot 1.5.8整合Activiti6.0及其Activiti-modeler(web版流程设计器)demo

基于Vue3.x + Vite + bpmn-js + element-plus + tsx 实现的Activiti流程设计器(Activiti process designer based on Vue3.x + Vite + BPMN-JS + Element-Plus + TSX implementation)

spring-boot-with-activiti-example

chat

是什么？

配套 UI 和我们的 activiti 配套的前端ui 绘制一般用什么？最好是开源vue

基于Vue的Activiti流程设计器完整技术方案

与Activiti工作流引擎配套的前端UI绘制，目前主流开源方案主要围绕BPMN 2.0标准和Vue.js生态展开，结合可视化建模、流程交互、属性配置等核心需求，以下提供完整技术选型与实践指南：

一、核心工具链选择

1. 基础库：bpmn-js + Vue

bpmn-js：由Camunda团队维护的BPMN 2.0渲染与建模库，支持流程图的绘制、编辑、属性配置，与Activiti原生兼容。

Vue集成：通过Vue封装bpmn-js组件，实现响应式数据绑定与组件化开发，典型项目结构如下：

  [bash]
1
2
npm install bpmn-js @bpmn-io/properties-panel 
npm install bpmn-js-properties-panel-activiti  # Activiti属性扩展

2. 增强工具链

activiti-bpmn-moddle：扩展Activiti特有属性（如候选组、监听器配置）的语义化支持。
Element-UI/Ant Design Vue：用于构建辅助UI控件（如工具栏、表单）。
ECharts/Vue Flow：可选方案，用于辅助展示流程统计或拓扑关系。

二、完整实现步骤（以请假审批流程为例）

1. 环境搭建

  [vue]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!-- 容器组件 -->
<template>
  <div class="bpmn-container" ref="container"></div>
</template>

<script>
import BpmnModeler from 'bpmn-js/lib/Modeler';
import activitiModdleDescriptor from './activiti.json';

export default {
  mounted() {
    this.modeler = new BpmnModeler({
      container: this.$refs.container,
      additionalModules: [activitiPropertiesProvider],  // 集成Activiti属性面板
      moddleExtensions: { activiti: activitiModdleDescriptor }  // 扩展Activiti语义
    });
    this.loadDiagram('leaveProcess.bpmn');
  },
  methods: {
    async loadDiagram(xml) {
      const { xml: currentXML } = await this.modeler.saveXML({ format: true });
      if (currentXML === xml) return;
      await this.modeler.importXML(xml);
    }
  }
}
</script>

2. 自定义属性配置 在activiti.json中定义用户任务的自定义属性（如节点类型nodeType）：

  [json]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
  "name": "Activiti",
  "prefix": "activiti",
  "xml": { "tagAlias": "lowerCase" },
  "types": [
    {
      "name": "UserTask",
      "extends": ["bpmn:UserTask"],
      "properties": [
        { "name": "nodeType", "isAttr": true, "type": "String" }
      ]
    }
  ]
}

通过CustomPalette.js扩展左侧工具栏，支持拖拽带有自定义属性的节点。

3. 与后端交互

流程部署：通过Axios将BPMN XML上传至Activiti REST API /repository/deployments。

任务处理：调用RuntimeService接口驱动流程实例，例如：

  [javascript]
1
2
3
4
5
6
7
8
9
10
11
// 启动流程实例
axios.post('/process/start', { 
  processDefinitionKey: 'leaveProcess',
  variables: { applicant: 'user1', days: 3 }
});

// 审批任务
axios.post('/task/complete', { 
  taskId: 'task123',
  variables: { approvalResult: true }
});

4. 高级功能扩展

汉化方案：通过customTranslate模块覆盖bpmn-js的i18n字典。
版本对比：集成bpmn-js-differ实现流程版本差异可视化。
历史轨迹：结合Activiti History表数据，用ECharts渲染流程耗时统计。

三、开源项目参考

vue-activiti-demo
GitHub地址：https://github.com/griabcrh/vue-activiti-demo 特性：
- 完整实现Activiti属性面板与工具栏扩展
- 支持会签、动态候选人的高级配置
- 提供流程实例状态监控组件
jeecg-boot-activiti
Gitee地址：https://gitee.com/youarebetterman/jeecg-boot-activiti 特性：
- 基于Ant Design Vue的企业级低代码平台
- 集成表单设计器与流程设计器联动
- 支持在线调试与流程版本回滚

四、选型对比与建议

方案	优点	缺点	适用场景
原生bpmn-js	官方维护、功能全面	需自行实现Activiti属性扩展	深度定制化项目
vue-bpmn	开箱即用的Vue封装	社区版功能受限	快速验证型项目
Flowable-Vue	支持CMMN/DMN模型	文档较少	多模型协同场景

推荐策略：

快速落地：直接使用vue-activiti-demo模板，减少底层开发。
深度定制：基于bpmn-js二次开发，结合activiti-bpmn-moddle扩展业务属性。
企业级需求：采用Jeecg Boot等低代码平台，加速审批类系统开发。

五、性能优化关键点

异步渲染：将流程图渲染逻辑放入Web Worker，避免主线程阻塞。
缓存策略：对频繁访问的流程定义XML启用LocalStorage缓存。
按需加载：通过动态导入（Dynamic Import）拆分bpmn-js核心模块与扩展包。
服务端渲染：对静态流程图预览采用SSR生成SVG，减少客户端计算。

总结

与Activiti配套的Vue流程设计器开发，bpmn-js + 自定义扩展是当前最成熟的开源方案，既能满足BPMN 2.0标准兼容性，又可通过Vue生态实现高效交互。建议优先参考vue-activiti-demo项目搭建基础框架，再根据业务需求扩展属性面板、历史追踪等高级功能，最终形成符合企业特色的流程管理平台。

参考资料

https://github.com/search?q=activiti&type=repositories&p=1

工作流引擎系列
activiyi
chat
- 是什么？
- 配套 UI 和我们的 activiti 配套的前端ui 绘制一般用什么？最好是开源vue
  - 基于Vue的Activiti流程设计器完整技术方案
  - 总结
参考资料

工作流引擎-04-流程引擎（Process Engine）activiti 优秀开源项目