bpmn.js+vue

### 集成 bpmn.js 到 Vue 项目

为了在 Vue 项目中集成 bpmn.js 并实现流程图编辑功能，可以遵循如下方法：

#### 安装依赖库

首先，在 Vue 项目环境中安装 `bpmn-js` 库。通过 npm 或 yarn 来完成此操作。

npm install bpmn-js --save

或者使用 yarn:

yarn add bpmn-js

这一步骤确保了开发环境中有必要的包来支持 bpmn.js 的运行[^1]。

#### 创建 Bpmn 组件

创建一个新的 Vue 单文件组件用于封装 bpmn.js 实例化逻辑。下面是一个简单的例子展示如何设置这个组件：

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

<script>
import BpmnJS from 'bpmn-js/lib/Modeler';

export default {
  name: "BpmnEditor",
  data() {
    return {
      bpmnjs: null,
    };
  },
  mounted() {
    this.bpmnjs = new BpmnJS({
      container: this.$refs.canvas,
      width: '100%',
      height: '600px'
    });

    const diagramXML = `
      <?xml version="1.0" encoding="UTF-8"?>
      <definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL">
        <!-- Your BPMN XML here -->
      </definitions>`;

    this.bpmnjs.importXML(diagramXML, (err) => {
      if (err) {
        console.error('Error rendering', err);
      } else {
        console.log('rendered');
      }
    });
  }
};
</script>

<style scoped>
/* 自定义样式 */
</style>

这段代码展示了怎样初始化一个基本的 bpmn 模型器实例并加载默认的空图表结构。

#### 修改 Viewer 样式

如果希望调整 viewer 显示效果，比如隐藏链接标记，则可以在 node_modules 下找到对应的 BaseViewer 文件修改 linkMarkup 属性中的 visibility 设置为 hidden[^2]。

需要注意的是直接修改 node_module 内的内容不是最佳实践；更推荐的方式是利用自定义主题覆盖原有样式或通过插件机制扩展功能。