更多ruoyi-nbcio功能请看演示系统

gitee源代码地址

前后端代码： https://gitee.com/nbacheng/ruoyi-nbcio

演示地址：RuoYi-Nbcio后台管理系统

看到有些流程图采用仿钉钉的流程设计，比如下面界面：

这种方式虽然简单，但可能符合中国人的习惯，使用简单直观，所以也有一定的市场。

如何结合现有的bpmn-process-designer流程设计器进行兼容是需要考虑的问题。

现有流程设计器采用标准的bpmn规范，生成xml文件。

而一般仿钉钉的流程图是生成相应的json，所以需要进行流程图转换，以便兼容。

基本思路;

1、仿钉钉做的流程图，也可以跟bpmn-process-designer流程设计器类似，可以查看flowable的json格式或xml格式，这个就需要进行转换。

2、主要通过flowable的相关类与方法，把json格式转换成xml格式，同时这个xml文件可以导入到bpmn-process-designer流程设计器进行查看与验证，这样后面的流程逻辑都不需要修改。

3、可以主要通过BpmnModel，SequenceFlow，Process，StartEvent，EndEvent，FlowableListener，BpmnAutoLayout，BpmnXMLConverter等flowable类或方法来实现从json转换成xml文件。

4、前端参考网上一些开源项目，但form表单还是采用现有的formdesigner，同时也是考虑支持节点的表单支持

5、也要考虑自定义业务表单的支持

6、先支持简单的并行，条件等流程节点的支持，后续再支持复杂的流程设计。

下面附上一个标注的flowable的xml流程文件

<?xml version="1.0" encoding="UTF-8"?>
<bpmn2:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 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" xmlns:flowable="http://flowable.org/bpmn" id="diagram_Process_1697782918307" targetNamespace="http://flowable.org/bpmn" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd">
  <bpmn2:process id="Process_1697782918307" name="业务流程_自定义会签测试" isExecutable="true">
    <bpmn2:startEvent id="Event_1le7yzx" flowable:formKey="key_3">
      <bpmn2:outgoing>Flow_0ipnqyb</bpmn2:outgoing>
    </bpmn2:startEvent>
    <bpmn2:userTask id="Activity_03gis3u" flowable:dataType="INITIATOR" flowable:assignee="${initiator}" flowable:text="流程发起人">
      <bpmn2:incoming>Flow_0ipnqyb</bpmn2:incoming>
      <bpmn2:outgoing>Flow_1uc1pby</bpmn2:outgoing>
    </bpmn2:userTask>
    <bpmn2:sequenceFlow id="Flow_0ipnqyb" sourceRef="Event_1le7yzx" targetRef="Activity_03gis3u" />
    <bpmn2:userTask id="Activity_1facibr" flowable:dataType="MANAGER" flowable:assignee="${DepManagerHandler.getUser(execution)}" flowable:text="部门经理">
      <bpmn2:incoming>Flow_1uc1pby</bpmn2:incoming>
      <bpmn2:outgoing>Flow_1x49ob5</bpmn2:outgoing>
    </bpmn2:userTask>
    <bpmn2:sequenceFlow id="Flow_1uc1pby" sourceRef="Activity_03gis3u" targetRef="Activity_1facibr" />
    <bpmn2:userTask id="Activity_0nepxhg" flowable:dataType="USERS" flowable:assignee="${assignee}" flowable:candidateUsers="ry,zhangsan" flowable:text="若依,张三">
      <bpmn2:incoming>Flow_1x49ob5</bpmn2:incoming>
      <bpmn2:outgoing>Flow_170xl0t</bpmn2:outgoing>
      <bpmn2:multiInstanceLoopCharacteristics flowable:collection="${multiInstanceHandler.getUserNames(execution)}" flowable:elementVariable="assignee">
        <bpmn2:completionCondition xsi:type="bpmn2:tFormalExpression">${nrOfCompletedInstances/nrOfInstances&gt;=1}</bpmn2:completionCondition>
      </bpmn2:multiInstanceLoopCharacteristics>
    </bpmn2:userTask>
    <bpmn2:sequenceFlow id="Flow_1x49ob5" sourceRef="Activity_1facibr" targetRef="Activity_0nepxhg" />
    <bpmn2:endEvent id="Event_1py9opv">
      <bpmn2:incoming>Flow_170xl0t</bpmn2:incoming>
    </bpmn2:endEvent>
    <bpmn2:sequenceFlow id="Flow_170xl0t" sourceRef="Activity_0nepxhg" targetRef="Event_1py9opv" />
  </bpmn2:process>
  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1697782918307">
      <bpmndi:BPMNEdge id="Flow_170xl0t_di" bpmnElement="Flow_170xl0t">
        <di:waypoint x="760" y="240" />
        <di:waypoint x="822" y="240" />
      </bpmndi:BPMNEdge>
      <bpmndi:BPMNEdge id="Flow_1x49ob5_di" bpmnElement="Flow_1x49ob5">
        <di:waypoint x="600" y="240" />
        <di:waypoint x="660" y="240" />
      </bpmndi:BPMNEdge>
      <bpmndi:BPMNEdge id="Flow_1uc1pby_di" bpmnElement="Flow_1uc1pby">
        <di:waypoint x="440" y="240" />
        <di:waypoint x="500" y="240" />
      </bpmndi:BPMNEdge>
      <bpmndi:BPMNEdge id="Flow_0ipnqyb_di" bpmnElement="Flow_0ipnqyb">
        <di:waypoint x="288" y="240" />
        <di:waypoint x="340" y="240" />
      </bpmndi:BPMNEdge>
      <bpmndi:BPMNShape id="Event_1le7yzx_di" bpmnElement="Event_1le7yzx">
        <dc:Bounds x="252" y="222" width="36" height="36" />
      </bpmndi:BPMNShape>
      <bpmndi:BPMNShape id="Activity_03gis3u_di" bpmnElement="Activity_03gis3u">
        <dc:Bounds x="340" y="200" width="100" height="80" />
      </bpmndi:BPMNShape>
      <bpmndi:BPMNShape id="Activity_1facibr_di" bpmnElement="Activity_1facibr">
        <dc:Bounds x="500" y="200" width="100" height="80" />
      </bpmndi:BPMNShape>
      <bpmndi:BPMNShape id="Activity_0nepxhg_di" bpmnElement="Activity_0nepxhg">
        <dc:Bounds x="660" y="200" width="100" height="80" />
      </bpmndi:BPMNShape>
      <bpmndi:BPMNShape id="Event_1py9opv_di" bpmnElement="Event_1py9opv">
        <dc:Bounds x="822" y="222" width="36" height="36" />
      </bpmndi:BPMNShape>
    </bpmndi:BPMNPlane>
  </bpmndi:BPMNDiagram>
</bpmn2:definitions>

后续根据上面的思路实现前后端代码。