# Graphviz DOT renderer — real engine in WASM, no upload

> Render Graphviz DOT graphs with the real Graphviz engine compiled to WebAssembly, fully in your browser. Export SVG, PNG, or PDF — nothing uploaded.

Render Graphviz DOT graphs with the actual Graphviz engine compiled to WebAssembly, running fully in your browser. Write DOT, preview live, and export SVG, PNG, or PDF — nothing is uploaded.

Graphviz is the tool of choice when a graph is big or the layout has to be precise — dependency graphs, state machines, network topologies. Running the genuine engine in WebAssembly gives you that power in the browser with no install and no server, and no source leaving your machine.

DOT's control — ranks, clusters, edge constraints, per-node styling — is what lets a hundred-node graph stay readable, which is where drag-and-drop tools fall apart.

For quick, common diagrams Mermaid is faster (see the Flowchart), and the Playground lets you switch between both engines in one place.

## How to

1. **Write DOT.** Enter your graph in Graphviz DOT syntax (digraph { A -> B }).
2. **Pick a layout.** Use rankdir and node styles to shape the graph.
3. **Render.** The WASM Graphviz engine draws it live.
4. **Export.** Download SVG, PNG, or PDF.

## FAQ

### Is this the real Graphviz engine?

Yes — it's Graphviz compiled to WebAssembly, so DOT graphs lay out exactly as they would with the desktop tool, but without installing anything.

### When should I use Graphviz over Mermaid?

Graphviz excels at large, densely connected graphs and fine layout control (rankdir, clusters, edge constraints). Mermaid is quicker for common diagram types.

### Can I use clusters and custom node styles?

Yes. Full DOT is supported — subgraph clusters, node shapes and colors, edge styles — so you can produce publication-quality graphs.

### Does my DOT source get uploaded?

No. Layout runs in the WebAssembly engine in your tab, so even a graph of internal infrastructure stays local.


## Related tools

- [Playground](https://www.safepaper.app/diagram/playground)
- [Flowchart](https://www.safepaper.app/diagram/flowchart)
- [State diagram](https://www.safepaper.app/diagram/state-diagram)
- [Class diagram](https://www.safepaper.app/diagram/class-diagram)

---

Canonical HTML: https://www.safepaper.app/diagram/graphviz
Markdown: https://www.safepaper.app/diagram/graphviz.md

There is no upload endpoint — your files are processed in this browser tab. Open your network tab and check.