Javascript Inheritance Diagrams with GraphViz and Base.js

March 17, 2007

At my office we’re using XULRunner to deploy a large-scale application platform which requires a hefty Javascript class hierarchy. Due to Javascript’s lack of “true” class inheritance, we were forced to make use of one of the many Javascript OO libraries available. When I stumbled upon Dean Edwards’ Base.js, I was in heaven. It makes Javascript inheritance quite painless and ultimately does what you tell it to:


var Vegetable = Base.extend({
	constructor: function() {
		// constructor
	}
});
var Kale = Vegetable.extend({
	constructor: function() {
		this.base(); // run vegetable constructor
		// ... kale constructor
	}
});  ...

However, as any programmer would, I wanted more. We were evolving a substantially complex class hierarchy and documenting this would prove to be cumbersome. I sought a means of creating inheritance diagrams painlessly. My first thought was code interpretation, but I realized that given my timeframe (I wanted to do it in less than an hour), it simply wasn’t an option. That was when I dug into the Base.js code and made a few modifications…

[Read]