UtilityKit

500+ fast, free tools. Most run in your browser only; Image & PDF tools upload files to the backend when you run them.

Graphviz DOT Renderer

Render Graphviz DOT language graphs in-browser with WASM — supports dot, neato, circo, fdp, sfdp, and twopi engines.

About Graphviz DOT Renderer

Graphviz is the standard tool for automatic graph layout, taking DOT language descriptions and producing visual diagrams. This renderer runs the full Graphviz engine compiled to WebAssembly via @hpcc-js/wasm — no server, no installs, identical output to the native binary. Six engines are available: dot (hierarchical DAGs and pipelines), neato (spring-based undirected graphs), circo (ring topologies), fdp (force-directed), sfdp (scalable force-directed for large graphs), and twopi (radial trees). A split-pane view updates the SVG preview 500ms after you stop typing. Starter templates cover directed graphs, clustered subgraphs, trees, networks, and pipelines. The Download SVG button saves the exact rendered output.

Why use Graphviz DOT Renderer

Full Graphviz WASM engine — no server, no installs, identical output to the native graphviz binary.
Six layout engines cover directed graphs, undirected networks, radial trees, and ring topologies.
Instant SVG output scales to any print or screen size without pixelation.
Starter templates for the most common graph patterns mean you do not need to learn DOT from scratch.
Render benchmark timing shown after each layout so you can gauge performance for large graphs.
Full Graphviz WASM engine — no server, no installs, identical output to the native graphviz binary on Linux, macOS, or Windows.

How to use Graphviz DOT Renderer

Select a template from the dropdown or type DOT source in the left pane.
Choose a layout engine from the selector — try dot for pipelines, neato for undirected graphs, circo for rings.
The right pane renders the SVG automatically after a short pause while you type.
Click Download SVG to save the graph as a scalable SVG file.
Click Copy DOT to copy the source for use in other Graphviz tools or documentation.
Select a starter template from the dropdown to load a worked example, or type DOT source directly in the left pane.
Choose a layout engine from the engine selector — try dot for hierarchies and pipelines, neato or fdp for undirected networks, circo for ring topologies.

When to use Graphviz DOT Renderer

Visualizing software dependency graphs or module trees.
Documenting network topologies and infrastructure diagrams.
Exploring algorithm output or tree structures during development.
Creating pipeline or workflow diagrams for documentation.
Teaching or learning graph theory with immediate visual feedback.
Visualizing software dependency graphs, npm/Cargo module trees, or Bazel build dependencies.

Examples

Simple build pipeline (dot engine, LR)

Input: digraph G { rankdir=LR; Source -> Lint -> Test -> Build -> Deploy; Test -> Coverage; }

Output: Left-to-right SVG: Source → Lint → Test → Build → Deploy with a side branch from Test to Coverage.

Clustered architecture (cluster_ subgraphs)

Input: digraph G { subgraph cluster_web { label="Web Tier"; LB; Web1; Web2; } subgraph cluster_db { label="DB Tier"; Primary; Replica; } LB -> Web1; LB -> Web2; Web1 -> Primary; Web2 -> Primary; Primary -> Replica; }

Output: SVG with two labeled boxes: 'Web Tier' containing LB/Web1/Web2 and 'DB Tier' containing Primary/Replica, connected by directed arrows.

Ring topology (circo engine)

Input: graph ring { layout=circo; A -- B; B -- C; C -- D; D -- E; E -- A; }

Output: SVG showing a five-node ring: A-B-C-D-E-A laid out on a circle, suitable for token-ring or consensus-protocol diagrams.

Undirected social network (neato engine)

Input: graph friends { layout=neato; Alice -- Bob; Alice -- Carol; Bob -- Dan; Carol -- Dan; Dan -- Eve; Carol -- Eve; }

Output: Spring-laid SVG with six nodes positioned by force simulation, edges drawn as straight lines — Alice/Bob/Carol/Dan/Eve cluster naturally.

Tips

Set `rankdir=LR` inside your digraph to flip the layout from top-down to left-right — great for pipeline and timeline diagrams.
Use `subgraph cluster_NAME { label="Title" ... }` to group nodes into visible boxes with labels — the `cluster_` prefix is required for the box to render.
The `neato` engine respects `pos` attributes — you can pin node positions by adding `pos="x,y!"` to specific nodes (the trailing `!` makes the position fixed).
Add `node [shape=box, style=rounded]` at the top of a digraph to set sensible defaults for every node without repeating attributes per declaration.
Quote labels containing spaces or special characters: `A [label="Step 1: validate input"]`. Double-quotes are required for spaces, parentheses, and most punctuation.
If render time becomes uncomfortable with neato or fdp, try sfdp — it scales much better past ~500 nodes at the cost of slightly less compact layouts.

Frequently Asked Questions

What is DOT language?▾

DOT is a plain-text graph description language used by Graphviz. A directed graph starts with 'digraph G {' and uses '->' arrows. An undirected graph starts with 'graph G {' and uses '--' edges. Node and edge attributes like labels, colors, and shapes are set inside square brackets.

Which layout engine should I use?▾

'dot' is best for directed acyclic graphs, hierarchies, and pipelines — it creates clean top-to-bottom or left-to-right layouts. 'neato' and 'fdp' are best for undirected networks where spring physics determines positions. 'circo' works well for ring and cycle topologies. 'twopi' creates radial layouts from a center node.

Why does loading take a moment the first time?▾

The tool loads the Graphviz WASM binary (~2MB) on first use, which takes a few seconds depending on your connection speed. Subsequent renders in the same session are instant because the WASM module stays resident.

How do I add colors and styles to nodes and edges?▾

Set attributes inside square brackets on node or edge declarations. For example: A [color=red, style=filled, fillcolor="#1a1a2e"]. Edge colors: A -> B [color=blue, label="step 1"]. You can set defaults at the graph level with 'node [style=filled]' before the first node declaration.

Can I render large graphs with hundreds of nodes?▾

Graphviz WASM can handle large graphs, but layout time increases non-linearly. For very large graphs, 'sfdp' (scalable force-directed) is specifically designed to remain tractable at scale. Expect several seconds for graphs with 500+ nodes.

What is the difference between digraph and graph?▾

'digraph' creates a directed graph where edges have direction (arrows). 'graph' creates an undirected graph where edges are plain lines. Use '-->' and '->' only in digraphs; use '--' only in undirected graphs.

Explore the category

Glossary

DOT language: The plain-text graph description language used by Graphviz. Directed graphs use `digraph`, undirected graphs use `graph`. Node and edge attributes go in square brackets.
Layout engine: The Graphviz algorithm that computes node positions. Different engines optimize for different graph types: hierarchical (dot), spring-based (neato/fdp), radial (twopi), or ring (circo).
dot engine: The default hierarchical layout engine, ideal for directed acyclic graphs, dependency trees, and pipelines. Produces clean top-down or left-right layouts.
neato engine: A spring-based undirected layout engine that uses physical simulation to place nodes. Best for small to medium social networks and similar graphs.
circo engine: A circular layout engine that arranges nodes on a circle, useful for ring topologies, cycles, and small undirected graphs.
WebAssembly (WASM): A binary instruction format that lets high-performance native code (like the Graphviz C library) run in the browser at near-native speed.
SVG vs PNG render: SVG is vector and scales without pixelation, ideal for print and slides. PNG is rasterized at fixed pixel dimensions. Graphviz can output both; this tool defaults to SVG.
subgraph cluster: A subgraph whose name begins with `cluster_`. Graphviz draws a labeled box around the contained nodes — used for visually grouping related parts of a diagram.