A Better Way of Visualizing Microservice Architecture

I’ve been using draw.io pretty much all the time for any kind of UML diagrams, charts or graphs. It gives a fair compromise between feature richness and manual control.

But I’m going to show you how to automate some boring mouse clicking ;)

Avoid mistakes from the beginning

This wouldn’t be so funny if it wasn’t so true. It’s better to have a clear picture of relationships and responsibilities. Or you’ll end up with the picture above ;)

The trick is you’re much less likely to build something so bad while constantly acknowledging how wrong it looks.

When you draw — you are giving yourself a report on how things will interact, what is the domain, context, boundaries, etc.

“Plans are worthless, planning is invaluable.”

― Winston Churchill

Getting hands dirty

Imagine a simple social app. This a simplistic setup, but you may notice amount of connections present.

Client-side: Front-end App and Browser Extension.

API Gateways: Auth API and Main API

Microservices: Photos, Chats and Friends Microservices

I spent quite a while arranging boxes, drag and dropping arrows and stuff. And only because I wanted to align them in a more readable way.

Can you believe how tedious it is with 50 ones? 100? And then I remove one? I bet you drop this task and go back to coding.

In ❤ with Graphviz

I got my inspiration from Terraform — a tool for creating and maintaining your production infrastructure. It allows you to setup everything from AWS EC2 instances to clusters and load balancers from 50 cloud providers.

It has an interesting terraform graph command which generates a visual representation of your config.

So I decided to apply same technique but on a bit higher level of Microservice Architecture.

This is a config written in DOT language for Graphviz.

All you need is to render this into a .png. You can use online editor or render on your machine. I created a docker image to keep my system clean:

cat file.dot | docker container run --rm -i vladgolubev/dot2png > file.png

With this simple code in 2 minutes you get such an amazing output!

So the idea is that adding a new dependency between microservices was never so easy. All I do is add a new line of code and Graphviz takes care of putting stuff together beautifully.

And as a final touch, I like to add colors. So you immediately see:

• Green — node.js
• Red — api gateway
• Yellow — front-end
• Blue — storage, database
• Grey — 3rd-party API

Not the best color coding, but you got the idea ;) Believe me, it’s so much easier with huge graphs.

Conclusion

I had a problem with introducing frequent changes into a microservices graph. Every change imposed a manual tinkering with arrows. Now I can experiment and see how new microservices fit into my system.

You can go beyond and put this into VCS to have a history diff of your architecture changes!

But it’s up to you. Choose the best tool for your needs. Google for microservice visualization and you’ll be bombarded with tons of commercial solutions.

Design for visibility to make inspection and debugging easier.

― Basics of the Unix Philosophy