Interactive Graphviz
A Visual Studio Code extension that previews Graphviz DOT files. Layout is done by Graphviz compiled to WebAssembly (@hpcc-js/wasm-graphviz), so you do not need a system dot binary.
The preview updates as you type. You can pan, zoom, search, and click a node to trace the edges connected to it.
Features
- Syntax highlighting, comments, brackets, and snippets for
.dot, .gv, and .graphviz
- Live preview beside the editor
- Layout engines:
dot, neato, fdp, sfdp, circo, twopi, osage, patchwork
- Pan, zoom, and fit
- Click a node to highlight upstream, downstream, or both directions
- Search nodes and jump between matches with Enter
- Double-click a node to select its definition in the source
- Syntax errors stay in the Problems panel and in the preview, and the last successful graph stays on screen
- Copy or save the rendered SVG
- Theme-colored defaults for graphs that do not set
bgcolor
Layout runs on a Node worker thread. A large graph does not freeze the editor, and only the latest edit is drawn.
Run it
Install dependencies, compile, and launch the extension host:
npm install
npm test
Open this folder in VS Code or Cursor and start the Run Extension launch configuration. It opens examples/flowchart.dot.
In a Graphviz file:
- Press Ctrl+Shift+V (Cmd+Shift+V on macOS), or
- Run Graphviz: Open Interactive Preview from the command palette, or
- Click the hierarchy icon in the editor title bar
Preview controls
| Control |
Action |
| Engine |
Switch the Graphviz layout engine |
| Trace |
Choose which connected nodes light up |
| Find |
Filter nodes. Enter and Shift+Enter cycle through matches |
| Drag |
Pan the canvas. The mouse wheel zooms toward the pointer |
| Fit, +, −, 0 |
Fit the graph, or zoom from the keyboard |
| Click |
Select a node or an edge. Escape clears the selection |
| Click a node id in the editor |
Zoom the preview to that node |
| Double-click |
Reveal that node in the DOT file. Double-click the background to fit |
| Copy / SVG |
Copy the SVG, or save it |
Settings
| Setting |
Default |
Purpose |
graphviz.engine |
dot |
Layout engine |
graphviz.trace |
bidirectional |
Highlight direction |
graphviz.adaptTheme |
true |
Recolor graphs that do not set bgcolor |
graphviz.debounceMs |
180 |
Wait after a keystroke before laying out again |
graphviz.adaptTheme inserts transparent background and theme colors only when the source does not already set bgcolor. A graph that chooses its own colors is rendered as written. The inserted defaults are placed on the same line as the opening {, so Graphviz error line numbers still match the source.
Requirements
The extension runs in the desktop extension host. It uses a Node worker to load the WebAssembly module, so it does not run in vscode.dev. After installation, previewing works offline.
License
The extension is MIT licensed. Graphviz itself is rendered through @hpcc-js/wasm-graphviz, which is Apache-2.0.
