Tuesday, March 20th, 2007

Javascript Inheritance Diagrams with GraphViz and Base.js

Category: Utility

T.J. VanSlyke is working on an application using XUL Runner “to deploy a large-scale application platform which requires a hefty Javascript class hierarchy.”

T.J. took Dean Edwards Base.js and added Base.exportDotGraph() allowing GraphViz to show the class hierarchy.

However, there is one caveat with this. Since Javascript cannot guess at the identifiers you use to declare each class, we must explicitly define the identifier we would like to use in our diagrams. To maintain backward compatibility, I have simply implemented this as a property of the prototype of the class. The Kale class


  1. var Kale = Vegetable.extend({
  2.     constructor: function() {
  3.         this.base(); // run vegetable constructor
  4.         // ... kale constructor
  5.     }
  6. });

thus becomes:


  1. var Kale = Vegetable.extend({
  2.     identifier: "Kale",
  3.     constructor: function() {
  4.         this.base(); // run vegetable constructor
  5.         // ... kale constructor
  6.     }
  7. });

We can then feed our example.dot file into dot and generate a PNG image:

dot -Tpng example.dot -o example.png

Posted by Dion Almaer at 10:09 am

3.5 rating from 27 votes


Comments feed TrackBack URI

I really like Dean Edwards base.js. I think mooTools uses it too. I heard that Sam of Prototype was even looking into using it. I wonder what happened with that?

Comment by jdalton — March 20, 2007

Is this not what __proto__ is for? Though that may be just a Firefox property.

Comment by Paul M. Watson — March 20, 2007

Leave a comment

You must be logged in to post a comment.