Ability to zoom in and out of architecture

[niyazpk]

"Diagrams" is a brilliant idea that will change the way we draw our architecture.

I think this can be extended a bit to make it even more powerful.

Some of our systems are huge - think hundreds or thousands of components. Right now, we show the architecture by drawing multiple diagrams, for each zoom/abstraction level, and also by not showing irrelevant details/components. This is very tedious because we have to manage multiple diagrams which go out of sync all the time.

Here are two related feature requests for "Diagrams" to make it easier to work with larger architectures:

1. Have the ability to zoom in/out of a diagram. I am not asking for dynamic zoom on the image itself, but rather, the ability to render the output in a predefined zoom level. For example, let's say you have a large number of "Clusters" at various depths. I should be able to say don't draw inner components of any clusters below a particular depth from the root. So if I say render(zoom = 3) it will only show the very top level architecture of my system, while if I say render(zoom = 10) it will show all the fine grain details.
2. Ability to render only a subtree in a larger architecture. So I should be able to say render(root = componentName, zoom = 3) and we should only render the componentName and its children at the given zoom level. This will allow users to render the details of the subcomponent they are interested in.

The whole point of this feature request is to allow writing the complete architecture of your system in one place, but still be able to represent at different levels of abstraction as needed for the use-case. I believe something like this will make this much better for system architecture diagrams than something like draw.io.

Once again, thanks for creating this awesome project. ❤️

[mingrammer]

Hi @niyazpk.

This feature is cool interesting, and seems a little challengeable to me :)

1. Hiding the inner components below a particular depth might be not too hard, it could be achieved by just don't render all the nodes inside the n-depth cluster.
2. Currently, the diagrams draws a graph from top to bottom in the order the code is written. To support subtree rendering, it should able to pick the specific subgraph and only render that graph. But I'm not sure it is possible with graphviz library used by diagrams internally. Therefore, I have to research more details about this feature before working on it.

Thank you for the great proposals, I need to review it more detailed.

[niyazpk]

Without looking at the current architecture, I believe Ideally the solution would involve pruning the tree before calling graphviz.

Obviously, you can advise better if this is even possible. I will take a look at the code when I get some time to see if there is a way to achieve this without changing anything in the graphviz layer.

[houqp]

Perhaps my comment should be tracked as a separate issue, but I think what would be really useful is to generate an interactive zoomable svg diagram like what typical flamegraph does. This way, we can let viewer explore the design starting from high level overview and dive into each component as needed.

[nandvard]

could we add ability to minimize/maximize manually i.e. zoom in / out of a 'cluster' like draw.io has in this example @mingrammer