Feature: Embed draw.io diagram editor

[rhartmann]

Feature proposal: draw.io in embedded mode

It works like this:

• Show an iframe that loads the draw.io diagram editor in embedded mode
• Send an existing diagram (PNG file with embedded XML) to the iframe using window.postMessage, or create a new diagram. A JSON protocol is used to send and receive to/from the iframe
• When the user clicks the save button, the iframe is asked to export the diagram (PNG+XML format by default, could also be PDF, SVG, ...) back to the application embedding the iframe
• Save the resulting file as page attachment and reload the page

draw.io provides a walkthrough for embedded mode.

To display the diagram in a page, one could insert the image file ![](./diagram.png) or a clickable image ![[](./diagram.png)](./diagram.png) as usual. Loading the diagram into the editor requires some Javascript onclick / ondblclick event listener though, see the walkthrough. To keep it simple (and Markdown-compatible), a specific image alt text like ![draw.io](./diagram.png) could designate draw.io diagrams as such (and allow the event listener to listen on them).

The embedded URL (default publicly available is https://embed.diagrams.net/) should be configurable so you could host your own draw.io diagram editor, e. g. using their Docker image.

[redimp]

I will think about how draw.io embeddings could be done. But this is on the long list. But I will focus on general embeddings, starting with Image Frames #178 and make sure that new embeddings can easily added via plugins.