Previewing GraphViz Files With Live Reloading

January 31, 2020

Here's a bash script I wrote that takes a GraphViz source file, converts it to an SVG, and then opens it in a browser window. When the source file changes, the SVG gets re-rendered and the browser window automatically refreshes.

Because the script calls itself, you need to either name it liveviz like I have, or replace liveviz in the script with whatever name you give it.

#!/usr/bin/env bash

# dependencies:
# * graphviz: brew install graphviz
# * browser-sync: yarn global add browser-sync
# * entr: brew install entr

if [ "$1" == "" ]; then
  echo "must provide a graphviz source file to watch"
  exit 0
elif [ "$2" != "" ]; then
  echo "<html><body>$(dot $1 -T svg)</body></html>" > $2
else
  local_ip=$(ipconfig getifaddr en0)
  infile=$1
  outfile=$infile.html

  (trap 'rm $outfile; kill 0' SIGINT;
    ls $infile | entr liveviz $infile $outfile &
    browser-sync start -s -f $outfile --index $outfile --no-notify --host $local_ip --port 9000
  )
fi