Graphviz Online
Type DOT code on the left and see the graph laid out live on the right, by the real Graphviz engine. Pick a layout, jump to the line of an error, and save SVG or PNG. No account and no upload.
Graphviz Viewer & DOT Viewer for VS Code and Cursor, free
A preview beside your .dot or .gv file and for dot blocks in Markdown. Click a node to jump to its line; errors show in the Problems panel.
Optional Zovo Pro, USD 19 once: PDF export, export all graphs and export on save.
PDF export, Export all graphs and Export on save are Zovo Pro tools in the Graphviz Viewer extension. See the Zovo Pro card below.
Open this in VS Code or Cursor
The same preview runs inside VS Code and Cursor beside your .dot or .gv file, and draws dot blocks in Markdown. Click a node to jump to its line; errors show in the Problems panel.
Free, MIT license. About Graphviz Viewer & DOT Viewer for VS Code.
Zovo Pro
PDF export, export all graphs and export on save. Zovo Pro, USD 19 once.
In the Graphviz Viewer extension, Zovo Pro saves a vector PDF of a graph (text stays text), exports every .dot and .gv file and every dot block in Markdown to SVG, PNG or PDF in one run, and keeps the images next to the source up to date each time you save. Each Pro tool works 3 times for free. One payment covers the Pro tools in 22 Zovo extensions. Everything that is free stays free.
After a card payment you get a key on the page. With GitHub Sponsors you sign in from the extension. Details on the Zovo Pro page.
Related tools
- Mermaid Diagram Editor & Viewer on the VS Code Marketplace (also on Open VSX). Live Mermaid preview beside the code, with PNG and SVG export.
- Graphviz Viewer & DOT Viewer. Live DOT preview beside the code in VS Code.
- Mermaid Diagram Viewer & Mermaid Editor. Live Mermaid preview in VS Code.
- SVG Preview & SVG Viewer. Previews SVG files with zoom and PNG export.
- Mermaid Editor Online, free in your browser.
- SVG to PNG Converter, free in your browser.
- DXF Viewer Online, free in your browser.
Questions
Is my graph uploaded anywhere?
No. Graphviz runs inside this tab as WebAssembly, in a background worker of the page that has no network functions. The page CSP sets connect-src to none. Your code is kept in this browser only (local storage), so it is still there when you come back.
Is it the real Graphviz?
Yes. The layout comes from Graphviz itself, compiled to WebAssembly by the viz.js project (version 3.31), so the result matches the dot command line tool. All six layouts are there: dot, neato, fdp, sfdp, circo and twopi. A layout= attribute in the file wins over the menu.
What happens with an error?
The preview keeps the last good graph, marks it as old, and lists the error with its line number. Click Go to line to jump there in the code. Warnings show without stopping the layout.
How do I save the graph?
Export SVG and Export PNG in the preview save the graph to your downloads; the PNG is drawn at the size you pick. Save .dot saves the code. Copy link packs the code after the # of the address, a part browsers never send to a server.
How big a graph can it lay out?
Graphs up to 4 MB of DOT code. A layout that runs longer than 15 seconds is stopped, and the page stays usable. For thousands of nodes, the sfdp layout is the fastest.
Does it work offline?
Yes. After the first visit the page keeps a copy of its own files, Graphviz included, so it works with no connection.
What is free and what is Zovo Pro?
Editing, the live preview, all layouts, error lines, zoom and SVG or PNG export of a graph are free here and in the VS Code extension. Vector PDF export, exporting all graphs of a workspace and export on save are Zovo Pro in the extension. One USD 19 payment covers the Pro tools in every Zovo extension.