// 必填
	"bpmn-js": "^7.3.1", 
    "bpmn-js-properties-panel": "^0.37.2",
    "bpmn-moddle":"^7.1.3",
    "camunda-bpmn-moddle": "^7.0.1",
    // 可選
    "@element-plus/icons-vue": "2.0.10",
    "element-plus": "2.2.27",
    "vue": "3.2.45",

export var xmlStr = `
<?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"
        id="sample-diagram"
        targetNamespace="http://bpmn.io/schema/bpmn"
        xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd">
  <bpmn2:process id="Process_1" isExecutable="false">
    <bpmn2:startEvent id="StartEvent_1" />
  </bpmn2:process>
  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">
      <bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">
        <dc:Bounds x="192" y="82" width="36" height="36" />
      </bpmndi:BPMNShape>
    </bpmndi:BPMNPlane>
  </bpmndi:BPMNDiagram>
</bpmn2:definitions>`

<template>
  <div class="container">
    <div class="canvas" ref="canvas"></div>
  </div>
</template>
<script>
// 引入相關(guān)依賴(lài)
import BpmnModeler from "bpmn-js/lib/Modeler";
import { xmlStr } from "./utils/xmlStr.js"; // 直接引用 xml格式 內(nèi)容為一個(gè)圓形節(jié)點(diǎn)
export default {
  data() {
    return {
      bpmnModeler: null,
      container: null,
      canvas: null,
    };
  },
  created() {},
  mounted() {
    this.init();
  },
  methods: {
    init() {
      // 獲取canvas的dom節(jié)點(diǎn)
      const canvas = this.$refs.canvas;
      // 建模
      this.bpmnModeler = new BpmnModeler({
        container: canvas,
      });
        //將xmlStr中的內(nèi)容顯示在容器中
     this.bpmnModeler.importXML(xmlStr, (err) => {
        if (err) {
          console.error(err);
        } else {
          // 這里是成功之后的回調(diào), 可以在這里做一系列事情
          console.log("success");
        }
      });
    },
  },
};
</script>
<style scoped>
.container {
  width: 100%;
  height: 1000px;
  position: relative;
}
.canvas {
  width: 100%;
  height: 100%;
  background: white;
}

</style>

import "bpmn-js/dist/assets/diagram-js.css"  
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"
// 注意 ：引入文件后并不需要修改vue文件中的代碼，工具欄就可以顯示出來(lái)了。

 import 'bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css' 

// 添加在container節(jié)點(diǎn)下
<div id="js-properties-panel" class="panel"></div>
//樣式
.panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
}

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";

this.bpmnModeler = new BpmnModeler({
           propertiesPanel: {
          parent: "#js-properties-panel", // 對(duì)應(yīng)div添加的id
        },
          additionalModules: [
          // 右邊的屬性欄
          propertiesProviderModule,
          propertiesPanelModule,
        ],
  moddleExtensions: {
          camunda: camundaModdleDescriptor,
        },
      });

/**
 *參考 https://github.com/bpmn-io/bpmn-js-i18n
 */

 const translations = {

    "Name":"名稱(chēng)",
    "Value":"值",
    "ID":"唯一標(biāo)識(shí)(ID)",
    "General":"基礎(chǔ)屬性",
  
    "Activate the create/remove space tool": "啟動(dòng)創(chuàng)建/刪除空間工具",
    "Activate the global connect tool": "啟動(dòng)全局連接工具",
    "Activate the hand tool": "啟動(dòng)手動(dòng)工具",
    "Activate the lasso tool": "啟動(dòng)套索工具",
    "Ad-hoc": "Ad-hoc子流程",
    "Add Lane above": "添加到通道之上",
    "Add Lane below": "添加到通道之下",
    "Append ConditionIntermediateCatchEvent": "添加中間條件捕獲事件",
    "Append element": "添加元素",
    "Append EndEvent": "添加結(jié)束事件",
    "Append Gateway": "添加網(wǎng)關(guān)",
    "Append Intermediate/Boundary Event": "添加中間/邊界事件",
    "Append MessageIntermediateCatchEvent": "添加消息中間捕獲事件",
    "Append ReceiveTask": "添加接收任務(wù)",
    "Append SignalIntermediateCatchEvent": "添加信號(hào)中間捕獲事件",
    "Append Task": "添加任務(wù)",
    "Append TimerIntermediateCatchEvent": "添加定時(shí)器中間捕獲事件",
    "Append compensation activity": "追加補(bǔ)償活動(dòng)",
    "Append {type}": "追加 {type}",
    "Boundary Event": "邊界事件",
    "Business Rule Task": "規(guī)則任務(wù)",
    "Call Activity": "引用流程",
    "Cancel Boundary Event": "取消邊界事件",
    "Cancel End Event": "取消結(jié)束事件",
    "Change type": "更改類(lèi)型",
    "Collapsed Pool": "折疊池",
    "Collection": "集合",
    "Compensation Boundary Event": "補(bǔ)償邊界事件",
    "Compensation End Event": "結(jié)束補(bǔ)償事件",
    "Compensation Intermediate Throw Event": "中間補(bǔ)償拋出事件",
    "Compensation Start Event": "補(bǔ)償啟動(dòng)事件",
    "Complex Gateway": "復(fù)雜網(wǎng)關(guān)",
    "Conditional Boundary Event": "條件邊界事件",
    "Conditional Boundary Event (non-interrupting)": "條件邊界事件 (非中斷)",
    "Conditional Flow": "條件流",
    "Conditional Intermediate Catch Event": "中間條件捕獲事件",
    "Conditional Start Event": "條件啟動(dòng)事件",
    "Conditional Start Event (non-interrupting)": "條件啟動(dòng)事件 (非中斷)",
    "Connect using Association": "文本關(guān)聯(lián)",
    "Connect using DataInputAssociation": "數(shù)據(jù)關(guān)聯(lián)",
    "Connect using Sequence/MessageFlow or Association": "消息關(guān)聯(lián)",
    "Create IntermediateThrowEvent/BoundaryEvent": "創(chuàng)建中間拋出/邊界事件",
    "Create DataObjectReference": "創(chuàng)建數(shù)據(jù)對(duì)象引用",
    "Create DataStoreReference": "創(chuàng)建數(shù)據(jù)存儲(chǔ)引用",
    "Create element": "創(chuàng)建元素",
    "Create EndEvent": "創(chuàng)建結(jié)束事件",
    "Create Gateway": "創(chuàng)建網(wǎng)關(guān)",
    "Create Group": "創(chuàng)建組",
    "Create Intermediate/Boundary Event": "創(chuàng)建中間/邊界事件",
    "Create Pool/Participant": "創(chuàng)建池/參與者",
    "Create StartEvent": "創(chuàng)建開(kāi)始事件",
    "Create Task": "創(chuàng)建任務(wù)",
    "Create expanded SubProcess": "創(chuàng)建可折疊子流程",
    "Create {type}": "創(chuàng)建 {type}",
    "Data": "數(shù)據(jù)",
    "Data Object Reference": "數(shù)據(jù)對(duì)象引用",
    "Data Store Reference": "數(shù)據(jù)存儲(chǔ)引用",
    "Default Flow": "默認(rèn)流",
    "Divide into three Lanes": "分成三條通道",
    "Divide into two Lanes": "分成兩條通道",
    "Empty Pool": "空泳道",
    "Empty Pool (removes content)": "清空泳道（刪除內(nèi)容）",
    "End Event": "結(jié)束事件",
    "Error Boundary Event": "錯(cuò)誤邊界事件",
    "Error End Event": "結(jié)束錯(cuò)誤事件",
    "Error Start Event": "錯(cuò)誤啟動(dòng)事件",
    "Escalation Boundary Event": "升級(jí)邊界事件",
    "Escalation Boundary Event (non-interrupting)": "升級(jí)邊界事件 (非中斷)",
    "Escalation End Event": "結(jié)束升級(jí)事件",
    "Escalation Intermediate Throw Event": "中間升級(jí)拋出事件",
    "Escalation Start Event": "升級(jí)啟動(dòng)事件",
    "Escalation Start Event (non-interrupting)": "升級(jí)啟動(dòng)事件 (非中斷)",
    "Events": "事件",
    "Event Sub Process": "事件子流程",
    "Event based Gateway": "事件網(wǎng)關(guān)",
    "Exclusive Gateway": "獨(dú)占網(wǎng)關(guān)",
    "Expanded Pool": "展開(kāi)泳道",
    "Gateways": "網(wǎng)關(guān)",
    "Inclusive Gateway": "包容網(wǎng)關(guān)",
    "Intermediate Throw Event": "中間拋出事件",
    "Link Intermediate Catch Event": "中間鏈接捕獲事件",
    "Link Intermediate Throw Event": "中間鏈接拋出事件",
    "Loop": "循環(huán)",
    "Manual Task": "手動(dòng)任務(wù)",
    "Message Boundary Event": "消息邊界事件",
    "Message Boundary Event (non-interrupting)": "消息邊界事件 (非中斷)",
    "Message End Event": "結(jié)束消息事件",
    "Message Intermediate Catch Event": "中間消息捕獲事件",
    "Message Intermediate Throw Event": "中間消息拋出事件",
    "Message Start Event": "消息啟動(dòng)事件",
    "Message Start Event (non-interrupting)": "消息啟動(dòng)事件 (非中斷)",
    "Parallel Gateway": "并行網(wǎng)關(guān)",
    "Parallel Multi Instance": "并行多實(shí)例",
    "Participants": "參與者",
    "Participant Multiplicity": "參與者多重性",
    "Receive Task": "接受任務(wù)",
    "Remove": "移除",
    "Script Task": "腳本任務(wù)",
    "Send Task": "發(fā)送任務(wù)",
    "Sequence Flow": "順序流",
    "Sequential Multi Instance": "串行多實(shí)例",
    "Service Task": "服務(wù)任務(wù)",
    "Signal Boundary Event": "信號(hào)邊界事件",
    "Signal Boundary Event (non-interrupting)": "信號(hào)邊界事件 (非中斷)",
    "Signal End Event": "結(jié)束信號(hào)事件",
    "Signal Intermediate Catch Event": "中間信號(hào)捕獲事件",
    "Signal Intermediate Throw Event": "中間信號(hào)拋出事件",
    "Signal Start Event": "信號(hào)啟動(dòng)事件",
    "Signal Start Event (non-interrupting)": "信號(hào)啟動(dòng)事件 (非中斷)",
    "Start Event": "開(kāi)始事件",
    "Sub Process": "子流程",
    "Sub Processes": "子流程",
    "Sub Process (collapsed)": "可折疊子流程",
    "Sub Process (expanded)": "可展開(kāi)子流程",
    "Task": "任務(wù)",
    "Tasks": "任務(wù)",
    "Terminate End Event": "終止邊界事件",
    "Timer Boundary Event": "定時(shí)邊界事件",
    "Timer Boundary Event (non-interrupting)": "定時(shí)邊界事件 (非中斷)",
    "Timer Intermediate Catch Event": "中間定時(shí)捕獲事件",
    "Timer Start Event": "定時(shí)啟動(dòng)事件",
    "Timer Start Event (non-interrupting)": "定時(shí)啟動(dòng)事件 (非中斷)",
    "Transaction": "事務(wù)",
    "User Task": "用戶(hù)任務(wù)",
    "already rendered {element}": "{element} 已呈現(xiàn)",
    "diagram not part of bpmn:Definitions": "圖表不是 bpmn:Definitions 的一部分",
    "element required": "需要元素",
    "correcting missing bpmnElement on {plane} to {rootElement}": "在 {plane} 上更正缺失的 bpmnElement 為 {rootElement}",
    "element {element} referenced by {referenced}#{property} not yet drawn": "元素 {element} 的引用 {referenced}#{property} 尚未繪制",
    "failed to import {element}": "{element} 導(dǎo)入失敗",
    "flow elements must be children of pools/participants": "元素必須是池/參與者的子級(jí)",
    "more than {count} child lanes": "超過(guò) {count} 條通道",
    "missing {semantic}#attachedToRef": "在 {element} 中缺少 {semantic}#attachedToRef",
    "multiple DI elements defined for {element}": "為 {element} 定義了多個(gè) DI 元素",
    "no bpmnElement referenced in {element}": "{element} 中沒(méi)有引用 bpmnElement",
    "no diagram to display": "沒(méi)有要顯示的圖表",
    "no shape type specified": "未指定形狀類(lèi)型",
    "no parent for {element} in {parent}": "在 {element} 中沒(méi)有父元素 {parent}",
    "no process or collaboration to display": "沒(méi)有可顯示的流程或協(xié)作",
    "out of bounds release": "越界釋放",
    "Version tag":"版本標(biāo)記",
    "Change element":"改變?cè)?,
    "Documentation":"文檔",
    "PROCESS":"流程",
    "Element documentation":"元素文檔說(shuō)明",
    "User assignment":"分配用戶(hù)",
    "History cleanup":"歷史記錄清理",
    "Time to live":"歷史記錄生存時(shí)間",
    "Tasklist":"任務(wù)列表",
    "Candidate starter":"候選啟動(dòng)器",
    "Candidate starter groups":"候選啟動(dòng)組",
    "Specify more than one group as a comma separated list.":"多個(gè)組用','分隔.",
    "Candidate starter users":"候選發(fā)起人",
    "Specify more than one user as a comma separated list.":"多個(gè)用戶(hù)用','分隔.",
    "External task":"外部任務(wù)",
    "Startable":"可啟動(dòng)(Startable)",
    "Executable":"可直接執(zhí)行",
    "Job execution":"作業(yè)執(zhí)行",
    "Priority":"優(yōu)先級(jí)",
    "Forms":"表單",
    "Execution listeners":"執(zhí)行偵聽(tīng)器",
    "Extension properties":"擴(kuò)展屬性",
    "Event type":"事件類(lèi)型",
    "Listener type":"偵聽(tīng)器類(lèi)型",
    "Field injection":"字段注入",
    "Start initiator":"開(kāi)始發(fā)起人",
    "Initiator":"發(fā)起人",
    "Asynchronous continuations":"異步延續(xù)",
    "Before":"之前",
    "After":"之后",
    "Inputs":"輸入",
    "Outputs":"輸出",
    "Local variable name":"局部變量名稱(chēng)",
    "Assignment type":"分配類(lèi)型",
    "Format":"格式",
    "Type":"類(lèi)型",
    "Expression":"表達(dá)式(Expression)",
    "Script":"腳本(Script)",
    "Delegate expression":"委托表達(dá)式(Delegate expression)",
    "Java class":"Java類(lèi)(Java class)",
    "start":"開(kāi)始(start)",
    "end":"結(jié)束(end)",
    "Start typing \"${}\" to create an expression.":"開(kāi)始鍵入\"${}\"以創(chuàng)建表達(dá)式.",
    "Process variable name":"過(guò)程變量名稱(chēng)",
    "List values":"列表值",
    "Map entries":"映射條目",
    "Key":"鍵",
    "Values":"值",
    "Form reference":"引用表單ID",
    "Binding":"結(jié)合",
    "Version":"版本",
    "Form fields":"表單字段",
    "Form key":"表單ID",
    "Embedded or External Task Forms":"拓展表單",
    "Camunda Forms":"標(biāo)準(zhǔn)表單",
    "Generated Task Forms":"內(nèi)置表單",
    "Refers to the process variable name":"指的是(引用)過(guò)程變量名稱(chēng)",
    "Label":"標(biāo)簽",
    "Default value":"默認(rèn)值",
    "Constraints":"限制",
    "Properties":"屬性",
    "Config":"配置",
    "Implementation":"實(shí)施",
    "Field injections":"字段注入",
    "Task listeners":"任務(wù)偵聽(tīng)器",
    "Listener ID":"偵聽(tīng)器ID",
    "Message":"消息",
    "Global message reference":"引用全局消息ID",
    "Result variable":"結(jié)果變量",
    "Resource":"資源",
    "External resource":"外部資源",
    "Inline script":"內(nèi)聯(lián)腳本",
    "Process variables":"過(guò)程變量",
    "Global signal reference":"引用全局信號(hào)ID",
    "Signal":"信號(hào)",
    "Called element":"被調(diào)用元素",
    "In mapping propagation":"在映射傳播中",
    "Propagate all variables":"傳播所有變量",
    "Out mapping propagation":"向外映射傳播",
    "In mappings":"在映射中",
    "Source":"來(lái)源",
    "Target":"目標(biāo)",
    "Local":"局部的(Local)",
    "Out mappings":"輸出映射",
    "Link":"鏈接",
    "Timer":"定時(shí)器",
    "Retry time cycle":"重試時(shí)間周期",
    "Variable name":"變量名稱(chēng)",
    "Condition Expression":"條件表達(dá)式",
    "Condition":"條件",
    "Process documentation":"流程文檔",
    "Assignee":"委托人",
    "Candidate groups":"候選組",
    "Candidate users":"候選用戶(hù)",
    "Due date":"期限",
    "The due date as an EL expression (e.g. ${someDate}) or an ISO date (e.g. 2015-06-26T09:54:00).":"到期日期為EL表達(dá)式(例如${someDate})或ISO日期(例如2015-06-26T09:54:00)",
    "Follow up date":"跟進(jìn)日期",
    "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})或ISO日期(例如2015-06-26T09:54:00)的跟進(jìn)日期",
    "Connector ID":"連接器ID",
    "Connector inputs":"連接器輸入",
    "Connector outputs":"連接器輸出",
    "Topic":"主題",
    "Errors":"錯(cuò)誤",
    "Global error reference":"引用全局錯(cuò)誤ID",
    "Throw expression":"Throw表達(dá)式",
    "Decision reference":"引用決策ID",
    "Tenant ID":"租戶(hù)ID",
    "Multi-instance":"多實(shí)例",
    "Loop cardinality":"循環(huán)基數(shù)",
    "Completion condition":"完成條件",
    "Element variable":"元素變量",
    "Asynchronous before":"異步之前",
    "Asynchronous after":"異步之后",
  };
  
  export const customTranslate = (template, replacements) =>{
    replacements = replacements || {};
    // Translate
    template = translations[template] || template;
    // Replace
    return template.replace(/{([^}]+)}/g, (_, key)=> {
      return replacements[key] || '{' + key + '}';
    });
  }
  
  

// 漢化
import { customTranslate } from "./utils/translations.js";

this.bpmnModeler = new BpmnModeler({
         
          additionalModules: [
		// 漢化
           {
            translate: ["value", customTranslate],
          },
        ]

      });

 <!-- 添加在container節(jié)點(diǎn)下 --> 
<div class="btm">
        <el-button type="primary" @click="exportXML()">導(dǎo)出XML</el-button>
    </div>
 <!-- 樣式 --> 
.btm{
    position: absolute;
    left:100px;
    top:0;
}
 <!-- 在methods中添加方法--> 
methods:{
exportXML(){
        this.bpmnModeler.saveXML(({format:true}),(err,xml)=>{
               this.exportFile(xml,"bpmn.xml")
        })
    },
    exportFile(data,fileName){
        var url = window.URL.createObjectURL(new Blob([data]))
        var line = document.createElement("a")
        line.href = url
        line.download = fileName
        line.click()
    }
}

 <!-- 添加在container節(jié)點(diǎn)下 --> 
<div class="btm">
        <el-button type="primary" @click="exportSVG()">導(dǎo)出SVG</el-button>
    </div>
 <!-- 樣式 --> 
.btm{
    position: absolute;
    left:100px;
    top:0;
}
 <!-- 在methods中添加方法--> 
methods:{
exportSVG(){
        this.bpmnModeler.saveSVG(({format:true}),(err,xml)=>{
               this.exportFile(xml,"bpmn.svg")
        })
    },
    exportFile(data,fileName){
        var url = window.URL.createObjectURL(new Blob([data]))
        var line = document.createElement("a")
        line.href = url
        line.download = fileName
        line.click()
    }
}

 <!-- 添加在container節(jié)點(diǎn)下 --> 
<div class="btm">
        <el-button type="primary" @click="importXML()">導(dǎo)入XML</el-button>
    </div>
 <!-- 樣式 --> 
.btm{
    position: absolute;
    left:100px;
    top:0;
}

 <!-- 在methods中添加方法--> 
methods:{
 importXML(){
        var file=document.getElementById("file")
        file.click()
    },
    getFiles(files){
        var file = files.target.files[0]
		// 創(chuàng)建文件對(duì)象
        var fileReader = new FileReader()
        fileReader.readAsText(file,"UTF-8")
        fileReader.onload=(row)=>{
            // 將xml文件中的內(nèi)容賦值給容器
            this.bpmnModeler.importXML(row.target.result,(err)=>{
                if(err){

                }else{
                    console.log("success")
                }
            })
        }

    }  
}