Home > coding, dev-tools > Design and code visualization

Design and code visualization

As a team lead at work and for my own good, I want to improve how I visualize system architecture, software design and code structure.

There seem to be at least two angles to this:

  • Show ideas
  • Show (software) reality

For me, ideas often develop top-down, starting from overview level, and require putting something I have in mind on paper or whiteboard, often as a mix of bullet points, sketchy diagram fragments, boxes, ad-hoc dividers and increasingly chaotic arrows.

In the past I have used scans of my paper scribblings or photos of whiteboards to capture the results. But of course, those “snapshots” are not very workable nor professional.

So for idea visualization, I need a flexible yet intuitive mindmapping and/or diagram tool. It should be easy to install or require no installation at all, stylistically appealing but clear, and of course be free/libre open source (i.e. no Visio, please).

I looked at tools like Dia, some online services like LucidChart, and other allegedly free alternatives, and have settled on Pencil Project for now. It is very basic, but seems to provide all I need for now. The cross-platform availability is excellent, it can even be installed as a Firefox extension.

On the other hand, depicting the reality of existing systems and code bases usually requires some sort of generation process that analyzes the real structure, e.g. a network layout, the content of a Java package, an Apache Camel route, etc. and turns it into a renderable file.

For Java source code, I found PlantUML quite interesting, with its javadoc integration and quick dependency diagram support.

I might follow up with more detailed posts about how I use the tools mentioned above. One aspect I have not looked into yet, is how I can embed the visualizations within AsciiDoc.

  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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

%d bloggers like this: