写过工作流都会遇到这样的难题，希望流程的设计可以类似钉钉一样简单明了，而不是超级不有好的bpmn设计器，上网大概搜了一下实现方案，前端仿钉钉设计器一大堆，例如 wflow ， smart-flow-design ，参照这些源码前端设计器不成问题

问题在于这样的设计器数据是json格式，不符合bpmn协议，就无法和activiti，flowable等工作流直接对接

如果自己开发工作流引擎，但开发成本肯定比较大，所以还是希望能实现自定义的json和xml可以转换

转换这个活可以前端干，也可以后端干，如果前端干可以使用 bpmn-moddle ，bpmn.js就是使用它生成的xml，但大概看了一下发现文档稀缺，使用很起来很难

最终决定使用java转换，因为发现activiti包中的 BpmnModel 可以很轻松画出xml，而且基本不用看文档，.方法名基本就能和bpmn协议对上号

json协议

前后端使用json来表达流程设计，那一定要订一套自己的协议，大概按照smart-flow-design写一个简版的

"id" : "节点id" , "name" : "节点名称" , "type" : "申请节点/审核节点/分支节点/抄送节点" , "next" : "下一节点" , "exclusive" : [ // 排他条件 // 条件 "condition" : "条件表达式" , //分支节点内部流程 "process" : { } // 委派人 "assignee" : { "users" : [ ] , "multiMode" : "会签/顺序审批" // 表单权限 "formPerms" : [ "key" : "字段key" , "perm" : "权限类型 编辑/只读/隐藏" , "required" : true

节点类型简单实现几个：申请节点/审核节点/分支节点/抄送节点

通过next指向下一节点，实现一个链表结构

如一个简单的流程设计如下

对应的json数据如下

"id" : "1" , "name" : "申请节点" , "type" : "ROOT" , "next" : { "id" : "2" , "name" : "审批节点" , "type" : "APPROVAL" , "next" : { "id" : "3" , "name" : "抄送节点" , "type" : "CC"

带分支的设计如下

对应的json:

"id" : "1" , "name" : "申请节点" , "type" : "ROOT" , "next" : { "id" : "2" , "name" : "条件节点" , "type" : "EXCLUSIVE" , "exclusive" : [ "condition" : "amount>=100" "condition" : "amount<100" , "process" : { "id" : "4" , "name" : "审批人1" , "type" : "APPROVAL" , "next" : null "next" : { "id" : "3" , "name" : "审批人2" , "type" : "APPROVAL"

基本上这个json数据结构就足够标识很多场景了，分支条件可以自己再写复杂一点，如果需要扩展新增属性即可

java 创建一些实体来接受json，很简单就不详细写了，大概如下

@Data
public class ProcessNode {
    @ApiModelProperty(value = "节点ID")
    private String id;
    @ApiModelProperty(value = "节点名称")
    private String name;
    @ApiModelProperty(value = "节点类型")
    private String type;
    @ApiModelProperty(value = "下一节点")
    private ProcessNode next;
    @ApiModelProperty(value = "分支")
    private List<ExclusiveBranch> exclusive;
    @ApiModelProperty(value = "委托人")
    private Assignee assignee;
    @ApiModelProperty(value = "表单权限")
    private List<FormPerm> formPerms;
@Data
public class ExclusiveBranch {
    @ApiModelProperty(value = "id")
    private String id;
    @ApiModelProperty(value = "分支条件")
    private String condition;
    @ApiModelProperty(value = "分支内部流程")
    private ProcessNode process;
@Data
public class Assignee {
    @ApiModelProperty(value = "委托人列表")
    private List<String> users;
    @ApiModelProperty(value = "多人审批方式")
    private String multiMode;
在controller使用@RequestBody接受一下前端传来的json即可
转BPMN
接下来就把这个java实体转成xml，引入今天的主角：BpmnModel
<dependency>
    <groupId>org.activiti</groupId>
    <artifactId>activiti-bpmn-model</artifactId>
    <version>7.1.0.M1</version>
</dependency>
即可开始使用BpmnModel开始绘制bpmn协议的工作流
首先准备工作流
BpmnModel model = new BpmnModel();
Process process = new Process();
model.addProcess(process);
process.setId("Process_"+UUID.randomUUID());
process.setExecutable(true);
其中process就相当于我们的图纸，后续工作就是往这个图纸上画节点和线
绘制开始结束
由于json协议中不包含开始结束节点，所以首先要绘制出两个节点
// 新建开始节点
StartEvent startEvent = new StartEvent();
startEvent.setId("_start");
// 绘制到图纸
process.addFlowElement(startEvent)
// 新建结束节点
EndEvent endEvent = new EndEvent();
endEvent.setId("_end");
// 绘制到图纸
process.addFlowElement(endEvent)
到此两个节点就画出来了，但是还没有任何线
绘制bpmn
接下来就根据json的节点来绘制bpmn节点，同时还要考虑线的绘制节点的连接线
json协议中是next指向下一节点，所以绘制节点的方法一定是要使用递归的画法，为了处理画线问题，可以在绘制方法中添加两个参数preId(上一节点ID)和endId(结束节点ID)
这样逻辑为如下：
绘制bpmn节点
绘制上一节点与当前节点的连线
如果有next，递归绘制下一节点
如果没有next，绘制当前节点与结束节点的连接线
考虑到上一根线可能有条件，所以再加入参数preExpression(上一根线的条件)，最终方法如下
 * 绘制节点
 * @param process bpmn process 图纸
 * @param node    json的节点
 * @param preId   上一节点id
 * @param endId   结束节点
 * @param preExpression 上一节点表达式
public void drawNode(Process process, ProcessNode node, String preId, String endId, String preExpression) {
	// 根据type绘制不同种类的节点
	Inout inout = drawNodeByType(process, node);
	// 绘制前一根线
	process.addFlowElement(createSequenceFlow(preId, inout.getIn(), preExpression));
	if (node.getNext() == null) {
		// 没有下一步，绘制指向结束的线
		process.addFlowElement(createSequenceFlow(inout.getOut(), endId, null));
	} else {
		// 有下一步，递归绘制下一个节点
		drawNode(process, node.getNext(), inout.getOut(), endId, null);
其中drawNodeByType(process, node)方法根据不同的种类画不通过的节点，反回是一个Inout
@Data
@AllArgsConstructor
public class Inout {
    private String in;
    private String out;
代表进入节点的id和出节点的id，这是因为json的节点和bpmn的节点不是一一对应的，普通的审核节点，in和out都是审核节点id，而如果是分支节点，in代表分支的开始网关id，out代表分支结束网关的id，接下来分别以两种节点类型举例来实现
 * 绘制不同种类节点
 * @param process
 * @param node
 * @return
private Inout drawNodeByType(Process process, ProcessNode node) {
	if (node.getType().equals("审核节点")) {
		return drawAuditNode(process, node);
	} else if (node.getType().equals("分支节点")) {
		return drawExclusiveNode(process, node);
	} else {
		throw new IllegalArgumentException();
 * 绘制审核节点
 * @param process
 * @param node
 * @return
private Inout drawAuditNode(Process process, ProcessNode node) {
	// 绘制节点
	String id = "Node_"+UUID.randomUUID();
	UserTask userTask = new UserTask();
	userTask.setId(id);
	userTask.setName(node.getName());
	// 设置多实例
	userTask.setAssignee("${user}"




    
);
	MultiInstanceLoopCharacteristics multiInstanceLoopCharacteristics = new MultiInstanceLoopCharacteristics();
	if (node.getAssignee().getMultiMode().equals("顺序审批")) {
		multiInstanceLoopCharacteristics.setSequential(true);
	multiInstanceLoopCharacteristics.setElementVariable("user");
	// 完成条件
	multiInstanceLoopCharacteristics.setCompletionCondition("${nrOfInstances == nrOfCompletedInstances}");
	multiInstanceLoopCharacteristics.setInputDataItem("${users}");
	userTask.setLoopCharacteristics(multiInstanceLoopCharacteristics);
	// 保存json节点配置到扩展属性
	Map<String, Object> extensions = new HashMap<>();
	extensions.put("node", node);
	BpmnUtil.addExtensionProperty(userTask, extensions);
	// 只有一个节点，in&out相同
	return new Inout(id, id);
 * 绘制分支节点
 * @param process
 * @param node
 * @return
private Inout drawExclusiveNode(Process process, ProcessNode node) {
	// 开始网关
	String startId = "Exclusive_"+UUID.randomUUID();
	ExclusiveGateway startGateway = new ExclusiveGateway();
	startGateway.setId(startId);
	process.addFlowElement(startGateway);
	// 结束网关
	String endId = "Exclusive_"+UUID.randomUUID();
	ExclusiveGateway endGateway = new ExclusiveGateway();
	endGateway.setId(endId);
	process.addFlowElement(endGateway);
	// 绘制分支
	List<ExclusiveBranch> branches = node.getExclusive();
	for (ExclusiveBranch branch : branches) {
		String expression = branch.getCondition();
		if (branch.getProcess()==null) {
			// 没有子流程，直接绘制结束线
			process.addFlowElement(createSequenceFlow(startId, endId, expression));
		} else {
			// 有子流程，递归绘制子流程
			drawNode(process, branch.getProcess(), startId, endId, expression);
	// int和out不一样
	return new Inout(startId, endId);
注意：绘制分支时如果有子流程，又回调用了drawNode，这是preId为开始网关id，endId是结束网关id，并且携带了表达式
其他类型的节点都类似，很简单，不写了
bpmn绘制完了，如果使用activiti就可以直接部署BpmnModel对象了
Deployment deployment = repositoryService
		.createDeployment()
		.addBpmnModel("test", bpmnModel)
		.deploy();
如果要转换xml，上面的bpmnModel只有节点和线，并没有布局，可以使用第三方轻松布局
<dependency>
	<groupId>org.activiti</groupId>
	<artifactId>activiti-bpmn-layout</artifactId>
	<version>7.1.0.M1</version>
	<scope>compile</scope>
</dependency>
代码一行就够了
// 四.自动布局
new BpmnAutoLayout(bpmnModel).execute();
如果想把BpmnModel转换为xml，也很简单，引入依赖
<dependency>
	<groupId>org.activiti</groupId>
	<artifactId>activiti-bpmn-converter</artifactId>
	<version>7.1.0.M1</version>
</dependency>
// 五.转xml
BpmnXMLConverter bpmnXMLConverter=new BpmnXMLConverter();
byte[] convertToXML = bpmnXMLConverter.convertToXML(bpmnModel);
String xml=new String(convertToXML);
xml = xml.replaceAll("&lt;","<").replaceAll("&gt;",">");
贴一下完整实例代码(代码只是简版，只为提供思路
 * @Author pq
 * @Date 2022/10/20 10:58
 * @Description
@SuppressWarnings("ALL")
public class BpmnConvert {
    public String toBpmn(ProcessNode node) {
        // 一.准备工作
        BpmnModel bpmnModel = new BpmnModel();
        Process process = new Process(); // 相当于图纸
        bpmnModel.addProcess(process);
        process.setId("Process_"+UUID.randomUUID());
        process.setExecutable(true);
        // 二.开始结束节点
        StartEvent startEvent = new StartEvent();// 新建开始节点
        startEvent.setId("_start");
        process.addFlowElement(startEvent);// 绘制到图纸
        EndEvent endEvent = new EndEvent(); // 新建结束节点
        endEvent.setId("_end");// 绘制到图纸
        process.addFlowElement(endEvent);
        // 三.递归绘制节点
        drawNode(process, node, "_start", "_end", null);
        // 四.自动布局
        new BpmnAutoLayout(bpmnModel).execute();
        // 五.转xml
        BpmnXMLConverter bpmnXMLConverter=new BpmnXMLConverter();
        byte[] convertToXML = bpmnXMLConverter.convertToXML(bpmnModel);
        String xml=new String(convertToXML);
        xml = xml.replaceAll("&lt;","<").replaceAll("&gt;",">");
        return xml;
     * 绘制节点
     * @param process bpmn process 图纸
     * @param node    json的节点
     * @param preId   上一节点id
     * @param endId   结束节点
     * @param preExpression 上一节点表达式
    public void drawNode(Process process, ProcessNode node, String preId, String endId, String preExpression) {
        // 根据type绘制不同种类的节点
        Inout inout = drawNodeByType(process, node);
        // 绘制前一根线
        process.addFlowElement(createSequenceFlow(preId, inout.getIn(), preExpression));
        if (node.getNext() == null) {
            // 没有下一步, 绘制指向结束的线
            process.addFlowElement(createSequenceFlow(inout.getOut(), endId, null));
        } else {
            // 有下一步, 递归绘制下一个节点
            drawNode(process, node.getNext(), inout.getOut(), endId, null);
     * 绘制不同种类节点
     * @param process
     * @param node
     * @return
    private Inout drawNodeByType(Process process, ProcessNode node) {
        if (node.getType().equals("审核节点")) {
            return drawAuditNode(process, node);
        } else if (node.getType().equals("分支节点")) {
            return drawExclusiveNode(process, node);
        } else {
            throw new IllegalArgumentException();
     * 绘制审核节点
     * @param process
     * @param node
     * @return
    private Inout drawAuditNode(Process process, ProcessNode node) {
        // 绘制节点
        String id = "Node_"+UUID.randomUUID();
        UserTask userTask = new UserTask();
        userTask.setId(id);
        userTask.setName(node.getName());
        // 设置多实例
        userTask.setAssignee("${user}");
        MultiInstanceLoopCharacteristics multiInstanceLoopCharacteristics = new MultiInstanceLoopCharacteristics();
        if (node.getAssignee().getMultiMode().equals("顺序审批")) {
            multiInstanceLoopCharacteristics.setSequential(true);
        multiInstanceLoopCharacteristics.setElementVariable("user");
        // 完成条件
        multiInstanceLoopCharacteristics.setCompletionCondition("${nrOfInstances == nrOfCompletedInstances}");
        multiInstanceLoopCharacteristics.setInputDataItem("${users}");
        userTask.setLoopCharacteristics(multiInstanceLoopCharacteristics);
        // 保存json节点配置到扩展属性
        Map<String, Object> extensions = new HashMap<>();
        extensions.put("node", node);
        BpmnUtil.addExtensionProperty(userTask, extensions);
        return new Inout(id, id);
     * 绘制分支节点
     * @param process
     * @param node
     * @return
    private Inout drawExclusiveNode(Process process, ProcessNode node) {
        // 开始网关
        String startId = "Exclusive_"+UUID.randomUUID();
        ExclusiveGateway startGateway = new ExclusiveGateway();
        startGateway.setId(startId);
        process.addFlowElement(startGateway);
        // 结束网关
        String endId = "Exclusive_"+UUID.randomUUID();
        ExclusiveGateway endGateway = new ExclusiveGateway();
        endGateway.setId(endId);
        process.addFlowElement(endGateway);
        // 绘制分支
        List<ExclusiveBranch> branches = node.getExclusive();
        for (ExclusiveBranch branch : branches) {
            String expression = branch.getCondition();
            if (branch.getProcess()==null) {
                // 没有子流程，直接绘制结束线
                process.addFlowElement(createSequenceFlow(startId, endId, expression));
            } else {
                // 有子流程，递归绘制子流程
                drawNode(process, branch.getProcess(), startId, endId, expression);
        // int和out不一样
        return new Inout(startId, endId);
     * 创建连线
     * @param from
     * @param to
     * @return
    public SequenceFlow createSequenceFlow(String from, String to, String conditionExpression) {
        SequenceFlow flow = new SequenceFlow();
        flow.setId(from + "-" + to);
        flow.setSourceRef(from);
        flow.setTargetRef(to);
        if (conditionExpression != null) {
            flow.setConditionExpression(conditionExpression);
        return flow;
核心代码真的没几行，细节自己完善即可
我自己做了个相对复杂的json，转换为xml最终在bpmn.js展示效果如下
功能都没大问题，就是自动布局的线有点扭曲
  
 
   
相关推荐




    
 
  
        前端的阶梯
        Workflow
      
 
   流程设计器快速实现，实现JSON转BPMN
 
写过工作流都会遇到这样的难题，希望流程的设计可以类似钉钉一样简单明了，而不是超级不有好的bpmn设计器，上网大概搜了一下实现方案，前端仿钉钉设计器一大堆，例如wflow。
 
 694
 
 
        October_CanYang
        Vue.js
      
 
   vue+bpmnjs新手起步
 
vue+bpmnjs新手起步 首先 在vue的项目中安装bpmnjs依赖 安装完成后 就可以使用了，初代使用方式： 1:在你需要显示的页面中 上面代码，可完成一个初始状态的流程编辑器
 
 747
 
 
        Ant Design
      
 
   bpmn-js 流程图查看设置节点颜色
 
bpmn-js流程图查看, 根据不同节点状态设置颜色. 注意: 不同版本的bpmn写法不一样,我这个写法是适用6.3.4的版本,较新的版本可能不适用
 
 420
 
 
        烤奶不加冰_
        Vue.js
        bpmn-js
      
 
   在vue中使用bpmn-js（进阶）
 
由于公司前段时间在打造一个开发平台，而我主要负责工作流模块，于是就接触到了bpmn-js。但众所周知，bpmn-js 文档是全英的，相关资料少，填坑的人更少，所以开发起来并没有那么好上手。于是我研究了一段时间，没少踩坑，但收获颇丰，今天就跟大家分享一下。PS：以前一直做伸手党，…
 
 7357
 
 
        守望者001
      
 
   vue中使用bpmn-js来画流程图(一)
 
因为公司业务中需要在项目中加入在线流程设计的功能，在对比了vfd和bpmn.js两个插件的基础上，选择了bpmn.js。 启动项目，可以看到渲染完成的流程图。
 
 1492
 





    
 
      
 
   集成页面流程编辑器bpmnjs -- activiti工作流养成计划（七）
 
目标：集成在线流程编辑器bpmnjs 到目前为止，项目还缺少一个制作流程文件的功能。可以通过eclipse、idea中按装相应的插件制作流程图，但是本项目的目标是可以通过项目页面绘制流程图并且部署，所
 
 1104
 
 
        守望者001
      
 
   vue中使用bpmn.js来画流程图(二)
 
上节主要介绍在bpmnjs在vue中的安装以及基础的应用。 具体查看 vue中使用bpmn.js来画流程图(一)。 这节主要是使用bpmn.js输出xml(saveXML)和svg(saveSVG)。 输出控制台查看。 如果需要下载下来。在methods中添加方法。
 
 710
 
 
        MiyueFE
        JavaScript
        TypeScript
      
 
   Bpmn.js 进阶指南之Renderer详解
 
携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第3天，点击查看活动详情 前言 继上次的 Bpmn.js 进阶指南（万字长文） 之后，我相信大家对 Bpmn.js 的使用和自定义方
 
 2057
 
 
      
 
   bpmn.js + vue + vuex的业务实现
 
前言 近期因工作需要，要用bpmn.js的绘制流程图并且美化，遂用了3、4个工作日从零开始学习并完成工作。由于在学习过程中，发现关于bpmn.js的资料不是一般的少，大多数还是基础遍，实际的业务应用更
 
 453
 
 
        GitHub
      
 
   基于JSPlumb的流程设计器
 
基于JsPlumb的流程设计器FlowDesigner项目介绍前段时间项目中缺少一个流程设计器模块，于是花了一个来月的时间从技术选型到开发再到功能完善搞了一个流程设计器。由于本人不怎么擅长写前端代码，
 
 2321




    
 
 
        XinMing_Liu
      
 
   基于Bpmn-js的流程设计器校验实现
 
基于Bpmn-js的流程设计器校验实现,结合官方示例源码查看分析,实现自定义bpmn设计器的校验实现
 
 772
 
 
        从起风了到那个夏天
      
 
   基于bpmn.js 流程编辑器的引入开发 ant design、camunda
 
基于bpmn.js 流程编辑器的引入开发 ant design、camunda 流程(process) 之 流程编辑器 - bpmn.js引入 1.1 编辑器初步引入 采用npm方式安装bpmn.js
 
 568
 
 
      
 
   工作流开发基石（二）：流程设计器bpmn-js集成(vue版本)
 
在vue项目中集成bpmn-js 工作流引擎实战 集成步骤 完整代码示例 DIY流程设计器 ~~~~~
 
 7050
 
 
        Clarence
      
 
   (一)仿钉钉审批简介
 
简介 基于vue、ant-design-vue的自定义组件 注：该项目不兼容vue3.0项目 预览：http://106.53.139.166:9004/ 特性 支持流程办理、退回、自由流、会签、并行
 
 621
 
 
          
 
 
  
 
 
友情链接：
 

        php用函数做加减乘除
    pq217
      
 
 关注  
私信