ノードとエッジで表現されるネットワークグラフを描画できるReact + TypeScriptな環境で使えるライブラリをいくつか調べたのでそのまとめです。
まとめ
| ライブラリ名 | オススメ度 | まとめ記事 |
|---|---|---|
| Cytoscape.js | ◎ | ReactにCytoscape.jsでネットワークグラフを書いてみた |
| React Flow | ○ | ReactにReact Flowでネットワークグラフを書いてみた |
| Sigma.js | △ | Reactにsigma.jsでネットワークグラフを書いてみた |
| vis.js | × | TypeScript未対応で調査中止 |
調査した各ライブラリについては別途、動かして見たときの内容を記事にまとめたのでそちらも参照ください。
上記の中でvis.jsはreact-graph-visを入れてReact上で動かして見たのですが、TypeScriptに対応していないようで@typesがなく自分で型定義をしてあげる必要があったので途中で調査中止しました。
上記の中ではCytoscape.jsを使っておけば困らないのではないかと思います。React Flowは一部有料、Sigma.jsはスマホから試した時に一部touch eventの動作がうまく扱えないものがありました。ただ、React Flowはノードの形や内部に色々書き込めるような作りになっているなど、デザイン面の要件も合わせてどれを選択するかは変わってくるのかと思います。