Graph Editor の使い方
Graph Editor は、辺リストや隣接行列を貼るだけでグラフ理論の図を描けるブラウザアプリです。このページでは入力形式から書き出しまでの流れを説明します。
グラフを読み込む
画面右上の「読み込み」からテキストを貼り付けるか、ファイルを開きます。形式は自動判定されますが、セレクトで明示することもできます。頂点番号が 0 始まりか 1 始まりかは自動で推定します。
| 形式 | 例（/ は改行） |
|---|---|
| N M 付き辺リスト | 4 4 / 1 2 / 2 3 / 2 4 / 3 4 |
| 辺の組リスト（ヘッダーなし） | 1 2 / 2 3 |
| 木の辺リスト（N のあと N−1 本） | 4 / 1 2 / 1 3 / 3 4 |
| 親配列 | 4 / 1 1 3 |
| 重み付き親配列 | 4 / 1 5 / 1 3 / 3 2 |
| 隣接リスト | 1: 2 3 / 2: 4 |
| 隣接行列 | 0 1 1 / 1 0 1 / 1 1 0 |
| Graph Editor JSON | { "version": 1, "nodes": [...], "edges": [...] } |
手で描く
- 頂点モード（N）で空いている場所をタップすると頂点を置けます。
- 辺モード（E）で始点、終点の順にクリックすると辺を結べます。
- 選択モード（V）で頂点をドラッグして移動、辺をドラッグして曲げられます。曲線はカーソルの位置を通ります。
- ダブルクリックでラベルや重みを編集、右クリックでメニューを開きます。
自動配置
「配置」パネルから木、DAG、二部グラフ、SCC、放射、円形、格子、直線、同心円、BFS 層、自動配置、重なり解消を選べます。グラフの構造に合わない配置は無効になります。「辺をずらして重なりを避ける」を有効にすると、多重辺を扇状に広げ、頂点の上を通る辺を曲げて避けます。
書き出し
- PNG 画像: 全体または表示範囲を、長辺サイズと余白を指定して保存・コピー。
- 辺リスト・隣接リスト・隣接行列: 競技プログラミングの入力形式として貼り付け可能。
- JSON: 位置、色、曲げまで含めて保存。読み込むと完全に復元されます。
キーボードショートカット
- V / N / E: 選択・頂点・辺モード
- Delete: 削除、⌘Z / ⌘⇧Z: 戻す・進む
- ⌘A: すべて選択、⌘C / ⌘X / ⌘V: コピー・切り取り・貼り付け
- Enter: ラベル編集、矢印キー: 選択を移動
- ⇧1: 全体表示、⌘0: 100% に戻す、L: 配置、,: 設定、?: ショートカット一覧
よくある質問
- データはどこに保存されますか？
- ブラウザのローカルストレージにだけ保存されます。サーバーには一切送信されません。別の端末で使う場合は JSON で書き出してください。
- 有向グラフや重み付きグラフは扱えますか？
- 設定パネルで有向／無向、重みあり／なし、0-indexed／1-indexed を切り替えられます。重み付き辺リストを貼ると自動で重みありになります。
- 大きなグラフは扱えますか？
- 読み込みは 1,000 頂点・5,000 辺までです。頂点回避などの自動ルーティングは計算量に上限があり、大きなグラフでは一部の辺が直線のままになります。
- スマートフォンでも使えますか？
- 使えます。2 本指でズーム、ドラッグで辺を曲げるなど、タッチ操作に対応しています。
- 無料ですか？
- 無料で、アカウント登録も不要です。ソースコードは GitHub で公開しています。