Foblex/f-flow

何を解決するか

Foblex Flow は Angular 向けのノードエディターライブラリであり、本番環境向けのワークフロービルダー、AIパイプライン、インタラクティブな図表を構築する際の複雑な UI/UX の課題を処理します。独自のドラッグアンドドロップロジック、接続パス、キャンバスナビゲーションをゼロから構築する必要がなくなります。

動作方法

このライブラリは f-flow、f-canvas、f-connection などの Angular ネイティブなビルディングブロックを提供します。開発者は以下の2つの状態管理モードから選択できます：

• クラシックモード：アプリケーションがグラフレコードを所有し、インタラクションイベントを通じて検証と更新を処理します。
• マネージドモード：withFlowState() を使用して、スナップショット、元に戻す/やり直す、自動ジェスチャー適用を内蔵した型安全なレコードを提供します。

大規模なシーン向けにノード仮想化やレンダリングキャッシュなどのオプションのスケーリングツールを備え、Dagre や ELK などのレイアウトエンジンと統合可能です。

対象ユーザー

低コードAIツール、コールフロー編集器、UML図、その他のノードベースの社内または顧客向けインターフェースを構築している Angular 開発者およびチーム。

主な特徴

• Angular 最優先 API：他のフレームワークの状態モデルをラップするのではなく、Angular 向けに特別に設計されています。
• 本番環境対応機能：ズーム、パン、ミニマップ、スナップ、整列ガイド、マルチセレクトを標準搭載。
• AIエージェント最適化：AI.md と llms.txt を同梱し、AIコーディングエージェントがライブラリの特定APIを正確に使用してコードを生成できるように支援します。
• アクセシビリティ：組み込みの ARIA 意味付けと、空間ナビゲーションおよび接続作成用のオプションのキーボードレイヤーを備えています。
• カスタマイズ可能：CSSトークンと SCSSミックスインでテーマ化可能な完全なテンプレート化されたノードと接続を提供。