search

languitar / drawio-batch

Command line converter for draw.io diagrams
65 stars 12 forks source link

SVG conversion produces lots of errors #9

Closed NicolasRouquette closed 5 years ago

NicolasRouquette commented 5 years ago

Attached is an example of a diagram that results in lots of errors when converted with drawio-batch:

drawio-batch example.xml example-out.svg
[xmldom warning]    unclosed xml attribute 
@#[line:5,col:1475]
[xmldom warning]    unclosed xml attribute 
@#[line:5,col:2294]
[xmldom warning]    unclosed xml attribute 
@#[line:5,col:4346]
[xmldom warning]    unclosed xml attribute 
@#[line:5,col:6922]
[xmldom warning]    unclosed xml attribute 
@#[line:5,col:8005]
[xmldom warning]    unclosed xml attribute 
@#[line:5,col:9304]
[xmldom warning]    unclosed xml attribute 
@#[line:5,col:11622]
[xmldom warning]    unclosed xml attribute 
@#[line:5,col:13167]
[xmldom warning]    unclosed xml attribute 
@#[line:5,col:15865]
[xmldom warning]    unclosed xml attribute 
@#[line:5,col:17366]
[xmldom warning]    unclosed xml attribute 
@#[line:5,col:18185]
[xmldom warning]    unclosed xml attribute 
@#[line:5,col:20237]
[xmldom warning]    unclosed xml attribute 
@#[line:5,col:22813]
[xmldom warning]    unclosed xml attribute 
@#[line:5,col:23896]
[xmldom warning]    unclosed xml attribute 
@#[line:5,col:25195]
[xmldom warning]    unclosed xml attribute 
@#[line:5,col:27513]
[xmldom warning]    unclosed xml attribute 
@#[line:5,col:29058]
[xmldom warning]    unclosed xml attribute 
@#[line:5,col:31756]
[xmldom warning]    unclosed xml attribute 
@#[line:5,col:33257]
[xmldom warning]    unclosed xml attribute 
@#[line:5,col:34076]
[xmldom warning]    unclosed xml attribute 
@#[line:5,col:36128]
[xmldom warning]    unclosed xml attribute 
@#[line:5,col:38704]
[xmldom warning]    unclosed xml attribute 
@#[line:5,col:39787]
[xmldom warning]    unclosed xml attribute 
@#[line:5,col:41086]
[xmldom warning]    unclosed xml attribute 
@#[line:5,col:43404]
[xmldom warning]    unclosed xml attribute 
@#[line:5,col:44949]
[xmldom warning]    unclosed xml attribute 
@#[line:5,col:47647]
[xmldom warning]    unclosed xml attribute 
@#[line:5,col:49148]
[xmldom warning]    unclosed xml attribute 
@#[line:5,col:49967]
[xmldom warning]    unclosed xml attribute 
@#[line:5,col:52019]
[xmldom warning]    unclosed xml attribute 
@#[line:5,col:54595]
[xmldom warning]    unclosed xml attribute 
@#[line:5,col:55678]
[xmldom warning]    unclosed xml attribute 
@#[line:5,col:56977]
[xmldom warning]    unclosed xml attribute 
@#[line:5,col:59295]
[xmldom warning]    unclosed xml attribute 
@#[line:5,col:60840]
[xmldom warning]    unclosed xml attribute 
@#[line:5,col:63538]
[xmldom warning]    unclosed xml attribute 
@#[line:5,col:65042]
[xmldom warning]    unclosed xml attribute 
@#[line:5,col:65861]
[xmldom warning]    unclosed xml attribute 
@#[line:5,col:67913]
[xmldom warning]    unclosed xml attribute 
@#[line:5,col:70489]
[xmldom warning]    unclosed xml attribute 
@#[line:5,col:71572]
[xmldom warning]    unclosed xml attribute 
@#[line:5,col:72871]
[xmldom warning]    unclosed xml attribute 
@#[line:5,col:75189]
[xmldom warning]    unclosed xml attribute 
@#[line:5,col:76734]
[xmldom warning]    unclosed xml attribute 
@#[line:5,col:79432]
[xmldom warning]    unclosed xml attribute 
@#[line:5,col:80936]
[xmldom warning]    unclosed xml attribute 
@#[line:5,col:81755]
[xmldom warning]    unclosed xml attribute 
@#[line:5,col:83807]
[xmldom warning]    unclosed xml attribute 
@#[line:5,col:86383]
[xmldom warning]    unclosed xml attribute 
@#[line:5,col:87466]
[xmldom warning]    unclosed xml attribute 
@#[line:5,col:88765]
[xmldom warning]    unclosed xml attribute 
@#[line:5,col:91083]
[xmldom warning]    unclosed xml attribute 
@#[line:5,col:92628]
[xmldom warning]    unclosed xml attribute 
@#[line:5,col:95326]
[xmldom warning]    unclosed xml attribute 
@#[line:5,col:96827]
[xmldom warning]    unclosed xml attribute 
@#[line:5,col:97646]
[xmldom warning]    unclosed xml attribute 
@#[line:5,col:99698]
[xmldom warning]    unclosed xml attribute 
@#[line:5,col:102274]
[xmldom warning]    unclosed xml attribute 
@#[line:5,col:103357]
[xmldom warning]    unclosed xml attribute 
@#[line:5,col:104656]
[xmldom warning]    unclosed xml attribute 
@#[line:5,col:106974]
[xmldom warning]    unclosed xml attribute 
@#[line:5,col:108519]
[xmldom warning]    unclosed xml attribute 
@#[line:5,col:111217]
[xmldom warning]    unclosed xml attribute 
@#[line:5,col:112721]
[xmldom warning]    unclosed xml attribute 
@#[line:5,col:113540]
[xmldom warning]    unclosed xml attribute 
@#[line:5,col:115592]
[xmldom warning]    unclosed xml attribute 
@#[line:5,col:118168]
[xmldom warning]    unclosed xml attribute 
@#[line:5,col:119251]
[xmldom warning]    unclosed xml attribute 
@#[line:5,col:120550]
[xmldom warning]    unclosed xml attribute 
@#[line:5,col:122868]
[xmldom warning]    unclosed xml attribute 
@#[line:5,col:124413]
[xmldom warning]    unclosed xml attribute 
@#[line:5,col:127111]
[xmldom warning]    unclosed xml attribute 
@#[line:5,col:128596]
[xmldom warning]    unclosed xml attribute 
@#[line:5,col:129415]
[xmldom warning]    unclosed xml attribute 
@#[line:5,col:131467]
[xmldom warning]    unclosed xml attribute 
@#[line:5,col:134043]
[xmldom warning]    unclosed xml attribute 
@#[line:5,col:135126]
[xmldom warning]    unclosed xml attribute 
@#[line:5,col:136425]
[xmldom warning]    unclosed xml attribute 
@#[line:5,col:138743]
[xmldom warning]    unclosed xml attribute 
@#[line:5,col:140288]

The file exported using drawio-batch is example-out.svg. There were errors during the execution and the svg file produces errors when loading.

The file exported from the drawio UI is example.svg.

example.zip

davidjgraph commented 5 years ago

What is the input XML?

NicolasRouquette commented 5 years ago

example.zip

NicolasRouquette commented 5 years ago

See the attached zip for three files:

languitar commented 5 years ago

SVG output is more or less a hack in drawio-batch, as is the whole process on how to generate images. However, I don't know what is failing here. I will have to check. If you can use a different format, this should probably work better. For vector graphics, you can also use PDF output in the meantime.

languitar commented 5 years ago

Ok, I see what happens here. Internally, I am parsing the generated SVG using a DOM parser which assumes perfect XML. However, your document contains embedded HTML that is not XML-compliant. That generates the errors.

languitar commented 5 years ago

Hm, I can get rid of the parsing errors and with some more work I would get close to what drawio desktop is creating as an SVG. However, due to the embedded foreignObjects, nothing apart from a browser is able to actually handle these SVGs. Neither eog nor inkscape like foreignObjects. @NicolasRouquette what is your use case for exporting SVGs?

NicolasRouquette commented 5 years ago

@languitar The use case stems from automating the process of generating a specification document from content sources, such as markdown, html, etc... This use-case involves a Continuous Integration (CI) process that runs over all the content sources to perform all required conversions to produce the final specification document.

There are many possible realizations of this use case. Currently, I use bikeshed because it provides pretty good support for the features I need to generate high-quality specifications like those published by the W3C. For diagrams, I recently added support in Bikeshed for importing SVG diagrams (see this PR: https://github.com/tabatkins/bikeshed/pull/1427). This then requires that for each kind of diagram "source", there must be some kind of command-line interface for converting the diagram source to SVG. For example, with UML diagrams written in PlantUML textual syntax, there is such a CLI for converting *.puml files to *.svg files. With draw.io diagrams, I would like to use drawio-batch as a CLI for doing a similar conversion for draw.io's *.xml files.

languitar commented 5 years ago

Ok, I see, if things are browser-based, then the foreign content should be ok. Because for anything else outside of the browser I would have preferred PDF then. I will see what I can do.

languitar commented 5 years ago

Sorry for the long delay. After some fiddling with SVG and javascript I have some kind of working version available. @NicolasRouquette could you please test whether the implementation in branch bug-9 helps in your case?

NicolasRouquette commented 5 years ago

@languitar Ah, much better! However, I noticed some differences w.r.t. manual SVG export.

Transformation.zip

This zip has 3 files:

Compare the two SVG files; there are some arrows that have become rounded rectangles.

NicolasRouquette commented 5 years ago

A while ago, I said the -d <diagram> argument is 1-based; however, when testing bug-9, I ran into some problems where some diagrams were properly found with a 0-based index, whereas others were found using a 1-based index. This is bizarre.

I tried several diagrams; the only problem is the change of the arrow into a rounded rectangle.

jetwitaussi commented 5 years ago

On my side errors are gone too, but i lost background colors and don't have links

languitar commented 5 years ago

Maybe I can recover the background style, which I would have to transfer from the outer page into the svg. But I am not sure about the links. Doesn't look like they are rendered by default when using the export functionality, which is usually not used for SVGs

jetwitaussi commented 5 years ago

Yes using export feature on draw.io website export svg with links and colors

languitar commented 5 years ago

@jetwitaussi thing is that SVG is treated differently from other export formats and requires the full construction of the internal data structures. My current export of SVG is done using the normal export mechanism for other image formats using more or less a hack. I can't construct a full graph in my export tool without changing everything just for SVG. That's the reason why SVG is tricky here and behaves differently.

jetwitaussi commented 5 years ago

i understand :) but if you found another hack ... :p

anyway, thanks for your tool!

NicolasRouquette commented 5 years ago

Ah, I hadn't checked for links. That's an essential feature in my case. Indeed, as @jetwitaussi observed, they are missing. This is really unfortunate.

languitar commented 5 years ago

Sorry for the long delay. Again, I have an 80% solution. This is really a nightmare with SVG in this thing. I hope you can get along with this. Somehow, the arrow shapes on the left in your example don't work here an I don't see any reason why. I will try to update the internal drawio version. Maybe that helps.