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?

[syh7]

Just bumping this to show there is still interest in allowing links in diagrams

[Bert-Proesmans]

I've been following this thread for a while and wanted to make the same suggestion as simchanu29 again, and i'm actually not sure if his suggestion was interpreted correctly as using draw.io lightbox mode instead of exporting as html. Don't export the diagram as HTML.

A purely additive feature would be to keep the PNG render as main and printable content, but while in read mode add an onclick handler to the PNG that opens a css lightbox² displaying drawio in lightbox mode (<diagram-url>/?lightbox=1#<diagram-data>).

This does not allow for indexing the diagram contents since the diagram is still considered an opaque blob, just like today. BUT it does allow for diagram text to be selectable, diagram links to be clickable, diagrams to be interactive (if using draw.io plugins). And the best part is that we skip the headache that is purifying the SVG data itself because of cross-site scripting risk.

To directly answer on the first post, this approach allows
✔️ 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.
=> Opening draw.io in lightbox mode will happen through an iframe which is a css block element and difficult to precisely position into text content. But not impossible to do, with/without custom styling.
❗ Embedded SVG's would be better since text can flow around and through the diagram.
❗ I'm interested to see examples of more closely related diagrams to text for functional purposes. In my opinion this leads to a bad content state, but it's not my intention to judge.

✔️ This provides another form of interlinking between pages within bookstack.

The implementation would be similar to clicking on the PNG from article edit mode, it only uses a different diagrams 'launch mode'. ²The css lightbox is just fancy, clicking the image might as well open drawio spanning the entire viewport. If the css lightbox could be stylable after a few iterations on the code, each user can decide for themselves if they want to open the diagram in fullscreen or some other way. Fullscreen will probably be enough for most people.

[carlossierra311]

We were just creating some navigation maps for our end users and found out that all the links included on the diagram didn´t work. We would really appreciate this capability as well if it could find its way into BookStack.

Ps. No matter the outcome of this thread/request, I'd like to take the opportunity to thank you, @ssddanbrown for all the splendid work you do to bring us such a useful tool. Thanks!!!

[hdeppert]

I just checked the two SVG options and the first one is as simple and easy as the PNG option:

1. Save the draw.io diagram as a SVG file -> http/s links are working fine in browsers, but not links to subpages of the diagram
2. Use draw.io SVG Embedding -> all links are working, but only in the fullscreen view calling the draw.io-viewer
   • I guess this could be somehow customized to use a self-hosted viewer instance

IMHO: For me, the most interactive / convenient way would be to use the draw.io HTML Embedding directly, fully inline with full interaction/link capabilities.

[PhilippRieth]

To get this functionality, we currently export diagrams as iframes and embed them into BookStack. The only downside is that every time you open the diagram and perform a change, you have to again, export it as an iframe again and replace the existing diagram on the BookStack page. I think this is what @Matthew2000 suggested.

Export as iframe (with base64 encoded diagram in iframe URL)

Embedded as media into BookStack page

have clickable links in BookStack (diagrams.net viewer)

It's a workaround, but it works for us as we don't change most flow charts on a daily basis.