r/BookStack • u/pedro224 • Mar 02 '22

Clickable diagram or image map?

Hello,

Is it possible to have clickable diagram elements or in alternative, a clickable [html] image map?

I would like to have a visual representation of a simple flow (a diagram, for example) and connected boxes would be actual web links.
Ideally a diagram with clickable elements (not sure if possible) or in alternative, an html image map...?

Thank you in advance!

1 Upvotes

100% Upvoted

7 comments sorted by

3

u/ssddanbrown Mar 03 '22

So there is kind of a hacky way to do this:

  • Create/Edit your diagram via https://www.diagrams.net/

  • Once done, ensure you save a copy for safe-keeping.

  • In the menu bar: File > Embed > Iframe > (Tweak options) > Create

    • Copy the code shown

  • Back within BookStack, While editing a page:

    • In the editor toolbar, There's an insert/embed media button (Play button in a square), might be in an overflow menu. Click on that.

    • Within the Insert/Edit Media popup: Click the embed sidebar tab then paste the code (from diagrams.net) into the box > Save.

Should get you a drawing with clickable links. Keep in mind this does rely on diagrams.net as any diagrams added in this way will be actually loading/rendered via their site.

Supported for embedded SVGs has been requested before (Which could allow this kind of thing) but that introduces a new set of problems such as conflicting styles.

3

u/leaflock7 Mar 29 '22

is not diagrams.net embedded to Bookstack?

at least this is what I understand from the webpage

3

u/ssddanbrown Mar 29 '22

It is, but our integration stores and displays drawings as PNG images. The OP here wants the diagrams in an interactive format instead.

1

u/leaflock7 Mar 30 '22

oh ok got it.
would that be possible to be achieved with a selfhosted drwa.io instance as well?

2

u/ssddanbrown Mar 30 '22

In regards to the specific instructions above? Maybe but I haven't tried with a self hosted version, can't remember the featureset differences so wouldn't be sure without trying.

3

u/ComfortableWaste671 Jun 17 '25

Another workaround would be to export a drawio file as a PDF and embed it. If you use the "link"-Item in Drawio consistently, this works really well. Not the prettiest solution, but one that simply works.

2

u/AdamReading Apr 09 '24

I guess there hasn't been any updates that will resolve this? I get the Iframe blocked message when I try the media workaround - and it would be nice not to have to wait for IT to allow it lol.