前言

是什么？：bpmn-js 是一个流程图编辑器，它是基于 BPMN（Business Process Model and Notation，业务流程建模和标注）标准的一种实现。它允许开发者和用户创建、编辑和展示 BPMN 图表，这些图表用来描述业务流程、工作流和相关过程。具体来说，bpmn-js 提供了一个 JavaScript 库，可以嵌入到 Web 应用程序中，让用户能够通过图形界面进行流程图的设计和修改。

今天想和大家聊一聊的就是，如何用bpmn-js画出的流程图下载之后，在项目里面显示出来。 项目框架：vue3+ts; bpmn-js版本：17.8.2;

准备工作：

画图：demo.bpmn.io/new ； 官网：bpmn.io/toolkit/bpm…

下载文件bpmm格式的流程图：

文件存放项目地址：

public/files/diagram.bpmn

npm install bpmn-js

<template>
  <div>
    <!-- 已受理/未受理 -->
    <div ref="bpmnContainer" class="bpmnContainerStyle"></div>
  </div>
</template>

<script lang='ts'>
import { reactive, toRefs, onMounted, ref } from "vue";
import BpmnViewer from "bpmn-js";
export default {
  name: "",
  props: {},
  setup(props) {
    const fileUrl = ref<string>(""); // 存储文件路径的引用
    const data = reactive({});
    const bpmnContainer = ref<HTMLElement | null>(null);

    let viewer;
    async function showBpmnContainer() {
      viewer = new BpmnViewer({
        container: bpmnContainer.value as any,
      });
      //获取diagram.bpmn文件值
      const response = await fetch("/files/diagram.bpmn");
      const bpmnFilePath = await response.text();
      //渲染diagram.bpmn
      await viewer.importXML(bpmnFilePath);
    }
    onMounted(async () => {
      if (!bpmnContainer.value) return;
      showBpmnContainer();
    });
    
    
    return {
      ...toRefs(data),
      ...toRefs(props),
      fileUrl,
      bpmnContainer,
      viewer,
    };
  },
};
</script>

<style lang='scss' scoped>
/deep/ .node_customColors_green {
  rect,circle {
    stroke: rgb(60, 223, 10) !important;
  }
  text {
    fill: rgb(60, 223, 10) !important;
  }
}

/deep/ .node_customColors_red {
  rect {
    stroke: red !important;
  }
}

/deep/ .bjs-powered-by {
  display: none !important;
}
.bpmnContainerStyle {
  display: flex;
  height: 2000px;
  width: 1500px;
}
</style>

最后效果： 就是你在流程图工具里面画的图形

功能一、 需要给不同状态的选框不同的颜色展示

       //定义不同的样式颜色
        const colorNameMap = {
          green: "node_customColors_green",
          greenGate: "node_customColors_greenGate",
        };


      // 获取canvas整个画布按照状态渲染node节点颜色
      const canvas = viewer.get("canvas");  -- 渲染流程图
      const statusVal = props.statusVal;    -- 获取到的状态
   
       //判断状态为成功的时候，用canvas 的addMarker来给节点添加颜色  
      if (["成功"].includes(statusVal)) {
        canvas.addMarker("node_201", colorNameMap.green);
      }
      
    
    <style lang='scss' scoped>
    /deep/ .node_customColors_green {
      rect,circle {
        stroke: rgb(60, 223, 10) !important;
      }
      text {
        fill: rgb(60, 223, 10) !important;
      }
    }

    /deep/ .node_customColors_red {
      rect {
        stroke: red !important;
      }
    }
    </style>
    
    
   
    

备注：node_201是 ：bpmm文件里面的id