diff --git a/package.json b/package.json
index a93f63a..acd032f 100644
--- a/package.json
+++ b/package.json
@@ -19,72 +19,85 @@
     "url": "https://gitee.com/JavaLionLi/plus-ui.git"
   },
   "dependencies": {
+    "@bpmn-io/properties-panel": "^3.16.0",
     "@element-plus/icons-vue": "2.3.1",
+    "@highlightjs/vue-plugin": "2.1.0",
     "@vueup/vue-quill": "1.2.0",
-    "@vueuse/core": "10.7.0",
+    "@vueuse/core": "10.7.2",
+    "@lezer/common": "1.2.1",
     "animate.css": "4.1.1",
     "await-to-js": "3.0.0",
-    "axios": "1.6.0",
+    "axios": "1.6.5",
+    "bpmn-js": "13.2.2",
+    "bpmn-js-properties-panel": "2.1.0",
+    "camunda-bpmn-moddle": "7.0.1",
+    "camunda-bpmn-js-behaviors": "1.2.2",
+    "zeebe-bpmn-moddle": "1.0.0",
+    "diagram-js": "12.3.0",
+    "moddle": "6.2.3",
+    "didi": "9.0.2",
+    "preact": "10.19.3",
     "crypto-js": "4.2.0",
     "echarts": "5.4.3",
     "element-plus": "2.4.4",
     "file-saver": "2.0.5",
     "fuse.js": "7.0.0",
+    "highlight.js": "11.9.0",
     "js-cookie": "3.0.5",
     "jsencrypt": "3.3.2",
     "nprogress": "0.2.0",
     "path-browserify": "1.0.1",
-    "path-to-regexp": "6.2.0",
+    "path-to-regexp": "6.2.1",
     "pinia": "2.1.7",
-    "screenfull": "6.0.0",
-    "vform3-builds": "3.0.8",
-    "vue": "3.4.5",
+    "screenfull": "6.0.2",
+    "vform3-builds": "3.0.10",
+    "vue": "3.4.13",
     "vue-cropper": "1.1.1",
-    "vue-i18n": "9.8.0",
+    "vue-i18n": "9.9.0",
     "vue-router": "4.2.5",
     "vue-types": "5.1.1"
   },
   "devDependencies": {
-    "@iconify/json": "2.2.167",
+    "@iconify/json": "2.2.168",
     "@intlify/unplugin-vue-i18n": "2.0.0",
-    "@types/crypto-js": "4.2.0",
-    "@types/file-saver": "2.0.5",
-    "@types/js-cookie": "3.0.5",
+    "@types/crypto-js": "4.2.1",
+    "@types/file-saver": "2.0.7",
+    "@types/js-cookie": "3.0.6",
     "@types/node": "18.14.2",
-    "@types/nprogress": "0.2.0",
-    "@types/path-browserify": "1.0.0",
-    "@typescript-eslint/eslint-plugin": "6.17.0",
-    "@typescript-eslint/parser": "6.17.0",
+    "@types/nprogress": "0.2.3",
+    "@types/path-browserify": "1.0.2",
+    "@typescript-eslint/eslint-plugin": "6.18.1",
+    "@typescript-eslint/parser": "6.18.1",
     "@unocss/preset-attributify": "0.58.3",
     "@unocss/preset-icons": "0.58.3",
     "@unocss/preset-uno": "0.58.3",
-    "@vue/compiler-sfc": "3.4.5",
-    "@vitejs/plugin-vue": "5.0.2",
-    "autoprefixer": "10.4.14",
-    "eslint": "8.55.0",
+    "@vue/compiler-sfc": "3.4.13",
+    "@vitejs/plugin-vue": "5.0.3",
+    "autoprefixer": "10.4.16",
+    "eslint": "8.56.0",
     "eslint-config-prettier": "9.1.0",
-    "eslint-define-config": "2.0.0",
-    "eslint-plugin-prettier": "5.0.1",
+    "eslint-define-config": "2.1.0",
+    "eslint-plugin-prettier": "5.1.3",
     "eslint-plugin-promise": "6.1.1",
     "eslint-plugin-node": "11.1.0",
-    "eslint-plugin-import": "2.29.0",
-    "eslint-plugin-vue": "9.19.2",
+    "eslint-plugin-import": "2.29.1",
+    "eslint-plugin-vue": "9.20.1",
     "fast-glob": "3.3.2",
     "husky": "8.0.3",
     "postcss": "8.4.33",
-    "prettier": "3.1.1",
-    "sass": "1.69.5",
+    "prettier": "3.2.2",
+    "sass": "1.69.7",
     "typescript": "5.3.3",
-    "unocss": "0.58.0",
-    "unplugin-auto-import": "0.17.2",
-    "unplugin-icons": "0.18.1",
+    "unocss": "0.58.3",
+    "unplugin-auto-import": "0.17.3",
+    "unplugin-icons": "0.18.2",
     "unplugin-vue-components": "0.26.0",
     "unplugin-vue-setup-extend-plus": "1.0.0",
     "vite-plugin-compression": "0.5.1",
     "vite-plugin-svg-icons": "2.0.1",
-    "vitest": "1.1.3",
-    "vue-eslint-parser": "9.3.2",
+    "vitest": "1.2.0",
+    "vue-eslint-parser": "9.4.0",
     "vue-tsc": "1.8.27",
-    "vite": "5.0.10"
+    "vite": "5.0.11"
   }
 }
diff --git a/src/components/BpmnDesign/PropertyPanel.vue b/src/components/BpmnDesign/PropertyPanel.vue
new file mode 100644
index 0000000..2c3d45a
--- /dev/null
+++ b/src/components/BpmnDesign/PropertyPanel.vue
@@ -0,0 +1,95 @@
+<template>
+  <div ref="propertyPanel" class="property-panel">
+    <div v-if="nodeName" class="node-name">{{ nodeName }}</div>
+    <component :is="component" v-if="element" :element="element" :modeler="modeler" :users="users" :groups="groups" :categorys="categorys" />
+  </div>
+</template>
+<script setup lang="ts" name="PropertyPanel">
+import { NodeName } from '@/components/BpmnDesign/assets/lang/zh';
+
+interface propsType {
+  users: Array<any>;
+  groups: Array<any>;
+  categorys: Array<any>;
+  modeler: any;
+}
+const props = withDefaults(defineProps<propsType>(), {});
+
+const element = ref<any>();
+
+const form = reactive({
+  id: '',
+  name: '',
+  color: null
+});
+
+const roles = ref([
+  { value: 'manager', label: '经理' },
+  { value: 'personnel', label: '人事' },
+  { value: 'charge', label: '主管' }
+]);
+
+const startEndType = ['bpmn:IntermediateThrowEvent', 'bpmn:StartEvent', 'bpmn:EndEvent'];
+const taskType = [
+  'bpmn:UserTask',
+  'bpmn:Task',
+  'bpmn:SendTask',
+  'bpmn:ReceiveTask',
+  'bpmn:ManualTask',
+  'bpmn:BusinessRuleTask',
+  'bpmn:ServiceTask',
+  'bpmn:ScriptTask'
+];
+const sequenceType = ['bpmn:SequenceFlow'];
+const gatewayType = ['bpmn:InclusiveGateway', 'bpmn:ExclusiveGateway', 'bpmn:ParallelGateway', 'bpmn:EventBasedGateway'];
+const processType = ['bpmn:Process'];
+
+const component = computed(() => {
+  if (!element.value) return null;
+  const type = element.value.type;
+  if (startEndType.includes(type)) return 'startEndPanel';
+  if (taskType.includes(type)) return 'taskPanel';
+  if (sequenceType.includes(type)) return 'sequenceFlowPanel';
+  if (gatewayType.includes(type)) return 'gatewayPanel';
+  if (processType.includes(type)) return 'processPanel';
+  return console.error('no ' + type + ' type panel');
+});
+
+const nodeName = computed(() => {
+  if (element.value) {
+    const bizObj = element.value.businessObject;
+    const type = bizObj?.eventDefinitions ? bizObj.eventDefinitions[0].$type : bizObj.$type;
+    return NodeName[type] || type;
+  }
+});
+
+const handleModeler = () => {
+  props.modeler.on('root.added', (e) => {
+    if (e.element.type === 'bpmn:Process') {
+      element.value = null;
+      nextTick(() => {
+        element.value = e.element;
+      });
+    }
+  });
+  props.modeler.on('element.click', (e) => {
+    const { element } = e;
+    if (element.type === 'bpmn:Process') {
+      element.value = element;
+    }
+  });
+  props.modeler.on('selection.changed', (e) => {
+    element.value = null;
+    const newElement = e.newSelection[0];
+    if (newElement) {
+      nextTick(() => {
+        element.value = e.element;
+      });
+    }
+  });
+};
+
+onMounted(() => {
+  handleModeler();
+});
+</script>
diff --git a/src/components/BpmnDesign/assets/defaultXML.ts b/src/components/BpmnDesign/assets/defaultXML.ts
new file mode 100644
index 0000000..6fd4eed
--- /dev/null
+++ b/src/components/BpmnDesign/assets/defaultXML.ts
@@ -0,0 +1,36 @@
+function generateRandomValue() {
+  // 生成一个随机数
+  const randomValue = Math.random().toString(36).slice(2, 12);
+  return `Process_${randomValue}`;
+}
+
+const cartage: string = 'default';
+export default `<?xml version="1.0" encoding="UTF-8"?>
+<bpmn:definitions xmlns:bpmn="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" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xmlns:modeler="http://camunda.org/schema/modeler/1.0" id="Definitions_0hf6suk" targetNamespace="${cartage}" exporter="Camunda Modeler" exporterVersion="5.11.0" modeler:executionPlatform="Camunda Platform" modeler:executionPlatformVersion="7.19.0">
+  <bpmn:process id="${generateRandomValue()}" isExecutable="true">
+    <bpmn:startEvent id="start_event" name="开始事件">
+      <bpmn:outgoing>Flow_1uqf1ep</bpmn:outgoing>
+    </bpmn:startEvent>
+    <bpmn:userTask id="Activity_0w38duu">
+      <bpmn:incoming>Flow_1uqf1ep</bpmn:incoming>
+    </bpmn:userTask>
+    <bpmn:sequenceFlow id="Flow_1uqf1ep" sourceRef="start_event" targetRef="Activity_0w38duu" />
+  </bpmn:process>
+  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
+    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="${generateRandomValue()}">
+      <bpmndi:BPMNShape id="Event_02vig7e_di" bpmnElement="start_event">
+        <dc:Bounds x="242" y="172" width="36" height="36" />
+        <bpmndi:BPMNLabel>
+          <dc:Bounds x="240" y="215" width="44" height="14" />
+        </bpmndi:BPMNLabel>
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="Activity_0w38duu_di" bpmnElement="Activity_0w38duu">
+        <dc:Bounds x="330" y="150" width="100" height="80" />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNEdge id="Flow_1uqf1ep_di" bpmnElement="Flow_1uqf1ep">
+        <di:waypoint x="278" y="190" />
+        <di:waypoint x="330" y="190" />
+      </bpmndi:BPMNEdge>
+    </bpmndi:BPMNPlane>
+  </bpmndi:BPMNDiagram>
+</bpmn:definitions>`;
diff --git a/src/components/BpmnDesign/assets/lang/zh.ts b/src/components/BpmnDesign/assets/lang/zh.ts
new file mode 100644
index 0000000..469b96e
--- /dev/null
+++ b/src/components/BpmnDesign/assets/lang/zh.ts
@@ -0,0 +1,298 @@
+export const NodeName = {
+  'bpmn:Process': '流程',
+  'bpmn:StartEvent': '开始事件',
+  'bpmn:IntermediateThrowEvent': '中间事件',
+  'bpmn:Task': '任务',
+  'bpmn:SendTask': '发送任务',
+  'bpmn:ReceiveTask': '接收任务',
+  'bpmn:UserTask': '用户任务',
+  'bpmn:ManualTask': '手工任务',
+  'bpmn:BusinessRuleTask': '业务规则任务',
+  'bpmn:ServiceTask': '服务任务',
+  'bpmn:ScriptTask': '脚本任务',
+  'bpmn:EndEvent': '结束事件',
+  'bpmn:SequenceFlow': '流程线',
+  'bpmn:ExclusiveGateway': '互斥网关',
+  'bpmn:ParallelGateway': '并行网关',
+  'bpmn:InclusiveGateway': '相容网关',
+  'bpmn:ComplexGateway': '复杂网关',
+  'bpmn:EventBasedGateway': '事件网关'
+};
+
+export default {
+  'Activate the create/remove space tool': '启动创建/删除空间工具',
+  'Activate the global connect tool': '启动全局连接工具',
+  'Activate the hand tool': '启动手动工具',
+  'Activate the lasso tool': '启动 Lasso 工具',
+  'Ad-hoc': 'Ad-hoc子流程',
+  'Add Lane above': '添加到通道之上',
+  'Add Lane below': '添加到通道之下',
+  'Append compensation activity': '追加补偿活动',
+  'Append {type}': '追加 {type}',
+  'Business Rule Task': '规则任务',
+  'Call Activity': '引用流程',
+  'Cancel Boundary Event': '取消边界事件',
+  'Cancel End Event': '结束取消事件',
+  'Change type': '更改类型',
+  'Collapsed Pool': '折叠池',
+  'Compensation Boundary Event': '补偿边界事件',
+  'Compensation End Event': '结束补偿事件',
+  'Compensation Intermediate Throw Event': '中间补偿抛出事件',
+  'Compensation Start Event': '补偿启动事件',
+  'Complex Gateway': '复杂网关',
+  'Conditional Boundary Event (non-interrupting)': '条件边界事件 (非中断)',
+  'Conditional Boundary Event': '条件边界事件',
+  'Conditional Intermediate Catch Event': '中间条件捕获事件',
+  'Conditional Start Event (non-interrupting)': '条件启动事件 (非中断)',
+  'Conditional Start Event': '条件启动事件',
+  'Connect using Association': '文本关联',
+  'Connect using DataInputAssociation': '数据关联',
+  'Connect using Sequence/MessageFlow or Association': '消息关联',
+  'Create IntermediateThrowEvent/BoundaryEvent': '创建中间抛出/边界事件',
+  'Create Pool/Participant': '创建池/参与者',
+  'Create expanded SubProcess': '创建可折叠子流程',
+  'Create {type}': '创建 {type}',
+  'Divide into three Lanes': '分成三条通道',
+  'Divide into two Lanes': '分成两条通道',
+  'End Event': '结束事件',
+  'Error Boundary Event': '错误边界事件',
+  'Error End Event': '结束错误事件',
+  'Error Start Event': '错误启动事件',
+  'Escalation Boundary Event (non-interrupting)': '升级边界事件 (非中断)',
+  'Escalation Boundary Event': '升级边界事件',
+  'Escalation End Event': '结束升级事件',
+  'Escalation Intermediate Throw Event': '中间升级抛出事件',
+  'Escalation Start Event (non-interrupting)': '升级启动事件 (非中断)',
+  'Escalation Start Event': '升级启动事件',
+  'Event Sub Process': '事件子流程',
+  'Event based Gateway': '事件网关',
+  'Exclusive Gateway': '独占网关',
+  'Expanded Pool': '展开池',
+  'Inclusive Gateway': '包容网关',
+  'Intermediate Throw Event': '中间抛出事件',
+  'Link Intermediate Catch Event': '中间链接捕获事件',
+  'Link Intermediate Throw Event': '中间链接抛出事件',
+  'Loop': '循环',
+  'Manual Task': '手动任务',
+  'Message Boundary Event (non-interrupting)': '消息边界事件 (非中断)',
+  'Message Boundary Event': '消息边界事件',
+  'Message End Event': '结束消息事件',
+  'Message Intermediate Catch Event': '中间消息捕获事件',
+  'Message Intermediate Throw Event': '中间消息抛出事件',
+  'Message Start Event (non-interrupting)': '消息启动事件 (非中断)',
+  'Message Start Event': '消息启动事件',
+  'Parallel Gateway': '并行网关',
+  'Parallel Multi Instance': '并行多实例',
+  'Receive Task': '接受任务',
+  'Remove': '移除',
+  'Script Task': '脚本任务',
+  'Send Task': '发送任务',
+  'Sequential Multi Instance': '串行多实例',
+  'Service Task': '服务任务',
+  'Signal Boundary Event (non-interrupting)': '信号边界事件 (非中断)',
+  'Signal Boundary Event': '信号边界事件',
+  'Signal End Event': '结束信号事件',
+  'Signal Intermediate Catch Event': '中间信号捕获事件',
+  'Signal Intermediate Throw Event': '中间信号抛出事件',
+  'Signal Start Event (non-interrupting)': '信号启动事件 (非中断)',
+  'Signal Start Event': '信号启动事件',
+  'Start Event': '开始事件',
+  'Sub Process (collapsed)': '可折叠子流程',
+  'Sub Process (expanded)': '可展开子流程',
+  'Sub Process': '子流程',
+  'Task': '任务',
+  'Terminate End Event': '终止边界事件',
+  'Timer Boundary Event (non-interrupting)': '定时边界事件 (非中断)',
+  'Timer Boundary Event': '定时边界事件',
+  'Timer Intermediate Catch Event': '中间定时捕获事件',
+  'Timer Start Event (non-interrupting)': '定时启动事件 (非中断)',
+  'Timer Start Event': '定时启动事件',
+  'Transaction': '事务',
+  'User Task': '用户任务',
+  'already rendered {element}': '{element} 已呈现',
+  'diagram not part of bpmn:Definitions': '图表不是 bpmn:Definitions 的一部分',
+  'element required': '需要元素',
+  '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} 条通道',
+  'no diagram to display': '没有要显示的图表',
+  'no parent for {element} in {parent}': '在 {element} 中没有父元素 {parent}',
+  'no process or collaboration to display': '没有可显示的流程或协作',
+  'no shape type specified': '未指定形状类型',
+  'out of bounds release': '越界释放',
+  'DataObjectReference': '数据对象参考',
+  'DataStoreReference': '数据存储参考',
+  'StartEvent': '开始事件',
+  'EndEvent': '结束事件',
+  'Create Gateway': '创建网关',
+  'Create Intermediate/Boundary Event': '创建中间/边界事件',
+  // 属性面板的参数
+  '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': '监听器类型',
+  'Field injection': '字段注入',
+  'Must provide a value': '必须提供一个值',
+  'Script format': '脚本格式',
+  'Format': '格式',
+  'Script type': '脚本类型',
+  'Inline script': '内联脚本',
+  'External script': '外部脚本',
+  'Resource': '资源',
+  'Field snjection': '字段注入',
+  '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': '工具',
+  'FlowGateway': '流程网关',
+  'ProcessControl': '流程节点',
+  'Create StartEvent': '开始节点',
+  'Create EndEvent': '结束节点',
+  'Create ExclusiveGateway': '互斥网关',
+  'Create ParallelGateway': '并行网关',
+  'Create Task': '任务节点',
+  'Create UserTask': '用户任务节点',
+  'Condition Type': '条件类型',
+  // 左侧工具箱补充汉化项 热水2020.1.12
+  'Create Group': '创建组',
+  'Create DataObjectReference': '创建数据对象引用',
+  'Create DataStoreReference': '创建数据存储引用',
+  // 节点添加Pad 补充汉化 热水2020.1.12
+  'Append EndEvent': '追加结束事件节点',
+  'Append Gateway': '追加网关节点',
+  'Append UserTask': '追加用户任务节点',
+  'Append Intermediate/Boundary Event': '追加中间或边界事件',
+  'History cleanup': '历史数据清理',
+  'Time to live': '历史数据可保存时间',
+  'Tasklist': '任务列表',
+  'Start initiator': '开始节点',
+  'Process': '业务流程',
+  'Append Task': '追加任务',
+  'Create User Task': '创建用户任务',
+  'Default Flow': '默认流转路径',
+  'Conditional Flow': '条件流转路径',
+  'Sequence Flow': '普通流转路径',
+  'Specify more than one user as a comma separated list.': '指定多个用户作为逗号分隔的列表。',
+  'Tasklist Configuration': 'Tasklist配置',
+  'Startable': '启动',
+  'Execution listeners': '执行监听器',
+  'Candidate starter': '候选人起动器',
+  'Candidate starter users': '候选人',
+  'Candidate starter groups': '候选组',
+  'External task': '外部任务',
+  'Job execution': '任务执行',
+  'Extension properties': '扩展属性',
+  'Start': '开始',
+  'Outputs': '输出',
+  'Inputs': '输入',
+  'Local variable name': '变量名',
+  'Assignment type': '任务类型',
+  'Process variable name': '进程变量名',
+  'Delegate expression': '代理表达式',
+  'Script': '脚本',
+  'Expression': '表达式',
+  'Java class': 'Java类',
+  // 用户指派
+  'User assignment': '分配用户',
+  'Candidate groups': '候选组',
+  'Candidate users': '候选人',
+  'Due date': '到期时间',
+  'Follow up date': '跟进日期',
+  // 任务监听器
+  'Task listeners': '任务监听器',
+  'Multi-instance': '多用户',
+  'Loop cardinality': '循环基数',
+  'Completion condition': '完成条件',
+  'Collection': '用户集合',
+  'Element variable': '元素变量',
+  'Element documentation': '文档元素',
+  'Version tag': '版本标签',
+  'ID must be unique.': 'ID必须是唯一的。'
+};
diff --git a/src/components/BpmnDesign/assets/moddle/flowable.ts b/src/components/BpmnDesign/assets/moddle/flowable.ts
new file mode 100644
index 0000000..4a07163
--- /dev/null
+++ b/src/components/BpmnDesign/assets/moddle/flowable.ts
@@ -0,0 +1,1194 @@
+export default {
+  "name": "Flowable",
+  "uri": "http://flowable.org/bpmn",
+  "prefix": "flowable",
+  "xml": {
+    "tagAlias": "lowerCase"
+  },
+  "associations": [],
+  "types": [
+    {
+      "name": "InOutBinding",
+      "superClass": ["Element"],
+      "isAbstract": true,
+      "properties": [
+        {
+          "name": "source",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "sourceExpression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "target",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "businessKey",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "local",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        },
+        {
+          "name": "variables",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "In",
+      "superClass": ["InOutBinding"],
+      "meta": {
+        "allowedIn": ["bpmn:CallActivity"]
+      }
+    },
+    {
+      "name": "Out",
+      "superClass": ["InOutBinding"],
+      "meta": {
+        "allowedIn": ["bpmn:CallActivity"]
+      }
+    },
+    {
+      "name": "AsyncCapable",
+      "isAbstract": true,
+      "extends": ["bpmn:Activity", "bpmn:Gateway", "bpmn:Event"],
+      "properties": [
+        {
+          "name": "async",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        },
+        {
+          "name": "asyncBefore",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        },
+        {
+          "name": "asyncAfter",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        },
+        {
+          "name": "exclusive",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": true
+        }
+      ]
+    },
+    {
+      "name": "flowable:in",
+      "superClass": ["Element"],
+      "properties": [
+        {
+          "name": "source",
+          "type": "string",
+          "isAttr": true
+        },
+        {
+          "name": "target",
+          "type": "string",
+          "isAttr": true
+        }
+      ]
+    },
+    {
+      "name": "flowable:out",
+      "superClass": ["Element"],
+      "properties": [
+        {
+          "name": "source",
+          "type": "string",
+          "isAttr": true
+        },
+        {
+          "name": "target",
+          "type": "string",
+          "isAttr": true
+        }
+      ]
+    },
+    {
+      "name": "BoundaryEvent",
+      "superClass": ["CatchEvent"],
+      "properties": [
+        {
+          "name": "cancelActivity",
+          "default": true,
+          "isAttr": true,
+          "type": "Boolean"
+        },
+        {
+          "name": "attachedToRef",
+          "type": "Activity",
+          "isAttr": true,
+          "isReference": true
+        }
+      ]
+    },
+    {
+      "name": "JobPriorized",
+      "isAbstract": true,
+      "extends": ["bpmn:Process", "flowable:AsyncCapable"],
+      "properties": [
+        {
+          "name": "jobPriority",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "SignalEventDefinition",
+      "isAbstract": true,
+      "extends": ["bpmn:SignalEventDefinition"],
+      "properties": [
+        {
+          "name": "async",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        }
+      ]
+    },
+    {
+      "name": "ErrorEventDefinition",
+      "isAbstract": true,
+      "extends": ["bpmn:ErrorEventDefinition"],
+      "properties": [
+        {
+          "name": "errorCodeVariable",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "errorMessageVariable",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Error",
+      "isAbstract": true,
+      "extends": ["bpmn:Error"],
+      "properties": [
+        {
+          "name": "flowable:errorMessage",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "PotentialStarter",
+      "superClass": ["Element"],
+      "properties": [
+        {
+          "name": "resourceAssignmentExpression",
+          "type": "bpmn:ResourceAssignmentExpression"
+        }
+      ]
+    },
+    {
+      "name": "UserTask",
+      "isAbstract": true,
+      "extends": ["bpmn:UserTask"],
+      "properties": [
+        {
+          "name": "timerEventDefinition",
+          "type": "Expression"
+        },
+        {
+          "name": "multiInstanceLoopCharacteristics",
+          "type": "MultiInstanceLoopCharacteristics"
+        }
+      ]
+    },
+    {
+      "name": "StartEvent",
+      "isAbstract": true,
+      "extends": ["bpmn:StartEvent"],
+      "properties": [
+        {
+          "name": "timerEventDefinition",
+          "type": "Expression"
+        }
+      ]
+    },
+    {
+      "name": "FormSupported",
+      "isAbstract": true,
+      "extends": ["bpmn:StartEvent", "bpmn:UserTask"],
+      "properties": [
+        {
+          "name": "formHandlerClass",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "formKey",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "TemplateSupported",
+      "isAbstract": true,
+      "extends": ["bpmn:Process", "bpmn:FlowElement"],
+      "properties": [
+        {
+          "name": "modelerTemplate",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Initiator",
+      "isAbstract": true,
+      "extends": ["bpmn:StartEvent"],
+      "properties": [
+        {
+          "name": "initiator",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "ScriptTask",
+      "isAbstract": true,
+      "extends": ["bpmn:ScriptTask"],
+      "properties": [
+        {
+          "name": "resultVariable",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "resource",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Process",
+      "isAbstract": true,
+      "extends": ["bpmn:Process"],
+      "properties": [
+        {
+          "name": "candidateStarterGroups",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "candidateStarterUsers",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "versionTag",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "historyTimeToLive",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "isStartableInTasklist",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": true
+        }
+      ]
+    },
+    {
+      "name": "EscalationEventDefinition",
+      "isAbstract": true,
+      "extends": ["bpmn:EscalationEventDefinition"],
+      "properties": [
+        {
+          "name": "escalationCodeVariable",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "FormalExpression",
+      "isAbstract": true,
+      "extends": ["bpmn:FormalExpression"],
+      "properties": [
+        {
+          "name": "resource",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Assignable",
+      "extends": ["bpmn:UserTask"],
+      "properties": [
+        {
+          "name": "candidateGroups",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "dueDate",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "followUpDate",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "priority",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "CallActivity",
+      "extends": ["bpmn:CallActivity"],
+      "properties": [
+        {
+          "name": "calledElementBinding",
+          "isAttr": true,
+          "type": "String",
+          "default": "latest"
+        },
+        {
+          "name": "calledElementVersion",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "calledElementVersionTag",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "calledElementTenantId",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "caseRef",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "caseBinding",
+          "isAttr": true,
+          "type": "String",
+          "default": "latest"
+        },
+        {
+          "name": "caseVersion",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "caseTenantId",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "variableMappingClass",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "variableMappingDelegateExpression",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "ServiceTaskLike",
+      "extends": [
+        "bpmn:ServiceTask",
+        "bpmn:BusinessRuleTask",
+        "bpmn:SendTask",
+        "bpmn:MessageEventDefinition"
+      ],
+      "properties": [
+        {
+          "name": "expression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "class",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "delegateExpression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "resultVariable",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "ExclusiveGateway",
+      "isAbstract": true,
+      "extends": ["bpmn:ExclusiveGateway"],
+      "properties": [
+        {
+          "name": "serviceClass",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "DmnCapable",
+      "extends": ["bpmn:BusinessRuleTask"],
+      "properties": [
+        {
+          "name": "decisionRef",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "decisionRefBinding",
+          "isAttr": true,
+          "type": "String",
+          "default": "latest"
+        },
+        {
+          "name": "decisionRefVersion",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "mapDecisionResult",
+          "isAttr": true,
+          "type": "String",
+          "default": "resultList"
+        },
+        {
+          "name": "decisionRefTenantId",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "ExternalCapable",
+      "extends": ["flowable:ServiceTaskLike"],
+      "properties": [
+        {
+          "name": "type",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "topic",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "TaskPriorized",
+      "extends": ["bpmn:Process", "flowable:ExternalCapable"],
+      "properties": [
+        {
+          "name": "taskPriority",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Properties",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["*"]
+      },
+      "properties": [
+        {
+          "name": "values",
+          "type": "Property",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "Property",
+      "superClass": ["Element"],
+      "properties": [
+        {
+          "name": "id",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "name",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "value",
+          "type": "String",
+          "isAttr": true
+        }
+      ]
+    },
+    {
+      "name": "Connector",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["flowable:ServiceTaskLike"]
+      },
+      "properties": [
+        {
+          "name": "inputOutput",
+          "type": "InputOutput"
+        },
+        {
+          "name": "connectorId",
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "InputOutput",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:FlowNode", "flowable:Connector"]
+      },
+      "properties": [
+        {
+          "name": "inputOutput",
+          "type": "InputOutput"
+        },
+        {
+          "name": "connectorId",
+          "type": "String"
+        },
+        {
+          "name": "inputParameters",
+          "isMany": true,
+          "type": "InputParameter"
+        },
+        {
+          "name": "outputParameters",
+          "isMany": true,
+          "type": "OutputParameter"
+        }
+      ]
+    },
+    {
+      "name": "InputOutputParameter",
+      "properties": [
+        {
+          "name": "name",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "value",
+          "isBody": true,
+          "type": "String"
+        },
+        {
+          "name": "definition",
+          "type": "InputOutputParameterDefinition"
+        }
+      ]
+    },
+    {
+      "name": "InputOutputParameterDefinition",
+      "isAbstract": true
+    },
+    {
+      "name": "List",
+      "superClass": ["InputOutputParameterDefinition"],
+      "properties": [
+        {
+          "name": "items",
+          "isMany": true,
+          "type": "InputOutputParameterDefinition"
+        }
+      ]
+    },
+    {
+      "name": "Map",
+      "superClass": ["InputOutputParameterDefinition"],
+      "properties": [
+        {
+          "name": "entries",
+          "isMany": true,
+          "type": "Entry"
+        }
+      ]
+    },
+    {
+      "name": "Entry",
+      "properties": [
+        {
+          "name": "key",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "value",
+          "isBody": true,
+          "type": "String"
+        },
+        {
+          "name": "definition",
+          "type": "InputOutputParameterDefinition"
+        }
+      ]
+    },
+    {
+      "name": "Value",
+      "superClass": ["InputOutputParameterDefinition"],
+      "properties": [
+        {
+          "name": "id",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "name",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "value",
+          "isBody": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Script",
+      "superClass": ["InputOutputParameterDefinition"],
+      "properties": [
+        {
+          "name": "scriptFormat",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "resource",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "value",
+          "isBody": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Field",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": [
+          "flowable:ServiceTaskLike",
+          "flowable:ExecutionListener",
+          "flowable:TaskListener"
+        ]
+      },
+      "properties": [
+        {
+          "name": "name",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "expression",
+          "isAttr": true,
+          "type": "expression"
+        },
+        {
+          "name": "string",
+          "type": "string"
+        },
+        {
+          "name": "stringValue",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "string",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": [
+          "flowable:Field"
+        ]
+      },
+      "properties": [
+        {
+          "name": "body",
+          "isBody": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "expression",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": [
+          "flowable:Field"
+        ]
+      },
+      "properties": [
+        {
+          "name": "body",
+          "isBody": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "InputParameter",
+      "superClass": ["InputOutputParameter"]
+    },
+    {
+      "name": "OutputParameter",
+      "superClass": ["InputOutputParameter"]
+    },
+    {
+      "name": "Collectable",
+      "isAbstract": true,
+      "extends": ["bpmn:MultiInstanceLoopCharacteristics"],
+      "superClass": ["flowable:AsyncCapable"],
+      "properties": [
+        {
+          "name": "collection",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "elementVariable",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "SequenceFlow",
+      "superClass": ["FlowElement"],
+      "properties": [
+        {
+          "name": "isImmediate",
+          "isAttr": true,
+          "type": "Boolean"
+        },
+        {
+          "name": "conditionExpression",
+          "type": "Expression"
+        },
+        {
+          "name": "sourceRef",
+          "type": "FlowNode",
+          "isAttr": true,
+          "isReference": true
+        },
+        {
+          "name": "targetRef",
+          "type": "FlowNode",
+          "isAttr": true,
+          "isReference": true
+        }
+      ]
+    },
+    {
+      "name": "MultiInstanceLoopCharacteristics",
+      "superClass": ["LoopCharacteristics"],
+      "properties": [
+        {
+          "name": "isSequential",
+          "default": false,
+          "isAttr": true,
+          "type": "Boolean"
+        },
+        {
+          "name": "behavior",
+          "type": "MultiInstanceBehavior",
+          "default": "All",
+          "isAttr": true
+        },
+        {
+          "name": "loopCardinality",
+          "type": "Expression",
+          "xml": {
+            "serialize": "xsi:type"
+          }
+        },
+        {
+          "name": "loopDataInputRef",
+          "type": "ItemAwareElement",
+          "isReference": true
+        },
+        {
+          "name": "loopDataOutputRef",
+          "type": "ItemAwareElement",
+          "isReference": true
+        },
+        {
+          "name": "inputDataItem",
+          "type": "DataInput",
+          "xml": {
+            "serialize": "property"
+          }
+        },
+        {
+          "name": "outputDataItem",
+          "type": "DataOutput",
+          "xml": {
+            "serialize": "property"
+          }
+        },
+        {
+          "name": "complexBehaviorDefinition",
+          "type": "ComplexBehaviorDefinition",
+          "isMany": true
+        },
+        {
+          "name": "completionCondition",
+          "type": "Expression",
+          "xml": {
+            "serialize": "xsi:type"
+          }
+        },
+        {
+          "name": "oneBehaviorEventRef",
+          "type": "EventDefinition",
+          "isAttr": true,
+          "isReference": true
+        },
+        {
+          "name": "noneBehaviorEventRef",
+          "type": "EventDefinition",
+          "isAttr": true,
+          "isReference": true
+        }
+      ]
+    },
+    {
+      "name": "FailedJobRetryTimeCycle",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["flowable:AsyncCapable", "bpmn:MultiInstanceLoopCharacteristics"]
+      },
+      "properties": [
+        {
+          "name": "body",
+          "isBody": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "ExecutionListener",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": [
+          "bpmn:Task",
+          "bpmn:ServiceTask",
+          "bpmn:UserTask",
+          "bpmn:BusinessRuleTask",
+          "bpmn:ScriptTask",
+          "bpmn:ReceiveTask",
+          "bpmn:ManualTask",
+          "bpmn:ExclusiveGateway",
+          "bpmn:SequenceFlow",
+          "bpmn:ParallelGateway",
+          "bpmn:InclusiveGateway",
+          "bpmn:EventBasedGateway",
+          "bpmn:StartEvent",
+          "bpmn:IntermediateCatchEvent",
+          "bpmn:IntermediateThrowEvent",
+          "bpmn:EndEvent",
+          "bpmn:BoundaryEvent",
+          "bpmn:CallActivity",
+          "bpmn:SubProcess",
+          "bpmn:Process"
+        ]
+      },
+      "properties": [
+        {
+          "name": "expression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "class",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "delegateExpression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "event",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "script",
+          "type": "Script"
+        },
+        {
+          "name": "fields",
+          "type": "Field",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "TaskListener",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:UserTask"]
+      },
+      "properties": [
+        {
+          "name": "expression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "class",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "delegateExpression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "event",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "script",
+          "type": "Script"
+        },
+        {
+          "name": "fields",
+          "type": "Field",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "FormProperty",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:StartEvent", "bpmn:UserTask"]
+      },
+      "properties": [
+        {
+          "name": "id",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "name",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "type",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "required",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "readable",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "writable",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "variable",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "expression",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "datePattern",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "default",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "values",
+          "type": "Value",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "FormData",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:StartEvent", "bpmn:UserTask"]
+      },
+      "properties": [
+        {
+          "name": "fields",
+          "type": "FormField",
+          "isMany": true
+        },
+        {
+          "name": "businessKey",
+          "type": "String",
+          "isAttr": true
+        }
+      ]
+    },
+    {
+      "name": "FormField",
+      "superClass": ["Element"],
+      "properties": [
+        {
+          "name": "id",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "label",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "type",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "datePattern",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "defaultValue",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "properties",
+          "type": "Properties"
+        },
+        {
+          "name": "validation",
+          "type": "Validation"
+        },
+        {
+          "name": "values",
+          "type": "Value",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "Validation",
+      "superClass": ["Element"],
+      "properties": [
+        {
+          "name": "constraints",
+          "type": "Constraint",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "Constraint",
+      "superClass": ["Element"],
+      "properties": [
+        {
+          "name": "name",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "config",
+          "type": "String",
+          "isAttr": true
+        }
+      ]
+    },
+    {
+      "name": "ConditionalEventDefinition",
+      "isAbstract": true,
+      "extends": ["bpmn:ConditionalEventDefinition"],
+      "properties": [
+        {
+          "name": "variableName",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "variableEvent",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    }
+  ],
+  "emumerations": []
+}
diff --git a/src/components/BpmnDesign/assets/module/ContextPad/ehContextPadProvider.ts b/src/components/BpmnDesign/assets/module/ContextPad/ehContextPadProvider.ts
new file mode 100644
index 0000000..528ba0e
--- /dev/null
+++ b/src/components/BpmnDesign/assets/module/ContextPad/ehContextPadProvider.ts
@@ -0,0 +1,137 @@
+import ContextPadProvider from 'bpmn-js/lib/features/context-pad/ContextPadProvider';
+import { Injector } from 'didi';
+import EventBus from 'diagram-js/lib/core/EventBus';
+import ContextPad from 'diagram-js/lib/features/context-pad/ContextPad';
+import Modeling from 'bpmn-js/lib/features/modeling/Modeling.js';
+import ElementFactory from 'bpmn-js/lib/features/modeling/ElementFactory';
+import Connect from 'diagram-js/lib/features/connect/Connect';
+import Create from 'diagram-js/lib/features/create/Create';
+import PopupMenu from 'diagram-js/lib/features/popup-menu/PopupMenu';
+import Canvas from 'diagram-js/lib/core/Canvas';
+import Rules from 'diagram-js/lib/features/rules/Rules';
+import { Element, Shape } from 'diagram-js/lib/model/Types';
+import BpmnFactory from 'bpmn-js/lib/features/modeling/BpmnFactory';
+import modeler from '@/store/modules/modeler';
+
+// @Description: 增强元素连线事件
+
+class EhContextPadProvider extends ContextPadProvider {
+  private _contextPad: ContextPad;
+  private _modeling: Modeling;
+  private _elementFactory: ElementFactory;
+  private _autoPlace: any;
+  private _connect: Connect;
+  private _create: Create;
+  private _popupMenu: PopupMenu;
+  private _canvas: Canvas;
+  private _rules: Rules;
+
+  constructor(
+    config: any,
+    injector: Injector,
+    eventBus: EventBus,
+    contextPad: ContextPad,
+    modeling: Modeling,
+    elementFactory: ElementFactory,
+    connect: Connect,
+    create: Create,
+    popupMenu: PopupMenu,
+    canvas: Canvas,
+    rules: Rules,
+    translate
+  ) {
+    super(config, injector, eventBus, contextPad, modeling, elementFactory, connect, create, popupMenu, canvas, rules, translate);
+
+    this._contextPad = contextPad;
+    this._modeling = modeling;
+    this._elementFactory = elementFactory;
+    this._connect = connect;
+    this._create = create;
+    this._popupMenu = popupMenu;
+    this._canvas = canvas;
+    this._rules = rules;
+
+    this._autoPlace = injector.get('autoPlace', false);
+  }
+
+  getContextPadEntries(element: Element) {
+    const actions: Record<string, any> = {};
+
+    const appendUserTask = (event: Event, element: Shape) => {
+      const shape = this._elementFactory.createShape({ type: 'bpmn:UserTask' });
+      this._create.start(event, shape, {
+        source: element
+      });
+    };
+
+    const appendMultiInstanceUserTask = (event: Event, element: Shape) => {
+      const store = modeler();
+      const bpmnFactory = store.getModeler().get('bpmnFactory') as BpmnFactory;
+      const businessObject = bpmnFactory.create('bpmn:UserTask', {
+        // name: '多实例用户任务',
+        isForCompensation: false
+      });
+      businessObject.loopCharacteristics = bpmnFactory.create('bpmn:MultiInstanceLoopCharacteristics');
+      // 创建 Shape
+      const shape = this._elementFactory.createShape({
+        type: 'bpmn:UserTask',
+        businessObject: businessObject
+      });
+      this._create.start(event, shape, { source: element });
+    };
+
+    const appendTask = this._autoPlace
+      ? (event, element) => {
+          const bpmnFactory: BpmnFactory | undefined = modeler().getModeler().get('bpmnFactory');
+          const businessObject = bpmnFactory.create('bpmn:UserTask', {
+            // name: '多实例用户任务',// 右键创建显示
+            isForCompensation: false
+          });
+
+          // 创建多实例属性并分配给用户任务的 loopCharacteristics
+          businessObject.loopCharacteristics = bpmnFactory.create('bpmn:MultiInstanceLoopCharacteristics');
+
+          // 创建 Shape
+          const shape = this._elementFactory.createShape({
+            type: 'bpmn:UserTask',
+            businessObject: businessObject
+          });
+
+          this._autoPlace.append(element, shape);
+        }
+      : appendMultiInstanceUserTask;
+
+    const append = this._autoPlace
+      ? (event: Event, element: Shape) => {
+          const shape = this._elementFactory.createShape({ type: 'bpmn:UserTask' });
+          this._autoPlace.append(element, shape);
+        }
+      : appendUserTask;
+
+    // // 添加创建用户任务按钮
+    actions['append.append-user-task'] = {
+      group: 'model',
+      className: 'bpmn-icon-user-task',
+      title: '用户任务',
+      action: {
+        dragstart: appendUserTask,
+        click: append
+      }
+    };
+
+    // 添加创建多实例用户任务按钮
+    actions['append.append-multi-instance-user-task'] = {
+      group: 'model',
+      className: 'bpmn-icon-user', // 你可以使用多实例用户任务的图标  bpmn-icon-user   bpmn-icon-user-task
+      title: '多实例用户任务',
+      action: {
+        dragstart: appendMultiInstanceUserTask,
+        click: appendTask
+      }
+    };
+
+    return actions;
+  }
+}
+
+export default EhContextPadProvider;
diff --git a/src/components/BpmnDesign/assets/module/ContextPad/index.ts b/src/components/BpmnDesign/assets/module/ContextPad/index.ts
new file mode 100644
index 0000000..f42ae0d
--- /dev/null
+++ b/src/components/BpmnDesign/assets/module/ContextPad/index.ts
@@ -0,0 +1,9 @@
+import { ModuleDeclaration } from 'didi';
+import enhancementContextPadProvider from './ehContextPadProvider';
+
+const enhancementContextPad: ModuleDeclaration = {
+  __init__: ['enhancementContextPadProvider'],
+  enhancementContextPadProvider: ['type', enhancementContextPadProvider]
+};
+
+export default enhancementContextPad;
diff --git a/src/components/BpmnDesign/assets/module/Palette/ehPalentte.ts b/src/components/BpmnDesign/assets/module/Palette/ehPalentte.ts
new file mode 100644
index 0000000..55d0477
--- /dev/null
+++ b/src/components/BpmnDesign/assets/module/Palette/ehPalentte.ts
@@ -0,0 +1,142 @@
+import { assign } from 'min-dash';
+import PaletteProvider from 'bpmn-js/lib/features/palette/PaletteProvider';
+import ElementFactory from 'bpmn-js/lib/features/modeling/ElementFactory';
+import Create from 'diagram-js/lib/features/create/Create';
+import SpaceTool from 'diagram-js/lib/features/space-tool/SpaceTool';
+import LassoTool from 'diagram-js/lib/features/lasso-tool/LassoTool';
+import HandTool from 'diagram-js/lib/features/hand-tool/HandTool';
+import GlobalConnect from 'diagram-js/lib/features/global-connect/GlobalConnect';
+import Palette from 'diagram-js/lib/features/palette/Palette';
+import modeler from '@/store/modules/modeler';
+import BpmnFactory from 'bpmn-js/lib/features/modeling/BpmnFactory';
+
+// @Description: 增强左侧面板
+class EnhancementPaletteProvider extends PaletteProvider {
+  private readonly _palette: Palette;
+  private readonly _create: Create;
+  private readonly _elementFactory: ElementFactory;
+  private readonly _spaceTool: SpaceTool;
+  private readonly _lassoTool: LassoTool;
+  private readonly _handTool: HandTool;
+  private readonly _globalConnect: GlobalConnect;
+  private readonly _translate: any;
+
+  constructor(palette, create, elementFactory, spaceTool, lassoTool, handTool, globalConnect, translate) {
+    super(
+      palette,
+      create,
+      elementFactory,
+      spaceTool,
+      lassoTool,
+      handTool,
+      globalConnect,
+      translate
+      // 2000
+    );
+    this._palette = palette;
+    this._create = create;
+    this._elementFactory = elementFactory;
+    this._spaceTool = spaceTool;
+    this._lassoTool = lassoTool;
+    this._handTool = handTool;
+    this._globalConnect = globalConnect;
+    this._translate = translate;
+  }
+
+  getPaletteEntries() {
+    const actions = {},
+      create = this._create,
+      elementFactory = this._elementFactory,
+      translate = this._translate;
+
+    function createAction(type: string, group: string, className: string, title: string, options?: object) {
+      function createListener(event) {
+        const shape = elementFactory.createShape(assign({ type: type }, options));
+        if (options) {
+          !shape.businessObject.di && (shape.businessObject.di = {});
+          shape.businessObject.di.isExpanded = (options as { [key: string]: any }).isExpanded;
+        }
+
+        create.start(event, shape, null);
+      }
+
+      const shortType = type.replace(/^bpmn:/, '');
+
+      return {
+        group: group,
+        className: className,
+        title: title || translate('Create {type}', { type: shortType }),
+        action: {
+          dragstart: createListener,
+          click: createListener
+        }
+      };
+    }
+
+    function createSqlTask(event) {
+      const sqlTask = elementFactory.createShape({ type: 'miyue:SqlTask' });
+      create.start(event, sqlTask, null);
+    }
+
+    // 定义一个函数来创建自定义用户任务
+    function createCustomUserTask(event) {
+      const bpmnFactory: BpmnFactory | undefined = modeler().getModeler().get('bpmnFactory');
+      const customUserTask = elementFactory.createShape({
+        type: 'bpmn:UserTask',
+        businessObject: bpmnFactory.create('bpmn:UserTask', {
+          name: '自定义用户任务',
+          isForCompensation: false // 添加多实例属性，示例中设置为false
+        })
+      });
+      create.start(event, customUserTask, {});
+    }
+
+    function createMultiInstanceUserTask(event) {
+      const bpmnFactory: BpmnFactory | undefined = modeler().getModeler().get('bpmnFactory');
+      // 创建一个 bpmn:UserTask
+      const userTask = bpmnFactory.create('bpmn:UserTask', {
+        // name: '多实例用户任务', // 在画板中显示字段
+        isForCompensation: false
+      });
+      // 将多实例属性分配给 bpmn:UserTask 的 loopCharacteristics
+      userTask.loopCharacteristics = bpmnFactory.create('bpmn:MultiInstanceLoopCharacteristics');
+      const customUserTask = elementFactory.createShape({
+        type: 'bpmn:UserTask',
+        businessObject: userTask // 分配创建的 userTask 到 businessObject
+      });
+      create.start(event, customUserTask, {});
+    }
+
+    assign(actions, {
+      'create.parallel-gateway': createAction('bpmn:ParallelGateway', 'gateway', 'bpmn-icon-gateway-parallel', '并行网关'),
+      'create.event-base-gateway': createAction('bpmn:EventBasedGateway', 'gateway', 'bpmn-icon-gateway-eventbased', '事件网关'),
+      // 分组线
+      'gateway-separator': {
+        group: 'gateway',
+        separator: true
+      },
+      'create.user-task': createAction('bpmn:UserTask', 'activity', 'bpmn-icon-user-task', '创建用户任务'),
+
+      'create.multi-instance-user-task': {
+        group: 'activity',
+        type: 'bpmn:UserTask',
+        className: 'bpmn-icon-user', // bpmn-icon-user  bpmn-icon-user-task
+        title: '创建多实例用户任务',
+        action: {
+          click: createMultiInstanceUserTask,
+          dragstart: createMultiInstanceUserTask
+        }
+      },
+
+      'task-separator': {
+        group: 'activity',
+        separator: true
+      }
+    });
+    return actions;
+  }
+}
+
+EnhancementPaletteProvider['$inject'] = ['palette', 'create', 'elementFactory', 'spaceTool', 'lassoTool', 'handTool', 'globalConnect', 'translate'];
+
+export default EnhancementPaletteProvider;
diff --git a/src/components/BpmnDesign/assets/module/Palette/index.ts b/src/components/BpmnDesign/assets/module/Palette/index.ts
new file mode 100644
index 0000000..5c69bc2
--- /dev/null
+++ b/src/components/BpmnDesign/assets/module/Palette/index.ts
@@ -0,0 +1,9 @@
+import { ModuleDeclaration } from 'didi';
+import enhancementPaletteProvider from './ehPalentte';
+
+const EnhancementPalette: ModuleDeclaration = {
+  __init__: ['enhancementPaletteProvider'],
+  enhancementPaletteProvider: ['type', enhancementPaletteProvider]
+};
+
+export default EnhancementPalette;
diff --git a/src/components/BpmnDesign/assets/module/Translate/index.ts b/src/components/BpmnDesign/assets/module/Translate/index.ts
new file mode 100644
index 0000000..e6fc529
--- /dev/null
+++ b/src/components/BpmnDesign/assets/module/Translate/index.ts
@@ -0,0 +1,15 @@
+import zh from '@/components/BpmnDesign/assets/lang/zh';
+
+const customTranslate = (template: any, replacements: any) => {
+  replacements = replacements || {};
+  template = (zh as Record<string, string>)[template] || template;
+  return template.replace(/{([^}]+)}/g, function (_: any, key: any) {
+    return replacements[key] || '{' + key + '}';
+  });
+};
+
+export const translateModule = {
+  translate: ['value', customTranslate]
+};
+
+export default translateModule;
diff --git a/src/components/BpmnDesign/assets/module/index.ts b/src/components/BpmnDesign/assets/module/index.ts
new file mode 100644
index 0000000..a984b15
--- /dev/null
+++ b/src/components/BpmnDesign/assets/module/index.ts
@@ -0,0 +1,8 @@
+// 扩展左侧选择面板
+import EnhancementPaletteProvider from './Palette';
+// 扩展节点右键
+import EnhancementContextPad from './ContextPad';
+// 翻译模块
+import TranslationModule from './Translate';
+
+export default [EnhancementPaletteProvider, EnhancementContextPad, TranslationModule];
diff --git a/src/components/BpmnDesign/index.vue b/src/components/BpmnDesign/index.vue
new file mode 100644
index 0000000..dbcb264
--- /dev/null
+++ b/src/components/BpmnDesign/index.vue
@@ -0,0 +1,363 @@
+<template>
+  <el-dialog ref="flowDialogRef" v-model="dialog.visible" :title="dialog.title" width="95%" append-to-body @close="closeDialog">
+    <div class="app-containers">
+      <el-header style="border-bottom: 1px solid rgb(218 218 218); height: auto">
+        <div style="display: flex; padding: 10px 0; justify-content: space-between">
+          <div>
+            <el-upload ref="xmlUploadRef" action="" style="display: none" />
+            <el-tooltip effect="dark" content="加载xml" placement="bottom">
+              <el-button size="small" icon="FolderOpened" @click="loadXML" />
+            </el-tooltip>
+            <el-tooltip effect="dark" content="新建" placement="bottom">
+              <el-button size="small" icon="CirclePlus" @click="initDiagram" />
+            </el-tooltip>
+            <el-tooltip effect="dark" content="自适应屏幕" placement="bottom">
+              <el-button size="small" icon="Rank" @click="fitViewport" />
+            </el-tooltip>
+            <el-tooltip effect="dark" content="放大" placement="bottom">
+              <el-button size="small" icon="ZoomIn" @click="zoomViewport(true)" />
+            </el-tooltip>
+            <el-tooltip effect="dark" content="缩小" placement="bottom">
+              <el-button size="small" icon="ZoomOut" @click="zoomViewport(false)" />
+            </el-tooltip>
+            <el-tooltip effect="dark" content="后退" placement="bottom">
+              <el-button size="small" icon="Back" @click="bpmnModeler.get('commandStack').undo()" />
+            </el-tooltip>
+            <el-tooltip effect="dark" content="前进" placement="bottom">
+              <el-button size="small" icon="Right" @click="bpmnModeler.get('commandStack').redo()" />
+            </el-tooltip>
+
+            <el-dialog v-model="perviewXMLShow" title="XML预览" width="80%">
+              <highlightjs :code="xmlStr" language="html" />
+            </el-dialog>
+
+            <el-dialog v-model="perviewSVGShow" title="XML预览" width="80%">
+              <div style="text-align: center" v-html="svgData" />
+            </el-dialog>
+          </div>
+          <div>
+            <el-button size="small" icon="Document" @click="previewXML">XML预览</el-button>
+            <el-button size="small" icon="View" @click="previewSVG">SVG预览</el-button>
+            <el-button size="small" icon="Download" @click="downloadXML">XML</el-button>
+            <el-button size="small" icon="Download" @click="downloadSVG">SVG</el-button>
+            <el-button size="small" type="primary">保 存</el-button>
+          </div>
+        </div>
+      </el-header>
+
+      <el-container style="height: 100%">
+        <el-container style="align-items: stretch">
+          <el-main style="padding: 0">
+            <div ref="canvas" class="canvas" />
+          </el-main>
+          <el-aside style="width: 400px; min-height: 650px; background-color: #f0f2f5">
+            <PropertyPanel v-if="bpmnModeler" :modeler="bpmnModeler" :users="users" :groups="groups" :categorys="categorys" />
+          </el-aside>
+        </el-container>
+      </el-container>
+    </div>
+  </el-dialog>
+</template>
+
+<script lang="ts" setup name="BpmnDesign">
+import PropertyPanel from './PropertyPanel.vue';
+import BpmnModeler from 'bpmn-js/lib/Modeler.js'; // 引入 bpmn-js
+import diagramXML from '@/components/BpmnDesign/assets/defaultXML';
+import flowableModdle from '@/components/BpmnDesign/assets/moddle/flowable';
+import Modules from './assets/module/index';
+import useModelerStore from '@/store/modules/modeler';
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+
+const dialog = reactive({
+  visible: true,
+  title: '流程设计器'
+});
+
+const xmlUploadRef = ref<ElUploadInstance>();
+
+const canvas = ref<HTMLDivElement>();
+const panel = ref<HTMLDivElement>();
+
+const bpmnModeler = ref();
+const zoom = ref(1);
+
+const perviewXMLShow = ref(false);
+const perviewSVGShow = ref(false);
+const xmlStr = ref('');
+const svgData = ref('');
+
+const users = [
+  { name: '张三', id: 'zhangsan' },
+  { name: '李四', id: 'lisi' },
+  { name: '王五', id: 'wangwu' }
+];
+const groups = [
+  { name: 'web组', id: 'web' },
+  { name: 'java组', id: 'java' },
+  { name: 'python组', id: 'python' }
+];
+const categorys = [
+  { name: 'OA', id: 'oa' },
+  { name: '财务', id: 'finance' }
+];
+
+onMounted(() => {
+  nextTick(() => {
+    initCanvas();
+    initDiagram();
+    handleModeler();
+    initModel();
+  });
+});
+
+/**
+ * 从文件加载xml
+ */
+const loadXML = () => {
+  xmlUploadRef.value.$el.querySelector('input').click();
+};
+
+/**
+ * 初始化Canvas
+ */
+const initCanvas = () => {
+  bpmnModeler.value = new BpmnModeler({
+    container: canvas.value,
+    // 键盘
+    keyboard: {
+      bindTo: document // 或者window，注意与外部表单的键盘监听事件是否冲突
+    },
+    propertiesPanel: {
+      parent: panel.value
+    },
+    additionalModules: Modules,
+    moddleExtensions: {
+      flowable: flowableModdle
+    }
+  });
+};
+
+/**
+ * 初始化Model
+ */
+const initModel = () => {
+  let store = useModelerStore();
+  if (store.getModeler()) {
+    // 清除旧 modeler
+    store.getModeler().destroy();
+    store.setModeler(undefined);
+  }
+  store.setModeler(bpmnModeler.value);
+};
+
+/**
+ * 关闭用户弹窗
+ */
+const closeDialog = () => {
+  dialog.visible = false;
+};
+
+/**
+ * 新建
+ */
+const initDiagram = () => {
+  bpmnModeler.value.importXML(diagramXML);
+};
+
+/**
+ * 自适应屏幕
+ */
+const fitViewport = () => {
+  zoom.value = bpmnModeler.value.get('canvas').zoom('fit-viewport');
+  const bbox = (document.querySelector('.app-containers .viewport') as SVGGElement).getBBox();
+  const currentViewBox = bpmnModeler.value.get('canvas').viewbox();
+  const elementMid = {
+    x: bbox.x + bbox.width / 2 - 65,
+    y: bbox.y + bbox.height / 2
+  };
+  bpmnModeler.value.get('canvas').viewbox({
+    x: elementMid.x - currentViewBox.width / 2,
+    y: elementMid.y - currentViewBox.height / 2,
+    width: currentViewBox.width,
+    height: currentViewBox.height
+  });
+  zoom.value = (bbox.width / currentViewBox.width) * 1.8;
+};
+/**
+ * 放大或者缩小
+ * @param zoomIn true 放大 | false 缩小
+ */
+const zoomViewport = (zoomIn = true) => {
+  zoom.value = bpmnModeler.value.get('canvas').zoom();
+  zoom.value += zoomIn ? 0.1 : -0.1;
+  bpmnModeler.value.get('canvas').zoom(zoom.value);
+};
+
+/**
+ * 下载XML
+ */
+const downloadXML = async () => {
+  try {
+    const { xml } = await bpmnModeler.value.saveXML({ format: true });
+    downloadFile(`${getProcessElement().name}.bpmn20.xml`, xml, 'application/xml');
+  } catch (e) {
+    proxy?.$modal.msgError(e);
+  }
+};
+
+/**
+ * 下载SVG
+ */
+const downloadSVG = async () => {
+  try {
+    const { svg } = await bpmnModeler.value.saveSVG({ format: true });
+    downloadFile(getProcessElement().name, svg, 'image/svg+xml');
+  } catch (e) {
+    proxy?.$modal.msgError(e);
+  }
+};
+
+/**
+ * XML预览
+ */
+const previewXML = async () => {
+  try {
+    const { xml } = await bpmnModeler.value.saveXML({ format: true });
+    xmlStr.value = xml;
+    perviewXMLShow.value = true;
+  } catch (e) {
+    proxy?.$modal.msgError(e);
+  }
+};
+
+/**
+ * SVG预览
+ */
+const previewSVG = async () => {
+  try {
+    const { svg } = await bpmnModeler.value.saveSVG({ format: true });
+    svgData.value = svg;
+    perviewSVGShow.value = true;
+  } catch (e) {
+    proxy?.$modal.msgError(e);
+  }
+};
+
+const curNodeInfo = reactive({
+  curType: '', // 任务类型 用户任务
+  curNode: '',
+  expValue: '' //多用户和部门角色实现
+});
+
+watch(curNodeInfo, (newValue, oldValue) => {
+  // 在 curNodeInfo 对象发生变化后执行相应逻辑
+  // 这里调用 addEventPlant 函数来添加事件监听器
+  if (curNodeInfo.curNode != '') {
+    addEventPlant();
+  }
+});
+
+const handleModeler = () => {
+  bpmnModeler.value.on('element.click', (e: { element: any }) => {
+    // 用户任务触发
+    if ('bpmn:UserTask' === e.element.type) {
+      curNodeInfo['curNode'] = e.element.id;
+      curNodeInfo['curType'] = e.element.type;
+    } else {
+      // 事件改变的时候清空
+      curNodeInfo['curType'] = '';
+      curNodeInfo['expValue'] = '';
+    }
+  });
+};
+
+function addEventPlant() {
+  //  let assigneeDiv =  bpmnPanel.value.querySelector('[data-group-id="group-CamundaPlatform__UserAssignment"]') as HTMLDivElement;
+  //
+  let assigneeDiv = document.querySelector('[data-group-id="group-CamundaPlatform__UserAssignment"]') as HTMLDivElement;
+  if (assigneeDiv) {
+    assigneeDiv.addEventListener('click', function (e) {
+      let assigneeUser = assigneeDiv.getElementsByClassName('bio-properties-panel-input')[0] as HTMLButtonElement;
+      assigneeUser.setAttribute('placeholder', '双击选择用户');
+      // dblclick 双击事件
+      assigneeUser.addEventListener('dblclick', onFormThreeClick);
+    });
+  }
+}
+
+const onFormThreeClick = () => {
+  proxy?.$modal.alert('选择了用户');
+};
+
+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 getProcessElement = () => {
+  const rootElements = bpmnModeler.value?.getDefinitions().rootElements;
+  for (let i = 0; i < rootElements.length; i++) {
+    if (rootElements[i].$type === 'bpmn:Process') return rootElements[i];
+  }
+};
+</script>
+
+<style lang="scss">
+/*左边工具栏以及编辑节点的样式*/
+//@import 'bpmn-js/dist/assets/bpmn-js.css';
+@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';
+
+.view-mode {
+  .el-header,
+  .el-aside,
+  .djs-palette,
+  .bjs-powered-by {
+    display: none;
+  }
+  .el-loading-mask {
+    background-color: initial;
+  }
+  .el-loading-spinner {
+    display: none;
+  }
+}
+.app-containers {
+  width: 100%;
+  height: 100%;
+  .canvas {
+    width: 100%;
+    height: 100%;
+    background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImEiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTTAgMTBoNDBNMTAgMHY0ME0wIDIwaDQwTTIwIDB2NDBNMCAzMGg0ME0zMCAwdjQwIiBmaWxsPSJub25lIiBzdHJva2U9IiNlMGUwZTAiIG9wYWNpdHk9Ii4yIi8+PHBhdGggZD0iTTQwIDBIMHY0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZTBlMGUwIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2EpIi8+PC9zdmc+');
+  }
+  .panel {
+    position: absolute;
+    right: 0;
+    top: 50px;
+    width: 300px;
+  }
+  .load {
+    margin-right: 10px;
+  }
+  .el-form-item__label {
+    font-size: 13px;
+  }
+}
+
+.el-overlay {
+  .el-overlay-dialog {
+    .el-dialog {
+      .el-dialog__body {
+        padding-top: 0 !important;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/BpmnDesign/panel/TaskPanel.vue b/src/components/BpmnDesign/panel/TaskPanel.vue
new file mode 100644
index 0000000..e69de29
diff --git a/src/main.ts b/src/main.ts
index 439d82c..f0a3fdd 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -15,6 +15,11 @@ import directive from './directive';
 // 注册插件
 import plugins from './plugins/index'; // plugins
 
+// 高亮组件
+import 'highlight.js/styles/a11y-light.css';
+import 'highlight.js/lib/common';
+import HighLight from '@highlightjs/vue-plugin';
+
 // svg图标
 import 'virtual:svg-icons-register';
 import ElementIcons from '@/plugins/svgicon';
@@ -27,6 +32,7 @@ import i18n from '@/lang/index';
 
 const app = createApp(App);
 
+app.use(HighLight);
 app.use(ElementIcons);
 app.use(router);
 app.use(store);
diff --git a/src/store/modules/modeler.ts b/src/store/modules/modeler.ts
new file mode 100644
index 0000000..ecf5106
--- /dev/null
+++ b/src/store/modules/modeler.ts
@@ -0,0 +1,78 @@
+import type { Moddle } from 'moddle';
+import type Modeler from 'bpmn-js/lib/Modeler';
+import type Modeling from 'bpmn-js/lib/features/modeling/Modeling';
+import type Canvas from 'diagram-js/lib/core/Canvas';
+import type ElementRegistry from 'diagram-js/lib/core/ElementRegistry';
+
+type ModelerStore = {
+  modeler: Modeler | undefined;
+  moddle: Moddle | undefined;
+  modeling: Modeling | undefined;
+  canvas: Canvas | undefined;
+  elementRegistry: ElementRegistry | undefined;
+  bpmnModel: Modeler | undefined;
+  // 流程定义根节点信息
+  procDefId: string | undefined;
+  procDefName: string | undefined;
+};
+
+const defaultState: ModelerStore = {
+  modeler: undefined,
+  moddle: undefined,
+  modeling: undefined,
+  canvas: undefined,
+  elementRegistry: undefined,
+  bpmnModel: undefined,
+  procDefId: undefined,
+  procDefName: undefined
+};
+export const useModelerStore = defineStore('modeler', () => {
+  const modeler = ref(defaultState.modeler);
+  const moddle = ref(defaultState.moddle);
+  const modeling = ref(defaultState.modeling);
+  const canvas = ref(defaultState.canvas);
+  const elementRegistry = ref(defaultState.elementRegistry);
+  const bpmnModel = ref(defaultState.bpmnModel);
+  const procDefId = ref(defaultState.procDefId);
+  const procDefName = ref(defaultState.procDefName);
+
+  const getModeler = (): Modeler => modeler.value;
+  const getModdle = () => moddle.value;
+  const getModeling = (): Modeling | undefined => modeling.value;
+  const getCanvas = (): Canvas | undefined => canvas.value;
+  const getElRegistry = (): ElementRegistry | undefined => elementRegistry.value;
+  const getProcDefId = (): string | undefined => procDefId.value;
+  const getProcDefName = (): string | undefined => procDefName.value;
+
+  // 设置根节点
+  const setModeler = (modelers: Modeler | undefined) => {
+    if (modelers) {
+      bpmnModel.value = modelers;
+      modeler.value = modelers;
+      modeling.value = modelers.get('modeling');
+      moddle.value = modelers.get('moddle');
+      canvas.value = modelers.get('canvas');
+      elementRegistry.value = modelers.get('elementRegistry');
+    } else {
+      modeling.value = moddle.value = canvas.value = elementRegistry.value = bpmnModel.value = undefined;
+    }
+  };
+  // 设置流程定义根节点信息
+  const setProcDef = (modeler: any | undefined) => {
+    procDefId.value = modeler.get('canvas').getRootElement().businessObject.get('id');
+    procDefName.value = modeler.get('canvas').getRootElement().businessObject.get('name');
+  };
+
+  return {
+    getModeler,
+    getModdle,
+    getModeling,
+    getCanvas,
+    getElRegistry,
+    getProcDefId,
+    getProcDefName,
+    setModeler,
+    setProcDef
+  };
+});
+export default useModelerStore;
diff --git a/src/types/bpmn-moddle/bpmn-form.d.ts b/src/types/bpmn-moddle/bpmn-form.d.ts
new file mode 100644
index 0000000..293e0e7
--- /dev/null
+++ b/src/types/bpmn-moddle/bpmn-form.d.ts
@@ -0,0 +1,29 @@
+// @Description:扩展
+declare interface ScriptForm extends BpmnScript {
+  scriptType?: string;
+}
+
+declare interface ExecutionListenerForm extends BpmnExecutionListener {
+  type: string;
+  script?: ScriptForm;
+}
+
+declare interface FormItemVisible {
+  listenerType: string;
+  scriptType: string;
+}
+
+declare interface ConditionalForm {
+  conditionType?: string;
+  expression?: string;
+  scriptType?: string;
+  language?: string;
+  body?: string;
+  resource?: string;
+}
+
+// 任务监听器声明
+declare interface TaskListenerForm extends BpmnTaskListener {
+  type: string;
+  script?: ScriptForm;
+}
diff --git a/src/types/bpmn-moddle/bpmn-instance.d.ts b/src/types/bpmn-moddle/bpmn-instance.d.ts
new file mode 100644
index 0000000..1747f28
--- /dev/null
+++ b/src/types/bpmn-moddle/bpmn-instance.d.ts
@@ -0,0 +1,62 @@
+// @Description:扩展
+declare interface BpmnScript {
+  scriptFormat?: string;
+  resource?: string;
+  value?: string;
+}
+
+declare interface BpmnField {
+  name: string;
+  expression?: string;
+  stringValue?: string;
+  string?: string;
+  htmlVar?: string;
+}
+
+declare interface BpmnExtensionElements {
+  values: any[];
+}
+
+declare interface BpmnExecutionListener {
+  event: string;
+  expression?: string;
+  class?: string;
+  delegateExpression?: string;
+  script?: BpmnScript;
+  fields?: BpmnField[];
+}
+
+declare interface BpmnExtensionProperty {
+  id?: string;
+  name?: string;
+  value?: string;
+}
+
+declare interface BpmnExtensionProperties {
+  values: BpmnExtensionProperty[];
+}
+
+// 任务监听器相关
+
+declare interface BpmnTaskElements {
+  values: any[];
+}
+
+declare interface BpmnTaskListener {
+  event: string;
+  expression?: string;
+  class?: string;
+  delegateExpression?: string;
+  script?: BpmnScript;
+  fields?: BpmnField[];
+}
+
+declare interface BpmnTaskProperty {
+  id?: string;
+  name?: string;
+  value?: string;
+}
+
+declare interface BpmnTaskProperties {
+  values: BpmnTaskProperty[];
+}
diff --git a/src/types/declares/bpmn-js-bpmnlint.d.ts b/src/types/declares/bpmn-js-bpmnlint.d.ts
new file mode 100644
index 0000000..60facbc
--- /dev/null
+++ b/src/types/declares/bpmn-js-bpmnlint.d.ts
@@ -0,0 +1,106 @@
+declare module 'bpmn-js-bpmnlint' {
+  import { Injector, ModuleDefinition } from 'didi';
+  import Modeler from 'bpmn-js/lib/Modeler';
+  import Canvas from 'diagram-js/lib/core/Canvas';
+  import ElementRegistry from 'diagram-js/lib/core/ElementRegistry';
+  import EventBus from 'diagram-js/lib/core/EventBus';
+  import Overlays from 'diagram-js/lib/features/overlays/Overlays';
+  import EditorActions from 'diagram-js/lib/features/editor-actions/EditorActions';
+
+  type EmptyConfig = {
+    resolver: {
+      resolveRule: () => unknown;
+    };
+    config: Record<string, any>;
+  };
+
+  type State = 'error' | 'warning';
+
+  type ButtonState = State | 'inactive' | 'success';
+
+  type Entry = {
+    rule: string;
+    message: string;
+    actualElementId: string;
+  };
+
+  type Issue = {
+    id: string;
+    category: string;
+    message: string;
+    rule: string;
+  };
+
+  type Issues = Record<string, Issue[]>[];
+
+  class Linting {
+    protected _bpmnjs: Modeler;
+    protected _canvas: Canvas;
+    protected _config: any;
+    protected _elementRegistry: ElementRegistry;
+    protected _eventBus: EventBus;
+    protected _overlays: Overlays;
+    protected _translate: Translate;
+    protected _issues: Record<string, any>;
+    protected _active: boolean;
+    protected _linterConfig: EmptyConfig;
+    protected _overlayIds: Record<string, string>;
+
+    constructor(
+      bpmnjs: Modeler,
+      canvas: Canvas,
+      config: any,
+      elementRegistry: ElementRegistry,
+      eventBus: EventBus,
+      overlays: Overlays,
+      translate: Translate
+    );
+
+    _init(): void;
+
+    _fireComplete(issues: Issues[]): void;
+
+    _createIssues(issues: Issues[]): void;
+
+    _createElementIssues(elementId: string, elementIssues: Issues[]): void;
+
+    _formatIssues(issues: Record<string, Issue>): Issues[];
+
+    _setActive(active: boolean): void;
+
+    _addErrors($ul: Element, errors: Entry[]): void;
+
+    _addWarnings($ul: Element, warnings: Entry[]): void;
+
+    _addEntry($ul: Element, state: State, entry: Entry): void;
+
+    _clearOverlays(): void;
+
+    _clearIssues(): void;
+
+    _setButtonState(state: ButtonState, errors: object, warnings: object): void;
+
+    _updateButton(): void;
+
+    _createButton(): void;
+
+    setLinterConfig(linterConfig: EmptyConfig): void;
+
+    getLinterConfig(): EmptyConfig;
+
+    isActive(): boolean;
+
+    toggle(newActive: boolean): boolean;
+
+    lint(): any;
+
+    update(): void;
+  }
+
+  class LintEditorActions extends EditorActions {
+    constructor(injector: Injector, linting: Linting);
+  }
+
+  const bpmnlint: ModuleDefinition;
+  export default bpmnlint;
+}
diff --git a/src/types/declares/bpmn-js-toke-simulation.d.ts b/src/types/declares/bpmn-js-toke-simulation.d.ts
new file mode 100644
index 0000000..14c227b
--- /dev/null
+++ b/src/types/declares/bpmn-js-toke-simulation.d.ts
@@ -0,0 +1,207 @@
+declare module 'bpmn-js-token-simulation' {
+  import ContextPads from 'bpmn-js-token-simulation/lib/features/context-pads/ContextPads';
+  import ElementNotifications from 'bpmn-js-token-simulation/lib/features/element-notifications/ElementNotifications';
+  import ElementSupport from 'bpmn-js-token-simulation/lib/features/element-support/ElementSupport';
+  import Notifications from 'bpmn-js-token-simulation/lib/features/notifications/Notifications';
+  import ExclusiveGatewaySettings from 'bpmn-js-token-simulation/lib/features/exclusive-gateway-settings/ExclusiveGatewaySettings';
+  import PauseSimulation from 'bpmn-js-token-simulation/lib/features/pause-simulation/PauseSimulation';
+  import PreserveElementColors from 'bpmn-js-token-simulation/lib/features/preserve-element-colors/PreserveElementColors';
+  import ProcessInstanceIds from 'bpmn-js-token-simulation/lib/features/process-instance-ids/ProcessInstanceIds';
+  import ProcessInstanceSettings from 'bpmn-js-token-simulation/lib/features/process-instance-settings/ProcessInstanceSettings';
+  import Log from 'bpmn-js-token-simulation/lib/features/log/Log';
+  import ToggleMode from 'bpmn-js-token-simulation/lib/features/toggle-mode/modeler/ToggleMode';
+  import ProcessInstances from 'bpmn-js-token-simulation/lib/features/process-instances/ProcessInstances';
+  import ResetSimulation from 'bpmn-js-token-simulation/lib/features/reset-simulation/ResetSimulation';
+  import SetAnimationSpeed from 'bpmn-js-token-simulation/lib/features/set-animation-speed/SetAnimationSpeed';
+  import ShowProcessInstance from 'bpmn-js-token-simulation/lib/features/show-process-instance/ShowProcessInstance';
+  import SimulationState from 'bpmn-js-token-simulation/lib/features/simulation-state/SimulationState';
+  import Palette from 'bpmn-js-token-simulation/lib/features/palette/Palette';
+  import TokenCount from 'bpmn-js-token-simulation/lib/features/token-count/TokenCount';
+  import TokenSimulationBehavior from 'bpmn-js-token-simulation/lib/features/token-simulation-behavior/TokenSimulationBehavior';
+  import DisableModeling from 'bpmn-js-token-simulation/lib/features/disable-modeling/DisableModeling';
+  import KeyboardBindings from 'bpmn-js-token-simulation/lib/features/keyboard-bindings/KeyboardBindings';
+  import EditorActions from 'bpmn-js-token-simulation/lib/features/editor-actions/EditorActions';
+  import { ModuleDefinition } from 'didi';
+
+  const SimulationModeler: ModuleDefinition & {
+    animation: ['type', Animation];
+    contextPads: ['type', ContextPads];
+    disableModeling: ['type', DisableModeling];
+    elementNotifications: ['type', ElementNotifications];
+    elementSupport: ['type', ElementSupport];
+    exclusiveGatewaySettings: ['type', ExclusiveGatewaySettings];
+    log: ['type', Log];
+    notifications: ['type', Notifications];
+    pauseSimulation: ['type', PauseSimulation];
+    preserveElementColors: ['type', PreserveElementColors];
+    processInstanceIds: ['type', ProcessInstanceIds];
+    processInstanceSettings: ['type', ProcessInstanceSettings];
+    processInstances: ['type', ProcessInstances];
+    resetSimulation: ['type', ResetSimulation];
+    setAnimationSpeed: ['type', SetAnimationSpeed];
+    showProcessInstance: ['type', ShowProcessInstance];
+    simulationState: ['type', SimulationState];
+    toggleMode: ['type', ToggleMode];
+    tokenCount: ['type', TokenCount];
+    tokenSimulationBehavior: ['type', TokenSimulationBehavior];
+    tokenSimulationEditorActions: ['type', EditorActions];
+    tokenSimulationKeyboardBindings: ['type', KeyboardBindings];
+    tokenSimulationPalette: ['type', Palette];
+  };
+
+  export default SimulationModeler;
+}
+
+declare module 'bpmn-js-token-simulation/lib/viewer' {
+  import { ModuleDefinition } from 'didi';
+  import ContextPads from 'bpmn-js-token-simulation/lib/features/context-pads/ContextPads';
+  import ElementNotifications from 'bpmn-js-token-simulation/lib/features/element-notifications/ElementNotifications';
+  import ElementSupport from 'bpmn-js-token-simulation/lib/features/element-support/ElementSupport';
+  import Notifications from 'bpmn-js-token-simulation/lib/features/notifications/Notifications';
+  import ExclusiveGatewaySettings from 'bpmn-js-token-simulation/lib/features/exclusive-gateway-settings/ExclusiveGatewaySettings';
+  import PauseSimulation from 'bpmn-js-token-simulation/lib/features/pause-simulation/PauseSimulation';
+  import PreserveElementColors from 'bpmn-js-token-simulation/lib/features/preserve-element-colors/PreserveElementColors';
+  import ProcessInstanceIds from 'bpmn-js-token-simulation/lib/features/process-instance-ids/ProcessInstanceIds';
+  import ProcessInstanceSettings from 'bpmn-js-token-simulation/lib/features/process-instance-settings/ProcessInstanceSettings';
+  import Log from 'bpmn-js-token-simulation/lib/features/log/Log';
+  import ToggleMode from 'bpmn-js-token-simulation/lib/features/toggle-mode/viewer/ToggleMode';
+  import ProcessInstances from 'bpmn-js-token-simulation/lib/features/process-instances/ProcessInstances';
+  import ResetSimulation from 'bpmn-js-token-simulation/lib/features/reset-simulation/ResetSimulation';
+  import SetAnimationSpeed from 'bpmn-js-token-simulation/lib/features/set-animation-speed/SetAnimationSpeed';
+  import ShowProcessInstance from 'bpmn-js-token-simulation/lib/features/show-process-instance/ShowProcessInstance';
+  import SimulationState from 'bpmn-js-token-simulation/lib/features/simulation-state/SimulationState';
+  import Palette from 'bpmn-js-token-simulation/lib/features/palette/Palette';
+  import TokenCount from 'bpmn-js-token-simulation/lib/features/token-count/TokenCount';
+  import TokenSimulationBehavior from 'bpmn-js-token-simulation/lib/features/token-simulation-behavior/TokenSimulationBehavior';
+
+  const SimulationViewer: ModuleDefinition & {
+    animation: ['type', Animation];
+    contextPads: ['type', ContextPads];
+    elementNotifications: ['type', ElementNotifications];
+    elementSupport: ['type', ElementSupport];
+    exclusiveGatewaySettings: ['type', ExclusiveGatewaySettings];
+    log: ['type', Log];
+    notifications: ['type', Notifications];
+    pauseSimulation: ['type', PauseSimulation];
+    preserveElementColors: ['type', PreserveElementColors];
+    processInstanceIds: ['type', ProcessInstanceIds];
+    processInstanceSettings: ['type', ProcessInstanceSettings];
+    processInstances: ['type', ProcessInstances];
+    resetSimulation: ['type', ResetSimulation];
+    setAnimationSpeed: ['type', SetAnimationSpeed];
+    showProcessInstance: ['type', ShowProcessInstance];
+    simulationState: ['type', SimulationState];
+    toggleMode: ['type', ToggleMode];
+    tokenCount: ['type', TokenCount];
+    tokenSimulationBehavior: ['type', TokenSimulationBehavior];
+    tokenSimulationPalette: ['type', Palette];
+  };
+
+  export default SimulationViewer;
+}
+
+declare module 'bpmn-js-token-simulation/lib/animation/Animation' {
+  import Canvas from 'diagram-js/lib/core/Canvas';
+  import EventBus from 'diagram-js/lib/core/EventBus';
+  export default class Animation {
+    constructor(canvas: Canvas, eventBus: EventBus);
+  }
+}
+declare module 'bpmn-js-token-simulation/lib/features/context-pads/ContextPads' {
+  import Canvas from 'diagram-js/lib/core/Canvas';
+  import EventBus from 'diagram-js/lib/core/EventBus';
+  import ElementRegistry from 'diagram-js/lib/core/ElementRegistry';
+  import Overlays from 'diagram-js/lib/features/overlays/Overlays';
+  import { Injector } from 'didi';
+  import ProcessInstances from 'bpmn-js-token-simulation/lib/features/process-instances/ProcessInstances';
+  export default class ContextPads {
+    constructor(
+      eventBus: EventBus,
+      elementRegistry: ElementRegistry,
+      overlays: Overlays,
+      injector: Injector,
+      canvas: Canvas,
+      processInstances: ProcessInstances
+    );
+
+    registerHandler(type: string, handler: object): void;
+
+    openContextPads(element: any): void;
+
+    openElementContextPads(parent: any): void;
+
+    closeContextPads(parent: any): void;
+
+    closeElementContextPads(element: any): void;
+  }
+}
+declare module 'bpmn-js-token-simulation/lib/features/disable-modeling/DisableModeling' {
+  export default class DisableModeling {}
+}
+declare module 'bpmn-js-token-simulation/lib/features/editor-actions/EditorActions' {
+  export default class EditorActions {}
+}
+declare module 'bpmn-js-token-simulation/lib/features/element-notifications/ElementNotifications' {
+  export default class ElementNotifications {}
+}
+declare module 'bpmn-js-token-simulation/lib/features/element-support/ElementSupport' {
+  export default class ElementSupport {}
+}
+declare module 'bpmn-js-token-simulation/lib/features/exclusive-gateway-settings/ExclusiveGatewaySettings' {
+  export default class ExclusiveGatewaySettings {}
+}
+declare module 'bpmn-js-token-simulation/lib/features/keyboard-bindings/KeyboardBindings' {
+  export default class KeyboardBindings {}
+}
+declare module 'bpmn-js-token-simulation/lib/features/log/Log' {
+  export default class Log {}
+}
+declare module 'bpmn-js-token-simulation/lib/features/notifications/Notifications' {
+  export default class Notifications {}
+}
+declare module 'bpmn-js-token-simulation/lib/features/palette/Palette' {
+  export default class Palette {}
+}
+declare module 'bpmn-js-token-simulation/lib/features/pause-simulation/PauseSimulation' {
+  export default class PauseSimulation {}
+}
+declare module 'bpmn-js-token-simulation/lib/features/preserve-element-colors/PreserveElementColors' {
+  export default class PreserveElementColors {}
+}
+declare module 'bpmn-js-token-simulation/lib/features/process-instance-ids/ProcessInstanceIds' {
+  export default class ProcessInstanceIds {}
+}
+declare module 'bpmn-js-token-simulation/lib/features/process-instances/ProcessInstances' {
+  export default class ProcessInstances {}
+}
+declare module 'bpmn-js-token-simulation/lib/features/process-instance-settings/ProcessInstanceSettings' {
+  export default class ProcessInstanceSettings {}
+}
+declare module 'bpmn-js-token-simulation/lib/features/reset-simulation/ResetSimulation' {
+  export default class ResetSimulation {}
+}
+declare module 'bpmn-js-token-simulation/lib/features/set-animation-speed/SetAnimationSpeed' {
+  export default class SetAnimationSpeed {}
+}
+declare module 'bpmn-js-token-simulation/lib/features/show-process-instance/ShowProcessInstance' {
+  export default class ShowProcessInstance {}
+}
+declare module 'bpmn-js-token-simulation/lib/features/simulation-state/SimulationState' {
+  export default class SimulationState {}
+}
+declare module 'bpmn-js-token-simulation/lib/features/toggle-mode/viewer/ToggleMode' {
+  export default class ToggleMode {}
+}
+declare module 'bpmn-js-token-simulation/lib/features/toggle-mode/modeler/ToggleMode' {
+  export default class ToggleMode {
+    constructor();
+
+    toggleMode(): void;
+  }
+}
+declare module 'bpmn-js-token-simulation/lib/features/token-count/TokenCount' {
+  export default class TokenCount {}
+}
+declare module 'bpmn-js-token-simulation/lib/features/token-simulation-behavior/TokenSimulationBehavior' {
+  export default class TokenSimulationBehavior {}
+}
diff --git a/src/types/declares/bpmn-js.d.ts b/src/types/declares/bpmn-js.d.ts
new file mode 100644
index 0000000..4e20cb9
--- /dev/null
+++ b/src/types/declares/bpmn-js.d.ts
@@ -0,0 +1,42 @@
+declare module 'bpmn-js/lib/util/ModelUtil' {
+  /**
+   * Is an element of the given BPMN type?
+   *
+   * @param  element
+   * @param  type
+   *
+   * @return
+   */
+  export function is(element: Element | ModdleElement, type: string): boolean;
+
+  /**
+   * Return true if element has any of the given types.
+   *
+   * @param element
+   * @param types
+   *
+   * @return
+   */
+  export function isAny(element: Element | ModdleElement, types: string[]): boolean;
+
+  /**
+   * Return the business object for a given element.
+   *
+   * @param element
+   *
+   * @return
+   */
+  export function getBusinessObject(element: Element | ModdleElement): ModdleElement;
+
+  /**
+   * Return the di object for a given element.
+   *
+   * @param element
+   *
+   * @return
+   */
+  export function getDi(element: Element): ModdleElement;
+
+  type Element = import('../model/Types').Element;
+  type ModdleElement = import('../model/Types').ModdleElement;
+}
diff --git a/src/types/declares/bpmn-moddle.d.ts b/src/types/declares/bpmn-moddle.d.ts
new file mode 100644
index 0000000..15a94ec
--- /dev/null
+++ b/src/types/declares/bpmn-moddle.d.ts
@@ -0,0 +1,808 @@
+declare module 'bpmn-moddle' {
+  import { Moddle, ModdleElement, Package } from 'moddle';
+
+  export { Moddle, Package, ModdleElement };
+
+  type ParseResult = {
+    rootElement: ModdleElement;
+    references: object[];
+    warnings: Error[];
+    elementsById: { [key: string]: ModdleElement };
+  };
+  type ParseError = {
+    warnings: Error[];
+  };
+
+  type SerializationResult = {
+    xml: string;
+  };
+
+  // bpmn.json 原始类型
+  export interface RootElement extends BaseElement {}
+
+  export interface BaseElement extends ModdleElement {
+    id?: string;
+    documentation?: Documentation;
+    extensionDefinitions?: ExtensionDefinition[];
+    extensionElements?: ExtensionElements;
+  }
+
+  export interface Interface extends RootElement {
+    name?: string;
+    operations?: Operation[];
+    implementationRef?: string;
+  }
+
+  export interface Operation extends BaseElement {
+    name?: string;
+    inMessageRef?: Message;
+    outMessageRef?: Message;
+    errorRef?: Error[];
+    implementationRef?: string;
+  }
+
+  export interface EndPoint extends RootElement {}
+
+  export interface Auditing extends BaseElement {}
+
+  export interface GlobalTask extends CallableElement {
+    resources?: ResourceRole[];
+  }
+
+  export interface Monitoring extends BaseElement {}
+
+  export interface Performer extends ResourceRole {}
+
+  export interface Process extends FlowElementsContainer, CallableElement {
+    processType?: ProcessType;
+    isClosed?: boolean;
+    auditing?: Auditing;
+    monitoring?: Monitoring;
+    properties?: Property[];
+    laneSets?: LaneSet[];
+    flowElements?: FlowElement[];
+    artifacts?: Artifact[];
+    resources?: ResourceRole[];
+    correlationSubscriptions?: CorrelationSubscription[];
+    supports?: Process[];
+    definitionalCollaborationRef?: Collaboration[];
+    isExecutable?: boolean;
+  }
+
+  export interface Lane extends BaseElement {
+    name?: string;
+    partitionElementRef?: BaseElement[];
+    partitionElement?: BaseElement;
+    flowNodeRef?: FlowNode[];
+    childLaneSet?: LaneSet[];
+  }
+
+  export interface LaneSet extends BaseElement {
+    lanes?: Lane[];
+    name?: string;
+  }
+
+  export interface GlobalManualTask extends GlobalTask {}
+
+  export interface ManualTask extends Task {}
+
+  export interface UserTask extends Task {
+    renderings?: Rendering[];
+    implementation?: string;
+  }
+
+  export interface Rendering extends BaseElement {}
+
+  export interface HumanPerformer extends Performer {}
+
+  export interface PotentialOwner extends HumanPerformer {}
+
+  export interface GlobalUserTask extends GlobalTask {
+    implementation?: string;
+    renderings?: Rendering[];
+  }
+
+  export interface Gateway extends FlowNode {
+    gatewayDirection?: GatewayDirection;
+  }
+
+  export interface EventBasedGateway extends Gateway {
+    instantiate: boolean;
+    eventGatewayType?: EventBasedGatewayType;
+  }
+
+  export interface ComplexGateway extends Gateway {
+    activationCondition?: Expression;
+    default?: SequenceFlow;
+  }
+
+  export interface ExclusiveGateway extends Gateway {
+    default?: SequenceFlow;
+  }
+
+  export interface InclusiveGateway extends Gateway {
+    default?: SequenceFlow;
+  }
+
+  export interface ParallelGateway extends Gateway {}
+
+  export interface Relationship extends BaseElement {
+    type?: string;
+    direction?: RelationshipDirection;
+    source?: Element[];
+    target?: Element[];
+  }
+
+  export interface Extension {
+    mustUnderstand: boolean; //"default": false
+    definition?: ExtensionDefinition;
+  }
+
+  export interface ExtensionDefinition {
+    name?: string; //"default": false
+    extensionAttributeDefinitions?: ExtensionAttributeDefinition[];
+  }
+
+  export interface ExtensionAttributeDefinition {
+    name?: string;
+    type?: string;
+    isReference: boolean;
+    extensionAttributeDefinitions?: ExtensionAttributeDefinition[];
+    extensionDefinition?: ExtensionDefinition;
+  }
+
+  export interface ExtensionElements {
+    valueRef?: Element;
+    values?: Element[];
+    extensionAttributeDefinition?: ExtensionAttributeDefinition;
+  }
+
+  export interface Documentation extends BaseElement {
+    text?: string;
+    textFormat: string;
+  }
+
+  export interface Event extends FlowNode, InteractionNode {
+    properties?: Property[];
+  }
+
+  export interface IntermediateCatchEvent extends CatchEvent {}
+
+  export interface IntermediateThrowEvent extends ThrowEvent {}
+
+  export interface EndEvent extends ThrowEvent {}
+
+  export interface StartEvent extends CatchEvent {
+    isInterrupting: boolean;
+  }
+
+  export interface ThrowEvent extends Event {
+    dataInputs?: DataInput[];
+    dataInputAssociations?: DataInputAssociation[];
+    inputSet?: InputSet;
+    eventDefinitions?: EventDefinition[];
+    eventDefinitionRef?: EventDefinition[];
+  }
+
+  export interface CatchEvent extends Event {
+    parallelMultiple: boolean;
+    dataOutputs?: DataOutput[];
+    dataOutputAssociations?: DataOutputAssociation[];
+    outputSet?: OutputSet;
+    eventDefinitions?: EventDefinition[];
+    eventDefinitionRef?: EventDefinition[];
+  }
+
+  export interface BoundaryEvent extends CatchEvent {
+    cancelActivity: boolean;
+    attachedToRef?: Activity;
+  }
+
+  export interface EventDefinition extends RootElement {}
+
+  export interface CancelEventDefinition extends EventDefinition {}
+
+  export interface ErrorEventDefinition extends EventDefinition {
+    errorRef?: Error;
+  }
+
+  export interface TerminateEventDefinition extends EventDefinition {}
+
+  export interface EscalationEventDefinition extends EventDefinition {
+    escalationRef?: Escalation;
+  }
+
+  export interface Escalation extends RootElement {
+    structureRef?: ItemDefinition;
+    name?: string;
+    escalationCode?: string;
+  }
+
+  export interface CompensateEventDefinition extends EventDefinition {
+    waitForCompletion: boolean;
+    activityRef?: Activity;
+  }
+
+  export interface TimerEventDefinition extends EventDefinition {
+    timeDate?: Expression;
+    timeCycle?: Expression;
+    timeDuration?: Expression;
+  }
+
+  export interface LinkEventDefinition extends EventDefinition {
+    name?: string;
+    target?: LinkEventDefinition;
+    source?: LinkEventDefinition;
+  }
+
+  export interface MessageEventDefinition extends EventDefinition {
+    messageRef?: Message;
+    operationRef?: Operation;
+  }
+
+  export interface ConditionalEventDefinition extends EventDefinition {
+    condition?: Expression;
+  }
+
+  export interface SignalEventDefinition extends EventDefinition {
+    signalRef?: Signal;
+  }
+
+  export interface Signal extends RootElement {
+    name?: string;
+    structureRef?: ItemDefinition;
+  }
+
+  export interface ImplicitThrowEvent extends ThrowEvent {}
+
+  export interface DataState extends BaseElement {
+    name?: string;
+  }
+
+  export interface ItemAwareElement extends BaseElement {
+    itemSubjectRef?: ItemDefinition;
+    dataState?: DataState;
+  }
+
+  export interface DataAssociation extends BaseElement {
+    sourceRef?: ItemAwareElement;
+    targetRef?: ItemAwareElement;
+    transformation?: FormalExpression;
+    assignment?: Assignment;
+  }
+
+  export interface DataInput extends ItemAwareElement {
+    name?: string;
+    isCollection: boolean;
+    inputSetRef?: InputSet[];
+    inputSetWithOptional?: InputSet[];
+    inputSetWithWhileExecuting?: InputSet[];
+  }
+
+  export interface DataOutput extends ItemAwareElement {
+    name?: string;
+    isCollection: boolean;
+    outputSetRef?: OutputSet[];
+    outputSetWithOptional?: OutputSet[];
+    outputSetWithWhileExecuting?: OutputSet[];
+  }
+
+  export interface InputSet extends BaseElement {
+    name?: string;
+    dataInputRefs?: DataInput[];
+    optionalInputRefs?: DataInput[];
+    whileExecutingInputRefs?: DataInput[];
+    outputSetRefs?: OutputSet[];
+  }
+
+  export interface OutputSet extends BaseElement {
+    name?: string;
+    dataOutputRefs?: DataOutput[];
+    inputSetRefs?: InputSet[];
+    optionalOutputRefs?: DataOutput[];
+    whileExecutingOutputRefs?: DataOutput[];
+  }
+
+  export interface Property extends ItemAwareElement {
+    name?: string;
+  }
+
+  export interface DataInputAssociation extends DataAssociation {}
+
+  export interface DataOutputAssociation extends DataAssociation {}
+
+  export interface InputOutputSpecification extends BaseElement {
+    dataInputs?: DataInput[];
+    dataOutputs?: DataOutput[];
+    inputSets?: InputSet[];
+    outputSets?: OutputSet[];
+  }
+
+  export interface DataObject extends FlowElement, ItemAwareElement {
+    isCollection: boolean;
+  }
+
+  export interface isCollection {
+    inputDataRef?: InputSet;
+    outputDataRef?: OutputSet;
+    operationRef?: Operation;
+  }
+
+  export interface Assignment extends BaseElement {
+    from?: Expression;
+    to?: Expression;
+  }
+
+  export interface DataStore extends RootElement, ItemAwareElement {
+    name?: string;
+    capacity?: number;
+    isUnlimited: boolean;
+  }
+
+  export interface Category extends RootElement, ItemAwareElement {
+    name?: string;
+    capacity?: number;
+    isUnlimited: boolean;
+  }
+
+  export interface DataStoreReference extends ItemAwareElement, FlowElement {
+    dataStoreRef?: DataStore;
+  }
+
+  export interface DataObjectReference extends ItemAwareElement, FlowElement {
+    dataObjectRef?: DataObject;
+  }
+
+  export interface ConversationNode extends BaseElement, InteractionNode {
+    name?: string;
+    messageFlows?: MessageFlow[];
+    CorrelationKeys?: CorrelationKey[];
+    participants?: Participant[];
+  }
+
+  export interface ConversationLink extends BaseElement {
+    sourceRef?: InteractionNode;
+    targetRef?: InteractionNode;
+    name?: string;
+  }
+
+  export interface ConversationAssociation extends BaseElement {
+    innerConversationNodeRef?: ConversationNode;
+    outerConversationNodeRef?: ConversationNode;
+  }
+
+  export interface CallConversation extends ConversationNode {
+    calledCollaborationRef?: Collaboration;
+    participantAssociations?: ParticipantAssociation[];
+  }
+
+  export interface Conversation extends ConversationNode {}
+
+  export interface SubConversation extends ConversationNode {
+    conversationNodes?: ConversationNode[];
+  }
+
+  export interface conversationNodes extends BaseElement, InteractionNode {
+    name?: string;
+    participantRef?: Participant[];
+    messageFlowRefs?: MessageFlow[];
+    correlationKeys?: CorrelationKey[];
+  }
+
+  export interface GlobalConversation extends Collaboration {}
+
+  export interface PartnerEntity extends RootElement {
+    name?: string;
+    participantRef?: Participant[];
+  }
+
+  export interface PartnerRole extends RootElement {
+    name?: string;
+    participantRef?: Participant[];
+  }
+
+  export interface CorrelationProperty extends RootElement {
+    name?: string;
+    correlationPropertyRetrievalExpression?: CorrelationPropertyRetrievalExpression[];
+    type?: ItemDefinition;
+  }
+
+  export interface Error extends RootElement {
+    name?: string;
+    errorCode?: string;
+    structureRef?: ItemDefinition;
+  }
+
+  export interface CorrelationKey extends BaseElement {
+    correlationPropertyRef?: CorrelationProperty[];
+    name?: string;
+  }
+
+  export interface Expression extends BaseElement {
+    body?: string;
+  }
+
+  export interface FormalExpression extends Expression {
+    language?: string;
+    evaluatesToTypeRef?: ItemDefinition;
+  }
+
+  export interface Message extends RootElement {
+    language?: string;
+    itemRef?: ItemDefinition;
+  }
+
+  export interface ItemDefinition extends RootElement {
+    itemKind?: ItemKind;
+    structureRef?: string;
+    isCollection: boolean;
+    import?: Import;
+  }
+
+  export interface FlowElement extends BaseElement {
+    name?: string;
+    auditing?: Auditing;
+    monitoring?: Monitoring;
+    categoryValueRef?: CategoryValue[];
+  }
+
+  export interface SequenceFlow extends FlowElement {
+    conditionExpression?: Expression;
+    isImmediate?: boolean;
+    sourceRef?: FlowNode;
+    targetRef?: FlowNode;
+  }
+
+  export interface FlowElementsContainer extends BaseElement {
+    laneSets?: LaneSet[];
+    flowElements?: FlowElement[];
+  }
+
+  export interface CallableElement extends RootElement {
+    name?: string;
+    ioSpecification?: InputOutputSpecification;
+    supportedInterfaceRefs?: Interface[];
+    ioBinding?: InputOutputBinding[];
+  }
+
+  export interface FlowNode extends FlowElement {
+    incoming?: SequenceFlow[];
+    outgoing?: SequenceFlow[];
+    lanes?: Lane[];
+  }
+
+  export interface CorrelationPropertyRetrievalExpression extends BaseElement {
+    messagePath?: FormalExpression;
+    messageRef?: Message;
+  }
+
+  export interface CorrelationPropertyBinding extends BaseElement {
+    dataPath?: FormalExpression;
+    correlationPropertyRef?: CorrelationProperty;
+  }
+
+  export interface Resource extends RootElement {
+    name?: string;
+    resourceParameters?: ResourceParameter[];
+  }
+
+  export interface ResourceParameter extends RootElement {
+    name?: string;
+    isRequired?: boolean;
+    type?: ItemDefinition;
+  }
+
+  export interface CorrelationSubscription extends BaseElement {
+    correlationKeyRef?: CorrelationKey[];
+    correlationPropertyBinding?: CorrelationPropertyBinding[];
+  }
+
+  export interface MessageFlow extends BaseElement {
+    name?: string;
+    sourceRef?: InteractionNode;
+    targetRef?: InteractionNode;
+    messageRef?: Message;
+  }
+
+  export interface MessageFlowAssociation extends BaseElement {
+    innerMessageFlowRef?: MessageFlow;
+    outerMessageFlowRef?: MessageFlow;
+  }
+
+  export interface InteractionNode {
+    incomingConversationLinks?: ConversationLink[];
+    outgoingConversationLinks?: ConversationLink[];
+  }
+
+  export interface Participant extends BaseElement, InteractionNode {
+    name?: string;
+    interfaceRef?: Interface[];
+    participantMultiplicity?: ParticipantMultiplicity;
+    endPointRefs?: EndPoint[];
+    processRef?: Process;
+  }
+
+  export interface ParticipantAssociation extends BaseElement {
+    innerParticipantRef?: Participant;
+    outerParticipantRef?: Participant;
+  }
+
+  export interface ParticipantMultiplicity extends BaseElement {
+    minimum: number;
+    maximum: number;
+  }
+
+  export interface Collaboration extends RootElement {
+    name?: string;
+    isClosed?: boolean;
+    participants?: Participant[];
+    messageFlows?: MessageFlow[];
+    artifacts?: Artifact[];
+    conversations?: ConversationNode[];
+    conversationAssociations?: ConversationAssociation[];
+    participantAssociations?: ParticipantAssociation[];
+    messageFlowAssociations?: MessageFlowAssociation[];
+    correlationKeys?: CorrelationKey[];
+    choreographyRef?: Choreography[];
+    conversationLinks?: ConversationLink[];
+  }
+
+  export interface ChoreographyActivity extends FlowNode {
+    initiatingParticipantRef?: Participant;
+    participantRefs?: Participant[];
+    correlationKeys?: CorrelationKey[];
+    loopType: ChoreographyLoopType;
+  }
+
+  export interface CallChoreography extends ChoreographyActivity {
+    calledChoreographyRef?: Choreography;
+    participantAssociations?: ParticipantAssociation[];
+  }
+
+  export interface ChoreographyTask extends ChoreographyActivity {
+    messageFlowRef?: MessageFlow[];
+  }
+
+  export interface Choreography extends Collaboration, FlowElementsContainer {}
+
+  export interface GlobalChoreographyTask extends Choreography {
+    initiatingParticipantRef?: Participant;
+  }
+
+  export interface TextAnnotation extends Artifact {
+    text?: string;
+    textFormat?: string;
+  }
+
+  export interface Group extends Artifact {
+    categoryValueRef?: CategoryValue[];
+  }
+
+  export interface Association extends Artifact {
+    associationDirection?: AssociationDirection[];
+    sourceRef?: BaseElement[];
+    targetRef?: BaseElement[];
+  }
+
+  export interface Category extends RootElement {
+    categoryValue?: CategoryValue[];
+    name?: string;
+  }
+
+  export interface Artifact extends BaseElement {}
+
+  export interface CategoryValue extends BaseElement {
+    categorizedFlowElements?: FlowElement[];
+    value?: string;
+  }
+
+  export interface Activity extends FlowNode {
+    isForCompensation: boolean;
+    default?: SequenceFlow;
+    ioSpecification?: InputOutputSpecification;
+    boundaryEventRefs?: BoundaryEvent[];
+    properties?: Property[];
+    dataInputAssociations?: DataInputAssociation[];
+    dataOutputAssociations?: DataOutputAssociation[];
+    startQuantity: number;
+    resources?: ResourceRole[];
+    completionQuantity: number;
+    loopCharacteristics?: LoopCharacteristics;
+  }
+
+  export interface ServiceTask extends Task {
+    implementation?: string;
+    operationRef?: Operation;
+  }
+
+  export interface SubProcess extends Activity, FlowElementsContainer, InteractionNode {
+    triggeredByEvent: boolean;
+    artifacts?: Artifact[];
+  }
+
+  export interface LoopCharacteristics extends BaseElement {}
+
+  export interface MultiInstanceLoopCharacteristics extends LoopCharacteristics {
+    isSequential: boolean;
+    behavior?: MultiInstanceBehavior;
+    loopCardinality?: Expression;
+    loopDataInputRef?: ItemAwareElement;
+    loopDataOutputRef?: ItemAwareElement;
+    inputDataItem?: DataInput;
+    outputDataItem?: DataOutput;
+    complexBehaviorDefinition?: ComplexBehaviorDefinition;
+    completionCondition?: Expression;
+    oneBehaviorEventRef?: EventDefinition[];
+    noneBehaviorEventRef?: EventDefinition[];
+  }
+
+  export interface StandardLoopCharacteristics extends LoopCharacteristics {
+    testBefore: boolean;
+    loopCondition?: Expression;
+    loopMaximum?: number;
+  }
+
+  export interface CallActivity extends Activity, InteractionNode {
+    calledElement?: string;
+  }
+
+  export interface Task extends Activity, InteractionNode {}
+
+  export interface SendTask extends Task {
+    implementation?: string;
+    operationRef?: Operation;
+    messageRef?: Message;
+  }
+
+  export interface ReceiveTask extends Task {
+    implementation?: string;
+    instantiate: boolean;
+    operationRef?: Operation;
+    messageRef?: Message;
+  }
+
+  export interface ScriptTask extends Task {
+    scriptFormat?: string;
+    script?: string;
+  }
+
+  export interface BusinessRuleTask extends Task {
+    implementation?: string;
+  }
+
+  export interface AdHocSubProcess extends SubProcess {
+    completionCondition?: Expression;
+    ordering?: AdHocOrdering;
+    cancelRemainingInstances: boolean;
+  }
+
+  export interface Transaction extends SubProcess {
+    protocal?: string;
+    method?: string;
+  }
+
+  export interface GlobalScriptTask extends GlobalTask {
+    scriptLanguage?: string;
+    script?: string;
+  }
+
+  export interface GlobalBusinessRuleTask extends GlobalTask {
+    implementation?: string;
+  }
+
+  export interface CompletionCondition extends BaseElement {
+    condition?: FormalExpression;
+    event?: ImplicitThrowEvent;
+  }
+
+  export interface ResourceRole extends BaseElement {
+    name?: string;
+    resourceRef?: Resource;
+    resourceParameterBindings?: ResourceParameterBinding[];
+    resourceAssignmentExpression?: ResourceAssignmentExpression;
+  }
+
+  export interface ResourceParameterBinding extends BaseElement {
+    expression?: Expression;
+    parameterRef?: ResourceParameter;
+  }
+
+  export interface ResourceAssignmentExpression extends BaseElement {
+    expression?: Expression;
+  }
+
+  export interface Import {
+    importType?: string;
+    location?: string;
+    namespace?: string;
+  }
+
+  export interface Definitions extends BaseElement {
+    name?: string;
+    targetNamespace?: string;
+    expressionLanguage: string;
+    typeLanguage: string;
+    imports?: Import[];
+    extensions?: Extension[];
+    rootElements?: RootElement[];
+    diagrams?: any[]; // bpmndi:BPMNDiagram
+    exporters?: string;
+    relationships?: Relationship[];
+    exporterVersion?: string;
+  }
+
+  export interface InputOutputBinding {
+    inputDataRef?: InputSet;
+    outputDataRef?: OutputSet;
+    operationRef?: Operation;
+  }
+
+  export interface ComplexBehaviorDefinition extends BaseElement {
+    condition?: FormalExpression;
+    event?: ImplicitThrowEvent[];
+  }
+
+  export enum ProcessType {
+    None,
+    Public,
+    Private
+  }
+
+  export enum GatewayDirection {
+    Unspecified,
+    Convergent,
+    Diverging,
+    Mixed
+  }
+
+  export enum EventBasedGatewayType {
+    Parallel,
+    Exclusive
+  }
+
+  export enum RelationshipDirection {
+    None,
+    Forward,
+    Backward,
+    Both
+  }
+
+  export enum ItemKind {
+    Physical,
+    Information
+  }
+
+  export enum ChoreographyLoopType {
+    None,
+    Standard,
+    MultiInstanceSequential,
+    MultiInstanceParallel
+  }
+
+  export enum AssociationDirection {
+    None,
+    One,
+    Both
+  }
+
+  export enum MultiInstanceBehavior {
+    None,
+    One,
+    All,
+    Complex
+  }
+
+  export enum AdHocOrdering {
+    Parallel,
+    Sequential
+  }
+
+  // 默认导出
+  export default class BpmnModdle extends Moddle {
+    constructor(packages?: Package[], options?: object);
+
+    fromXML(xmlStr: string, typeName?: string | object, options?: object): Promise<ParseResult | ParseError>;
+
+    toXML(element: string, options?: object): Promise<SerializationResult | Error>;
+  }
+}
diff --git a/src/types/declares/camunda-bpmn-moddle.d.ts b/src/types/declares/camunda-bpmn-moddle.d.ts
new file mode 100644
index 0000000..4a838f4
--- /dev/null
+++ b/src/types/declares/camunda-bpmn-moddle.d.ts
@@ -0,0 +1,63 @@
+// 复制粘贴的行为校验
+declare module 'camunda-bpmn-moddle/lib/CopyPasteBehavior' {
+  import EventBus from 'diagram-js/lib/core/EventBus';
+  import { Element } from 'bpmn-js/lib/model/Types';
+
+  // 注册一个  moddleCopy.canCopyProperty  监听事件
+  export default class CopyPasteBehavior {
+    constructor(eventBus: EventBus);
+
+    /**
+     * 检查是否不允许复制属性
+     * @param property
+     * @param parent
+     */
+    canCopyProperty(property: object | string, parent: Element): boolean;
+
+    canHostInputOutput(parent: Element): boolean;
+
+    canHostConnector(parent: Element): boolean;
+
+    canHostIn(parent: Element): boolean;
+  }
+}
+//
+declare module 'camunda-bpmn-moddle/lib/CopyPasteRootElementBehavior' {
+  import Modeler from 'bpmn-js/lib/Modeler';
+  import EventBus from 'diagram-js/lib/core/EventBus';
+  import { Injector } from 'didi';
+  import ModdleCopy from 'bpmn-js/lib/features/copy-paste/ModdleCopy';
+  import BpmnFactory from 'bpmn-js/lib/features/modeling/BpmnFactory';
+
+  /**
+   * 添加引用的根元素 (bpmn: Error)，如果它们不存在。复制和粘贴中引用的根元素
+   * 内部继承 CommandInterceptor
+   * 注册 copyPaste.copyElement, copyPaste.pasteElement 事件
+   */
+  export default class CopyPasteRootElementBehavior {
+    constructor(bpmnjs: Modeler, eventBus: EventBus, injector: Injector, moddleCopy: ModdleCopy, bpmnFactory: BpmnFactory);
+  }
+}
+//
+declare module 'camunda-bpmn-moddle/lib/RemoveInitiatorBehaviour' {
+  import Modeling from 'bpmn-js/lib/features/modeling/Modeling.js';
+  import { Injector } from 'didi';
+
+  /**
+   * 移除 `camunda:initiator` 将startEvent移动到子进程或在子进程中创建时的属性
+   * 继承 CommandInterceptor
+   */
+  export default class RemoveInitiatorBehaviour {
+    constructor(modeling: Modeling, injector: Injector);
+  }
+}
+//
+declare module 'camunda-bpmn-moddle/lib/RemoveVariableEventBehaviour' {
+  import Modeling from 'bpmn-js/lib/features/modeling/Modeling.js';
+  import { Injector } from 'didi';
+  import BpmnFactory from 'bpmn-js/lib/features/modeling/BpmnFactory';
+  import ModdleCopy from 'bpmn-js/lib/features/copy-paste/ModdleCopy';
+  export default class RemoveVariableEventBehaviour {
+    constructor(modeling: Modeling, injector: Injector, bpmnFactory: BpmnFactory, moddleCopy: ModdleCopy);
+  }
+}
diff --git a/src/types/declares/diagram-js-direct-editing.d.ts b/src/types/declares/diagram-js-direct-editing.d.ts
new file mode 100644
index 0000000..0d1e887
--- /dev/null
+++ b/src/types/declares/diagram-js-direct-editing.d.ts
@@ -0,0 +1,122 @@
+//
+declare module 'diagram-js-direct-editing' {
+  import { ModuleDefinition } from 'didi';
+  const directEditingModule: ModuleDefinition;
+  export default directEditingModule;
+}
+//
+declare module 'diagram-js-direct-editing/lib/DirectEditing' {
+  import EventBus from 'diagram-js/lib/core/EventBus';
+  import Canvas from 'diagram-js/lib/core/Canvas';
+  import TextBox from 'diagram-js-direct-editing/lib/TextBox';
+
+  type DirectEditingProvider = {};
+
+  type ElementDescriptor = {};
+
+  export default class DirectEditing {
+    protected _textbox: TextBox;
+    protected _eventBus: EventBus;
+    protected _providers: DirectEditingProvider[];
+
+    constructor(eventBus: EventBus, canvas: Canvas);
+
+    registerProvider(provider: DirectEditingProvider): void;
+
+    isActive(): boolean;
+
+    /**
+     * 触发 directEditing. + event 事件
+     * @param event
+     * @param args
+     */
+    _fire(event: string, ...args: any[]): void;
+
+    /**
+     * 触发 directEditing.deactivate 事件
+     */
+    close(): void;
+
+    /**
+     * 触发 directEditing.complete 事件，并调用 close 关闭
+     */
+    complete(): void;
+
+    getValue(): string;
+
+    /**
+     * Activate direct editing on the given element
+     *
+     * @param {HTMLElement} element the descriptor for a shape or connection
+     * @return {Boolean} true if the activation was possible
+     */
+    activate(element: HTMLElement): boolean;
+  }
+}
+//
+declare module 'diagram-js-direct-editing/lib/TextBox' {
+  type TextBoxOptions = {
+    container: HTMLElement;
+    keyHandler: Function;
+    resizeHandler: Function;
+  };
+
+  type TextBoxBounds = {
+    x: number;
+    y: number;
+    width?: number;
+    height?: number;
+    maxWidth?: number;
+    minWidth?: number;
+    maxHeight?: number;
+    minHeight?: number;
+  };
+
+  type Style = {
+    fontSize?: number;
+    maxWidth?: number;
+    minWidth?: number;
+    maxHeight?: number;
+    minHeight?: number;
+  };
+
+  export default class TextBox {
+    protected container: HTMLElement;
+    protected parent: HTMLElement;
+    protected content: HTMLElement;
+    protected keyHandler: Function;
+    protected resizeHandler: Function;
+
+    constructor(options: TextBoxOptions);
+
+    // protected autoResize: Function
+    // protected handlePaste: Function
+
+    /**
+     * 创建具有给定位置、大小、样式和文本内容的文本框
+     * @param bounds {TextBoxBounds}
+     * @param style {Style | string}
+     * @param [value] {string | Object}
+     * @param [options] {Object}
+     */
+    create(bounds: TextBoxBounds, style: Style | string, value?: string | object, options?: object): HTMLElement;
+
+    handlePaste(e: Event): void;
+
+    insertText(text: string): void;
+
+    _insertTextIE(text: string): void;
+
+    autoResize(): void;
+
+    resizable(): void;
+
+    destroy(): void;
+
+    getValue(): string;
+
+    getSelection(): Range;
+
+    setSelection(container: HTMLElement | number, offset?: number): void;
+  }
+}
diff --git a/src/types/declares/moddle.d.ts b/src/types/declares/moddle.d.ts
new file mode 100644
index 0000000..c7096b4
--- /dev/null
+++ b/src/types/declares/moddle.d.ts
@@ -0,0 +1,260 @@
+/************************************** 核心 Moddle 声明 *****************************************/
+declare module 'moddle' {
+  type UriOrPrefix = {
+    uri?: string;
+    prefix?: string;
+  };
+
+  export class Element {
+    $instanceOf: typeof Moddle.prototype.hasType;
+
+    get(name: string): ReturnType<typeof Properties.prototype.get>;
+
+    set(name: string, value: any): ReturnType<typeof Properties.prototype.set>;
+  }
+
+  export class ModdleElement extends Element {
+    static $model: Moddle;
+    static $descriptor: Descriptor;
+    readonly $type: string;
+    $attrs: object | {};
+
+    [field: string]: any;
+
+    $parent: any;
+
+    constructor(attrs: object);
+
+    static hasType(element: ModdleElement, type?: string): boolean;
+  }
+
+  // Factory
+  export class Factory {
+    model: Moddle;
+    properties: Properties;
+
+    constructor(model: Moddle, properties: Properties);
+
+    createType(descriptor: Descriptor): ModdleElement;
+  }
+
+  export type BuiltinsKeys = 'String' | 'Boolean' | 'Integer' | 'Real' | 'Element';
+  export type TypeConverters = {
+    [T in Exclude<BuiltinsKeys, 'Element'>]: (s: string) => string | boolean | number;
+  };
+  /**
+   * Convert a type to its real representation
+   */
+  export type coerceType = <T extends Exclude<BuiltinsKeys, 'Element'>>(type: T, value: string) => ReturnType<TypeConverters[T]>;
+
+  /**
+   * Return whether the given type is built-in
+   */
+  export function isBuiltIn(type: BuiltinsKeys): boolean;
+
+  /**
+   * Return whether the given type is simple
+   */
+  export function isSimple(type: Exclude<BuiltinsKeys, 'Element'>): boolean;
+
+  type ParsedName = {
+    name: string;
+    prefix: string;
+    localName: string;
+  };
+
+  /**
+   * Parses a namespaced attribute name of the form (ns:)localName to an object,
+   * given a default prefix to assume in case no explicit namespace is given.
+   *
+   * @param {String} name
+   * @param {String} [defaultPrefix] the default prefix to take, if none is present.
+   *
+   * @return {ParsedName} the parsed name
+   */
+  export function parseName(name: string, defaultPrefix?: string): ParsedName;
+
+  // DescriptorBuilder
+  type Property = {
+    ns: ParsedName;
+    name: ParsedName['name'];
+    isId?: boolean;
+    isBody?: boolean;
+  };
+  type DescriptorType = {
+    name: string;
+    properties: Property[];
+    superClass?: string[];
+    extends?: string[];
+    meta?: object | {};
+  };
+  type Descriptor = {
+    ns: ParsedName;
+    name: ParsedName['name'];
+    allTypes: DescriptorType[];
+    allTypesByName: Record<string, DescriptorType[]>;
+    properties: Property[];
+    propertiesByName: Record<string, Property[]>;
+
+    bodyProperty?: Property;
+    idProperty?: Property;
+  };
+
+  export class DescriptorBuilder implements Descriptor {
+    ns: ParsedName;
+    name: ParsedName['name'];
+    allTypes: DescriptorType[];
+    allTypesByName: Record<string, DescriptorType[]>;
+    properties: Property[];
+    propertiesByName: Record<string, Property[]>;
+    bodyProperty?: Property;
+    idProperty?: Property;
+
+    constructor(nameNs: ParsedName);
+
+    build(): Descriptor;
+
+    addProperty(p: Property, idx?: number, validate?: boolean): void;
+
+    replaceProperty(oldProperty: Property, newProperty: Property, replace?: boolean): void | never;
+
+    redefineProperty(p: Property, targetPropertyName: `${string}#${string}`, replace?: boolean): void | never;
+
+    addNamedProperty(p: Property, validate?: boolean): void | never;
+
+    removeNamedProperty(p: Property): void;
+
+    setBodyProperty(p: Property, validate?: boolean): void | never;
+
+    setIdProperty(p: Property, validate?: boolean): void | never;
+
+    assertNotDefined(p: Property, name?: string): void | never;
+
+    hasProperty(name: string): Property | undefined;
+
+    addTrait(t: DescriptorType, inherited: boolean): void;
+  }
+
+  // Registry
+  export interface Package {
+    name: string;
+    prefix: string;
+    types: DescriptorType[];
+  }
+
+  export class Registry {
+    packageMap: Record<string, Package>;
+    typeMap: Record<string, DescriptorType>;
+    packages: Package[];
+    properties: Properties;
+
+    constructor(packages: Package[], properties: Properties);
+
+    getPackage(uriOrPrefix: UriOrPrefix): Package;
+
+    getPackages(): Package[];
+
+    registerPackage(pkg: Package): number;
+
+    /**
+     * Register a type from a specific package with us
+     * @param {DescriptorType} type
+     * @param {Package} pkg
+     */
+    registerType(type: DescriptorType, pkg: Package): void;
+
+    /**
+     * Traverse the type hierarchy from bottom to top,
+     * calling iterator with (type, inherited) for all elements in
+     * the inheritance chain.
+     *
+     * @param {Object} nsName
+     * @param {Function} iterator
+     * @param {Boolean} [trait=false]
+     */
+    mapTypes(nsName: object, iterator: Function, trait?: boolean);
+
+    /**
+     * Returns the effective descriptor for a type.
+     *
+     * @param  {String} name the namespaced name (ns:localName) of the type
+     *
+     * @return {Descriptor} the resulting effective descriptor
+     */
+    getEffectiveDescriptor(name: string): DescriptorBuilder;
+
+    definePackage(target: Descriptor, pkg: Package): void;
+  }
+
+  //Properties
+  export class Properties {
+    model: Moddle;
+
+    constructor(model: Moddle);
+
+    set(target: ModdleElement, name: string, value: any): void;
+
+    get(target: ModdleElement, name: string): any;
+
+    define(target: ModdleElement, name: string, options: PropertyDescriptor): void;
+
+    defineDescriptor(target: Omit<ModdleElement, '$descriptor'>, descriptor: Descriptor): void;
+
+    defineModel(target: Omit<ModdleElement, '$model'>, model: ModdleElement): void;
+  }
+
+  // Moddle
+  export class Moddle {
+    properties: Properties;
+    factory: Factory;
+    registry: Registry;
+    typeCache: Record<string, ModdleElement>;
+    /**
+     * Returns a registered package by uri or prefix
+     *
+     * @return {Object} the package
+     */
+    getPackage: typeof Registry.prototype.getPackage;
+    /**
+     * Returns a snapshot of all known packages
+     *
+     * @return {Object} the package
+     */
+    getPackages: typeof Registry.prototype.getPackages;
+
+    constructor(packages: Package[]);
+
+    create(type: Descriptor | string, attrs: any): ModdleElement;
+
+    getType(type: string | Descriptor): DescriptorBuilder;
+
+    createAny(name: string, nsUri: string, properties?: Properties): void;
+
+    /**
+     * Returns the descriptor for an element
+     */
+    getElementDescriptor(element: ModdleElement): Descriptor;
+
+    /**
+     * Returns true if the given descriptor or instance
+     * represents the given type.
+     *
+     * May be applied to this, if element is omitted.
+     */
+    hasType(element: ModdleElement | string, type?: string): boolean;
+
+    /**
+     * Returns the descriptor of an elements named property
+     */
+    getPropertyDescriptor(element: ModdleElement, property: Property): Descriptor;
+
+    /**
+     * Returns a mapped type's descriptor
+     */
+    getTypeDescriptor(type: string): Descriptor;
+  }
+
+  export type isBuiltInType = typeof isBuiltIn;
+  export type isSimpleType = typeof isSimple;
+  export type parseNameNS = typeof parseName;
+}
diff --git a/src/types/declares/object-refs.d.ts b/src/types/declares/object-refs.d.ts
new file mode 100644
index 0000000..1d5ed01
--- /dev/null
+++ b/src/types/declares/object-refs.d.ts
@@ -0,0 +1,58 @@
+declare module 'object-refs' {
+  // 要使用的属性描述符在  Refs 实例中指定属性
+  type AttributeDescriptor = {
+    name: string;
+    collection: boolean;
+    enumerable: boolean;
+    inverse?: AttributeDescriptor;
+  };
+  type RefsCollection = Array<object> & {
+    remove(element: unknown): unknown;
+    contains(element: unknown): boolean;
+    add(element: unknown, idx?: number): unknown;
+    __refs_collection: true;
+  };
+
+  /**
+   * @example
+   *
+   * var refs = Refs({ name: 'wheels', collection: true, enumerable: true }, { name: 'car' });
+   *
+   * var car = { name: 'toyota' };
+   * var wheels = [{ pos: 'front-left' }, { pos: 'front-right' }];
+   *
+   * refs.bind(car, 'wheels');
+   *
+   * car.wheels // []
+   * car.wheels.add(wheels[0]);
+   * car.wheels.add(wheels[1]);
+   *
+   * car.wheels // [{ pos: 'front-left' }, { pos: 'front-right' }]
+   *
+   * wheels[0].car // { name: 'toyota' };
+   * car.wheels.remove(wheels[0]);
+   *
+   * wheels[0].car // undefined
+   */
+  export class Refs {
+    private props: Record<string, AttributeDescriptor>;
+
+    constructor(a: AttributeDescriptor, b: AttributeDescriptor);
+
+    //将双向引用的一侧绑定到目标对象。
+    bind(target: object, property: string | AttributeDescriptor): void;
+
+    ensureRefsCollection(target: object, property: AttributeDescriptor): RefsCollection;
+
+    ensureBound(target: object, property: AttributeDescriptor): void;
+
+    unset(target, property, value): void;
+
+    set(target, property, value): void;
+  }
+
+  export type Collection = {
+    extend(collection: object[], refs: Refs, property: object, target: object): RefsCollection;
+    isExtended(collection: object[] | RefsCollection): boolean;
+  };
+}
diff --git a/src/types/editor/global.d.ts b/src/types/editor/global.d.ts
new file mode 100644
index 0000000..678fe18
--- /dev/null
+++ b/src/types/editor/global.d.ts
@@ -0,0 +1,15 @@
+import { MessageApiInjection } from 'naive-ui/lib/message/src/MessageProvider';
+import { ElementLike } from 'diagram-js/lib/core';
+
+declare global {
+  interface Window {
+    bpmnInstances: any;
+    __messageBox: MessageApiInjection;
+  }
+
+  type BpmnElement = ElementLike & { type: string };
+}
+
+declare interface Window {
+  bpmnInstances: any;
+}
diff --git a/src/types/editor/settings.d.ts b/src/types/editor/settings.d.ts
new file mode 100644
index 0000000..c380bc9
--- /dev/null
+++ b/src/types/editor/settings.d.ts
@@ -0,0 +1,33 @@
+import { ViewerOptions } from 'diagram-js/lib/model/Types';
+import { ModuleDeclaration } from 'didi';
+
+export interface EditorSettings {
+  processName: string;
+  procDefId: string;
+  processEngine: 'camunda';
+  paletteMode: 'default' | 'custom' | 'rewrite' | 'enhancement';
+  penalMode: 'default' | 'custom' | 'rewrite';
+  contextPadMode: 'default' | 'rewrite' | 'enhancement';
+  rendererMode: 'default' | 'rewrite' | 'enhancement';
+  bg: string;
+  toolbar: boolean;
+  miniMap: boolean;
+  contextmenu: boolean;
+  customContextmenu: boolean;
+  otherModule: boolean;
+  templateChooser: boolean;
+  useLint: boolean;
+  customTheme: Record<string, string | number>;
+}
+
+export type ModelerOptions<E extends Element> = ViewerOptions<E> & {
+  additionalModules: ModuleDeclaration[];
+  moddleExtensions: Object;
+};
+
+// bpmn.js 事件参数
+// 1. canvas 事件
+type CanvasEventParams = {
+  svg: SVGElement;
+  viewport: SVGElement;
+};
diff --git a/src/types/editor/utils.d.ts b/src/types/editor/utils.d.ts
new file mode 100644
index 0000000..0000dad
--- /dev/null
+++ b/src/types/editor/utils.d.ts
@@ -0,0 +1,23 @@
+declare module '@/utils/Logger' {
+  export class Logger {
+    constructor();
+
+    static print(type: string, text: any, back?: boolean): void;
+
+    static printBack(type: string, text: any): void;
+
+    static pretty(type: any, title: string, ...text: any[]): void;
+
+    static prettyPrimary(title: string, ...text: any[]): void;
+
+    static prettySuccess(title: string, ...text: any[]): void;
+
+    static prettyWarn(title: string, ...text: any[]): void;
+
+    static prettyError(title: string, ...text: any[]): void;
+
+    static prettyInfo(title: string, ...text: any[]): void;
+  }
+
+  export default Logger;
+}
diff --git a/src/views/index.vue b/src/views/index.vue
index 3f853a3..3cf5ac1 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -1,5 +1,7 @@
 <template>
   <div class="app-container home">
+    <bpmn-design></bpmn-design>
+    <el-button> 打开 </el-button>
     <el-row :gutter="20">
       <el-col :sm="24" :lg="12" style="padding-left: 20px">
         <h2>RuoYi-Vue-Plus多租户管理系统</h2>
diff --git a/vite.config.ts b/vite.config.ts
index 048b3b9..28342df 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -65,7 +65,13 @@ export default defineConfig(({ mode, command }: ConfigEnv): UserConfig => {
         'echarts',
         'vue-i18n',
         '@vueup/vue-quill',
+        'bpmn-js/lib/Modeler.js',
+        'bpmn-js-properties-panel',
+        'min-dash',
+        'bpmn-js/lib/features/palette/PaletteProvider',
+        'bpmn-js/lib/features/context-pad/ContextPadProvider',
 
+        'element-plus/es/components/button-group/style/css',
         'element-plus/es/components/radio-button/style/css',
         'element-plus/es/components/checkbox-group/style/css',
         'element-plus/es/components/form/style/css',