// 必填
	"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>
// 引入相關依賴
import BpmnModeler from "bpmn-js/lib/Modeler";
import { xmlStr } from "./utils/xmlStr.js"; // 直接引用 xml格式 內(nèi)容為一個圓形節(jié)點
export default {
  data() {
    return {
      bpmnModeler: null,
      container: null,
      canvas: null,
    };
  },
  created() {},
  mounted() {
    this.init();
  },
  methods: {
    init() {
      // 獲取canvas的dom節(jié)點
      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文件中的代碼，工具欄就可以顯示出來了。

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

// 添加在container節(jié)點下
<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", // 對應div添加的id
        },
          additionalModules: [
          // 右邊的屬性欄
          propertiesProviderModule,
          propertiesPanelModule,
        ],
  moddleExtensions: {
          camunda: camundaModdleDescriptor,
        },
      });

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

 const translations = {

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

    }  
}