LiveFlow — Phoenix LiveView向けインタラクティブフロービルダー

Library
LiveFlow — Phoenix LiveView向けインタラクティブフロービルダー

LiveFlow — Phoenix LiveView向けインタラクティブフロービルダー

LiveFlowは、Phoenix LiveView上で動作するノードベースのフローダイアグラムを構築するためのライブラリです。React FlowのようなビジュアルノードエディタやワークフロービルダーをLiveViewの世界に持ち込み、パン／ズーム、ノードドラッグ（グリッドスナップ・補助ガイド）、ハンドル接続のプレビューとバリデーション、ミニマップ風コントロールなどを提供します。クライアント側の軽いJSフックとLiveViewのリアクティブ性を組み合わせ、サーバー側での状態管理と双方向インタラクションを実現します。

https://github.com/rocket4ce/live_flow

概要

LiveFlowは、Phoenix LiveView環境で視覚的なノードエディタやワークフロービルダー、インタラクティブなダイアグラムを作れるライブラリです。React Flowのような機能をLiveView向けに再現し、パン＆ズーム、ノードのドラッグ（グリッドスナップや揃え補助線）、接続のライブプレビューとバリデーション、ミニマップ的な操作などを備えます。クライアント側は最小限のJavaScriptフックでイベントを捕捉し、サーバー側のLiveViewが状態を管理してUIを更新します。使いどころはフロービルダー、ワークフロー設計ツール、教育用インタラクティブ図などです。

GitHub

リポジトリの統計情報

  • スター数: 9
  • フォーク数: 0
  • ウォッチャー数: 9
  • コミット数: 24
  • ファイル数: 15
  • メインの言語: Elixir

主な特徴

  • パン＆ズーム（マウスホイールズーム、ドラッグでパン、fit-to-view、ミニマップ風コントロール）
  • ノードドラッグ（グリッドスナップ、揃え補助線によるアライメントガイド）
  • コネクション（ハンドルによる接続、ライブプレビューとバリデーション）
  • 選択や範囲選択、複数ノード操作に対応（READMEに示唆あり）

技術的なポイント

LiveFlowはPhoenix LiveViewの双方向更新モデルを活かしつつ、クライアント側の操作性を確保するために軽量なJavaScriptフック（phx-hook）を利用する設計になっていると推測できます。ポインターイベントやドラッグ、ズームといった頻繁に発生するUIイベントはクライアント側で捕捉し、必要に応じて最小限のイベント（位置確定、接続確定、選択状態など）をLiveViewへ送ることでネットワーク往復を抑え、遅延への耐性を高めるアプローチを取るのが一般的です。描画はSVGやHTML要素の変換（CSS transform）で行われ、エッジ（接続線）はベジェ曲線やパスでレンダリングされ、接続プレビューはローカルで計算して即時フィードバックを出します。グリッドスナップやアライメントガイドはクライアント側でスナップ計算を行い、確定操作でサーバーに反映するフローが自然です。カスタムノードの定義や接続ルールのバリデーションは、HEExコンポーネントとイベントハンドラで拡張でき、アプリ固有のノードタイプやルールを組み込みやすくなっています。大規模なグラフを扱う際はイベントのデバウンス、差分更新（phx-updateや局所レンダリング）の活用、クライアント側キャッシュなどでパフォーマンス確保が鍵になります。

プロジェクトの構成

主要なファイルとディレクトリ：

  • .formatter.exs: file
  • .gitignore: file
  • CHANGELOG.md: file
  • LICENSE.md: file
  • README.md: file

…他 10 ファイル

（期待される補足構成）

  • lib/: ライブラリ本体（LiveViewコンポーネントやヘルパー）
  • assets/ または js/: phx-hookやクライアントスクリプト
  • mix.exs: 依存関係とパッケージ設定
  • test/: テスト（存在する場合）

まとめ

Phoenix LiveView上でインタラクティブなノードエディタを実装したい場合の良い出発点となるライブラリです。

リポジトリ情報：

READMEの抜粋：

LiveFlow

Interactive node-based flow diagrams for Phoenix LiveView.

Build visual node editors, workflow builders, and interactive diagrams — similar to React Flow, but for Phoenix LiveView.

Features

  • Pan & Zoom — Mouse wheel zoom, drag-to-pan, fit-to-view, minimap-style controls
  • Node Drag — Drag nodes with grid snapping and helper lines (alignment guides)
  • Connections — Source/target handles with live connection preview and validation
  • **Selecti…