ノード同士を連結するインタフェースは色々な場面で使えます。ビジュアルプログラミングであったり、マインドマップのような思考整理、ノーコーディングプラットフォームでも使えるでしょう。 そうしたノードベースのビジュアルインタフェースを作る際に使えるのがReact Flowです。Reactで開発する際に便利でしょう。

React Flowの使い方

デモです。

点線の部分はアニメーションしています。

ノードはドラッグ&ドロップで動かせます。

背景色の変更をノードから行えます。

多くのノードを表示するデモ。

ノード型のUIを作ろうと思うと、表示の制御が大変なイメージがあります。しかしReact Flowを使えば、データ構造さえ与えることで細かな部分を気にせずによくなるでしょう。様々なシステムで使えそうです。

React FlowはTypeScript製のオープンソース・ソフトウェア(MIT License)です。

React Flow Examples wbkd/react-flow: React library for rendering interactive node-based graphs