Draw.io using SVG to support links within diagram

[mark-james]

Describe the feature you'd like If the draw.io integration saved the diagram as SVG rather than png then links created within the diagram could also be followed directly from the bookstack page

Describe the benefits this feature would bring to BookStack users Diagrams elements can be used as shortcuts to access other pages within bookstack.

Often more visual representations are easier to understand. So a diagram could replace a table of contents.

This provides another form of interlinking between pages within bookstack.

Additional context With E11 support for bookstack disappearing anyway, is there a reason not to use SVG instead?

[ssddanbrown]

Thanks for the suggestion @mark-james, I had not thought about links within drawings.

Would somewhat rely on #1103 in addition to many other changes.

is there a reason not to use SVG instead?

Yeah, SVG's are harder to deal with, There's a lot more to them (From an editor/display point of view) whereas with a PNG everything is effectively encapsulated within a single unit.

[mark-james]

Ok. Thanks @ssddanbrown .

I'm happy to contribute a pull request if you could point me in the right direction as far as changes that need to be made? (Or at least things I need to consider)

This is a fairly important change to me as I'm going to start moving a knowledge base onto bookstack soon. The existing solution while inferior in many ways unfortunately does allow for links within diagrams. So it's going to cause me some conflict if I can't provide users this feature.

[ssddanbrown]

Considerations

• The back-end image upload endpoints would need to be made compatible with SVG.
• The front-end image manager would need to be updated to work with SVG.
• The draw.io front-end code would need to be updated to handle draw.io SVGs while ensuring full feature compatibility when re-importing (So no layer loss for example, Would need to check if SVG's retain all data themselves or if extra metadata needs to be saved).
• All of the above would need to be made backwards compatible with the existing png-based system.
• Both the markdown editor and WYSWIYG editor drawing implementations would need to be updated to handle SVG's, Might be a challenge to cleanly a large drawing as SVG content in markdown due to the amount of content that will be embedded. Might tie into next point:
• Need to consider how to display SVG drawings without issue, Without limited possibility of external page styles affecting them. This will be tricky as I think draw.io drawings can contain standard elements such as <h1> or <p> tags. Maybe you could iframe them into the page? Would mean cleaner markdown code but sizing/layout gets trickier. Perhaps shadow DOM could work here? Needs investigation.

[mark-james]

Thanks @ssddanbrown. Lots to consider! I'll begin looking at this early next week.

[simchanu29]

Draw.io can generate embeded html. Would integrating this functionnality as html code be easier ?

[ssddanbrown]

@simchanu29 Unfortunately not really. Some considerations above would be lesser, but some new considerations would be introduced.

[bakkertjebrood]

Is there any update on this issue? Would be really nice to have links within the created diagrams.

[ssddanbrown]

@bakkertjebrood No, No update.

[passchn]

Are there any updates on this or do you plan to support SVG/HTML embeds in the future?

[ssddanbrown]

No, no further update on this. Would likely be activity here if anything was in progress.

[ssddanbrown]

Have attempted to solve this within #3452. Unfortunately, the complexity and lack of portability of drawings as SVGs have proved to cause issue. Draw.io diagrams rely on web-rendering, not just SVG compliance, and are too complex for our default PDF renderer and reflects poorly on content portability in general when in SVG format.

Not sure where to take this. Could export in both formats but then requires duplicate storage and format tracking/juggling, Not a mess I want to walk into. Maintaining a choice between "SVG-based drawings or working PDF exports" would also suck.

[Matthew2000]

Is it possible to use Draw.io in a view only mode? https://www.diagrams.net/blog/online-diagram-viewer I don't know how exactly this works but it seems to indicate that there is a view only mode.

This might be a solution to getting links made in the diagrams to be usable and allowing viewers a better way to look at them.

[fmos]

Have attempted to solve this within #3452. Unfortunately, the complexity and lack of portability of drawings as SVGs have proved to cause issue. Draw.io diagrams rely on web-rendering, not just SVG compliance, and are too complex for our default PDF renderer and reflects poorly on content portability in general when in SVG format.

Not sure where to take this. Could export in both formats but then requires duplicate storage and format tracking/juggling, Not a mess I want to walk into. Maintaining a choice between "SVG-based drawings or working PDF exports" would also suck.

Thank you for your effort @ssddanbrown and for providing bookstack in the first place!

In #3452 I noticed that you checked off "Support SVG for the standard image gallery."

Would you want to consider to merge this feature, even without SVG support for embedded drawings? I guess, this would allow to create diagrams with links outside bookstack and embed them.

[ssddanbrown]

Would you want to consider to merge this feature, even without SVG support for embedded drawings?

@fmos No, the same issues for drawings would apply for images. The referenced checked off todo item was not in relation to full supported and accepted SVG support for image uploads, it was just in reference to adding support to the image manager functions.

[vincentbernat]

Alternatively, we could double the size of the PNG. This can be done by adding scale: 2 to the export action. We can apply 50% for width/height styles to get back the image in the right format. However, I don't know how to handle the transition. The scale should be stored somewhere.

[ssddanbrown]

@vincentbernat That wouldn't address the fundamental request here, of supporting links within drawings. I'd consider resolution/pixel-density to be a separate desire/request/issue/conversation.

[at-ng]

Something to consider when implementing this, with SVG another nice feature that could be added at the same time is the possibility to index diagrams. That way you could find things that are in diagrams when searching (just being able use the standard browser page search would be good as well). Sometimes you need to have very large diagrams then search would be great (zoom as well but that might be a different issue).

[sarang-apps]

Could a possible solution to handle this be to use a javascript canvas with the background image as a png, and links as regions with onclick events?