Generate PHP Class Inheritance Diagrams with Graphviz

It’s not a secret that I’m a big fan of GraphViz – powerful, yet easy to use graph visualization software.  And I’ve blog about it quite a few times.  Well, guess what – today is a perfect day for one more post.

Over the weekend I was working on refactoring some CakePHP code that I had my on for a long time now.  As with any powerful framework, the projects can get quite big and it might be difficult to make sense of the hierarchy and relationship of certain files, especially if it’s been a while since you looked at that code, and you are not a fan of IDEs, and you’ve been non-stop coding for more than 24 hours.

I had this problem once or twice before.  To the extent that I’ve written a CakePHP plugin, which was using GraphViz to visualize models and their relationships.  But that was a long time ago.  The plugin got outdated (it was for CakePHP 1 and/or 2, so not very useful now that we are in version 3).  Furthermore, today I needed to look not at the models and their relationships, but at a hierarchy of the PHP classes in some other directory.

A quick Google search suggested Nigel Chapman’s post – How to Generate PHP Class Inheritance Diagrams in Graphviz.  Not only it was pretty much exactly what I was looking for, but it was also from a fellow CakePHP developer!

I’ve taken (borrowed?) Nigel’s script and modified it slightly.  You can find my version here.  The changes are:

  1. Added two parameters which allow to specify the name of the destination file and the GraphViz tool to use for the generation of the graph (more on that below).  If omitted, the destination file will be created with the temporary name in the temporary directory, and the sfdp script will be used as default.
  2. Added the resulting path to the output at the end of the execution of the script, so that if it is a temporary file, I would know where to look for it.
  3. Added grep and sed patterns to work correctly with abstract classes.
  4. Changed grep to look only for the *.php files, instead of anything.  This can make things much faster on messy projects, and it also removes the need for working around the binary files.

Now it’s so handy that I made it a part of my dotfiles, so that I can save a few precious moments looking for the solution in 2024.

This also seems like a good opportunity to review the which tools are available for generating the graph and what are the differences between them.  For that, we don’t need to look any further than the front page of the GraphViz website (in the Roadmap section):

dot – “hierarchical” or layered drawings of directed graphs. This is the default tool to use if edges have directionality.

neato – “spring model” layouts.  This is the default tool to use if the graph is not too large (about 100 nodes) and you don’t know anything else about it. Neato attempts to minimize a global energy function, which is equivalent to statistical multi-dimensional scaling.

fdp – “spring model” layouts similar to those of neato, but does this by reducing forces rather than working with energy.

sfdp – multiscale version of fdp for the layout of large graphs.

twopi – radial layouts, after Graham Wills 97. Nodes are placed on concentric circles depending their distance from a given root node.

circo – circular layout, after Six and Tollis 99, Kauffman and Wiese 02. This is suitable for certain diagrams of multiple cyclic structures, such as certain telecommunications networks.

As they say, GraphViz to the rescue once again!

SmartDraw – The Smartest Way to Draw Anything

It’s not often that I need to draw a diagram or a flowchart these days.  My time is mostly consumed by more technically challenging tasks.  And whenever I do have to produce some form of a chart, I usually fallback on to the Graphviz dot, which allows me to do something in literally seconds.

basic-flowchart

However, I’m pretty sure the day will (or, rather, return) when I’d need a tool to produce eye-pleasing diagrams and flowcharts.  For that day, and for that day only, I’m leaving the link to SmartDraw here.  It’s a commercial offering, but at $15/month for their cloud-hosted web-based application, it’s seems to be quite a bargain.

devices-cloud-buy

Using Graphviz dot for ERDs, network diagrams and more

I’ve mentioned Graphviz many a time on this blog.  It’s simple to use, yet very powerful.  The dot language is something that can be jotted down by hand in the simplest of all text editors, or generated programmatically.

The official website features a gallery, which demonstrates a wide range of graphs.  But I still wanted to blog a few examples from my recent use.

Continue reading “Using Graphviz dot for ERDs, network diagrams and more”

vis.js – a visual interaction system

vis.js – a visual interaction system

Vis.js is a dynamic, browser based visualization library. The library is designed to be easy to use, to handle large amounts of dynamic data, and to enable manipulation of and interaction with the data. The library consists of the components DataSet, Timeline, and Graph.

The vis.js library is developed by Almende B.V, as part of CHAP. Vis.js runs fine on Chrome, Firefox, Opera, Safari, IE9+, and most mobile browsers (with full touch support).

CakePHP GraphViz Models

I have completely and totally rewritten my old script that generates a graph of CakePHP models and their relationships.  Instead of pasting the code in here, I pushed all of its development to GitHub where it now enjoys a new repository.  Please have a look, try it out, and let me know if it does or doesn’t work for you.

The major changes in this version are:

  • Rewritten as CakePHP Shell instead of being a standalone madness script.
  • Got rid of all dot markup. Utilized Image_GraphViz PEAR package instead.
  • Added support for old and new CakePHP versions (1.2, 1.3, and 2.0).
  • Added option for using only real models (via className property of the relationship) or sticking with the old behavior.
  • Added a bunch of options for tweaking GraphViz output.  And now it’s obvious where to edit them, in case you need more.
  • Improved the styling of the graph a bit – fonts and colors.
  • Improved documentation.

As a side effect improvement, now that it is a native CakePHP Shell, it’s trivial to add to your project build process.

CakePHP + GraphViz = making sense of a numerous models

NOTE: THIS IS VERY MUCH OUTDATED! Read about the update or go directly to GitHub repository for the new version.

 

I have a task at hand.  I have to re-introduce myself to a rather large codebase.  It’s a project that migrated to CakePHP a couple of years ago and haven’t seen since.  There was a whole team of people working on it sense then, and now I need to make sense of all those changes that were done and help reorganize and refactor them a bit.  When I looked into CakePHP’s models/ folder, I was surprised to find 50+ models there.  Each and every one of them links to other models.  And documentation is practically non-existing.  How do I go about it?  I hack up a little script to help me out.

There is a really elegant and beautiful tool for graphing things – GraphViz.  If you haven’t heard of it, you need to drop whatever is that you are doing and familiarize yourself with GraphViz.  Right now.  Right.  This. Second.  You are missing out a whole universe until you do so.  I’ll wait.

Now that you are back, I just want to mention a very slick tool, which is a part of GraphViz package – dot.  It is a simple language in which you can describe graphs.  Sort of like “A goes to B, which goes to C”.   You specify your graph in a very human readable format in a text file, and then dot will transform that text file into an image format of your choice (PNG, JPEG, GIF, etc).  The primary beauty of this is that those text files can be generated automatically by using pretty much any programming language.

So here is what I did.  I assumed the following:

  1. Project documentation should be in app/docs/ folder.  That’s where I’ll put the script and that’s where it will generate the dot configuration, dot later will generate the graph of all my models and their relationships.
  2. Main project application folder is app/.  Models are stored in app/models/ folder.
  3. Project can have a number of plugins, which can have their own models, which I still want to know about.  Plugins are in app/plugins/ and if plugin xyz has models, they are stored in app/plugins/xyz/models.
  4. My project is under version control.  Specifically I use Subversion, but it’s easy to adjust the script to support other systems.
  5. I can get current project revision by running a command in shell.  For Subversion that is /usr/bin/svnversion.

I probably assumed a whole bunch of other things, but you can get an idea of how simple the setup is from the above ones.

Here is how I generate a graph of all models and their dependencies:

cd app/docs/
php -f graph.php > graph.dot
dot -Tpng graph.dot > graph.png

Obviously, I can’t show you the full graph from that system (it’s not open source, it’s not mine, and it will drive you insane in a matter of seconds), but here is how a small part of that image looks like.

There is a different colour for each type of model relationship ($belongsTo, $hasMany, and $hasAndBelongsToMany). Each model folder is in a separate sub-graph cluster. There is a legend graph on the image. The current time stamp and version control revision are also imposed on the image for easier referencing.

And here is the source for the graph.php script. Feel free to modify any way you like. If you spot any major bugs or better ways of doing things, please let me know in the comments.

Continue reading “CakePHP + GraphViz = making sense of a numerous models”