A better way to visualize microservice architectures

I have been using draw.io for some things related to UML flowcharts, diagrams or graphs. It strikes a reasonable balance between rich functionality and manual user control.

But, next I'll show you how to automate some boring mouse clicks ;)

Avoid making mistakes from the beginning

A slide from Daniel Wood’s “Microservices: The Right Way” talk

Things wouldn't be that interesting if it wasn't like this. In fact, it would be nice to have a clearer picture showing the relationships and responsibilities between components. Otherwise the end result would be something like what you see above ;)

The trick is to keep looking at what went wrong while you're doing it, so you're less likely to do it so badly.

While making the diagram - you are also giving yourself a sense of the whole picture, how it will interact, what the problem domain is, the context, the boundaries, etc.

"Paper talk is useless, long-term strategic planning is priceless."

― Winston Churchill

Take action!

Let's say we have a simple social application. Of course, this is a very simple setting, but you can notice that there are many connections here.

Client: front-end application and browser extension.

API network management: authentication API and main service API.

Microservices: Photos, Charts, and Friends.

I spent quite a while arranging the blocks, dragging and dropping arrows and tweaking them, just because I wanted to align them in a more readable way.

Can you imagine how boring it would be to arrange 50 of these blocks? 100? And if I delete one? I bet you'll give up on it and come back to code.

A bond with Graphviz

I got inspiration from Terraform - a tool for creating and maintaining production infrastructure. It supports configuring any infrastructure-related services, including AWS EC2 instances to clusters and load balancers from 50 cloud vendors. It also provides an interesting terraform graph command that can generate a visual chart display based on the existing configuration.

Example output of the 'terraform graph' command

So I decided to use the same technique, but for a higher level microservices architecture. Below is a Graphviz configuration written in DOT.

digraph architecture

rankdir=LR;



subgraph client_side_apps {

  front_end -> {auth_api, my_app_api};

  extension -> {auth_api, my_app_api};



  {rank=same; front_end, extension, auth_api};

}



subgraph api_gateways {

  my_app_api -> {photos_ms, chats_ms, friends_ms};

}



subgraph microservices {

  photos_ms->{database};

  chats_ms -> {database, cache};

  friends_ms -> {database, facebook_api};

}

} 

You just need to render it to a .png file. You can use an online editor or render directly on your machine. In order not to dirty your system, I created a Docker image for this:

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

By executing this simple line of code above, you can get such an amazing output in just two minutes!

Tip: You can copy and paste the code into an online editor: http://dreampuf.github.io/GraphvizOnline/

Adding a new dependency between microservices has never been easier. All I need to do is add a new line of code and Graphviz will organize them nicely.

As a finishing touch, I like to add some color. So you can immediately see the effect:

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

This isn't the most optimal color layout, but you already know how to do it ;)

Believe me, this is easy to do with a lot of charts.

All the code is at: https://gist.github.com/vladgo ... 70882

summary

I had a problem with frequently adding changes to a microservices architecture diagram. Each change had to be manually patched with arrows. Now I can experiment and see how the new microservices fit into my system. Of course, you can do better and put it in a version control system, so you can have a history of changes to the architecture diagram!

But it's up to you. Choose the tool that's most suitable for you. Google search for [microservice visualization]( https://www.google.com/search?q=microservice visualization) and you'll be bombarded with a ton of commercial solutions.

Visual design makes inspection and debugging easier.

― The basic philosophy of Unix