@yanqirenshi/d3.dfd

データフロー図(DFD: Data Flow Diagram)を SVG で描画するライブラリです。 共通基盤(@yanqirenshi/assh0le の Colon / connector / compartment + StackedLayout)の上に、 データクラスと描画クラスの2系統で構成しています。

ノード種別(Gane-Sarson 風)

• process — 角丸矩形。番号ヘッダ + 名称(高さは StackedLayout が計算)
• external — 外部実体。灰色の矩形 + 名称
• datastore — データストア。右側の開いた矩形 + 番号コンパートメント + 名称

フローは矢印付きの線(共通 ConnectorLines)で、中点にラベルを表示します。

使い方

import D3Dfd, { Rectum } from '@yanqirenshi/d3.dfd';

const rectum = new Rectum({ transform: { k: 1.0, x: 0, y: 0 } });

rectum.data({
    nodes: [
        { id: 1, type: 'external',  name: '顧客', position: { x: 0, y: 100 } },
        { id: 2, type: 'process',   no: '1', name: '注文を受け付ける', position: { x: 240, y: 100 } },
        { id: 3, type: 'datastore', no: 'D1', name: '注文', position: { x: 520, y: 115 } },
    ],
    flows: [
        { id: 10, from: { node: 1, side: 'right' }, to: { node: 2, side: 'left' }, label: '注文' },
        { id: 11, from: { node: 2, side: 'right' }, to: { node: 3, side: 'left' }, label: '注文情報' },
    ],
});

<D3Dfd rectum={rectum} />

フローの端点は { node: <id>, side: 'top'|'right'|'bottom'|'left' }(ノード辺の中点)か、 生座標 { x, y } で指定します。

コマンド

npm run transpile -w @yanqirenshi/d3.dfd   # Babel で dist/ へビルド(dist はコミット対象)
npm test          -w @yanqirenshi/d3.dfd   # jest

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

• データクラス: Rectum(総括)・datamodels/Node(正規化・サイズ/レイアウト・アンカー)・datamodels/Flow(正規化・端点解決)
• 描画クラス: components/D3Dfd(React)・painters/Nodes(CompartmentBox 構成)・painters/Flows(ConnectorLines + ラベル)