DOM -> Graphviz

viz.js

/*
  This is an incredibly rudimentary PhantomJS script to walk a DOM and emit a graphviz `dot` document.
  It is neither clever nor good.
  Proceed with caution.
  
  Usage: phantomjs viz.js http://2015.empirejs.org/ | tee >(dot -Tpng > test.png)
*/
var page = require('webpage').create();
var args = require('system').args;

if (args.length <= 1) {
  console.log("err: need arg");
  phantom.exit(1);
}

page.open(args[1], function (status) {
  if (status !== 'success') {
    console.log('err: '+status);
    phantom.exit(1);
  }
  page.onConsoleMessage = function(msg, line, source) {
    console.log(msg);
  }
  page.evaluate(function () {
    var 
      dict = {},
      walker = document.createTreeWalker(
        document.body,
        NodeFilter.SHOW_ELEMENT,
        null);

    function prevSiblingCount(el, i) {
      i = i != null ? i : 0;
      var prev = el.previousElementSibling;
      if (prev) {
        if (prev.nodeName === el.nodeName) {
          return prevSiblingCount(prev, i+1);
        } else {
          return prevSiblingCount(prev, i);
        }
      } else {
        return i;
      }
    }

    function vizLabel(el) {
      var buffer = el.nodeName, 
          count;
      if (el.id) {
        buffer += ("#"+el.id);
      } else {
        if (el.className) {
          buffer += ("."+el.className.split(/\s/).join("."));
        }
        if (el.parentElement) {
          buffer = vizLabel(el.parentElement)+" > "+buffer;
          count = prevSiblingCount(el);
          if (count) {
            buffer += (":nth-of-type("+prevSiblingCount(el)+")");
          }
        }
      }
      return buffer;
    }

    console.log("digraph El {");
    do {
      var parentEl = walker.currentNode.parentElement;
      if (parentEl) {
        console.log("\t\""+vizLabel(parentEl)+"\"->\""+vizLabel(walker.currentNode)+"\";");
      } else {
        console.log("\t\""+vizLabel(walker.currentNode)+"\";");
      }
    } while (walker.nextNode());
    console.log("}");
  });
  phantom.exit(0);
});