New BPMN Plugin for WordPress

Wanna show some BPMN?

Do you run a blog, and would you like to to display BPMN diagrams in your posts?

You could draw those diagrams somewhere, export them as PNG or whatever and insert them in your post. But that is not very handy, especially when the diagrams are a bit bigger and people can’t read them anymore. Zooming and out would be nice.

Thanks to Neville Lugton, there is a solution!

You’re a WordPress User?

If yes, read on. If not, get lost.

Install bpmn.io for WordPress

You can install “bpmn.io for WordPress” directly from the WordPress Plugin Store. Just search for bpmn, and there it is. Install and activate the plugin and you’re ready to go.

You don’t know what bpmn.io is? Read on!

Create BPMN File

The plugin enables you to upload and display BPMN 2.0 XML files. Now you need to create such a file. There are many BPMN tools out there that allow you to do that.

The easiest way is to go here and start modeling right away.

You have just opened the demo app of bpmn.io, the very same project that also powers the WordPress plugin. Once you’re done with your diagram, hit the download button. It will save your diagram as BPMN 2.0 compliant XML in your download folder.

Upload BPMN file in your WP Blog

Just create a new blog post, and click on “Add Media”. Go to “Upload Files” and select the BPMN file you’ve created. It will be uploaded and added to your Media Library.

Insert BPMN diagram in your blog post

Once it’s in your Media Library, you can just insert it like an image or similar.

You will find a line in your blog post. There you can adjust the width and height if you like, what I would recommend. In this blog post, I have set the height of the diagram to 250px:

[bpmn url=”http://www.bpm-guide.de/wp-content/uploads/2015/09/bpmn-wp-example.bpmn” height=”250px” ]

When you publish (or preview) your blog post, you can zoom in and out the diagram by hovering over it and using your mouse wheel. You can also move it inside the window where it is rendered (click and hold and drag).

Done – What’s next? That’s up to you!

This plugin was created within two days as part of the annual Camunda hackdays. Neville is still maintaining and improving it. There is a good chance you will soon be able to use advanced features of bpmn.io such as annotations and, yes, the actual possibility to edit your diagram within WordPress.

But actually we cannot promise this. It’s really more of a side project. So it basically depends on your feedback. You can influence this by:

• using the plugin and letting us know, for example on Twitter or as a comment here
• rating the plugin and providing feedback in the WordPress Marketplace
• bribing Neville by sending him a bottle of your favorite local beer

Enjoy 🙂