A tiny self-executing Makefile for the live-coding of graphviz dot files.

curl https://chr15m.github.io/graphviz-livecoder/dotlive > ~/bin/dotlive && chmod 755 ~/bin/dotlive
dotlive watch mydotfile.svg

Help

$ dotlive 
Graphviz live-coding tool.

USAGE:
	dotlive [watch] FILE1.svg [FILE2.png ... ]

ARGS:
	watch     - continuously watch and re-build the named files.
	FILE1.svg - build the file FILE1.svg from FILE1.dot source.
	FILE2.png - build the file FILE1.png from FILE2.dot source.

EXAMPLES:

	# continuously build myfile.svg from myfile.dot
	dotlive watch myfile.svg

	# build (once) myfile.png from myfile.dot
	# and myotherfile.svg from myotherfile.dot
	dotlive myfile.png myotherfile.svg

File type is determined from the target extension.
Open the image in an image viewer which does reload-on-change.
e.g. preview on OSX or ristretto on Linux.

• GraphViz Pocket Reference.
• Documentation for the graphviz dot format files.
• Graphviz tag on Stackoverflow.

dotlive depends upon make and graphviz. These binaries must be in your path. You should also open the images with a viewer which supports reload-on-change.

Use

Assuming you have a file called test.dot in the current folder:

dotlive watch test.png

Contents of test.dot:

digraph plans {
  node [penwidth=2 margin=0.2];
  livecode [shape=box];
  hackernewbs [color=red];

  graphviz -> livecode;
  livecode -> hackernewbs;
  livecode -> profit;
  profit -> livecode;
}

Result:

Tips

You can provide multiple graph targets. For example if you had graph1.dot and graph2.dot in the current folder:

dotlive graph1.svg graph2.svg