Angular directive ng-jsod for drawing JavaScipt Object Diagram

UPDATE: I have now integrated the JSOD with Chrome devtools. Check it out! Does not use the AngularJS rective though, instead uses the Chrome devtools framework.

I have been meaning to hack this for long time. The idea is to draw a object diagram of for a JavaScript object. Finally got around to implementing it as a angular directive. It uses excellent jquery-svg library by Keith Wood.

Note: Currently works on Chrome only.

Usage:

in .html head section:

:
:
<link rel="stylesheet" type="text/css" href="css/jquery.svg.css">
:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://code.angularjs.org/1.2.1/angular.min.js"></script>
<script type="text/javascript" src="js/jquery.svg.js"></script>
<script src="js/ngjsod.js"></script>
<script src="js/ngjsodapp.js"></script>
:
:

in .html body section:

:
<ng-jsod object-name="document.location"></ng-jsod>
:

in your app's .js file inject NGJSOD module:

angular.module('NGJSODApp', ['NGJSOD']);

This will yield:

Try it here!

Github Repository

This is an initial attempt. Obviously needs clean up.

TODO

1. Cleanup. The svg code was written in a brute force fashion. Modularize it,
2. Better layout, support scrolling, panning, zooming, overview for the svg.
3. Integrate with Chrome Devtools's Scope Variables section in the Sources tab. Right click on a object to see it's diagram. I am working on this now and will submit the patch to Chrome Dev Tools. Unfortunately the dev tools extension API does not allow to put a context menu on nodes of Scope Variables nodes. If it allowed that I could have simply written a Chrome extension. The idea behind this is that it will help developers understand the JavaScript object structure.

Feedback welcome!