Graphviz Viewer
Render Graphviz DOT language diagrams as SVG
Loading...
Render Graphviz DOT diagrams in your browser without installing anything
Graphviz DOT is the most portable way to describe a directed graph in text. Architecture diagrams, dependency graphs, finite state machines, build pipelines, and database schemas can all be expressed in a few lines of DOT and rendered consistently across platforms. This page renders DOT to SVG entirely in the browser using a WebAssembly build of Graphviz, so you can iterate quickly without a local installation, then export the diagram for documentation or slides.
- Type or paste DOT source describing your graph, including node and edge attributes.
- Pick the layout engine that matches your intent: `dot` for hierarchical, `neato` and `fdp` for force-directed, `circo` for circular, `twopi` for radial.
- Render and inspect. Iterate on attributes such as `rankdir`, `shape`, `style`, and `constraint` to control layout density and direction.
- Export the SVG and embed it in your documentation, README, or slide deck.
Graphviz is powerful because diagrams stay text-native
Graphviz is especially useful for workflows, dependencies, state transitions, architecture views, and data-flow sketches because the diagram source can live in version control. That means you can diff, review, and roll back diagrams the same way you treat code.
Choose among engines such as `dot`, `neato`, and `fdp` based on the graph structure, and use text-defined diagrams when version control and reproducible rendering matter.
How to keep diagrams maintainable
The biggest diagram failure mode is not ugly output. It is that no one wants to edit it later. Stable node names, smaller subgraphs, restrained styling, and small comments about business meaning go a long way toward keeping DOT files maintainable.
When a page teaches those habits, it becomes a documentation practice guide rather than just a renderer.
Best use cases
- Diagramming microservice dependencies, build pipelines, and data flows.
- Documenting state machines, parser grammars, and finite automata.
- Visualizing database schemas, foreign keys, and migration order.
Common mistakes to avoid
- Very large graphs become unreadable. Group nodes into clusters and split sub-graphs into multiple diagrams.
- Different layout engines interpret edge attributes differently. Test each engine before fixing on one.
- Embedded HTML labels can crash older Graphviz builds. Stick to plain labels for portability when possible.
How this tool works
- Implementation
- Graphviz compiled for the browser through @viz-js/viz WebAssembly
- Data path
- Input is processed in the current browser tab. Tool input is not submitted to a DevHelper Tools application server.
- Independent check
- Render the same DOT source with the Graphviz CLI and compare the selected layout engine and output structure.
Verify before production use
A successful conversion or generated snippet is not proof that it matches your runtime. Check the output against an independent implementation, test one known edge case, and record the environment or standard version you validated.
Related tools
Move directly into the next step instead of leaving the site to do adjacent work elsewhere.
Color Converter & Picker
Convert colors between HEX, RGB, HSL, HSV, and CMYK formats. Includes a color picker and shade preview.
SQL Formatter
Format and beautify SQL queries
Nginx Config Generator
Generate nginx configuration files by selecting options. Supports SSL, reverse proxy, caching, security headers, and more.
CSS Layout Sandbox
Prototype Grid and Flexbox layouts visually, tweak item spans, and export responsive HTML/CSS snippets.
FAQ
Is everything rendered locally?
Yes. The DOT source is compiled to SVG by a WebAssembly Graphviz build that runs in your browser. Nothing is uploaded.
Which output formats are available?
SVG primarily, since it scales cleanly. You can convert SVG to PNG or PDF using your operating system tools if you need a raster image.
How do I make the layout more compact?
Tune `nodesep`, `ranksep`, and `splines`. For dense graphs, also try the `fdp` or `neato` engines, which produce different shapes from the default `dot` engine.