@yanqirenshi/d3.bpmn

BPMN 2.0 のダイアグラムを SVG で描画する TypeScript ライブラリです。 BPMN XML を bpmn-moddle でパースし、 DI(Diagram Interchange)の座標情報(BPMNShape の bounds / BPMNEdge の waypoint)で そのまま描画します(レイアウト計算は行いません)。

yanqirenshi/BPMN.js リポジトリから移植したものです。

対応要素

• task(Task / Activity 系): 角丸矩形 + 中央ラベル
• event(StartEvent / EndEvent 等): 円 + 下ラベル
• gateway: ひし形 + 下ラベル
• container(Participant=Pool / Lane): 枠 + 回転ラベル(横向き時)
• その他: 破線矩形のフォールバック表示

構成(データ/描画の2系統)

• データクラス
  • BpmnModel — XML のパースと DI の正規化(bounds / waypoints / 種別分類 / エッジの source・target)、 および移動のデータ変換(moveShape)
• 描画クラス
  • D3Bpmn — エントリ React コンポーネント(SVG 100%、ホイールズーム/パン、背景グリッド、 グラブ&ドラッグでの要素移動)
  • Shapes / Edges — ペインタ(図形の種別描き分け / 矢印付き接続線)

ドラッグ移動

要素はマウスで移動できます。

• ノード(task / event / gateway)を動かすと、接続エッジの該当側の端点だけが追従します(経路は保持)
• Pool / Lane を動かすと、幾何的に内側にある図形がまとめて移動し、 両端とも内側のエッジは waypoint 全体が剛体移動します
• ドラッグ中はキャンバスのパンと競合しません(空き地ドラッグでパン)

使い方

import D3Bpmn from '@yanqirenshi/d3.bpmn';

<D3Bpmn
  xml={bpmnXmlString}
  onShapeClick={(shape) => console.log(shape)}   // 正規化済み BpmnShape
  grid={{ draw: true }}                          // 省略可(既定: 表示)
  transform={{ k: 1, x: 24, y: 24 }}             // ズーム初期値(省略可)
/>

パースだけ使うこともできます:

import { BpmnModel } from '@yanqirenshi/d3.bpmn';

const diagram = await new BpmnModel().build(xml);
// diagram.shapes: [{ id, type, kind, name, bounds, isHorizontal }]
// diagram.edges:  [{ id, name, waypoints }]

コマンド

npm run build     -w @yanqirenshi/d3.bpmn   # tsc で dist/ へビルド(d.ts 含む)
npm run typecheck -w @yanqirenshi/d3.bpmn
npm test          -w @yanqirenshi/d3.bpmn   # vitest(パース + 分類)