jgraph / drawio

draw.io is a JavaScript, client-side editor for general diagramming.
https://www.drawio.com
Apache License 2.0
39.54k stars 7.4k forks source link

redundant image representation in drawio's xml file #3978

Open nnako opened 8 months ago

nnako commented 8 months ago
  1. Is your feature request related to a problem? Please describe.

In my daily practice, I use multiple hand-drawn graphical elements within my drawings. By doing so, I want to give my drawings a personal note. E.g. there could be an arrow head like this one:

image

pointing to the right, or an empty document representation like this one:

image

I use these graphical elements at multiple places within the drawing. Now, when I save such a drawing as a local drawio file, the file size grows significantly with each contained image. Even though there might be 100 images of the exact same content, it seems that the diagram editor creates a complete image representation for each of these identical image copies. A single representation looks like this within the XML file:

<mxCell id="cFxgZgud2R1_OvFhJSZt-31" value="" style="shape=image;verticalLabelPosition=bottom;labelBackgroundColor=default;verticalAlign=top;aspect=fixed;imageAspect=0;image=data:image/png,iVBORw0KGgoAAAANSUhEUgAAABsAAAAaCAYAAABGiCfwAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAB3RJTUUH4gwIFAQA6F8bbwAAAXpJREFUSMftlr2KwkAUhc8kCwHxJxaCiCikEAIWWgoW+gB2voZvoJU+gdiJ2oqVlQ9gaZfKasU3iNiJmrPF7BJ1oybKWiweuEUy9+abM0zujCCJV0nBC/WG/RNYqQTGYmA6DZomqGlgJgP2euBgAM5m8NzCnQ5YLILNpvc4SJ6FbdMAyGfj8rskIbz+s/UanE6BcBjo94HFAkgmAcOQ48slcDgAux2w338vkQI4jkQpCnA8Qtx1dhmjkZxpNMqbajRcV8Oht7O7MJIIhWRmt+sN+pkQQBYK3iDfsHpdZuZyv0GW5YIM4zrIN+x009j2OUzX5XtNI22bxtMwkjBNmZ3NuqBWy3U1Ht92FQh2ulzttoSpqnxOpe6DAsFIolqVFapKVioufDL5A5ht0xCCFIJUFFmdSPgDkQzWG3Udq/lc+gEAIYBI5A8bcbkMkc+7jalW818rHrkWbDYw4nF8CgE4jkdbuqKPR44KXcfKsoDtNlideF943rBb+gKU+wImuvHKMgAAAABJRU5ErkJggg==;" vertex="1" parent="1">
  <mxGeometry x="510" y="370" width="27" height="26" as="geometry" />
</mxCell>

so, there is the whole image contained within the BASE64 portion of the style attribute. And all the other identical images are represented within different mxCell elements but containing the exact same style attribute.

  1. Describe the solution you'd like

Would it be possible to "optimize" the file structure by using references to a commonly used data content as soon as there are more than one identical ones within a diagram? I know that e.g. the application yED does it like this when storing graphical elements into their graphml files. Doing so, the memory consumption could drastically be reduced in case of heavy usage of identical image elements.

  1. Describe alternatives you've considered

live with large diagram files ;-)

davidjgraph commented 8 months ago

Yes, we're very aware of this one and it would be good to have it. The problem is it's relatively complex to implement.

nnako commented 7 months ago

ok. noted.

as you say within the readme that this project is not "open-contribution", how would possibly skilled people be able to contribute? would this be possible somehow? are there any links to your development standards and guidelines mentioned? which way would a developer have to go in order to become one of the chosen ones actually able to contribute?

Peeeet commented 6 months ago

I have been curious about this concept - "symbolization" or "instancing" AKA defining and using references similar to SVG symbols / definitions. I know things like Figma (and the open-source alt PenPot) are somewhat able to do this, but I am sure it was no small task. You can kinda do this right now by using image links instead of full-on embedding the image, but that requires an internet connection at all times and a reliable place to host these images yourself that allow external linking.

I am very curious though, if there is any potential in allowing people to define their own symbol libraries like all of the built in ones, but such that the graph nodes can reference them like all of the built-in libraries currently do - IE if you edit the style of any of the complex looking objects in all of the libraries, they all just have a "shape" tag that references the symbol's name in said library. This is compared to if we currently make our own scratchpad "library" and drag something in from that, it is no longer "linked" to the one from the library - it is just copied in.

Obviously this probably works because all of the built-in shape libraries are compiled into the drawio executable / war file? but if we could embed out own libraries into a drawio file and then just have nodes that reference shapes from said embedded library, that could also allow images to be embedded in the library and re-used.

I'm well aware this is definitely a big ask / complex implementation, but it does seem to appear in some other softwares, and is a part of the SVG standard, so it seems like a logical step for it to appear in a diagramming tool (it's already VERY prevalent in CAD and modelling software like VectorWorks and Blender)

This is something else I would gladly contribute a "bug / feature bounty" to and I'm sure many others would if it's a matter of developer time. Even if it was a "Here's how you compile your own DrawIO and include your own libraries but it is unsupported beyond that point" kinda thing, I have already been experimenting with self-hosting DrawIO via docker for just this purpose if it were to become a thing...