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.
A Graphviz page should therefore explain where DOT shines, how engines such as `dot`, `neato`, and `fdp` differ, and when text-defined diagrams are a better fit than drag-and-drop drawing tools.
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.
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.