1.bpmn-js

github
官網(wǎng)

在線demo(中文)
在線demo

介紹

BPMN.js是一個(gè)開(kāi)源工具包，用于使用JavaScript建模和執(zhí)行BPMN流程。
它提供一組庫(kù)，用于在基于瀏覽器和服務(wù)器端環(huán)境中創(chuàng)建，編輯和可視化BPMN圖表。
BPMN.js具有內(nèi)置支持廣泛的BPMN元素，包括任務(wù)，網(wǎng)關(guān)，事件和流程，并允許用戶定義自己的自定義元素。
工具包還包括用于驗(yàn)證和執(zhí)行BPMN模型的工具，以及導(dǎo)出和導(dǎo)入BPMN文件的功能。
由于其易于使用的API和靈活的架構(gòu)，BPMN.js是將BPMN支持整合到獨(dú)立和企業(yè)應(yīng)用程序中的流行選擇。

安裝

直接按照會(huì)導(dǎo)致依賴版本沖突，建議使用一下版本

“bpmn-js”: “^7.3.1”,
“bpmn-js-properties-panel”: “^0.37.2”,
“bpmn-moddle”: “^6.0.0”,
“camunda-bpmn-moddle”: “^4.5.0”,
“diagram-js-minimap”:2.0.4

vue基本使用

<template>
  <div>
    <div id="canvas"></div>
  </div>
</template>

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


export default {
  data() {
    return {
    }
  },
  mounted() {
    this.initModeler()
  },
  methods: {
    initModeler() {
      this.bpmnModeler = new BpmnModeler({
        container: '#canvas' ,//或者document.getElementById('canvas')
        width:1500,//string|number
        height:600,
      })
      var canvas = this.bpmnModeler.get('canvas')
      // 設(shè)置畫(huà)布背景色
      canvas._container.style.backgroundColor = '#f2f2f2'
    }
  }
}

效果

圖中沒(méi)有工具欄 需要引入css

import 'bpmn-js/dist/assets/diagram-js.css' // 左邊工具欄以及編輯節(jié)點(diǎn)的樣式
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css'
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css'
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'

效果

漢化

兩種方法使用漢化包或使用
1.首先創(chuàng)建漢化包 zh.js

export default {
  // Labels
  'Activate the global connect tool' : '激活全局連接工具',
  'Append {type}': '追加 {type}',
  'Append EndEvent': '追加 結(jié)束事件 ',
  'Append Task':'追加 任務(wù)',
  'Append Gateway':'追加 網(wǎng)關(guān)',
  'Append Intermediate/Boundary Event':'追加 中間/邊界 事件',
  'Add Lane above': '在上面添加道',
  'Divide into two Lanes': '分割成兩個(gè)道',
  'Divide into three Lanes': '分割成三個(gè)道',
  'Add Lane below': '在下面添加道',
  'Append compensation activity': '追加補(bǔ)償活動(dòng)',
  'Change type': '修改類型',
  'Connect using Association': '使用關(guān)聯(lián)連接',
  'Connect using Sequence/MessageFlow or Association': '使用順序/消息流或者關(guān)聯(lián)連接',
  'Connect using DataInputAssociation': '使用數(shù)據(jù)輸入關(guān)聯(lián)連接',
  'Remove': '移除',
  'Activate the hand tool': '激活抓手工具',
  'Activate the lasso tool': '激活套索工具',
  'Activate the create/remove space tool': '激活創(chuàng)建/刪除空間工具',
  'Create expanded SubProcess': '創(chuàng)建擴(kuò)展子過(guò)程',
  'Create IntermediateThrowEvent/BoundaryEvent' : '創(chuàng)建中間拋出事件/邊界事件',
  'Create Pool/Participant': '創(chuàng)建池/參與者',
  'Parallel Multi Instance': '并行多重事件',
  'Sequential Multi Instance': '時(shí)序多重事件',
  'DataObjectReference':'數(shù)據(jù)對(duì)象參考',
  'DataStoreReference':'數(shù)據(jù)存儲(chǔ)參考',
  'Loop': '循環(huán)',
  'Ad-hoc': '即席',
  'Create {type}': '創(chuàng)建 {type}',
  'Create Task':'創(chuàng)建任務(wù)',
  'Create StartEvent':'創(chuàng)建開(kāi)始事件',
  'Create EndEvent':'創(chuàng)建結(jié)束事件',
  'Create Group':'創(chuàng)建組',
  'Task': '任務(wù)',
  'Send Task': '發(fā)送任務(wù)',
  'Receive Task': '接收任務(wù)',
  'User Task': '用戶任務(wù)',
  'Manual Task': '手工任務(wù)',
  'Business Rule Task': '業(yè)務(wù)規(guī)則任務(wù)',
  'Service Task': '服務(wù)任務(wù)',
  'Script Task': '腳本任務(wù)',
  'Call Activity': '調(diào)用活動(dòng)',
  'Sub Process (collapsed)': '子流程（折疊的）',
  'Sub Process (expanded)': '子流程（展開(kāi)的）',
  'Start Event': '開(kāi)始事件',
  'StartEvent': '開(kāi)始事件',
  'Intermediate Throw Event': '中間事件',
  'End Event': '結(jié)束事件',
  'EndEvent': '結(jié)束事件',
  'Create Gateway': '創(chuàng)建網(wǎng)關(guān)',
  'GateWay':'網(wǎng)關(guān)',
  'Create Intermediate/Boundary Event': '創(chuàng)建中間/邊界事件',
  'Message Start Event': '消息開(kāi)始事件',
  'Timer Start Event': '定時(shí)開(kāi)始事件',
  'Conditional Start Event': '條件開(kāi)始事件',
  'Signal Start Event': '信號(hào)開(kāi)始事件',
  'Error Start Event': '錯(cuò)誤開(kāi)始事件',
  'Escalation Start Event': '升級(jí)開(kāi)始事件',
  'Compensation Start Event': '補(bǔ)償開(kāi)始事件',
  'Message Start Event (non-interrupting)': '消息開(kāi)始事件（非中斷）',
  'Timer Start Event (non-interrupting)': '定時(shí)開(kāi)始事件（非中斷）',
  'Conditional Start Event (non-interrupting)': '條件開(kāi)始事件（非中斷）',
  'Signal Start Event (non-interrupting)': '信號(hào)開(kāi)始事件（非中斷）',
  'Escalation Start Event (non-interrupting)': '升級(jí)開(kāi)始事件（非中斷）',
  'Message Intermediate Catch Event': '消息中間捕獲事件',
  'Message Intermediate Throw Event': '消息中間拋出事件',
  'Timer Intermediate Catch Event': '定時(shí)中間捕獲事件',
  'Escalation Intermediate Throw Event': '升級(jí)中間拋出事件',
  'Conditional Intermediate Catch Event': '條件中間捕獲事件',
  'Link Intermediate Catch Event': '鏈接中間捕獲事件',
  'Link Intermediate Throw Event': '鏈接中間拋出事件',
  'Compensation Intermediate Throw Event': '補(bǔ)償中間拋出事件',
  'Signal Intermediate Catch Event': '信號(hào)中間捕獲事件',
  'Signal Intermediate Throw Event': '信號(hào)中間拋出事件',
  'Message End Event': '消息結(jié)束事件',
  'Escalation End Event': '定時(shí)結(jié)束事件',
  'Error End Event': '錯(cuò)誤結(jié)束事件',
  'Cancel End Event': '取消結(jié)束事件',
  'Compensation End Event': '補(bǔ)償結(jié)束事件',
  'Signal End Event': '信號(hào)結(jié)束事件',
  'Terminate End Event': '終止結(jié)束事件',
  'Message Boundary Event': '消息邊界事件',
  'Message Boundary Event (non-interrupting)': '消息邊界事件（非中斷）',
  'Timer Boundary Event': '定時(shí)邊界事件',
  'Timer Boundary Event (non-interrupting)': '定時(shí)邊界事件（非中斷）',
  'Escalation Boundary Event': '升級(jí)邊界事件',
  'Escalation Boundary Event (non-interrupting)': '升級(jí)邊界事件（非中斷）',
  'Conditional Boundary Event': '條件邊界事件',
  'Conditional Boundary Event (non-interrupting)': '條件邊界事件（非中斷）',
  'Error Boundary Event': '錯(cuò)誤邊界事件',
  'Cancel Boundary Event': '取消邊界事件',
  'Signal Boundary Event': '信號(hào)邊界事件',
  'Signal Boundary Event (non-interrupting)': '信號(hào)邊界事件（非中斷）',
  'Compensation Boundary Event': '補(bǔ)償邊界事件',
  'Exclusive Gateway': '互斥網(wǎng)關(guān)',
  'Parallel Gateway': '并行網(wǎng)關(guān)',
  'Inclusive Gateway': '相容網(wǎng)關(guān)',
  'Complex Gateway': '復(fù)雜網(wǎng)關(guān)',
  'Event based Gateway': '事件網(wǎng)關(guān)',
  'Transaction': '轉(zhuǎn)運(yùn)',
  'Sub Process': '子流程',
  'Event Sub Process': '事件子流程',
  'Collapsed Pool': '折疊池',
  'Expanded Pool': '展開(kāi)池',
  // Errors
  'no parent for {element} in {parent}': '在{parent}里，{element}沒(méi)有父類',
  'no shape type specified': '沒(méi)有指定的形狀類型',
  'flow elements must be children of pools/participants': '流元素必須是池/參與者的子類',
  'out of bounds release': 'out of bounds release',
  'more than {count} child lanes': '子道大于{count} ',
  'element required': '元素不能為空',
  'diagram not part of bpmn:Definitions': '流程圖不符合bpmn規(guī)范',
  'no diagram to display': '沒(méi)有可展示的流程圖',
  'no process or collaboration to display': '沒(méi)有可展示的流程/協(xié)作',
  'element {element} referenced by {referenced}#{property} not yet drawn': '由{referenced}#{property}引用的{element}元素仍未繪制',
  'already rendered {element}': '{element} 已被渲染',
  'failed to import {element}': '導(dǎo)入{element}失敗',
  //屬性面板的參數(shù)
  'Id':'編號(hào)',
  'Name':'名稱',
  'General':'常規(guī)',
  'Details':'詳情',
  'Message Name':'消息名稱',
  'Message':'消息',
  'Initiator':'創(chuàng)建者',
  'Asynchronous Continuations':'持續(xù)異步',
  'Asynchronous Before':'異步前',
  'Asynchronous After':'異步后',
  'Job Configuration':'工作配置',
  'Exclusive':'排除',
  'Job Priority':'工作優(yōu)先級(jí)',
  'Retry Time Cycle':'重試時(shí)間周期',
  'Documentation':'文檔',
  'Element Documentation':'元素文檔',
  'History Configuration':'歷史配置',
  'History Time To Live':'歷史的生存時(shí)間',
  'Forms':'表單',
  'Form Key':'表單key',
  'Form Fields':'表單字段',
  'Business Key':'業(yè)務(wù)key',
  'Form Field':'表單字段',
  'ID':'編號(hào)',
  'Type':'類型',
  'Label':'名稱',
  'Default Value':'默認(rèn)值',
  'Validation':'校驗(yàn)',
  'Add Constraint':'添加約束',
  'Config':'配置',
  'Properties':'屬性',
  'Add Property':'添加屬性',
  'Value':'值',
  'Add':'添加',
  'Values':'值',
  'Add Value':'添加值',
  'Listeners':'監(jiān)聽(tīng)器',
  'Execution Listener':'執(zhí)行監(jiān)聽(tīng)',
  'Event Type':'事件類型',
  'Listener Type':'監(jiān)聽(tīng)器類型',
  'Java Class':'Java類',
  'Expression':'表達(dá)式',
  'Must provide a value':'必須提供一個(gè)值',
  'Delegate Expression':'代理表達(dá)式',
  'Script':'腳本',
  'Script Format':'腳本格式',
  'Script Type':'腳本類型',
  'Inline Script':'內(nèi)聯(lián)腳本',
  'External Script':'外部腳本',
  'Resource':'資源',
  'Field Injection':'字段注入',
  'Extensions':'擴(kuò)展',
  'Input/Output':'輸入/輸出',
  'Input Parameters':'輸入?yún)?shù)',
  'Output Parameters':'輸出參數(shù)',
  'Parameters':'參數(shù)',
  'Output Parameter':'輸出參數(shù)',
  'Timer Definition Type':'定時(shí)器定義類型',
  'Timer Definition':'定時(shí)器定義',
  'Date':'日期',
  'Duration':'持續(xù)',
  'Cycle':'循環(huán)',
  'Signal':'信號(hào)',
  'Signal Name':'信號(hào)名稱',
  'Escalation':'升級(jí)',
  'Error':'錯(cuò)誤',
  'Link Name':'鏈接名稱',
  'Condition':'條件名稱',
  'Variable Name':'變量名稱',
  'Variable Event':'變量事件',
  'Specify more than one variable change event as a comma separated list.':'多個(gè)變量事件以逗號(hào)隔開(kāi)',
  'Wait for Completion':'等待完成',
  'Activity Ref':'活動(dòng)參考',
  'Version Tag':'版本標(biāo)簽',
  'Executable':'可執(zhí)行文件',
  'External Task Configuration':'擴(kuò)展任務(wù)配置',
  'Task Priority':'任務(wù)優(yōu)先級(jí)',
  'External':'外部',
  'Connector':'連接器',
  'Must configure Connector':'必須配置連接器',
  'Connector Id':'連接器編號(hào)',
  'Implementation':'實(shí)現(xiàn)方式',
  'Field Injections':'字段注入',
  'Fields':'字段',
  'Result Variable':'結(jié)果變量',
  'Topic':'主題',
  'Configure Connector':'配置連接器',
  'Input Parameter':'輸入?yún)?shù)',
  'Assignee':'代理人',
  'Candidate Users':'候選用戶',
  'Candidate Groups':'候選組',
  'Due Date':'到期時(shí)間',
  'Follow Up Date':'跟蹤日期',
  'Priority':'優(yōu)先級(jí)',
  'The follow up date as an EL expression (e.g. ${someDate} or an ISO date (e.g. 2015-06-26T09:54:00)':'跟蹤日期必須符合EL表達(dá)式，如： ${someDate} ,或者一個(gè)ISO標(biāo)準(zhǔn)日期，如：2015-06-26T09:54:00',
  'The due date as an EL expression (e.g. ${someDate} or an ISO date (e.g. 2015-06-26T09:54:00)':'跟蹤日期必須符合EL表達(dá)式，如： ${someDate} ,或者一個(gè)ISO標(biāo)準(zhǔn)日期，如：2015-06-26T09:54:00',
  'Variables':'變量',
  'Candidate Starter Configuration':'候選開(kāi)始配置',
  'Task Listener':'任務(wù)監(jiān)聽(tīng)器',
  'Candidate Starter Groups':'候選開(kāi)始組',
  'Candidate Starter Users':'候選開(kāi)始用戶',
  'Tasklist Configuration':'任務(wù)列表配置',
  'Startable':'啟動(dòng)',
  'Specify more than one group as a comma separated list.':'指定多個(gè)組,用逗號(hào)分隔',
  'Specify more than one user as a comma separated list.':'指定多個(gè)用戶,用逗號(hào)分隔',
  'This maps to the process definition key.':'這會(huì)映射為流程定義的鍵',
  'CallActivity Type':'調(diào)用活動(dòng)類型',
  'Condition Type':'條件類型',
  'Create UserTask':'創(chuàng)建用戶任務(wù)',
  'Create CallActivity':'創(chuàng)建調(diào)用活動(dòng)',
  'Called Element':'調(diào)用元素',
  'Create DataObjectReference':'創(chuàng)建數(shù)據(jù)對(duì)象引用',
  'Create DataStoreReference':'創(chuàng)建數(shù)據(jù)存儲(chǔ)引用',
  'Multi Instance':'多實(shí)例',
  'Loop Cardinality':'實(shí)例數(shù)量',
  'Collection':'任務(wù)參與人列表',
  'Element Variable':'元素變量',
  'Completion Condition': '完成條件',
  'Open minimap': '打開(kāi)小地圖',
  'Close minimap':'關(guān)閉小地圖'
};

2.創(chuàng)建漢化翻譯 translate.js

import translations from "./zh";

export default function customTranslate(template, replacements) {
  replacements = replacements || {};

  // Translate
  template = translations[template] || template;

  // Replace
  return template.replace(/{([^}]+)}/g, function(_, key) {
    let str = replacements[key];
    if (
      translations[replacements[key]] !== null &&
      translations[replacements[key]] !== "undefined"
    ) {
      // eslint-disable-next-line no-mixed-spaces-and-tabs
      str = translations[replacements[key]];
      // eslint-disable-next-line no-mixed-spaces-and-tabs
    }
    return str || "{" + key + "}";
  });
}

3.使用

import translate from './hooks/translate.js'
initModeler() {
      this.bpmnModeler = new BpmnModeler({
		...
		//漢化
        additionalModules: [{ translate: ['value', translate] }]
      })
    }

安裝properties-panel(屬性欄）和camunda

import propertiesPanelModule from 'bpmn-js-properties-panel'
import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda'
import camundaModdleDescriptor from 'camunda-bpmn-moddle/resources/camunda'

導(dǎo)入配置
 additionalModules: [
          propertiesProviderModule,
          propertiesPanelModule,
          {
            translate: ['value', translate]
            // 禁用滾輪滾動(dòng)
            // zoomScroll: ["value", ""],
            // // 禁止拖動(dòng)線
            // bendpoints: ["value", ""],
            // // 禁用左側(cè)面板
            // paletteProvider: ["value", ""],
            // // 禁止點(diǎn)擊節(jié)點(diǎn)出現(xiàn)contextPad
            // contextPadProvider: ["value", ""],
            // // 禁止雙擊節(jié)點(diǎn)出現(xiàn)label編輯框
            // labelEditingProvider: ["value", ""]
          }
        ],
        moddleExtensions: {
          camunda: camundaModdleDescriptor
        }

完整代碼

<!--
 * @Author: qiangding2 qiangding2@iflytek.com
 * @Date: 2023-03-16 09:49:23
 * @LastEditors: qiangding2 qiangding2@iflytek.com
 * @LastEditTime: 2023-03-21 09:36:56
 * @FilePath: \vue2_demo-qiankun\src\views\bpmn\index.vue
 * @Description: 這是默認(rèn)設(shè)置,請(qǐng)?jiān)O(shè)置`customMade`, 打開(kāi)koroFileHeader查看配置 進(jìn)行設(shè)置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="containerBox" style="position: relative;">
            <div id="canvas"  style="width: 90%; height: 70vh">
            </div>
            <div id="js-properties-panel" class="panel"></div>
        </div>
</template>
<script>
import translate from './hooks/translate.js'
import BpmnModeler from 'bpmn-js/lib/Modeler'
import 'bpmn-js/dist/assets/diagram-js.css' // 左邊工具欄以及編輯節(jié)點(diǎn)的樣式
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css'
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css'
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'
import "bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css";
import propertiesPanelModule from 'bpmn-js-properties-panel'
import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda'
import camundaModdleDescriptor from 'camunda-bpmn-moddle/resources/camunda'

const xmlStr = `<?xml version="1.0" encoding="UTF-8"?>
<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:omgdi="http://www.omg.org/spec/DD/20100524/DI" xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" id="sid-38422fae-e03e-43a3-bef4-bd33b32041b2" targetNamespace="http://bpmn.io/bpmn" exporter="bpmn-js (https://demo.bpmn.io)" exporterVersion="5.1.2">
<process id="Process_1" isExecutable="false">
    <startEvent id="StartEvent_1y45yut" name="開(kāi)始">
    <outgoing>SequenceFlow_0h21x7r</outgoing>
    </startEvent>
    <task id="Task_1hcentk">
    <incoming>SequenceFlow_0h21x7r</incoming>
    </task>
    <sequenceFlow id="SequenceFlow_0h21x7r" sourceRef="StartEvent_1y45yut" targetRef="Task_1hcentk" />
</process>
<bpmndi:BPMNDiagram id="BpmnDiagram_1">
    <bpmndi:BPMNPlane id="BpmnPlane_1" bpmnElement="Process_1">
    <bpmndi:BPMNShape id="StartEvent_1y45yut_di" bpmnElement="StartEvent_1y45yut">
        <omgdc:Bounds x="152" y="102" width="36" height="36" />
        <bpmndi:BPMNLabel>
        <omgdc:Bounds x="160" y="145" width="22" height="14" />
        </bpmndi:BPMNLabel>
    </bpmndi:BPMNShape>
    <bpmndi:BPMNShape id="Task_1hcentk_di" bpmnElement="Task_1hcentk">
        <omgdc:Bounds x="240" y="80" width="100" height="80" />
    </bpmndi:BPMNShape>
    <bpmndi:BPMNEdge id="SequenceFlow_0h21x7r_di" bpmnElement="SequenceFlow_0h21x7r">
        <omgdi:waypoint x="188" y="120" />
        <omgdi:waypoint x="240" y="120" />
    </bpmndi:BPMNEdge>
    </bpmndi:BPMNPlane>
</bpmndi:BPMNDiagram>
</definitions>`

export default {
  data() {
    return {
      bpmnModeler: null,
      containerEl: null
    }
  },
  mounted() {
    this.initModeler()
  },
  methods: {
    initModeler() {
      this.containerEl = document.getElementById('canvas')
      this.bpmnModeler = new BpmnModeler({
        container: this.containerEl,
        propertiesPanel: {
          parent: '#js-properties-panel'
        },
        additionalModules: [
          propertiesProviderModule,
          propertiesPanelModule,
          {
            translate: ['value', translate]
            // 禁用滾輪滾動(dòng)
            // zoomScroll: ["value", ""],
            // // 禁止拖動(dòng)線
            // bendpoints: ["value", ""],
            // // 禁用左側(cè)面板
            // paletteProvider: ["value", ""],
            // // 禁止點(diǎn)擊節(jié)點(diǎn)出現(xiàn)contextPad
            // contextPadProvider: ["value", ""],
            // // 禁止雙擊節(jié)點(diǎn)出現(xiàn)label編輯框
            // labelEditingProvider: ["value", ""]
          }
        ],
        moddleExtensions: {
          camunda: camundaModdleDescriptor
        }
      })
      var canvas = this.bpmnModeler.get('canvas')
      // 設(shè)置畫(huà)布背景色
      canvas._container.style.backgroundColor = '#f2f2f2'

      this.createNewDiagram()
    },
    createNewDiagram() {
      // 將字符串轉(zhuǎn)換成圖顯示出來(lái)
      this.bpmnModeler.importXML(xmlStr, err => {
        if (err) {
          // console.error(err)
        } else {
          // 這里是成功之后的回調(diào), 可以在這里做一系列事情
          this.success()
        }
      })
    },
    success() {
      console.log('創(chuàng)建成功!')
    }
  }
}
</script>

<style>
 .containerBox {
        height: 100%;
    }
    .containerBox #container {
        height: 100%;
        border: 1px solid rgb(121, 121, 121);
    }
    .bpp-properties-panel [type=text] {
        box-sizing: border-box;
    }
    .panel {
        width: 400px;
        position: absolute;
        top: 1px;
        right: 1px;
        height:100%;
        overflow: auto;
    }
    /* 右下角logo */
    .bjs-powered-by {
        display: none;
    }
</style>

添加小地圖

1.在漢化文件中添加漢化

  'Open minimap': '打開(kāi)小地圖',
  'Close minimap':'關(guān)閉小地圖'

2.安裝diagram-js-minimap 版本2.0.4
3.使用

import minimapModule from 'diagram-js-minimap' //導(dǎo)入小地圖
import './hooks/minimap.css'//自定義小地圖樣式

minimap.css

.djs-minimap {
  position: absolute;
  top: 20px;
  /*自定義樣式*/
  right: 420px;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.9);
  border: solid 1px #CCC;
  border-radius: 2px;
  box-sizing: border-box;
  user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
}

.djs-minimap:not(.open) {
  overflow: hidden;
}

.djs-minimap .map {
  display: none;
}

.djs-minimap.open .map {
  display: block;
}

.djs-minimap .map {
  width: 320px;
  height: 180px;
}

.djs-minimap:not(.open) .toggle {
  padding: 10px;
  text-align: center;
}

.djs-minimap .toggle:before {
  content: attr(title);
}

.djs-minimap.open .toggle {
  position: absolute;
  right: 0;
  padding: 6px;
  z-index: 1;
}

.djs-minimap .map {
  cursor: crosshair;
}

.djs-minimap .viewport {
  /* fill: rgba(255, 116, 0, 0.25); */
  fill: none;
  stroke: none;
}

.djs-minimap .viewport-dom {
  position: absolute;
  border: solid 2px orange;
  border-radius: 2px;
  box-sizing: border-box;
  cursor: move;
}

.djs-minimap:not(.open) .viewport-dom {
  display: none;
}

.djs-minimap.open .overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.2);
  pointer-events: none;
}

.djs-minimap .cursor-crosshair {
  cursor: crosshair;
}

.djs-minimap .cursor-move {
  cursor: move;
}

4.使用model

 additionalModules: [
 			...
             minimapModule,
        ],

效果

下載與保存

        <el-button type="primary" @click="saveSVG">保存SVG</el-button>
        <el-button type="primary" @click="saveDiagram">保存XML</el-button>
        <el-button type="primary" @click="exportBPMN">下載XML</el-button>
        <el-button type="primary" @click="exportSVG">下載SVG</el-button>

  //保存XML
    saveDiagram() {
      // 把傳入的done再傳給bpmn原型的saveXML函數(shù)調(diào)用
      this.bpmnModeler.saveXML().then(res => {
        //調(diào)用接口 進(jìn)行保存
        console.log(res)
      })
    },
    //保存SVG
    saveSVG() {
      this.bpmnModeler.saveSVG().then(res => {
        //調(diào)用接口 進(jìn)行保存
        console.log(res)
      })
    },
    // 下載 SVG 格式
    exportBPMN() {
      this.bpmnModeler.saveXML().then(res => {
        //調(diào)用接口 進(jìn)行保存
        this.download('xml', res.xml)
      })
    },
    exportSVG() {
        this.bpmnModeler.saveSVG().then(res => {
        //調(diào)用接口 進(jìn)行保存
        this.download('svg', res.svg)
      })
    },
    // 下載xml/svg
    download(type, data, name) {
      let dataTrack = ''
      const a = document.createElement('a')

      switch (type) {
        case 'xml':
          dataTrack = 'bpmn'
          break
        case 'svg':
          dataTrack = 'svg'
          break
        default:
          break
      }
      name = name || `diagram.${dataTrack}`
      a.setAttribute(
        'href',
        `data:application/bpmn20-xml;charset=UTF-8,${encodeURIComponent(data)}`
      )
      a.setAttribute('target', '_blank')
      a.setAttribute('dataTrack', `diagram:download-${dataTrack}`)
      a.setAttribute('download', name)
      document.body.appendChild(a)
      a.click()
      document.body.removeChild(a)
    }

參考：《全網(wǎng)最詳bpmn.js教材》文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-607153.html

到了這里，關(guān)于bpmn-js調(diào)研的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！