Javascript Inheritance Diagrams with GraphViz and Base.js
Written by on March 20th, 2007 in Ajax News.
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
-
-
var Kale = Vegetable.extend({
-
constructor: function() {
-
this.base(); // run vegetable constructor
-
// … kale constructor
-
}
-
});
-
thus becomes:
-
-
var Kale = Vegetable.extend({
-
identifier: “Kale”,
-
constructor: function() {
-
this.base(); // run vegetable constructor
-
// … kale constructor
-
}
-
});
-
We can then feed our example.dot file into dot and generate a PNG image:
dot -Tpng example.dot -o example.png
Source: Ajaxian
Original Article: http://ajaxian.com/archives/javascript-inheritance-diagrams-with-graphviz-and-basejs