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.