Conversion fails in SVG.py due to <image>

[markthompson94]

Traceback (most recent call last):
  File "/usr/local/homebrew/bin/graphviz2drawio", line 8, in <module>
    sys.exit(main())
  File "/usr/local/homebrew/lib/python3.9/site-packages/graphviz2drawio/__main__.py", line 16, in main
    output = convert(args.to_convert, args.program)
  File "/usr/local/homebrew/lib/python3.9/site-packages/graphviz2drawio/graphviz2drawio.py", line 26, in convert
    nodes, edges = SvgParser(svg_graph).get_nodes_and_edges()
  File "/usr/local/homebrew/lib/python3.9/site-packages/graphviz2drawio/models/SvgParser.py", line 27, in get_nodes_and_edges
    nodes[title] = node_factory.from_svg(g)
  File "/usr/local/homebrew/lib/python3.9/site-packages/graphviz2drawio/mx/NodeFactory.py", line 60, in from_svg
    rect = self.rect_from_ellipse_svg(SVG.get_first(g, "ellipse").attrib)
  File "/usr/local/homebrew/lib/python3.9/site-packages/graphviz2drawio/models/SVG.py", line 2, in get_first
    return g.findall("./{http://www.w3.org/2000/svg}" + tag)[0]
IndexError: list index out of range

[markthompson94]

digraph_example.docx

Example .dot text included to assist troubleshooting

This .dot file was generated using the Python Diagrams module, using the following Python code;

from diagrams import Diagram
from diagrams.aws.compute import EC2
from diagrams.aws.database import RDS
from diagrams.aws.network import ELB

with Diagram("Grouped Workers", show=True, outformat="dot", direction="TB"):
    ELB("lb") >> [EC2("worker1"),
                  EC2("worker2"),
                  EC2("worker3"),
                  EC2("worker4"),
                  EC2("worker5")] >> RDS("events")

[squio]

Ouch, got the same here; reduced testcase causes the same crash:

strict digraph CDD {
  splines="true"
  labelloc="t"
  label="CDD"
  // sep=.5
  Hello [label="/aa/bb\nHello"]
  World [shape=box, color=blue, fontcolor=blue, tooltip=aaaa]


  Hello -> { World }
}

Removing the tooltip attribute makes the conversion work

[markthompson94]

@hbmartin could you possibly take a look into this for us? Much love and thanks!!

[ams1]

just came across this really interesting repo -> @hbmartin THANK YOU for sharing!

@markthompson94 : i'll probably try to fix this over the weekend if it's still not working and get back to you.

[ams1]

@markthompson94

The SVG file produced by graphviz via the Diagram lib (using the python code you provided) looks something like:

...

<!-- 1st g tag -->
<g id="edge3" class="edge">
  <title>94a1a24258c54e028e3b9cb0054dadc9&#45;&gt;739289249c574bffb2ed3d49b021b1da</title>
  <path fill="none" stroke="#7b8894" d="M338.5,-406.81C338.5,-406.81 338.5,-363.22 338.5,-363.22"/>

  <!-- this has a polygon tag -->
  <polygon fill="#7b8894" stroke="#7b8894" points="342,-363.22 338.5,-353.22 335,-363.22 342,-363.22"/>
</g>

...

<!-- 2nd g tag -->
<g id="node5" class="node">
  <title>2c1229f79a9141eea4b8ef297492ec26</title>
  <image xlink:href="does-not-matter/.local/lib/python3.8/site-packages/resources/aws/compute/ec2.png" width="101px" height="101px" preserveAspectRatio="xMinYMin meet" x="432" y="-335"/>
  <text text-anchor="middle" x="482.5" y="-219.6" font-family="Sans-Serif" font-size="13.00" fill="#2d3436">worker4</text>
  <!-- this does NOT hava a polygon tag -->
</g>

...

As we can see above, the 1st <g ...> tag HAS a <polygon .../> tag, while the 2nd g tag DOES NOT have a <polygon .../> tag, instead it has an <image ... /> tag.

Conclusion (might be wrong, I had just a quick look):

The problem is that this lib needs to have EITHER a <polygon .../> OR an <ellipse.../> in every <g ...> tag (see corresp. code below) and the python Diagrams returns an <image ...> tag instead, which is not supported.

@hbmartin Could you please just confirm -> yes/no? 😄

graphviz2drawio/graphviz2drawio/mx/NodeFactory.py

Lines 55 to 60 in 7519935

	if SVG.has(g, "polygon"):
	rect = self.rect_from_svg_points(
	SVG.get_first(g, "polygon").attrib["points"]
	)
	else:
	rect = self.rect_from_ellipse_svg(SVG.get_first(g, "ellipse").attrib)

[markthompson94]

@hbmartin would you possibly be able to take a look at this? It'd be fantastic to have the ability to integrate Custom nodes from Python Diagrams in the graphviz2drawio module

[fabiomurillo]

Was anyone able to workaround this issue?

[markthompson94]

Think we need @hbmartin to help us out there 🤞

[markthompson94]

Hi @hbmartin, when you have any time would you be able to look into this at all?

thanks so much!!

[karth123]

@markthompson94 @fabiomurillo @ams1 I came across the repo for the same reason as you guys, wanted to render my diagrams file into drawio. I did resolve the svg issue after hacking around the library files a bit. (The solution is too long to share here). But even if you solve the svg render issue the edge placement is very poor and the actual XML generated is not satisfactory by any means.

I have created a script which does a better conversion into drawio SOLELY for diagrams library code. I know its 2 years too late but im putting it out there for anyone who had this issue like me.

https://github.com/karth123/diagrams-to-drawio

[hbmartin]

Work has started on this in #49 and is slated for 0.4 release!

[hbmartin]

The fix for this will ship in 0.4 tomorrow, please reopen this issue if it doesn't meet your needs.