返回

VUe程序员注意了，从此Flowable工作流程图制作更轻松！

后端

在软件开发过程中，流程图是一种常见的工具，它可以帮助我们清晰地展示和理解业务流程，方便我们进行开发和管理。对于Vue程序员来说，如果需要在项目中使用流程图，那么下面这两个库不容错过。

1. bpmn.js

bpmn.js是一个功能强大的前端BPMN库，它允许我们在Vue项目中轻松实现流程图的可视化和管理。bpmn.js的主要特点包括：

  • 支持BPMN 2.0标准
  • 丰富的图形化流程设计器
  • 支持自定义节点和连线
  • 可以将流程图导出为各种格式，如PNG、SVG、XML等
  • 与其他BPMN库兼容，如Activiti和Camunda

2. Vue-Flow

Vue-Flow是一个基于Vue.js的流程图库，它可以帮助我们在Vue项目中快速构建交互式流程图。Vue-Flow的主要特点包括：

  • 基于Vue.js，易于集成
  • 支持拖放操作，可以轻松创建和编辑流程图
  • 支持自定义节点和连线
  • 提供丰富的事件系统，可以监听流程图的各种事件
  • 支持国际化

这两个库都非常适合在Vue项目中使用，它们可以帮助我们轻松实现工作流程的可视化和管理。下面，我们分别来介绍一下这两个库的使用方法。

bpmn.js

  1. 安装bpmn.js
npm install bpmn-js
  1. 在Vue项目中使用bpmn.js
import Bpmn from 'bpmn-js';

export default {
  name: 'BpmnEditor',
  template: '<div id="bpmn-editor"></div>',
  mounted() {
    const bpmn = new Bpmn({
      container: '#bpmn-editor'
    });

    bpmn.importXML('<?xml version="1.0" encoding="UTF-8"?><bpmn2:definitions xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" id="sid-52e092a5-56b0-4695-82e8-c5b371f808c2" targetNamespace="http://bpmn.io/schema/bpmn" exporter="Camunda Modeler" exporterVersion="3.2.0"><bpmn2:process id="sid-f8f53776-7980-42f2-93e0-922084e81016" name="Process" isExecutable="false"><bpmn2:startEvent id="sid-2ff1d7d4-f20a-4e19-8735-319f8194c368"><bpmn2:outgoing>sid-3305d95b-155a-4a73-95c3-084d82bfb247</bpmn2:outgoing></bpmn2:startEvent><bpmn2:sequenceFlow id="sid-3305d95b-155a-4a73-95c3-084d82bfb247" sourceRef="sid-2ff1d7d4-f20a-4e19-8735-319f8194c368" targetRef="sid-5b38b6fb-a278-4713-82e9-21d7d231fb37"></bpmn2:sequenceFlow><bpmn2:task id="sid-5b38b6fb-a278-4713-82e9-21d7d231fb37" name="Task"><bpmn2:incoming>sid-3305d95b-155a-4a73-95c3-084d82bfb247</bpmn2:incoming><bpmn2:outgoing>sid-206d0730-9450-4b87-9dba-f2e32c2ac484</bpmn2:outgoing></bpmn2:task><bpmn2:sequenceFlow id="sid-206d0730-9450-4b87-9dba-f2e32c2ac484" sourceRef="sid-5b38b6fb-a278-4713-82e9-21d7d231fb37" targetRef="sid-e28820d3-3f06-4d46-850c-68d39f70d2c7"></bpmn2:sequenceFlow><bpmn2:endEvent id="sid-e28820d3-3f06-4d46-850c-68d39f70d2c7"><bpmn2:incoming>sid-206d0730-9450-4b87-9dba-f2e32c2ac484</bpmn2:incoming></bpmn2:endEvent></bpmn2:process><bpmndi:BPMNDiagram id="sid-3dba98b7-0d74-41be-a5f0-3b95e6f9c63e"><bpmndi:BPMNPlane id="sid-65b1483b-030b-4de1-84ac-43f4e5e05b00" bpmnElement="sid-f8f53776-7980-42f2-93e0-922084e81016"><bpmndi:BPMNShape id="sid-34bf4818-c1a8-4f53-b9d8-5844a438315c" bpmnElement="sid-2ff1d7d4-f20a-4e19-8735-319f8194c368"><dc:Bounds x="140" y="102" width="36" height="36"/></bpmndi:BPMNShape><bpmndi:BPMNEdge id="sid-5f1d1903-8e58-4c67-af1e-f9a1c8bb8836" bpmnElement="sid-3305d95b-155a-4a73-95c3-084d82bfb247"><di:waypoint x="176" y="118"/><di:waypoint x="220" y="118"/></bpmndi:BPMNEdge><bpmndi:BPMNShape id="sid-3366d36a-c108-4c12-8966-4f794e8d1413" bpmnElement="sid-5b38b6fb-a278-4713-82e9-21d7d231fb37"><dc:Bounds x="220" y="70" width="100" height="80"/></bpmndi:BPMNShape><bpmndi:BPMNEdge id="sid-470f0c03-5526-4472-a9d1-f281b2d18684" bpmnElement="sid-206d0730-9450-4b87-9dba-f2e32c2ac484"><di:waypoint x="320" y="118"/><di:waypoint x="370" y="118"/></bpmndi:BPMNEdge><bpmndi:BPMNShape id="sid-221f2b03-3c20-4c62-a62a-a