How to use Graph Editor
Graph Editor turns an edge list or adjacency matrix into a graph theory diagram in the browser. This page walks through the flow from input to export.
Loading a graph
Use “Load” in the top-right rail to paste text or open a file. The format is detected automatically, or pick it explicitly. Whether labels start at 0 or 1 is inferred.
| Format | Example (/ = new line) |
|---|---|
| Edge list with N M header | 4 4 / 1 2 / 2 3 / 2 4 / 3 4 |
| Edge pairs (no header) | 1 2 / 2 3 |
| Tree edge list (N, then N−1 edges) | 4 / 1 2 / 1 3 / 3 4 |
| Parent array | 4 / 1 1 3 |
| Weighted parent array | 4 / 1 5 / 1 3 / 3 2 |
| Adjacency list | 1: 2 3 / 2: 4 |
| Adjacency matrix | 0 1 1 / 1 0 1 / 1 1 0 |
| Graph Editor JSON | { "version": 1, "nodes": [...], "edges": [...] } |
Drawing by hand
- In node mode (N), tap an empty spot to place a node.
- In edge mode (E), click the source and then the target to connect them.
- In select mode (V), drag nodes to move them and drag an edge to bend it; the curve passes through the cursor.
- Double-click to edit a label or weight; right-click for the menu.
Automatic layouts
The Layouts panel offers tree, DAG, bipartite, SCC, radial, circle, grid, line, concentric, BFS layers, auto (force), and overlap resolution. Layouts that do not fit the graph’s structure are disabled. “Offset edges to avoid overlaps” fans out parallel edges and bends edges that would cross nodes.
Exporting
- PNG: the whole graph or the current view, with a chosen long edge and padding; save or copy.
- Edge list, adjacency list, adjacency matrix: paste straight into competitive programming input.
- JSON: keeps positions, colours, and bends; importing restores the graph exactly.
Keyboard shortcuts
- V / N / E: select, node, and edge modes
- Delete: remove; ⌘Z / ⌘⇧Z: undo and redo
- ⌘A: select all; ⌘C / ⌘X / ⌘V: copy, cut, paste
- Enter: edit label; arrow keys: nudge the selection
- ⇧1: fit to view; ⌘0: reset zoom; L: layouts; ,: settings; ?: shortcut list
Frequently asked questions
- Where is my data stored?
- Only in your browser’s local storage. Nothing is sent to a server. To move a graph between devices, export it as JSON.
- Does it support directed or weighted graphs?
- Yes. The Settings panel switches directed/undirected, weighted/unweighted, and 0-/1-indexed labels. Pasting a weighted edge list switches weights on automatically.
- How large can a graph be?
- Import accepts up to 1,000 nodes and 5,000 edges. Automatic routing has a work budget, so on very large graphs some edges stay straight.
- Does it work on phones?
- Yes. Pinch to zoom, drag edges to bend them, and every control meets touch target sizes.
- Is it free?
- Free, no account needed. The source code is on GitHub.