bpmn.js设置节点颜色高亮和工作流图的大小和位置

记录一下最近做camunda工作流时候整合VUE bpmn.js时候遇到的坑吧

1、VUE中引入bpmn.js，在package.json在原有的基础下加入以下内容后npm install

  "devDependencies": {
    "vue-template-compiler": "2.6.10",
    "bpmn-js-properties-panel": "^0.33.2",
    "camunda-bpmn-moddle": "^4.0.1"
  },
  "dependencies": {
    "bpmn-js": "^6.4.2"
  },

2、VUE页面引入的时候有两种方式（可能不止两种方式，我只试了这两种）

方式一：这种方式引入的是编辑模式的，有左边的编辑面板

import BpmnModeler from 'bpmn-js/lib/Modeler'

方式二： 这种方式引入的是查看模式，仅可以看，不可以编辑

import BpmnViewer from 'bpmn-js/lib/Viewer'

3、接下来以Viewer模式来介绍下如何使用

（1）在<template>里面加个div，样式可以不设置，不设置默认页面居中

<div style="left: 0px;width:800px;height: 400px;" ref="bpnmDiv"></div