Suggestions for visual improvements

[JaakkoRautanen]

I got inspired by the work you guys are doing to visualize network topologies. As network diagrams has been my passion for years I would like to contribute to this project by trying to describe some ideas to make the project even better.

Here I'm mostly focusing on Leaf / Spine type of networks. Many of these techniques apply to other type of topologies as well.

I already started to implement the features I'm going to describe here, but soon realized my most valuable contribution might be to share ideas in detail.

Limitations of current implementation

Current implementation works well with small topologies like this:

However, when trying to add more leafs to visualize production grade topologies, it starts to fall apart:

Here interface names starts to overlap. Links starts to overlap in the Spine end as well. It becomes really hard to see exactly what is connected where. Also in these examples we are using really short version of interface names. If you want to have something like "Gi0/0/0/34" it starts to become even more mesh. In other words the implementation is lacking visual scalability features.

Luckily there are techniques we can leverage to make diagrams way more scalable.

Suggestion for improvements

Let's take last diagram with 12 leafs and make it better. What if diagram looks like this:

Routing links more scalable way

First improvement is to route links between devices more scalable way. It means links are links are orthogonal (simple) with curved corners. Links should also have line jump style as gap so that we don't confuse jumps and corners.

Spine interfaces (read = upper level device interfaces) are moved further down the cable to the place where they have more space.

All interface names are rotated. In this diagram style you can easily fit in longer interface names.

Note, link between Spine and leaf consists of four separate connectors. Here they are colored for sake of clarity:

We need four to be able to have these arrow connectors for Grafana to visualize traffic rates. If that is not needed three would be enough.

Placement of shapes in adjacent layers

One additional need when using style like this is to prevent devices on adjacent layers (we could have more than 2 layers) to be located too close to each other in x-axis. If this is not done link routing becomes mesh:

So some spacing is needed to prevent this happening.

Something else

Hmmm.. I just got idea we could have four arrows to be able to illustrate both in and out traffic rates:

One additional thing I usually do when drawing diagrams like this is to locate device label (hostnames etc.) like this:

It makes it even more scalable as you can place leafs way more near to each other. For some reason shapes the code generates don't follow text positioning features of drawio (top, bottom etc..). Would be nice to fix this as well.

Small details

• No need to group interfaces with their device
• No need to adjust traffic rate labels randomly (as in current implementation)

Any comments

What do you think? Would it be useful to have something like this? Any other practices which could be used to make diagrams better?

[JaakkoRautanen]

Ideally these features should be configurable in styles.

[FloSch62]

I love it. Do you have any drawio file or even code?

[JaakkoRautanen]

Drawio file sent directly as I couldn't attach it here.