Embed draw.io diagram in post

feature
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