"To get started, create a bpmn-js instance"

On https://github.com/bpmn-io/bpmn-js, in README.md, under “Usage”, it reads " To get started, create a bpmn-js instance and render BPMN 2.0 diagrams in the browser:"

Then a snippet of javascript appears.

This snippet appears to be intended as part of a specific html/javascript context. Would you please provide the entire html that might include this snippet?

Hi @pflagerd, welcome!

Did you already see our examples? Especially this one can be a good starting point.

Hi Niklas!

I did see, have forked, and have been exploring bpmn-js-examples. What I didn’t see was a complete form of that particular example, and this created a cognitive dissonance for me.

Probably my OCD acting up again.


I wonder if this might be a bit more accessible?


To get started copy the code below to a local file (e.g. hello-viewer.html):

  <script src="https://unpkg.com/bpmn-js@8.2.0/dist/bpmn-viewer.development.js"></script>
    let c = document.createElement('div');

    let viewer = new BpmnJS({ container: c });

            .then(response => response.text())
            .then(xml => viewer.importXML(xml));

Now load the file using a browser (Chrome, Firefox, etc.) and you will see a BPMN diagram:


Thanks for your thoughts. Really appreciate it!

If you think we can improve things in the README in terms of getting started, feel free to open a PR and we can discuss it there.

In general, I think we would like to keep our README small and clean. Instead of adding more explanations, maybe linking to our walkthrough would be a better approach.