Graphviz Editor
Write DOT code and render Graphviz diagrams live in your browser. All 7 layout engines, syntax error lines, zoomable preview, SVG download and PNG export. Fully local with WebAssembly - nothing uploaded.
What is Graphviz and the DOT language?
Graphviz is a classic open-source graph visualization toolkit. DOT is its text language for describing nodes, edges and attributes, and Graphviz automatically computes a readable layout for it.
Does this editor need an internet connection to render?
Only for the initial one-time download of the layout engine. After that, rendering runs locally in your browser via WebAssembly, so your diagrams and code never leave your device.
Which layout engines are supported?
All seven: dot (hierarchical), neato and fdp (force-directed), circo (circular), twopi (radial), osage (cluster tree) and patchwork (treemap). Switch them from the Layout dropdown.
How do I see what a syntax error means?
When the DOT code has a problem, an error panel shows the engine message including the line number where parsing failed, and the last valid render stays visible.
Can I export the result?
Yes. Download the crisp vector SVG file, or export a 2x-resolution PNG raster with a background matching the current theme.
Is the preview zoomable for large graphs?
Yes. Scroll the mouse wheel over the preview or use the zoom buttons, drag to pan, and press Fit to reset the view.
Are there starter examples?
The Examples dropdown includes a flowchart, a state machine, an org chart, a neato network and a twopi radial tree — each loads ready-to-edit DOT code.
Is my DOT code uploaded or stored?
No. Nothing is sent to any server and nothing is persisted; the editor only reads what you type in the current page session.
How large a graph can it handle?
Graphs with a few hundred nodes render almost instantly. Very large graphs (thousands of nodes) still work but rendering takes correspondingly longer.
Does it match command-line Graphviz output?
It bundles the same Graphviz libraries (version 16), so layouts and SVG output are equivalent to running the dot command locally for the same input and options.
How to Use Graphviz Editor
This editor renders Graphviz diagrams directly in your browser. Write DOT code on the left and watch the SVG preview update as you type — powered by the real Graphviz libraries compiled to WebAssembly, so your graphs never leave your computer.
- Type or paste DOT code into the source editor. The preview renders automatically about 300 ms after you stop typing.
- Switch the layout engine (dot, neato, fdp, circo, twopi, osage, patchwork) to change how the graph is arranged.
- Load a starter template from the Examples dropdown — flowchart, state machine, org chart, network or radial tree — and edit it.
- Use the mouse wheel or zoom buttons to inspect large graphs, drag to pan, and press Fit to reset. Download the result as SVG or export a 2x PNG.
If a syntax error appears, the error panel shows the exact line where the DOT parser stopped — fix that line and the preview recovers instantly without losing your code.
Related Tools
- Mermaid Editor Create flowcharts, sequence diagrams, Gantt charts and more from text with the Mermaid live editor. Render, zoom and export SVG or PNG in your browser.
- Code Playground Online HTML, CSS and JavaScript playground with live preview, editor with line numbers and a captured console. Test snippets instantly and download the result as a single HTML file - fully in your browser.
- Chart Maker Create bar, line, area, pie and doughnut charts from pasted CSV or TSV data. Live preview, color palettes, titles and legend controls plus 2x PNG export - everything happens in your browser.
- File Hash Checker Calculate and verify MD5, SHA-1, SHA-256, SHA-512 file hashes locally
- Chmod Calculator Free online chmod calculator to visualize and calculate Linux file permissions with checkboxes. Instantly convert between numeric (755, 644) and symbolic notation (rwxr-xr-x). Supports special permissions like setuid, setgid, sticky bit.
- ASCII Table Complete ASCII character encoding reference with decimal, hexadecimal, octal, binary codes, HTML entities, and character descriptions. Search and filter instantly.
- Hex Viewer View file contents in hex dump format with search, offset navigation, and virtual scrolling
- MIME Type Lookup Instantly find MIME types by file extension or look up extensions by MIME type. Free online reference with 1000+ entries.