bpmn简单使用（制作流程图）

1、先下载依赖，下面是我下载的版本

"@bpmn-io/properties-panel": "^3.23.0",
"bpmn-js": "^17.9.1",
"bpmn-js-properties-panel": "^5.6.1",
"camunda-bpmn-moddle": "^7.0.1",

2、创建一个文件夹，里面放两个文件

index.scss

// 最外层包裹
.designer-container {height: 100%;width: 100%;margin: 0;padding: 0;background-color: #ffffff;overflow: hidden;display: flex;flex-direction: column;position: relative;
}// 主要内容
#container {width: 100%;flex: 1;overflow: hidden;display: flex;height: 100%;
}/* 隐藏右下角logo */
.bjs-powered-by {display: none;
}// 按钮区域样式
.panel {width: 400px;position: absolute;top: 1px;right: 1px;height: 100%;overflow: auto;.el-button {margin: 0 10px 10px 0 !important;}
}

index.vue

<template><div class="designer-container"><div id="container"></div><div id="js-properties-panel" class="panel"><div class="custom-properties-panel"><div style="height: 400px"><el-row class="mb-4"><el-button>Default</el-button><el-button type="primary" @click="downloadXml">点击下载xml</el-button><el-button type="success" @click="creteXml">导入文件</el-button><el-button type="info">Info</el-button><el-button type="warning">Warning</el-button><el-button type="danger">Danger</el-button></el-row></div></div></div></div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'export default defineComponent({name: 'commFlowchart'
})
</script><script setup lang="ts">
import { markRaw, onMounted, ref } from "vue";
import BpmnModeler from "bpmn-js/lib/Modeler";
import translate from "@/utils/translate/translate";//引入汉化工具
import "bpmn-js/dist/assets/diagram-js.css";
import "bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css";
import "bpmn-js-properties-panel/dist/assets/properties-panel.css"; // 右边工具栏样式
import EventBus from "diagram-js/lib/core/EventBus";
let customTranslateModule = {translate: ["value", translate]
};
const bpmnModeler = ref<any>({});
onMounted(() => {bpmnModeler.value = markRaw(new BpmnModeler({container: "#container",// 添加控制板propertiesPanel: {parent: "#js-properties-panel"},additionalModules: [customTranslateModule]}));bpmnModeler.value.createDiagram();// 注册事件监听registerEventBus();
});const registerEventBus = () => {// 获取bpmn.js的EventBus。通过打印eventBus可以查看支持的所有EventBus： console.log(eventBus);const eventBus: EventBus = bpmnModeler.value.get("eventBus");// 注册节点事件，eventTypes中可以写多个事件，需要哪些写那些const eventTypes = ["element.click"];eventTypes.forEach(eventType => {eventBus.on(eventType, (e: { element: any }) => {const { element } = e;if (!element.parent) return;if (!e || element.type === "bpmn:Process") {return false;} else {if (eventType === "element.click") {// TODO 节点点击后想要做的处理console.log("点击的节点数据", element);}}});});
};
// 下载文件
const downloadFile = (fileName: string, data: any, type: string) => {const a = document.createElement('a');const url = window.URL.createObjectURL(new Blob([data], { type: type }));a.href = url;a.download = fileName;a.click();window.URL.revokeObjectURL(url);
};
// 下载流程图
const downloadXml = () => {//下载xmlbpmnModeler.value.saveXML({ format: true }).then((res: any) => {console.log("画出的xml数据为", res);downloadFile(`测试.xml`, res.xml, 'application/xml');});// 下载SVG// bpmnModeler.value.saveSVG({ format: true }).then((res: any) => {//   console.log("画出的svg数据为", res);//   downloadFile(`测试.svg`, res.svg, 'image/svg+xml');// });
};
const creteXml = () => {bpmnModeler.value.importXML(``);
};
</script><style lang="scss" scope>
@import "./index.scss";
</style>

3、页面引用

<template><div class="workflow-view"><commFlowchart /></div>
</template><script setup lang="ts">
import commFlowchart from "@/components/commFlowchart/index.vue";
</script><style lang="scss" scoped>
.workflow-view{height: calc(100vh - 152px);
}
</style>

4、汉化（创建一个文件夹，里面放两个文件translate.ts和zh.ts）

translate.ts

import { zh } from "./zh";
export default function customTranslate(template: string, replacements: any) {replacements = replacements || {};template = zh[template] || template;return template.replace(/{([^}]+)}/g, function (_, key) {return replacements[key] || "{" + key + "}";});
}

zh.ts

export const zh:any = {"Activate global connect tool": "激活全局连接工具","Append {type}": "添加 {type}","Add lane above": "在上面添加道","Divide into two lanes": "分割成两个道","Divide into three lanes": "分割成三个道","Add lane below": "在下面添加道","Append compensation activity": "追加补偿活动","Change type": "修改类型","Connect using association": "使用关联连接","Connect using sequence/message flow or association": "使用顺序/消息流或者关联连接","Connect using data input association": "使用数据输入关联连接","Connect to other element": "连接到其他元素","Add text annotation": "添加文本注释","Delete": "删除","Collection": "收藏","Align elements": "对齐元素","Change element": "修改类型",Remove: "移除","Activate hand tool": "激活抓手工具","Activate lasso tool": "激活套索工具","Activate create/remove space tool": "激活创建/删除空间工具","Create expanded sub-process": "创建扩展子过程","Create intermediate/boundary event": "创建中间抛出事件/边界事件","Create pool/participant": "创建池/参与者","Parallel multi-instance": "并行多重事件","Sequential multi-instance": "时序多重事件","Data object reference": "数据对象参考","Data store reference": "数据存储参考",Loop: "循环","Ad-hoc": "即席","Create {type}": "创建 {type}",Task: "任务","Send task": "发送任务","Receive task": "接收任务","User task": "用户任务","Manual task": "手工任务","Business rule task": "业务规则任务","Service task": "服务任务","Script task": "脚本任务","Call activity": "调用活动","Sub-process (collapsed)": "子流程（折叠的）","Sub-process (expanded)": "子流程（展开的）","Start event": "开始事件",StartEvent: "开始事件","Intermediate throw event": "中间事件","End event": "结束事件",endEvent: "结束事件","Create gateway": "创建网关","Message start event": "消息开始事件","Timer start event": "定时开始事件","Conditional start event": "条件开始事件","Signal start event": "信号开始事件","Error start event": "错误开始事件","Escalation start event": "升级开始事件","Compensation start event": "补偿开始事件","Message Start event (non-interrupting)": "消息开始事件（非中断）","Timer Start event (non-interrupting)": "定时开始事件（非中断）","Conditional start event (non-interrupting)": "条件开始事件（非中断）","Signal Start event (non-interrupting)": "信号开始事件（非中断）","Escalation start event (non-interrupting)": "升级开始事件（非中断）","Message intermediate catch event": "消息中间捕获事件","Message intermediate throw event": "消息中间抛出事件","Timer intermediate catch event": "定时中间捕获事件","Escalation untermediate throw event": "升级中间抛出事件","Conditional intermediate catch event": "条件中间捕获事件","Link intermediate catch event": "链接中间捕获事件","Link intermediate throw event": "链接中间抛出事件","Compensation intermediate throw event": "补偿中间抛出事件","Signal intermediate catch event": "信号中间捕获事件","Signal intermediate throw event": "信号中间抛出事件","Message end event": "消息结束事件","Escalation end event": "定时结束事件","Error end event": "错误结束事件","Cancel end event": "取消结束事件","Compensation end event": "补偿结束事件","Signal end event": "信号结束事件","Terminate end event": "终止结束事件","Message boundary event": "消息边界事件","Message boundary event (non-interrupting)": "消息边界事件（非中断）","Timer boundary event": "定时边界事件","Timer boundary event (non-interrupting)": "定时边界事件（非中断）","Escalation boundary event": "升级边界事件","Escalation boundary event (non-interrupting)": "升级边界事件（非中断）","Conditional boundary event": "条件边界事件","Conditional boundary event (non-interrupting)": "条件边界事件（非中断）","Error boundary event": "错误边界事件","Cancel boundary event": "取消边界事件","Signal boundary event": "信号边界事件","Signal boundary event (non-interrupting)": "信号边界事件（非中断）","Compensation boundary event": "补偿边界事件","Exclusive gateway": "互斥网关","Parallel gateway": "并行网关","Inclusive gateway": "相容网关","Complex gateway": "复杂网关","Event based gateway": "事件网关",Transaction: "转运","Sub process": "子流程","Event Sub process": "事件子流程","Collapsed Pool": "折叠池","Expanded Pool": "展开池","no parent for {element} in {parent}": "在{parent}里，{element}没有父类","no shape type specified": "没有指定的形状类型","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规范","no diagram to display": "没有可展示的流程图","no process or collaboration to display": "没有可展示的流程/协作","element {element} referenced by {referenced}#{property} not yet drawn": "由{referenced}#{property}引用的{element}元素仍未绘制","already rendered {element}": "{element} 已被渲染","failed to import {element}": "导入{element}失败",Id: "编号",Name: "名称",General: "常规",Details: "详情","Message Name": "消息名称",Message: "消息",Initiator: "创建者","Asynchronous Continuations": "持续异步","Asynchronous Before": "异步前","Asynchronous After": "异步后","Job Configuration": "工作配置",Exclusive: "排除","Job Priority": "工作优先级","Retry Time Cycle": "重试时间周期",Documentation: "文档","Element Documentation": "元素文档","History Configuration": "历史配置","History Time To Live": "历史的生存时间",Forms: "表单","Form Key": "表单key","Form Fields": "表单字段","Business Key": "业务key","Form Field": "表单字段",ID: "编号",Type: "类型",Label: "名称","Default Value": "默认值",Validation: "校验","Add Constraint": "添加约束",Config: "配置",Properties: "属性","Add Property": "添加属性",Value: "值",Listeners: "监听器","Execution Listener": "执行监听","Event Type": "事件类型","Listener Type": "监听器类型","Java Class": "Java类",Expression: "表达式","Must provide a value": "必须提供一个值","Delegate Expression": "代理表达式",Script: "脚本","Script Format": "脚本格式","Script Type": "脚本类型","Inline Script": "内联脚本","External Script": "外部脚本",Resource: "资源","Field Injection": "字段注入",Extensions: "扩展","Input/Output": "输入/输出","Input Parameters": "输入参数","Output Parameters": "输出参数",Parameters: "参数","Output Parameter": "输出参数","Timer Definition Type": "定时器定义类型","Timer Definition": "定时器定义",Date: "日期",Duration: "持续",Cycle: "循环",Signal: "信号","Signal Name": "信号名称",Escalation: "升级",Error: "错误","Link Name": "链接名称",Condition: "条件名称","Variable Name": "变量名称","Variable event": "变量事件","Specify more than one variable change event as a comma separated list.": "多个变量事件以逗号隔开","Wait for Completion": "等待完成","Activity Ref": "活动参考","Version Tag": "版本标签",Executable: "可执行文件","External Task Configuration": "扩展任务配置","Task Priority": "任务优先级",External: "外部",Connector: "连接器","Must configure Connector": "必须配置连接器","Connector Id": "连接器编号",Implementation: "实现方式","Field injections": "字段注入",Fields: "字段","Result variable": "结果变量",Topic: "主题","Configure connector": "配置连接器","Input parameter": "输入参数",Assignee: "代理人","Candidate Users": "候选用户","Candidate Groups": "候选组","Due Date": "到期时间","Follow Up Date": "跟踪日期","Specify more than one group as a comma separated list.": "多个用户使用逗号隔开",Priority: "优先级",// eslint-disable-next-line no-template-curly-in-string"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",// eslint-disable-next-line no-template-curly-in-string"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",Variables: "变量","Candidate Starter Users": "选择启动候选人","Candidate Starter Configuration": "候选人启动器配置","Candidate Starter Groups": "候选人启动组","This maps to the process definition key.": "编号将映射到流程主键.",save: "保存",Tools: "工具","flow gateway": "流程网关","Process control": "流程节点","Create start event": "开始节点","Create end event": "结束节点","Create exclusive gateway": "互斥网关","Create parallel gateway": "并行网关","Create task": "任务节点","Create user task": "用户任务节点","Condition Type": "条件类型","Create group": "创建组","Create data object reference": "创建数据对象引用","Create data store reference": "创建数据存储引用","Append task": "添加任务","Append end event": "追加结束事件节点","Append gateway": "追加网关节点","Append user task": "追加用户任务节点","Append intermediate/boundary event": "追加中间或边界事件","Append text annotation": "追加文本批注" // 此句要有效，必须在CustomContexPadProvide给此节点增加一个translate('Append TextAnnotation')};

简单的例子完成啦