Graphviz

Graphviz Visual Editor is a browser-based, interactive editor for graphs described in the format:dot language, developed by Magnus Jacobsson (GitHub user "magjac") and hosted at magjac.com/graphviz-visual-editor. It provides a two-pane workflow: a context-sensitive text editor for the DOT source (built on the Ace editor via react-ace) alongside a live SVG rendering of the graph. Edits made in either pane propagate to the other — typing DOT updates the drawing, and manipulating the drawing rewrites the DOT source — with animated transitions between graph states. The application is a React single-page app (Create React App, Material-UI); DOT text is parsed into an abstract syntax tree by a PEG.js/Peggy grammar and managed by an internal DotGraph model.

Rendering is done client-side by tool:graphviz itself, compiled to WebAssembly and driven through the d3-graphviz library (which builds on D3.js selections, transitions, and zoom). This means the tool executes the real Graphviz layout engines in the browser rather than approximating them, and it exposes the standard engine choice (dot, neato, fdp, circo, twopi, osage, patchwork). Beyond passive rendering it supports genuine visual authoring: inserting node shapes by click or drag-and-drop, setting default node style/color/fillcolor, drawing edges between nodes, selecting nodes and edges (individually or by area drag) with the selection mirrored in the text editor, deleting selections, and cut/copy/paste of nodes.

Practical conveniences include pan and zoom, fit-to-view, automatic persistence of the DOT source and application state to browser local storage across reloads, export of the graph as an SVG file, and encoding the entire graph into a shareable URL (with a matching import). Within the graph-data and format-conversion landscape it occupies the authoring end rather than the conversion end: it neither imports nor exports other graph formats, so pairing it with a converter such as tool:graph-easy, tool:dot2graphml, or tool:graphinout is necessary to move DOT graphs into or out of interchange formats like format:graphml or format:gml.

It is closest in spirit to non-editing viewers such as tool:graphviz-online, and to WYSIWYG diagram editors like tool:yed or tool:qvge, but is distinguished by keeping DOT as the canonical source of truth. Honest limitations: it targets small-to-medium hand-authored graphs, visual editing covers a subset of DOT's full attribute set (complex records, HTML-like labels, subgraphs, and clusters are edited mainly as text), it has no server-side storage or collaboration, and it is officially verified only on recent Firefox and Chrome.