Graph Editor

Dragging, adding, or deleting on the canvas immediately rewrites the text box in whichever output format is selected above. Typing/pasting into the text box only takes effect once you click Apply text → canvas — it auto-detects algs4 vs. CS Academy markup (importing CS Academy markup also updates the Weighted/Directed toggles to match what it finds).

The Weighted/Directed toggles decide how a pasted algs4-format text is read back (2 vs. 3 numbers per edge line) and whether arrowheads are drawn — the underlying v w / v w weight text itself doesn't encode direction, exactly like the other pages: the same edge list works as input for an undirected page or a directed one.

Coordinates are drawn to scale — one unit is the same length horizontally and vertically, exactly as the animation pages will show them. Any coordinate scale works on import (CS Academy pixels, algs4's own 0…1 range, anything) — it's auto-centred and scaled to fit, preserving relative position and aspect ratio. Self-loops aren't supported by the canvas editor; parallel edges between the same pair are drawn as separate curved springs. Snap to grid rounds dragged/added positions to the nearest cell (size adjustable, shown as faint gridlines) — handy for tidy rows/columns; it has no effect while Spring preview is on, since dragging there only ever changes angle.

Mixed-format tolerant: in algs4 text, each edge occupies exactly one line. With Weighted on, a line missing its third number just defaults to weight 1; with it off, an extra third number is simply ignored — so pasting a graph doesn't need to match the toggle exactly, and the same edge list works whether you're feeding it to a weighted or unweighted page. Applying text also syncs the toggle to match what's actually there: if any edge line has a real weight, Weighted switches on (so that data isn't silently discarded); if none do, it switches off (so you don't end up with invented weight-1s on a graph that never had any).

Classroom workflow: build a graph here, name it under "Save as", click Download file, and move the downloaded .txt into a graphs/ folder next to these HTML pages on your webserver. Every page (including this editor's Load from graphs/ menu) will then offer it as an extra option alongside the built-in examples — either serve graphs/index.json (a JSON array of filenames, or {file, label} objects) as a manifest, or just enable directory listing on your static server (e.g. Python's python3 -m http.server does this by default) and skip the manifest entirely.