このページの読み込み方
<script type="module">
import 'https://cdn.jsdelivr.net/npm/@hidemikimura/canvas-flow/+esm';
</script>
<canvas-flow-editor minimap style="width:100%;height:600px"></canvas-flow-editor>
バージョンを固定するときは @hidemikimura/canvas-flow@0.8.0 のように指定します。npm 経由なら npm i @hidemikimura/canvas-flow lit のあと import '@hidemikimura/canvas-flow' です。
操作
ホイール: ズーム / Shift+ホイール: パン / Space+ドラッグ: パン /
ポートをドラッグ: コネクタ作成 / ダブルクリック: タイトル・項目の編集 /
Ctrl+D: 複製 / Ctrl+G: グループ化 /
Ctrl+Shift+G: グループ解除 / Delete: 削除 /
Shift+Delete: 選択範囲のコネクタだけ削除 /
Ctrl+Shift+A: 強調表示されている要素をまとめて選択 /
右クリック: 対象に応じたメニュー /
Ctrl+Z: Undo / 矢印キー: 微移動 /
コネクタにマウスを乗せると中央に削除アイコン
ツールバーからは検索・ズーム・Undo/Redo・複製・削除・整列・JSON の読み込み／書き出しが使えます。JSON ファイルをドロップしても読み込めます。
「強調」を選んでからノードをクリックすると、そのノードを通る道筋（祖先と子孫）だけがはっきり描かれ、ほかは薄くなります（このデモのグラフは 8 ノードごとのまとまりに分かれています）。点線の矢印は goto（コネクタを使わない ID 指定の遷移）で、そのノードを選んだときと強調表示で辿られたときだけ出ます。
左のパレットからノードをキャンバスへドラッグ&ドロップすると、その位置に追加されます（クリックすると画面中央に追加）。複数ノードのテンプレートは insertJSON(json, { client, anchor: 'origin' })、1 つのノードは addNodeAt(spec, { client, anchor: 'header' }) を呼んでいるだけで、パレット自体はこのページ側の実装です。
ラベル付きの枠はグループです。枠の空いているところやラベルをドラッグするとメンバーごと動き、ノードを枠の中へ置くとメンバーに、外へ出すと外れます。右下のつまみで大きさを変え、ラベルはダブルクリックで編集できます。選択したノードを Ctrl+G（または「グループ化」）で囲めます。
ノードの外に出ている色付きのバッジは note（メモ）です。ノードの大きさは変えずに、他のノードやバッジと重ならない位置へ自動で置かれます。マウスを乗せると全文が出て、ダブルクリックで編集、右クリックメニューからも追加・削除できます。