AngularでReact Flow的なダイアグラムを作るには？

Tweet

フローチャートやノードベースのUIを作るライブラリといえば、Reactでは「React Flow」が非常に人気です。では、Angularで同じようなものを作りたい場合はどうすれば良いのでしょうか？

この記事では、AngularでReact Flow的なダイアグラムを実現するためのライブラリと、その特徴についてご紹介します。

※ そもそもReact Flowって？

React Flowは、Reactアプリケーション内でノードベースのUI（フローチャート、ノーコードエディタ、ワークフロー構築ツールなど）を作成できる強力なライブラリです。

• ノードの追加・接続・移動が可能
• カスタムノードやカスタムエッジが使える
• ズームやパン、保存/読み込みなどの便利な機能あり

Angularではこれと同等の体験を実現するには、別のライブラリを使う必要があります。

Angularで使えるダイアグラム系ライブラリ

1. Syncfusion Angular Diagram

Syncfusion Diagram は、エンタープライズ向けの高機能なダイアグラムコンポーネントです。

• ドラッグでノードを置くUI
• さまざまなデフォルトテンプレートが利用可
• データバインディングやイベントのフックにも対応
• 入力範囲の検出、継続編集、対話型UIの実装もサポート

商用ライセンスが必要ですが、無料で使えるコミュニティライセンスもあります。

2. ngx-graph

ngx-graph は、D3.jsを基盤としたAngular向けのグラフ描画ライブラリです。

• ノードとエッジを定義するだけで簡単にダイアグラムを描画
• レイアウトアルゴリズムが選べる
• ノードやリンクのカスタマイズも可

カスタムUIやシンプルなフローチャートならこれで十分に対応可能です。

3. GoJS + Angular

GoJS は高度にカスタマイズ可能なJavaScriptダイアグラムライブラリ。Angularとの統合も助言されています。

• 事務系ツールや統計解析に実績あり
• ドラッグで統合したUIも実装可能
• 表示のカスタマイズ性はピカイチ

問題は、商用ライセンスが必要な点です。

まとめ

React Flowに相当するようなUIはAngularでも実現可能です。

プロトタイプに合わせて選ぶと良いでしょう。

おすすめは、最初は ngx-graph を試してみること。
シンプルなデモならこれで十分ですし、必要なら後からSyncfusionとGoJSを検討すればオケです。