Crazy Graphs

With the first project relatively completed, I set out to come up with another idea. First I looked into phaser.js, a game framework that would hopefully allow me to create a simple game. I messed around with that for a day and decided I wasn’t going to make anything impressive game-wise in two weeks. I needed a better idea…

After scouring the internet I came across a post someone had made suggesting that github have a function to generate UML diagrams for each project. I also thought that was a great idea, but probably a bit too tough for one guy to tackle on a short time-frame. It did lead me down an interesting train of thought though. What if I could visualize how a rails project’s models interacted? What if I could do this with simply the repository’s URL? The premise is this: given a rails project github URL, scrape the website to gather the necessary data to generate diagrams representing the relationships between models (and their table schemas!).

After much headbanging I was able to get a working prototype. I used Wombat, a web scraping gem to gather the necessary data, and then I properly plug that into a ruby gem for GraphViz, a tool that allows you to create graphs.  The end result is something like this:

Screenshot from 2014-11-02 17:25:35
That graph is what it produced when I gave it the URL to my previous project’s github. It’s small and pretty! All the relationships are accurate! Hurray! Better yet this image is an SVG, which allowed me to add more information upon hovering over a node. That information is the database table’s schema which I also scrapped down using wombat. These are just screenshots so it won’t work here!

A gem that surely does a better job at this is rails-erd, but mine lets you do it with simply a github URL rather than installing a gem. This lets you easily see what other people’s projects look like, which has been pretty interesting. Here’s what it outputs when I give it Citizenry, a large open source project.

Screenshot from 2014-11-02 17:37:57

Now that is looking a bit complicated. I need to make more tables… my projects are not crazy enough! That’s a level of complexity hopefully someday I’ll get into. As you can see there are some relationships I haven’t quite figured out the best way to represent yet. In this picture you can see the uncolored circle as one of these. It makes sense I guess but this might not be its final form.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s