search

andymchugh / andrewbmchugh-flow-panel

Apache License 2.0
38 stars 2 forks source link

How to properly export SVG files from diagrams.net (draw.io) so that they would be clickable #103

Closed simonasmulevicius-humbility closed 2 months ago

simonasmulevicius-humbility commented 2 months ago

Hey, epic add-on!

I was wondering, how do you export diagrams so that the users can interact with the diagram cells and click on the corresponding links? It seems that out-of-the-box example does work properly. However, it didnt work for me :,(.

image

I followed the following steps:

  1. Copied your SVG: https://raw.githubusercontent.com/andymchugh/andrewbmchugh-flow-panel/main/examples/darkThemeSvg1.svg
  2. I imported your SVG to diagrams.net without any changes
  3. Exported using default parameters
  4. Using simple localhost server I served myself the new SVG
  5. When I put your and mine SVGs side by side, it seems that my diagram isn't clickable (Here I used the default Grafana Flow widget and just changed the SVG URL) image

Probably other community members would also benefit from knowing this. Appreciate any guidance!

andymchugh commented 2 months ago

I think the online draw.io has recently changed so plugins defined on the url don't get loaded. You have to go to extras->plugins add svgdata. It's that plugin that preserves ids in the svg allowing it to map to the yaml. Can you give that a try?

simonasmulevicius-humbility commented 2 months ago

Oh, nice! That solved my problem! Thanks a lot

simonasmulevicius-humbility commented 2 months ago

Just final question - how do you keep the colors? Because for me it seems that my imported-and-exported SVG has darker background colors (my diagram is on the right): image

I am using the following settings for draw.io SVG export: image

andymchugh commented 2 months ago

Great. I'll get the docs updated

simonasmulevicius-humbility commented 2 months ago

image I've found an anwser to my previous question - it seems that classic theme should be used