srl-labs/clab-io-draw

Containerlab and Draw.io Integration

clab-io-draw's Issues

Link and its label IDs should have more meaningful names

A meaningful ID, would help to create grafana dashboards, with the flowchart plugin.

<mxCell id="6955bd28e4f532e5d3c134ab6a0aed99-trgt" value="e1-32" style="labelBackgroundColor=#ffffff;;" parent="6955bd28e4f532e5d3c134ab6a0aed99" vertex="1" connectable="0">

Label aligment is prevented

I noticed shape labels of generated drawio diagrams cannot be positioned (Top, bottom etc.) Labes don't follow position setting. I found out it is because of duplicate style attributes. There are many of those.

`outputfile` arg can be deducted from the input if not set

It would be easier if the output file for the clab2draw script would not be required at all.
When -o is omitted, the output name can be just <input-name>.drawio and this will work for 99% of users.

A smart entrypoint that detects the input type

@FloSch62 here is another ux improvement.
Instead of having the entrypoint.sh that calls a certain script that we require a user to pass as an env var, lets make a smart entrypoint (I presume a python one) that would check if the input file has a yml/yaml extension or a drawio or no extension.

In the first case it is clear that we need to use clab2draw

And in the 2nd one it is the work for draw2clab.

With this logic it is not anymore required for a user to juggle with the env var passed at runtime.

Automatic (precaned) grafana dashboards from drawio

Starting from a clab file, it would be coo. to have a tool (can be another python script) that generates the JSON grafana dashboard displaying some pre-caned things like the link speed on each of the ports.
Some things to take into account:

• the metrics format is determined by the collector (e.g, gnmic and processors), so the key values need to be probably used as input parameters.
• The metrics tags can also be changed in grafana and they need to be consistent for the flowcharts plugin to work
• Goal is not to have a do it all tool, but rather a simple dashboard that can be further expanded and customized for every lab...

Suggestions for visual improvements

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?

clab2drawio interactive mode

I think it would be helpful to have an interactive mode for the drawio generation. The graph-level and icon options are not needed for clab and I personally would like to keep them out of the clab file while still keeping this awesome feature of creating a drawio diagram. This mode could be optional by invoking the command with an "interactive" flag while the current mode can still be the default way to go.

I am thinking of an interactive menu where the user can choose the options on the fly after the clab file has been parsed.

Example

Parsing clab file... Found 8 nodes... Done.

DEFINE GRAPH LEVELS
Choose level 1 nodes:
[X] borderleaf1
[X] borderleaf2
[ ] spine1
[ ] spine2
[ ] leaf1
[ ] leaf2
[ ] host1
[ ] host2

OK!


Choose level 2 nodes:
[X] spine1
[X] spine2
[ ] leaf1
[ ] leaf2
[ ] host1
[ ] host2

OK!

Choose level 3 nodes:
[X] leaf1
[X] leaf2
[ ] host1
[ ] host2

OK!

Choose level 4 nodes:
[X] host1
[X] host2

OK!

No more nodes left. Done!

DEFINE GRAPH ICONS
Choose dcgw icon nodes:
[X] borderleaf1
[X] borderleaf2
[ ] spine1
[ ] spine2
[ ] leaf1
[ ] leaf2
[ ] host1
[ ] host2

OK!


Choose spine icon nodes:
[X] spine1
[X] spine2
[ ] leaf1
[ ] leaf2
[ ] host1
[ ] host2

OK!

Choose leaf icon nodes:
[X] leaf1
[X] leaf2
[ ] host1
[ ] host2

OK!

Choose server icon nodes:
[X] host1
[X] host2

OK!

No more nodes left. Done!