お仕事で図形をグリグリできる操作できるアプリケーション作りたくなり、ライブラリを利用して楽に開発したいので、本記事では巷に溢れる図形ライブラリ試して比較してみようと思います。
ライブラリ選定
それなりに使われていそうな下記5ライブラリを比較します。
有料なものは手を出しづらいので無料を使えるものを選定しました。
主な用途: グラフ理論に基づくネットワーク可視化に特化。特に大規模なネットワークやグラフデータの効率的な描画と操作に対応している。
ライセンス: MIT
特徴: パフォーマンス重視、大規模データ対応
主な用途: 要素間の接続を視覚的に表現するためのライブラリで、フローチャート、ダイアグラム、ワークフローエディタなどの作成に使用される。
ライセンス: MIT (Community Edition 機能制限版が無料で使用できる）
特徴: 接続機能に特化、直感的な操作
主な用途: 生物学的ネットワーク分析から発展した汎用グラフ可視化ライブラリ。複雑なネットワーク分析、グラフアルゴリズムの実装、および高度なインタラクティブ操作に対応している。
ライセンス: MIT
特徴: 高度な分析機能、豊富なアルゴリズム
主な用途: ダイアグラムエディタ、フローチャート、UML図などの作成に特化したライブラリです。Drawioの基盤技術として使用される。
ライセンス: Apache License 2.0
特徴: プロフェッショナル向け、豊富な図形
主な用途: データ駆動型の文書操作とデータ可視化のための非常に柔軟で強力なライブラリ。複雑なカスタム可視化、インタラクティブなチャート、マップなど幅広い用途に対応。
ライセンス: ISC (BSDライセンスと同等らしい)
特徴: 自由度が高い、カスタマイズ性が高い
実践！
各ライブラリについて、実際に使ってみました。
本記事ではJavaScriptを使ってるんですが、僕が作りたいのでデスクトップアプリケーションだったのでElectronを使用してデスクトップアプリ化しています。
(一般的に使用されている図形ライブラリがほぼJavaScriptしかありませんでした 😭 )
本記事👉図形をグリグリ動かせる！無料JS図形ライブラリ5選比較してみた
図形をグリグリ動かすためのSigma.js+ Electron入門
図形をグリグリ動かすためのJSPlumb+ Electron入門
図形をグリグリ動かすためのCytoscape+ Electron入門
図形をグリグリ動かすためのmxGraph+ Electron入門
図形をグリグリ動かすためのD3.js+ Electron入門
(長くなっちゃったので記事分けています)
各ライブラリの比較
以下の4観点で6点満点の恣意的に評価しました。
機能性・汎用性: ライブラリが提供する機能の幅広さと様々なユースケースへの適応性
学習の容易さ: 初心者が習得するための時間と労力
ソースコードの簡潔さ: コードの可読性と実装のシンプルさ
カスタマイズ性: 独自の要件に合わせて拡張・修正できる柔軟性
| ライブラリ名 | 機能性・汎用性 | 学習の容易さ | ソースコードの簡潔さ | カスタマイズ性 | 合計 | 主な用途 |
|---|---|---|---|---|---|---|
| Sigma.js | 4 | 5 | 5 | 3 | 17 | 大規模ネットワーク可視化 |
| JSPlumb | 4 | 4 | 3 | 4 | 15 | フローチャート・ダイアグラム |
| Cytoscape | 5 | 3 | 4 | 5 | 17 | 複雑なネットワーク分析 |
| mxGraph | 5 | 2 | 3 | 6 | 16 | ダイアグラムエディタ |
| D3.js | 6 | 2 | 2 | 6 | 16 | 汎用データ可視化 |
D3やmxGraphは汎用性が高いものの、ソースコードの行数が多くなったり、覚えることが多かったりする。
一方、SigmaやjsPlumbは比較的学習が容易なものの機能、用途が限定的といったところでしょうか。
万能！といったライブラリはなさそうで、自分が今後作るアプリケーションが限定的で機能が合致する場合は、学習コストが低めなライブラリから触ってみて色々できるようになりたい！って場合は多機能なD3あたりを。
各観点で比較してみたものの、総合的にみるとどれも一長一短といった感じなので、どの観点が一番重要かを明確にして選ぶことが良さそうですね。
終わりに
グリグリ図形を動かすアプリケーションを作るために、一般に使われていそうな図形ライブラリを試して比較してみました。
僕はCytoscapeをから触ってみて、もう少し色々やりたくなったらD3に本格的に手を出してみようと思います。