このページの読み込み方
<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.5.0 のように指定します。npm 経由なら npm i @hidemikimura/canvas-flow lit のあと import '@hidemikimura/canvas-flow' です。
操作
ホイール: ズーム / Shift+ホイール: パン / Space+ドラッグ: パン /
ポートをドラッグ: コネクタ作成 / ダブルクリック: タイトル・項目の編集 /
Ctrl+D: 複製 / Delete: 削除 /
Shift+Delete: 選択範囲のコネクタだけ削除 /
Ctrl+Shift+A: 強調表示されている要素をまとめて選択 /
右クリック: 対象に応じたメニュー /
Ctrl+Z: Undo / 矢印キー: 微移動 /
コネクタにマウスを乗せると中央に削除アイコン
ツールバーからは検索・ズーム・Undo/Redo・複製・削除・整列・JSON の読み込み／書き出しが使えます。JSON ファイルをドロップしても読み込めます。
「強調」を選んでからノードをクリックすると、そのノードを通る道筋（祖先と子孫）だけがはっきり描かれ、ほかは薄くなります（このデモのグラフは 8 ノードごとのまとまりに分かれています）。点線の矢印は goto（コネクタを使わない ID 指定の遷移）で、そのノードを選んだときと強調表示で辿られたときだけ出ます。