[Question/Suggestion] NOT an issue #1
Comments
|
Hi, Thanks for kind words, glad to hear that you enjoying N2G. Regarding link labels for drawio module, was not able to figure out how to position them properly along the edge so that behaviour would be deterministic, hence decided to encode src and trgt details in link data instead. mxGeometry Also, had a look at yed demo to get what I mean about proper source and target label auto positioning - yed handles it for you, while drawio seems to lack such a functionality. Reason why I added src_label and trgt_label to drawio is to make API more consisted, so that I can supply same data structures to yed and drawio modules simelteniously making as much use of it as I can without adding any significat overhead required to Regarding styles - think you can supply them to drawio module as a python variables instead of text files: In your case of YAML dictionary it would be something like this: I deliberately omitted drawio styles from N2G, as do not want to maintain them if any changes would be done by DrawIO developers, also, yaml dictionary you did seems a good way of doing that, would rather leave it to users to define such a mappings for their specific use cases. |
|
re-read you comment, looks like you adding link labels positions in the xml template, hardcoding them to certain values,. These values, do they always produce good label placement results on the links? |
|
Hi, I chose those values because they seem to be work fine for that I do which are mostly L1/L2/L3 diagrams. They are offset values so they'll adjust to distance. The closest you set the shapes to one another the closest the labels get to the source or target and vice versa. See picture below
Answering your question, they're good enough for me. At the end what I want is to be able to automatically generate them and being able to edit them. N2G codediagram = drawio_diagram()
diagram.add_diagram("Page-1")
c_style = "edgeStyle=none;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;startArrow=none;startFill=0;endArrow=none;endFill=0;strokeColor=#0066CC;strokeWidth=2;"
diagram.layout(algo="kk")
diagram.add_link("R1", "SW1", style=c_style, src_label=f"Gi1/0/1", tgt_label="Te1/2/1")
diagram.add_link("R2", "SW1", style=c_style, src_label=f"Gi1/0/1", tgt_label="Te1/2/2")
diagram.add_link("R3", "SW1", style=c_style, src_label=f"Gi1/0/1", tgt_label="Te1/2/3")
diagram.add_link("R4", "SW1", style=c_style, src_label=f"Gi1/0/1", tgt_label="Te1/2/4")
diagram.add_link("R5", "SW1", style=c_style, src_label=f"Gi1/0/1", tgt_label="Te1/2/5")
diagram.add_link("R6", "SW1", style=c_style, src_label=f"Gi1/0/1", tgt_label="Te1/2/6")
diagram.add_link("MGMT", "R1", style=c_style, src_label=f"Gi1/0/1", tgt_label="Te1/2/6")@dmulyalin I really like the drawio Organic layout algo, do you know where it comes from? I haven't tested yed. Do you reckon is a better prospect than drawio? Sorry for the late response, I was out of town :) |
|
Thank you for your feedback, added support for Regarding layout algorithms, have a look at Yed graph editor, it has very helpful features and layouts to speed nodes, links and labels arrangements. Thanks for sharing your ideas and code samples with me to improve N2G. |
|
Hi @dmulyalin I'll give it a go and let you know. Thanks |
|
Worked perfectly! @dmulyalin , Denis right? In [3]: diagram = drawio_diagram()
In [4]: diagram.add_diagram("Page-1")
In [5]: c_style = "edgeStyle=none;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;startArrow=none;startFill=0;endArrow=none;endFill=0;strokeColor=#0066CC;strokeWidth=2;"
In [6]: diagram.add_link("R1", "SW1", style=c_style, src_label=f"Gi1/0/1", trgt_label="Te1/2/1")
In [7]: diagram.add_link("R2", "SW1", style=c_style, src_label=f"Gi1/0/1", trgt_label="Te1/2/2")
In [8]: diagram.add_link("R3", "SW1", style=c_style, src_label=f"Gi1/0/1", trgt_label="Te1/2/3")
In [9]: diagram.add_link("R4", "SW1", style=c_style, src_label=f"Gi1/0/1", trgt_label="Te1/2/4")
In [10]: diagram.add_link("R5", "SW1", style=c_style, src_label=f"Gi1/0/1", trgt_label="Te1/2/5")
In [11]: diagram.add_link("R6", "SW1", style=c_style, src_label=f"Gi1/0/1", trgt_label="Te1/2/6")
In [12]: diagram.add_link("MGMT", "R1", style=c_style, src_label=f"Gi1/0/1", trgt_label="Te1/2/6")
In [13]: diagram.dump_file(filename="github-issue1.drawio", folder="./output/")
In [14]: diagram.layout(algo="kk")
In [15]: diagram.dump_file(filename="github-issue1.drawio", folder="./output/")I moved shapes around a bit to look at the labels position.
Just a note a side, I had to install Cheers, |
Hi there,
First of, thanks for this work, I found out we've done the same only that yours is awesome and reusable and mine was script style hehe.
It's good to see that you actively adding more stuff. I thought it was a one off thing and wouldn't be any more updates and I started to refactor it on a local repo on my machine.
I see you've added src_label and target_label but in a different way of how I've done it.
Following the string declarations for nodes and links I went down this path
XML String
# source edge label x="-0.5" y="1" drawio_link_source_label_xml = """ <mxCell id="{id}" value="{value}" style="{style}" parent="{parent}" vertex="1" connectable="0"> <mxGeometry x="-0.5" y="1" relative="1" as="geometry"> <mxPoint as="offset"/> </mxGeometry> </mxCell> """ # target edge label x="0.5" y="-1" drawio_link_target_label_xml = """ <mxCell id="{id}" value="{value}" style="{style}" parent="{parent}" vertex="1" connectable="0"> <mxGeometry x="0.5" y="-1" relative="1" as="geometry"> <mxPoint as="offset"/> </mxGeometry> </mxCell> """And then something like below, basically assuming that if you pass a src_label there will be target_label, otherwise just pass label.
Python Code
The XML should look like below, I'm adding a suffix
-srcand-tgtto the link id.Output XML
Ignoring the style, the picture below illustrates what I mean.
DrawIO Diagram output
Additionally I found it a lot easier for my use cases to have a yaml file with styles where I can basically declare more entries on each dict for customization instead of having multiple txt files.
YAML Code
Thoughts?
The text was updated successfully, but these errors were encountered: