Nuno Veiga

how to embed a diagram into confluence

So recently I’ve ran into a problem. We needed our shiny systems architecture diagram to be placed on the wiki software that we use internally here at Metabroadcast, Confluence. After a bit of searching, a solution was found that matched all our requirements while maintaining the ability for future edits, for free.

However, there were a few requirements that needed to be respected.

the requirements

  • The diagram has to include all of MetaBroadcast’s system, which is quite large and complex
  • The diagram had to be clickable, so we couldn’t just embed an image
  • Paid software for creation wasn’t an option, as our systems don’t change that often and it would be a superfluous spend.

the instructions

Start by going to draw.io. This is a Google Drive app developed by the amazing team that does mxGraph. It’ll first ask for your Google credentials and then you’ll have to authorise the app to add itself to your Drive.

Once you’re in, you have the ability to create a diagram; this is a very straightforward and easy interface, there should be no problems with this step. Just create the simplest or the most intricate diagram to your heart’s content. Mine had cake. The combined love of diagrams and cake is a powerful thing.

When you’re done with your diagram, it’s time to put it into confluence. This will require that you have a plugin for displaying HTML on your Confluence pages. If you search the Marketplace for HTML Macro, there are a few free options, just pick the one that strikes your fancy. Once you do, edit the Confluence page where you want your diagram to be in and add the HTML Macro (Insert > Other Macros > Search for the HTML Macro you just installed).

Back to draw.io. Click on file > embed > HTML. It will open a lightbox like this:

 

draw.io embed

 

The final step is to copy the contents of both of these boxes and paste it into your newly created macro box.

the result

Press save on your Confluence document and voila! Here’s your gorgeous diagram, in HTML format, zoomable, and with links in all the right places! Isn’t it diagramtastic? Here’s what I cooked for this post:

 

xVbLbus2EP2WLoyubOhpW8skjZtFLxogKG67pMSRxITSCBTlR74+Q4l6xQ6SAC6uN+YcUkNyzjkjLfy74vinYlX+AznIhefw48L/Y+F5rh9t6M8gpw7ZmMgAmRLcLhqBJ/EKFnQs2ggO9WyhRpRaVHMwwbKERM+wFKXdwiarWNanH4GnhMlz9KfgOu/Qrbce8QcQWd5v466jbqbWpz4Hh5Q1Ui9byN61YH0ue5CjM9SnA049EFmgYuXsTK+IxQxQUI/FsvcV8/uXbD/bNUbFQc0gKcqXaSH9eyJTIVIiMyqOdyANoT1XQbiNwA8CP9q6Xpg4yy7P7qvLhworKO1hv5ky3KQuXwcsgDBI0yTsU+6ZbGw5zjipc1aZoShaAdzmupAUujTcg9KCFPAXi0E+Yi20QFP5GLU2FR8W3EiRmQmNFaFtppu66iRH5HUIjXOtacGNuYC3S3i5klhyLEWtVwkl9HaHakli1eb+3q6pJDJe08hz3JD+HHP1stF0abbkTZqKcvVcZbSBvSYdB3p3faGYI6tkUcACtDoZAXbLfd/qwLpz0MVhlL8b2oLmU+mHfgcyq55syD1yRwNLXxv+U4P6O342JSPhmXp3j/6E3xUQ9CCUKLPfRmF206agtImtKG3CYkU1S9hQ0WeMqYLmqQ9F0p52LqiJPgigfmKU0SslkdhQrttDLjQ8VSwx4IFa3Fw9qZDyDiV2pvLT9mfSaIUvMJnZ7Rxna2Tyf7DoBu9YdC6w2DM7ZZFO9F0SKZzw+EWLBmeOBE6N14aodI4Zlkzej+itwqbkYDKask1qDkeh/zXwKlrb8L823NjoEZSga7SdzjxLZVWn9ok+6NaHl4nyferBPVHmnN+kie6JjWoF86ES6SXGVAY2z+WWdk63Asm02M8PdBUDmhgpMb2n25ZTX3ThYMI6x2oVA6sxjSW9mOq4USdrxgSlpB2oi5quphUwbQaVQt4k7dBusTTmAb48CJ0vbcf7xMXtu/FDF6sci7ihcnzm2jPSo8hxJqRf153h+p07+547cWdvxF9hzv5L68runFnTWG2wYbvsExu+Y+T6NrSfWb/ChhSOX1jt3OTb2b9/Aw==

 

If you enjoyed the read, drop us a comment below or share the article, follow us on Twitter or subscribe to our #MetaBeers newsletter. Before you go, grab a PDF of the article, and let us know if it’s time we worked together.

blog comments powered by Disqus