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

Users
1

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?

2

Hi @pflagerd, welcome!

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

3

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.

8^)

4

I wonder if this might be a bit more accessible?

Usage

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

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

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

    fetch('https://cdn.staticaly.com/gh/bpmn-io/bpmn-js-examples/dfceecba/starter/diagram.bpmn')
            .then(response => response.text())
            .then(xml => viewer.importXML(xml));
    </script>
</html>

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

image

5

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.