I'm searching for a tool to create software architecture diagrams, like the one below, but i want to be able to zoom out and see only the general picture of the diagram, and zoom in to see the fine grained details of the diagram. Added some example below...

There is such a tool like this?

  • OS Type: Any... WebApp too.
  • GUI approach or Graphviz like doesn't matter
  • Price: Paid or Free

PS: Right now i'm looking for anything with this zooming capability, as this example shows:

Diagram Example
Example of zooming capability (click image for larger variant)


3 Answers 3


I think this sample, implemented in GoJS, demonstrates something similar to what you are looking for: https://gojs.net/latest/samples/regrouping.html.

Note the slider that the user can adjust to implement "semantic zooming". Instead of using a slider one could using mouse wheel turning or finger pinching to achieve the same effects.

This sample diagram does not have any links in it, nor does it use a tree layout; but it would work the same even if it did have both.

  • Pretty cool solution, looks very promising. I'll take a look.
    – vitors
    Commented May 16, 2018 at 23:59

Use http://draw.io/ with containers as explained here.

There are two options:

  1. simply use the shape named "container"
  2. select a shape, select the "Style" tab, scroll down in the "Properties" list and select the "Container" checkbox

If you are too paranoid to use it in-browser, either use the desktop app or host it yourself.

I am not affiliated, but a big fanboy.


Have you looked at https://icepanel.io? It uses the C4 model and allows zooming into different levels of detail.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.