Graphviz

13 June 202612 min read

Graph Visualization Software — describes graphs declaratively in the DOT language; renders them as images (PNG, SVG, PDF, PostScript, etc.), diagrams, and maps.

Widely used for dependency graphs, state machines, network diagrams, flowcharts, UML diagrams, ER models, and more.

Overview

Graphviz works by taking a DOT file (a text description of nodes, edges, and attributes) and running it through a layout engine that computes positions and then renders the result to an output format.

.dot file → layout engine → rendered output

The typical workflow:

bash

# Write graph.dot, then render it

dot graph.dot -Tpng -o graph.png

neato graph.dot -Tsvg -o graph.svg

Key Components

• DOT Language — Declarative language for defining graphs

• Layout Engines — Algorithms that compute node/edge positions

• Output Formats — PNG, SVG, PDF, PostScript, JSON (xdot), image maps, etc.

• Libraries — C library for embedding Graphviz in applications

The DOT Language

Grammar

graph : [ strict ] (graph | digraph) [ ID ] '{' stmt_list '}'

stmt_list : [ stmt [ ';' ] stmt_list ]

stmt : node_stmt | edge_stmt | attr_stmt | ID '=' ID | subgraph

attr_stmt : (graph | node | edge) attr_list

attr_list : '[' [ a_list ] ']' [ attr_list ]

a_list : ID '=' ID [ (';' | ',') ] [ a_list ]

edge_stmt : (node_id | subgraph) edgeRHS [ attr_list ]

edgeRHS : edgeop (node_id | subgraph) [ edgeRHS ]

node_stmt : node_id [ attr_list ]

node_id : ID [ port ]

port : ':' ID [ ':' compass_pt ] | ':' compass_pt

subgraph : [ subgraph [ ID ] ] '{' stmt_list '}'

compass_pt : n | ne | e | se | s | sw | w | nw | c | _

Basic Syntax

dot

// Undirected graph (uses --)

graph MyGraph {

A -- B -- C;

A -- C;

}

// Directed graph (uses ->)

digraph MyGraph {

A -> B -> C;

A -> D;

D -> C [label="optional" style=dashed];

}

IDs

An ID is one of:

• Unquoted: Alphanumeric + underscore, not starting with a digit: node1, my_node, ABC

• Quoted: Double-quoted string: "node 1", "Hello World"

• Numeric: Any number: 123, -3.14, .5

• HTML-like: <...> containing legal XML

dot

digraph {

node1; // Unquoted

"node 1"; // Quoted (allows spaces)

123; // Numeric

<p>Hello</p>; // HTML-like

}

Keywords

Keyword	Purpose
`graph`	Start undirected graph
`digraph`	Start directed graph
`strict`	No multi-edges allowed
`subgraph`	Define a subgraph
`cluster`	Prefix for cluster subgraphs (layout convention)
`node`	Default node attributes
`edge`	Default edge attributes
`graph` (as attr)	Default graph attributes

Comments

dot

digraph {

// Single-line comment

/* Multi-line

comment */

}

Default Attributes

dot

digraph {

// Set defaults for all nodes

node [shape=box fontname=Helvetica fontsize=12];

// Set defaults for all edges

edge [color=blue style=dashed];

// Now these inherit the defaults

A -> B;

B -> C;

// Override for specific node

D [shape=diamond color=red];

}

Subgraphs and Clusters

dot

digraph {

// Ordinary subgraph (groups structure)

subgraph cluster_group {

label="Group A";

style=filled;

color=lightgrey;

A -> B;

}

// Anonymous subgraph for rank constraints

subgraph {

rank=same;

C; D; E;

}

Cluster subgraphs must have names starting with cluster to be rendered as grouped boxes.

Ports (Edge Attachment Points)

dot

digraph {

A [shape=record label="{left|middle|right}"];

B [shape=record label="{top|bottom}"];

// Attach to specific ports

A:m -> B:t;

A:l -> B:b;

}

Compass points for ports: n, ne, e, se, s, sw, w, nw, c, _ (center).

Layout Engines

Graphviz ships with 12 layout engines, each using a different algorithm:

Directed Graph Layouts

Engine	Algorithm	Best For
dot	Hierarchical (Sugiyama)	Directed graphs, flowcharts, trees
twopi	Radial (Spring)	Rooted graphs, hub-and-spoke
circo	Circular (Springs)	Cycles, ring topologies

dot — Hierarchical Layout

dot

digraph {

rankdir=TB; // or LR, RL, BT

node [shape=box];

A -> B -> D;

A -> C -> D;

}

Key attributes: rankdir, ranksep, nodesep, rank=same/min/max/source/sink, ordering=in/out, minlen, constraint, group

twopi — Radial Layout

dot

graph {

layout=twopi;

root=Center;

Center -> A -> B;

Center -> C -> D;

}

Nodes are placed in concentric circles by distance from root.

circo — Circular Layout

dot

graph {

layout=circo;

mindist=1.0;

oneblock=false; // one block per connected component

A -> B -> C -> D -> E -> F -> A;

}

Nodes placed on one or more circles to minimize edge crossings.

Undirected Graph Layouts

Engine	Algorithm	Best For
neato	Spring model (stress majorization)	Undirected graphs, small-to-medium
fdp	Force-directed (Fruchterman-Reingold)	Undirected, general purpose
sfdp	Multi-level force-directed	Large undirected graphs

neato — Spring Model

dot

graph {

layout=neato;

mode=KK; // KK, major, sgd, hier, ipsep

model=shortpath; // shortpath, circuit, subset, mds

overlap=false; // overlap removal strategy

sep="+3"; // separation margin

}

fdp — Force-Directed Placement

dot

graph {

layout=fdp;

K=0.5; // spring constant

maxiter=200; // iterations

overlap=prism; // overlap removal

}

sfdp — Scalable Force-Directed Placement

dot

graph {

layout=sfdp;

K=0.8;

levels=4;

label_scheme=3; // edge label placement

beautify=true; // arrange leaf nodes uniformly

}

Cluster Layouts

Engine	Purpose
osage	Cluster/array layout (for component diagrams)
patchwork	Squarified treemap for clustered graphs

osage — Cluster Grid

dot

graph {

layout=osage;

A -> B;

C -> D;

A -> C;

B -> D;

}

patchwork — Squarified Treemap

dot

graph {

layout=patchwork;

node [style=filled];

A [area=5 fillcolor=blue];

B [area=10 fillcolor=green];

C [area=20 fillcolor=red];

}

Utility Engines

Engine	Purpose
nop	Pretty-print DOT input
nop2	Pretty-print assuming known positions

bash

dot -Txdot input.dot | dot -Tcanon > output.dot

Node Shapes

Shape	Description
`box`	Rectangle
`ellipse`	Ellipse/circle
`circle`	Circle (alias for ellipse with equal width/height)
`point`	Point (invisible, used as anchor)
`diamond`	Diamond/rhombus
`triangle`	Triangle
`plaintext`	Plain text, no border
`record`	Record-style table
`fixedshape`	Fixed shape
`polygon`	Polygon (use `sides` to set sides)
`sector`	Sector/wedge
`Mrecord`	Markdown record
`file`	Folder/file shape
`folder`	Folder shape
`note`	Note/tape shape
`tab`	Tab shape
`box3d`	3D box
`cds`	Class diagram shape

Record Nodes (Tables)

dot

digraph {

node [shape=record fontname=Helvetica fontsize=10];

A [label="{<f0> left | <f1> middle | <f2> right}"];

B [label="{ top | {<c0> left | <c1> right} | bottom }"];

C [label="simple node"];

A:f1 -> B:top;

A:f2 -> B:c0;

B:bottom -> C;

}

Record syntax: { field0 | field1 | field2 } or { <portname> label | ... }

Complete Attribute Reference

All attributes are case-sensitive. Specified as name=value in brackets.

Graph-Level Attributes

Attribute	Type	Default	Description
`bgcolor`	color	transparent	Canvas background
`center`	bool	false	Center drawing in output
`charset`	string	UTF-8	Character encoding
`label`	string	""	Graph title
`labelloc`	string	"t"/"b"	Label position (top/bottom)
`labeljust`	string	"c"	Label justification (l/c/r)
`rankdir`	rankdir	"TB"	Layout direction (TB/RL/LR/BT)
`ranksep`	double	0.5	Separation between ranks
`nodesep`	double	0.25	Min space between adjacent nodes
`margin`	double	device-dep	Canvas margin in inches
`pad`	double	0.0555 (4pt)	Padding around graph
`size`	double	auto	Max width/height in inches
`ratio`	double/string	auto	Aspect ratio (fill/compress/expand/auto)
`overlap`	string	true	Overlap removal method
`scale`	double	1.0	Scale factor after layout
`rotate`	int	0	Rotation angle
`landscape`	bool	false	Same as rotate=90
`orientation`	double	0	Node shape rotation angle
`layers`	layerList	""	Named layers for overlays
`layerselect`	layerRange	""	Layers to emit
`pack`	bool/int	false	Pack connected components
`packmode`	packMode	node	Packing method
`defaultdist`	double	auto	Distance between components (neato/fdp)
`clusterrank`	clusterMode	local	Cluster handling (dot only)
`newrank`	bool	false	Global ranking (dot only)
`mclimit`	double	1.0	Edge crossing minimizer scale
`nslimit` / `nslimit1`	double	auto	Network simplex iterations
`searchsize`	int	30	Edge search limit
`TBbalance`	string	""	Move floating nodes to min/max rank
`ordering`	string	""	Edge ordering (in/out)
`remincross`	bool	true	Second edge crossing pass
`showboxes`	int	0	Debug guide boxes
`quantum`	double	0.0	Round label dims to quantum
`linelength`	int	128	Line overflow length
`page`	double	auto	Page size in inches
`pagedir`	pagedir	BL	Page emission order
`viewport`	viewPort	""	Clipping window
`outputorder`	outputMode	breadthfirst	Drawing order
`fontpath`	string	system-dep	Font search path
`fontnames`	string	""	SVG font mapping
`stylesheet`	string	""	CSS stylesheet URL (SVG)
`class`	string	""	CSS class (SVG)
`id`	string	""	Element identifier
`href` / `URL`	escString	""	Hyperlink
`target`	escString	""	Browser target
`tooltip`	escString	""	Hover tooltip
`comment`	string	""	Output comment

Node-Level Attributes

Attribute	Type	Default	Description
`label`	string	\N (node name)	Node text label
`shape`	shape	ellipse	Node shape
`width`	double	0.75	Width in inches
`height`	double	0.5	Height in inches
`fixedsize`	bool/string	false	Use fixed dimensions
`style`	style	""	Drawing style (filled/diagonal...)
`color`	color	black	Outline color
`fillcolor`	color	lightgrey	Fill color
`penwidth`	double	1.0	Line width in points
`peripheries`	int	shape-dep	Number of borders
`orientation`	double	0	Polygon rotation
`sides`	int	4	Polygon sides
`regular`	bool	false	Force regular polygon
`distortion`	double	0	Polygon distortion
`skew`	double	0	Polygon skew
`fontname`	string	Times-Roman	Text font
`fontsize`	double	14.0	Font size in points
`fontcolor`	color	black	Text color
`margin`	double	0.11,0.055	Label margin
`labelloc`	string	"c"	Label position (t/c/b)
`nojustify`	bool	false	No line justification
`image`	string	""	Image file path
`imagepath`	string	""	Image search paths
`imagepos`	string	"mc"	Image position (tl/tc/tr/ml/mc/mr/bl/bc/br)
`imagescale`	bool/string	false	Image scaling (false/width/height/both)
`pos`	point	auto	Position (x,y) in points
`pin`	bool	false	Pin to position
`z`	double	0.0	Z coordinate (3D)
`group`	string	""	Node group for bundling
`class` / `href` / `URL`	escString	""	SVG/Map attributes
`tooltip`	escString	""	Hover tooltip
`xlabel`	string	""	External label

Edge-Level Attributes

Attribute	Type	Default	Description
`label`	string	""	Edge text label
`dir`	dirType	forward	Arrow direction (forward/back/both/none)
`arrowhead`	arrowType	normal	Head arrow style
`arrowtail`	arrowType	normal	Tail arrow style
`arrowsize`	double	1.0	Arrow scale factor
`headlabel`	string	""	Label near head
`taillabel`	string	""	Label near tail
`headport`	portPos	center	Attachment point on head
`tailport`	portPos	center	Attachment point on tail
`headclip` / `tailclip`	bool	true	Clip edge to node boundary
`headhref` / `headURL`	escString	""	Head hyperlink
`tailhref` / `tailURL`	escString	""	Tail hyperlink
`labelhref` / `labelURL`	escString	""	Label hyperlink
`headtarget` / `tailtarget`	escString	""	Browser target
`headtooltip` / `tailtooltip`	escString	""	Edge tooltip
`color` / `fillcolor`	color	black	Edge color
`penwidth`	double	1.0	Line width in points
`fontname` / `fontsize` / `fontcolor`	various	defaults	Label font
`labelfloat`	bool	false	Free label positioning
`labelangle`	double	-25	Label angle in degrees
`labeldistance`	double	1.0	Label distance from node
`decorate`	bool	false	Connect label to edge
`style`	style	""	Drawing style
`minlen`	int	1	Minimum rank difference
`weight`	int/double	1	Edge weight
`constraint`	bool	true	Use for ranking
`samehead` / `sametail`	string	""	Co-align edges
`lhead` / `ltail`	string	""	Logical head/tail for clusters
`xlabel`	string	""	External label

Style Values

Style	Description
`"filled"`	Fill with fillcolor
`"diagonalFill"`	Diagonal fill
`"rounded"`	Rounded corners
`"dashed"`	Dashed line
`"dotted"`	Dotted line
`"bold"`	Bold line
`"invis"`	Invisible
`"striped"`	Striped
`"filled"` + gradient	Gradient fill

Arrowhead/Tail Styles

Value	Description
`"normal"`	Standard arrow
`"box"`	Box arrow
`"obox"`	Open box
`"crow"`	Crow's foot
`"ocrow"`	Open crow's foot
`"doublecrow"`	Double crow's foot
`"odoublecrow"`	Open double crow's foot
`"diamond"`	Diamond
`"odiamond"`	Open diamond
`"dot"`	Small dot
`"odot"`	Open dot
`"inv"`	Inverted triangle
`"oinv"`	Open inverted triangle
`"none"`	No arrow

Rank Direction

Value	Description
`"TB"`	Top to bottom (default)
`"BT"`	Bottom to top
`"LR"`	Left to right
`"RL"`	Right to left

Color Names

Standard X11 colors: aliceblue, antiquewhite, aqua, aquamarine, azure, beige, bisque, black, blanchedalmond, blue, blueviolet, brown, burlywood, cadetblue, chartreuse, chocolate, coral, cornflowerblue, cornsilk, crimson, cyan, darkblue, darkcyan, darkgoldenrod, darkgray, darkgreen, darkgrey, darkkhaki, darkmagenta, darkolivegreen, darkorange, darkorchid, darkred, darksalmon, darkseagreen, darkslateblue, darkslategray, darkslategrey, darkturquoise, darkviolet, deeppink, deepskyblue, dimgray, dimgrey, dodgerblue, firebrick, floralwhite, forestgreen, fuchsia, gainsboro, ghostwhite, gold, goldenrod, gray, green, greenyellow, grey, honeydew, hotpink, indianred, indigo, ivory, khaki, lavender, lavenderblush, lawngreen, lemonchiffon, lightblue, lightcoral, lightcyan, lightgoldenrodyellow, lightgray, lightgreen, lightgrey, lightpink, lightsalmon, lightseagreen, lightskyblue, lightslategray, lightslategrey, lightsteelblue, lightyellow, lime, limegreen, linen, magenta, maroon, mediumaquamarine, mediumblue, mediumorchid, mediumpurple, mediumseagreen, mediumslateblue, mediumspringgreen, mediumturquoise, mediumvioletred, midnightblue, mintcream, mistyrose, moccasin, navajowhite, navy, navyblue, oldlace, olive, olivedrab, orange, orangered, orchid, palegoldenrod, palegreen, paleturquoise, palevioletred, papayawhip, peachpuff, peru, pink, plum, powderblue, purple, rebeccapurple, red, rosybrown, royalblue, saddlebrown, salmon, sandybrown, seagreen, seashell, sienna, silver, skyblue, slateblue, slategray, slategrey, snow, springgreen, steelblue, tan, teal, thistle, tomato, turquoise, violet, wheat, white, whitesmoke, yellow, yellowgreen

Also supports CSS colors, hex (#RRGGBB), and Brewer color schemes (colorscheme=oranges9, colorscheme=greens9, etc.).

CLI Commands and Options

Main Commands

Command	Layout Engine	Description
`dot`	dot	Hierarchical layout
`neato`	neato	Spring model
`fdp`	fdp	Force-directed
`sfdp`	sfdp	Scalable force-directed
`twopi`	twopi	Radial layout
`circo`	circo	Circular layout
`osage`	osage	Cluster/array layout
`patchwork`	patchwork	Treemap layout
`nop`	nop	Pretty-print
`dot2tex`	dot	Convert to TikZ

Common Options

bash

# Basic usage

dot [options] <input.dot>

# Specify output format

dot -Tpng -o output.png input.dot

dot -Tsvg -o output.svg input.dot

dot -Tpdf -o output.pdf input.dot

# Auto-detect output from filename extension

dot -O -Tpng input.dot # creates input.dot.png

dot -O -Tsvg input.dot # creates input.dot.svg

# Pipe input

echo 'digraph{A->B}' | dot -Tsvg > graph.svg

# Specify layout engine explicitly

dot -Kneato -Tpng input.dot

dot -Kfdp -Tpng input.dot

# Set engine-specific attributes

dot -Kdot -O graph.dot # uses DOT attribute: layout=dot

Option Summary Table

Option	Description
`-Tfmt`	Output format (png, svg, pdf, ps, json, xdot, cmap, map, plain, dot, canon, gif, jpg, jpeg, tif, tiff, webp, svgz, ps2)
`-o file`	Output file name
`-Kengine`	Force layout engine (dot, neato, fdp, sfdp, twopi, circo, osage, patchwork, nop)
`-n`	Read existing positions (no layout), for `-n2` use points as input
`-n2`	Like `-n`, coordinates are in points
`-s scale`	Scale input coordinates (e.g., `-s72` for points-to-inches)
`-Gattr=val`	Global attribute
`-Nattr=val`	Default node attribute
`-Eattr=val`	Default edge attribute
`-v`	Version information
`-V`	Version and license info
`-c`	Enable plugin loading
`-g level`	Debug level
`-l file`	Load library
`-q level`	Minimum query level for symbol lookup (default: 3)
`-e file`	Error file
`-i file`	Image path
`-f fontpath`	Font path
`-O`	Generate output files with format appended to input filename
`-S`	Use the `size` attribute to determine output dimensions

Output Formats

Format	Extension	Description
`png`	`.png`	PNG bitmap
`svg`	`.svg`	Scalable Vector Graphics
`pdf`	`.pdf`	PDF document
`ps`	`.ps`	PostScript Level 2
`ps2`	`.ps`	PostScript Level 3
`xdot`	`.xdot`	X11 Graphics Exchange Format
`dot`	`.dot`	Canonical DOT format
`canon`	`.canon`	Canonical text output
`plain`	`.plain`	Plain node positions
`json`	`.json`	JSON output
`json0`	`.json`	JSON (no layout)
`cmap`	`.cmap`	Image map for HTML
`cmapx`	`.cmapx`	Named map for HTML
`imap`	`.imap`	Client-side image map
`cmapx_np`	`.cmapx`	Client map, no URLs
`svgz`	`.svgz`	Compressed SVG
`gif`	`.gif`	GIF bitmap
`jpg` / `jpeg`	`.jpg`	JPEG bitmap
`tif` / `tiff`	`.tif`	TIFF bitmap
`webp`	`.webp`	WebP bitmap
`vrml`	`.vrml`	VRML 3D
`fig`	`.fig`	XFIG format

Engine-Specific Options

neato

Option	Description
`-m`	Use Kamada-Kawai mode
`-s scale`	Scale input coordinates
`-e epsilon`	Termination condition
`-i mode`	Optimization mode (KK/major/sgd/hier/ipsep)
`-M model`	Distance model (shortpath/circuit/subset/mds)
`-k maxiter`	Max iterations
`-D damping`	Damping factor (0.0-1.0)
`-d dim`	Layout dimensions (2-10)
`-d2 dimen`	Rendering dimensions
`-p normalize`	Normalize layout
`-P`	Don't translate to origin
`-r ratio`	Aspect ratio
`-S size`	Max size
`-c config`	Configuration file

fdp

Option	Description
`-k K`	Spring constant
`-m maxiter`	Max iterations
`-e epsilon`	Termination condition
`-d dim`	Dimensions
`-D damping`	Damping
`-p normalize`	Normalize
`-P`	Don't translate
`-S size`	Max size

Examples

Flowchart

dot

digraph Workflow {

rankdir=LR;

node [shape=box, fontname=Helvetica fontsize=12];

edge [fontname=Helvetica fontsize=10];

Start [shape=ellipse, style=filled, fillcolor=lightgreen];

Process [shape=box, style=filled, fillcolor=lightblue];

Decision [shape=diamond, style=filled, fillcolor=yellow];

End [shape=ellipse, style=filled, fillcolor=salmon];

Start -> Process;

Process -> Decision;

Decision -> Yes [label="Yes"] -> End;

Decision -> No [label="No"] -> Process;

}

Class Diagram

dot

digraph Classes {

rankdir=TB;

node [shape=record fontname=Helvetica fontsize=10];

Animal [label="<name> name | <age> age | <sound> sound"];

Dog [label="<name> name | <breed> breed | <fetch> fetch"];

Cat [label="<name> name | <lives> lives | <meow> meow"];

Dog -> Animal [label="extends" arrowhead=obox dir=both];

Cat -> Animal [label="extends" arrowhead=obox dir=both];

}

State Machine

dot

digraph States {

rankdir=LR;

node [shape=circle, width=0.5];

init [shape=doublecircle, label=""];

active [label="Active"];

pending [label="Pending"];

init -> active [label="start"];

active -> pending [label="pause"];

pending -> active [label="resume"];

active -> active [label="tick", loop=true, labelabove=true];

}

Family Tree

dot

digraph Family {

rankdir=TB;

node [shape=box, style=filled];

{ rank=same; F1; M1; }

{ rank=same; C1; C2; C3; }

F1 [label="Father", fillcolor=lightblue];

M1 [label="Mother", fillcolor=lightpink];

C1 [label="Child 1"];

C2 [label="Child 2"];

C3 [label="Child 3"];

F1 -> C1; F1 -> C2; F1 -> C3;

M1 -> C1; M1 -> C2; M1 -> C3;

}

Color Wheel

dot

graph {

layout=neato;

node [style=filled];

"Red" [fillcolor=red];

"Orange" [fillcolor=orange];

"Yellow" [fillcolor=yellow];

"Green" [fillcolor=green];

"Blue" [fillcolor=blue];

"Indigo" [fillcolor=indigo];

"Violet" [fillcolor=violet];

"Red" -- "Orange" -- "Yellow" -- "Green" -- "Blue" -- "Indigo" -- "Violet" -- "Red";

}

Network Diagram

dot

digraph Network {

rankdir=TB;

node [shape=cylinder, style=filled, fillcolor=lightblue];

Internet [shape=cloud, label="Internet", fillcolor=lightgray];

Firewall [label="Firewall", fillcolor=yellow];

Router [label="Core Router"];

Switch [label="Switch"];

Servers [shape=cylinder, label="Servers", fillcolor=lightgreen];

Internet -> Firewall -> Router -> Switch -> Servers;

}

Useful Tools & Libraries

Online Tools

Tool	URL	Description
Graphviz Online		Browser-based DOT playground
SVG Output	`dot graph.dot -Tsvg`	Scalable vector output

CLI Tools

Tool	Purpose
`dot`	Hierarchical layout
`neato`	Spring model layout
`fdp`	Force-directed layout
`sfdp`	Large-scale force-directed
`twopi`	Radial layout
`circo`	Circular layout
`osage`	Cluster grid layout
`patchwork`	Treemap layout
`dotty` / `gv`	Graphviz GUI viewer
`xdot`	X11 display
`dot2tex`	Convert DOT to TikZ/LaTeX
`gvpr`	Graphviz pattern processing language

Programming Libraries

Library	Language	Description
`libgraphviz`	C	Core library for embedding
`pygraphviz`	Python	Python bindings
`pydot`	Python	Pure Python DOT parser/renderer
`gv`	Haskell	Haskell bindings
`graphviz`	Ruby	Ruby gem
`graphviz`	PHP	PHP extension
`graphviz`	Rust	Rust bindings
`graphviz`	Java	Java bindings (via JNI)

Alternative Diagramming Tools

Tool	Description
D2	Modern alternative with nicer syntax
PlantUML	UML-focused with ASCII art
Mermaid	Diagrams-as-code, renders inline in Markdown
TikZ	LaTeX vector graphics
Draw.io	Web-based diagramming
yEd	Desktop diagram tool

Integrations

Integration	Description
Vim/Neovim	`:Graphviz` plugins for inline rendering
VS Code	Graphviz syntax extensions
RMarkdown	`dot` code chunks
Jupyter	IPython graphviz magic
LaTeX	`dot2tex` for TikZ output
Make	Auto-generate graphs from dependencies

Installation

macOS

bash

brew install graphviz

Debian/Ubuntu

bash

sudo apt install graphviz

Fedora/RHEL

bash

sudo dnf install graphviz

Windows (Chocolatey)

bash

choco install graphviz

Windows (Winget)

bash

winget install Graphviz

Arch Linux

bash

pacman -S graphviz

From Source

bash

git clone https://gitlab.com/graphviz/graphviz.git

cd graphviz

./autogen.sh

./configure

make

sudo make install

Python Bindings

bash

pip install pygraphviz # Requires graphviz C library

pip install pydot # Pure Python, no C dependency

Common Patterns

Automatic File Extension Output

bash

# Output to same filename with format extension

dot -O graph.dot # creates graph.dot.png

dot -Tsvg graph.dot -o graph.svg

Force Layout from Attributes

dot

digraph {

// Override layout engine via attribute

graph [layout=neato];

A -> B;

B -> C;

}

Invisible/Hidden Elements

dot

digraph {

// Invisible nodes/edges

Hidden [shape=point width=0];

A -> Hidden [style=invis];

Hidden -> B;

}

Rank Constraints

dot

digraph {

// Force nodes on same rank

subgraph { rank=same; A; B; C; }

// Force minimum rank

subgraph { rank=min; Start; }

// Force maximum rank

subgraph { rank=max; End; }

}

Resources

• Official Website: https://graphviz.org

• Documentation: https://graphviz.org/docs/

• GitLab: https://gitlab.com/graphviz/graphviz

• Gallery: https://graphviz.org/gallery/

• Forum: https://forum.graphviz.org/

• Attribute Reference: https://graphviz.org/doc/info/attrs.html

• DOT Language Reference: https://graphviz.org/doc/info/lang.html