Architecture diagram tool with zoom-in for detail

Question

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:

_{Example of zooming capability (click image for larger variant)}

Answer 1

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.

Answer 2

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.

Answer 3

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