Embedding bpmn-js Modeler in a Webpage (simple-bower example)

Developers
1

Hi all,

I am looking to embed a bpmn.io like editor within a page I’m experimenting with. I see all of the repositories for BPMN on the github site but it is very overwhelming. Which project is right for me as a starting point?

I have the simple-bower example working, but it only lets me view a previously created BPMN diagram. It looks like BPMN-js is promising, but the github says “use it in your web applications to display BPMN 2.0 diagrams”. I would like to be able edit the diagrams as well as view.

I appreciate any help or hints you could give me.

Kevin

2

We provide a pre-packaged version of the modeler, too.

If you have the simple-bower example checked out locally, just replace the viewer include with

<script src="bower_components/bpmn-js/dist/bpmn-modeler.js"></script>

Use BpmnJS#saveXML(callback) to get modeled diagrams out of the library.

1 Like
3

Oh wow, that is simple! Thanks Nikku. Are there any other scripts I need to include? The modeler is missing the left-hand toolbar and the draggables that surround the mouse.

I am using the pre-packaged bpmnjs.

Thanks

4

Solved my own problem. Was missing one of the stylesheets from bpmn-js.

Thank you for you time