LogicFlowは、フローチャートやBPMNなどのダイアグラムを作成するための強力なJavaScriptライブラリです。このガイドでは、基本的なセットアップから高度なカスタマイズまで、実践的な使い方を解説します。

基本セットアップ

1. モジュールのインポート

import LogicFlow from '@logicflow/core'
import { onMounted, ref } from 'vue'

2. コンテナの準備

<div ref="graphContainer" class="graph-container"></div>

3. インスタンスの生成と初期化

// コンテナとLogicFlowインスタンス用のrefを宣言
const graphContainer = ref()
const flowInstance = ref<LogicFlow>()

// マウント後にLogicFlowを初期化
onMounted(() => {
  flowInstance.value = new LogicFlow({
    container: graphContainer.value,
    grid: {
      visible: true,
      type: 'dot',
      size: 20
    },
    plugins: []
  })
  flowInstance.value.render({})
})

BPMNカスタムタスクの実装

1. 必要モジュールの読み込み

import { bpmnTaskDefinitions } from '@/data/flowDefinitions'
import { registerBPMNTaskNode } from '@/utils/nodeRegistration'

2. カスタムノードの登録

registerBPMNTaskNode(flowInstance.value)
// flowInstance.value.render({})

継承ベースのカスタムノード

1. 依存モジュールのインポート

import { customNodeRegistry } from '@/data/flowDefinitions'
import { registerExtendedNode } from '@/utils/nodeRegistration'

2. 拡張ノードの登録

registerExtendedNode(flowInstance.value)
// flowInstance.value.render({})

ドラッグ＆ドロップパネルの構築

1. 必要なリソースのインポート

import { dndPanelItems } from '@/data/flowDefinitions'
import { DndPanel } from '@logicflow/extension'

2. DnDプラグインの適用

LogicFlow初期化時にplugins配列にDndPanelを追加します。

// plugins: [DndPanel]
flowInstance.value.use(DndPanel)
flowInstance.value.extension.dndPanel.setPatterns(dndPanelItems)
// flowInstance.value.render({})

コンテキストメニューの実装

1. 基本モジュールのインポート

import { Menu } from '@logicflow/extension'
import { configureDefaultMenu } from '@/utils/menuSetup'

2. メニュープラグインの有効化

LogicFlow初期化時にplugins配列にMenuを追加します。

// plugins: [Menu]

デフォルトでは、以下のメニュー項目が提供されています：

• ノードメニュー：削除、複製、テキスト編集
• エッジメニュー：削除、テキスト編集
• グラフメニュー：なし

3. 事前定義メニューの適用

configureDefaultMenu(flowInstance.value)
// flowInstance.value.render({})

この設定により以下のメニューが有効になります：

• ノード：複製、削除
• エッジ：削除
• グラフ：全クリア、元に戻す、やり直し

4. 完全カスタムメニューの実装

メニュー項目ごとにコールバック関数が必要で、多くの場合flowInstanceへのアクセスが必要です。そのため、コンポーネント内で直接定義することを推奨します。

const customMenuConfig = {
  nodeMenu: [
    {
      text: 'カスタムアクション',
      callback(node) {
        // カスタム処理
      }
    }
  ]
}
flowInstance.value.extension.menu.setMenuConfig(customMenuConfig)
// flowInstance.value.render({})

5. メニュー項目の動的追加

既存のメニューに項目を追加する場合は、以下の方法を使用します。

const additionalMenuItems = {
  nodeMenu: [
    {
      text: '追加機能',
      callback(node) {
        // 追加処理
      }
    }
  ]
}
flowInstance.value.extension.menu.appendMenuConfig(additionalMenuItems)
// flowInstance.value.render({})