srl-labs / clab-io-draw Goto Github PK
View Code? Open in Web Editor NEWContainerlab and Draw.io Integration
License: MIT License
Containerlab and Draw.io Integration
License: MIT License
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">
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.
@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.
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:
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.
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.
Let's take last diagram with 12 leafs and make it better. What if diagram looks like this:
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.
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.
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.
What do you think? Would it be useful to have something like this? Any other practices which could be used to make diagrams better?
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.
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!
Recommend Projects
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
Recommend Topics
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web
Some thing interesting about web. New door for the world.
server
A server is a program made to process requests and deliver data to clients.
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization
Some thing interesting about visualization, use data art
Game
Some thing interesting about game, make everyone happy.
Recommend Org
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.