bpmn-vue-tempは、Vue 3およびbpmn.jsを基盤としたコンポーネントライブラリです。このライブラリを活用することで、ワークフロー図の描画および解析機能をWebアプリケーションに容易に実装できます。

インストール手順

プロジェクトにパッケージを追加します。

npm install bpmn-vue-temp --save

グローバル登録

アプリケーション全体でコンポーネントを利用可能にするため、エントリポイントで登録を行います。スタイルシートの読み込みも忘れずに行ってください。

import { createApp } from 'vue';
import App from './App.vue';
import BpmnVuePlugin from 'bpmn-vue-temp';
import 'bpmn-vue-temp/lib/style.css';

const app = createApp(App);
app.use(BpmnVuePlugin);
app.mount('#app');

コンポーネントの実装例

1. 基本的な使用方法

テンプレート内にコンポーネントを配置し、refを使用してインスタンスを操作します。

import { ref } from 'vue';
import { BpmnVue } from 'bpmn-vue-temp';

const designerRef = ref(null);

const handleElementSelection = (eventData) => {
  // eventDataには businessObject (業務オブジェクト) と shapeType (形状タイプ) が含まれます
  console.log('選択された要素:', eventData);
};

テンプレート側の記述は以下の通りです。

<template>
  <div class="canvas-container">
    <BpmnVue
      canvas-id="workflow-editor"
      ref="designerRef"
      @select:element="handleElementSelection"
    />
  </div>
</template>

2. カスタムフックを使用した実装

より柔軟な制御が必要な場合は、useBpmnフックを用いて手動で初期化することも可能です。

import { onMounted } from 'vue';
import { useBpmn } from 'bpmn-vue-temp';

const bpmnCore = useBpmn();

onMounted(() => {
  bpmnCore.initModeler({
    container: '#bpmn-canvas',
    additionalModules: {},
    moddleExtensions: {}
  });
});

コンポーネントのプロパティ

• canvasId: キャンバスのDOM要素ID。
• readonly: 読み取り専用モードの有効化。
• options: モジュールや拡張機能のカスタム設定オブジェクト。
• operations: ツールバー操作のカスタム配列。{ label, icon, action }の形式で指定します。デフォルトではXMLインポート/エクスポート、SVGエクスポート、ズーム等が含まれます。

提供されるAPIメソッド

コンポーネントのrefまたはフックを通じて、以下のAPIを利用できます。

// モデラーの初期化
initModeler(options);

// キャンバス上の全ノードを取得
getAllShapes();

// IDを指定してノードオブジェクトを取得
findShapeById(id);

// XMLデータの取得
retrieveXML();

// 要素のプロパティ更新
applyPropertyUpdate(targetElement, newProperties);

// 使用例: 条件式の更新
function updateCondition() {
    const moddleService = bpmnCore.getModdle();
    const expression = moddleService.create('bpmn:FormalExpression', {
      body: '新しい条件式',
    });
    
    const activeNode = bpmnCore.getActiveElement();
    bpmnCore.applyPropertyUpdate(activeNode.element, {
      conditionExpression: expression,
    });
}

// XML文字列から図を復元
loadDiagramXML(xmlString);

// XMLファイルとしてエクスポート
downloadXML();

// SVG画像としてエクスポート
downloadSVG();

// キャンバスのリセット
resetDiagram();