Embed draw.io diagram in post

Feature
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?

2

Does draw.io support OpenGraph or oEmbed?

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

3

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

4

You should ask them to support OpenGraph or oEmbed.

2 Likes
5

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

2 Likes
6

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

7

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

2 Likes
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(‘https://www.draw.io/?embed=1’);

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
diagram):

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:

https://gist.github.com/alderg/c0ad5ce81bfbab6875bb

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

https://plus.google.com/u/0/+DrawIo1/posts/Co6PiWftzAX

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

1 Like
9

How could I white list “https://viewer.diagrams.net/”?