Embed draw.io diagram in post

(Steve Reinert) #1

I like using draw.io for diagramming. It would be nice to aid discussions with diagrams from there using the latest version of the diagram. Draw.io allows you to embed an editable drawing as an HTML/Javascript snippet, but this doesn’t currently work in a Discourse post.

Would creating a onebox file for draw.io be the right approach? Or is this a new feature?

(Jeff Atwood) #2

Does draw.io support OpenGraph or oEmbed?

If it does, it is a simple matter of adding the domain to the whitelist.

(Steve Reinert) #3

Looks like it uses mxGraph. As far as I can tell, this isn’t related to either of those.

(Jeff Atwood) #4

You should ask them to support OpenGraph or oEmbed.

(Sam Saffron) #5

or a PR to the onebox gem to add mxGraph support.

(Steve Reinert) #6

I sent the request. I don’t know if anything will come of it.

(Steve Reinert) #7

This might be a good reason for me to learn Ruby. I will think about it.

(David Benson) #8

draw.io is just the application only, we don’t actually store the data, auth users, etc and we don’t host anything to embed.

That said, if you want the data in discourse and use draw.io to edit the diagrams, we support that using postMessage.

All you need to do is open a window or iframe, send us a message with the XML and wait for the updated XML. Here is how:

To open draw.io (in embed mode) in a new window:

var editWindow = window.open(‘Flowchart Maker & Online Diagram Software’);

Then wait for the ‘ready’ message (can be customized via the ready URL
parameter) and send the XML (or an empty string to create a new

editWindow.postMessage(xml, ‘https://www.draw.io’);

draw.io will send back the updated XML if the user clicks Save or an empty string if the user clicks Exit. Here is a simple example:

Here is a more complex example that uses Webdav to store the XML:

So yes, it’s slightly more complex than embedding, but it’d give you built-in diagramming.

Images from Gliffy embed not rendering
Images from Gliffy embed not rendering