Digraphs of Flex code
07.06.24So. I was involved in a code review of one of the larger Flex 2 projects where I work, and I realized that I didn't have any good way to visualize how everything connected. So naturally I started looking into tools I could use. I tend to gravitate to open|free projects, so I found Graphviz and the related program, Dot. While the output is not that great sometimes, it's still a very nice way of quickly getting your head wrapped around how the parts of whatever you're dealing with interact. One of the uses of Graphviz is to create digraphs showing inheritance, so I took that concept and ran with it in Ruby.
I wrote a script in Ruby that uses Regular Expressions to find connections from a file to other files in the project. It then takes these connections and writes out a '.dot' file that is run through Dot to produce a JPG. While Dot can produce a ton of outputs, I just wanted something quick and painless. It's interesting to run this combo on something like the Cairngorm Microarchitecture just to quickly see how the different parts interact - and to test my output.
<a href="/trac/central/chrome/site/digraphs_of_flex_code_any.jpg"><img src="/trac/central/chrome/site/digraphs_of_flex_code_any.jpg" style="width:500px;" alt="Dot generated digraph using any kind of link it can find" /></a>
This image was generated using the 'any' link type which in the script I wrote shows up as
Where 'b' is the basename of a Flex file found in the project: with a Flex file being defined as any file that ends in 'as' or 'mxml'.
I then decided I should run this on the NoteTag project that Adobe released. Yeah. The 'any' link type image was over 11 MB and that's not too much of a surprise when you have almost 200 files.
<a href="/trac/central/chrome/site/digraphs_of_flex_code_oochain.jpg"><img src="/trac/central/chrome/site/digraphs_of_flex_code_oochain.jpg" style="width:500px;" alt="OOChain digraph of NoteTag project" /></a>
The 'ooChain' link type shows up as
Regexp.new("( extends "+b+" )|( implements "+b+" )")
Out of 200 files in a project only 5 files are involved in some sort of object oriented extension or implementation? That's kinda odd. I'll have to look into this later. For now, I'm impressed with the ability that Graphviz and Dot have to quickly get me a digraph.