How to create a web app with bpmn-js which can draw BPMN diagrams


I am not sure if this is a dumb question. If it is I apologise.

I am new to this and I do not know NodeJs or any of the libraries even though I have considerable knowledge of JS.

My requirement is to create a web application that can draw new BPMN diagrams and save them as well as upload existing ones to modify them. And then to extend some BPMN elements such as BPMN activity.

I have downloaded almost everything from the site and I have installed NodeJs as well. I also installed node_modules and bower_components through command prompt.

I can run the examples such as ‘bpmn-js-seed-master’ where I see an sample diafram, but I can’t figure out how to get the toolkit and other full features to create a new BPMN diagram as the demo shows.

Please help me with this. I know there is lot of description there but somehow I can’t figure it out even after spending few days on this.

I need this as part of my study. I am a research student.

Thank you very much for your time (even reading this:)).

Have you checked out the examples simple-bower and simple-common-js yet? These are great starting points.

Hi Philipp,

No I haven’t, I will do, thanks.

Thank you very much for the links and advice.

I think I have some issues with downloading things through npm. I am new to these things. So I am not sure if I am doing it all correct.

Thanks again.

I suggest you to explore the modeler example we provide, too. The contained app/index.js displays a few of the APIs that are relevant to you.

Note that you are not forced to use npm and the whole setup. Starting with plain JavaScript from the bpmn-js-seed will allow you to build the same thing, without any complex setup.

Hi nikku,

Oh thank you so very much! Your reply helps me very much. It’s great to know i don’t have to use npm, thanks.

This is what I was looking for. Not to display just a BPMN diagram.

What i need most is the toolkit because I need to experiment with it to see how to extend some of the existing BPMN elements needed as part of my research.

This is the best piece of open source work I could find that satisfy my requirements. I will be writing about this work in my paper giving it the due credit. Then I need to show that I can use this editor to add new elements as BPMN extensions.

Thanks again, you made my life easier!

Hi Philipp and nikku,

I thank both of you for helping me out. Both replies helped me getting this done, thank you very much!

I used ‘bpmn-js-seed-master’ as example and now I can view both toolbox and the diagram. I don’t need the BPMN diagram dispalyed there so I am trying not to display the diagram on page load (I know I can erase it though)

My initial requirement is to have a working system like this:, where I can create a bpmn diagram and save it. Also I should be able to upload a diagram and change it. Working on it now.

Please advise if there is an easy way out.

Thank you very much!


I have some other question please.

Is it possible to get the modeller working for me without any NodeJs server setup? I mean is it possible to use apache with simple JS for my requirement please?

Once I get this working and running, i need to add more elements to the toolkit, is that still possible with JS without any NodeJS environment please?

Code such as var Modeler = require(‘bpmn-js/lib/Modeler’); does not work so I just am wondering if I need NodeJS to proceed with this.

Thank you very much!

You can use bpmn-js without any specific server-architecture behind it by bundling all your source-files with browserify. This compiles all your source files into one that can be loaded by the browser.

The bpmn-js team automates this using grunt which is configured via a Gruntfile.js. You can find an example here:

1 Like

Hi felixlinker,

Thank you very much for your response and for the detailed description. I will try as advised, thanks.

This will help me overcoming the issues I face I guess.

Thank you again!