I live in a highly linked environment.

Links, quotations, and cross-referenced source code mean that I waste a lot of mental space on maps of how certain functions call other functions, or how source files include other source files, and in what order.

What if there were automated ways to visualize the links? Ways to create a visual map of the source code? I hacked up a script to do exactly that with the source code from Feed Me Links.

Here’s the process i followed:

1. Look at the web server logs to see which files on disk correspond to actual URLs that users are hitting. This list serves as the starting point of the map.

2. Correlate those URLs to actual files (in my case, .php files). Call that list F

3. Grep each file in F for include references (”include(” and “include_once(“), and for each included file, add the including file (parent) and the included file (child) as parent:child tuples, one per line, to a new list. Call that list L.

5. Now, use the parent-child relationships in L to draw the full include tree. The idea is to continuously loop over L (recursing the include tree) until we’ve seen all the files, plus all files included from those files — the includes from the includes from the includes, ad infinitum. This step is akin to making a family tree based on relationships like, “Ara and Maral are Married,” “Heidik is Ara’s Father,” etc.

This can either be done manually in code, or you can use a graphing package to draw the lines and boxes. In the past I did the former; this time, I used a package; AT&T’s GraphViz.

View the include-map I created:

click for large version or download 2 Mb version.

GraphViz rocks. It uses its own text-based file format, called DOT files. Here’s the .dot file my script created. Feel free to play with it or use it as a starting point for your own code maps.

FURTHER READING

Ben Fry has created an interesting code mapper: http://acg.media.mit.edu/people/fry/dismap/