How to (not) roll your own BPMN diagram editor – An introduction to bpmn-js and its friends

This session introduces bpmn-js: An extensible BPMN toolkit that serves as the core editing foundation in the Camunda Modeler as well as Cawemo. We start with embedding the tool in a simple web-based modeler. Step by step, we will extend it and end up with our very own — special — BPMN editing experience. Nyan cats and dark mode included.

Transcript

1. How to (not) roll your own BPMN diagram editor – An introduction to bpmn-js and its friends Nico Rehwaldt
2. Who is talking? • Camundo since 2012 • Project lead bpmn.io • Friend of Open Source software development 2 https://github.com/nikku
3. Agenda • bpmn-js in a nutshell • Let’s roll our own BPMN diagram editor • Why should I build my own? 3
4. bpmn-js in a nutshell
5. The BPMN modeling experience in the Camunda stack 5
6. The BPMN modeling experience in the Camunda stack 6
7. 7 A BPMN editor, not a drawing tool https://github.com/bpmn-io/design-principles
8. 8 Mission: BPMN everywhere, for everyone https://bpmn.io/toolkit/bpmn-js/
9. An embeddable, extensible JavaScript library https://github.com/bpmn-io/bpmn-js-examples/tree/master/starter 9
10. Let’s roll our own BPMN diagram editor Demo Time
11. 11 Demo Sketch • Open editor • Show HTML demo skeleton (basic BPMN diagram being displayed) • Show file import and download • Introduce services aka modeler.get(‘canvas’).zoom(‘fit-viewport’) • Introduce extension mechanism aka additionalModules • Disable rendering (override bpmnRenderer) • Add minimap => https://github.com/bpmn-io/diagram-js-minimap • Add linting => https://github.com/bpmn-io/bpmn-js-bpmnlint • Enable service task only modeling https://github.com/nikku/roll-your-own-bpmn-editor
12. Why should I build my own? An executive summary
13. Tailor towards your use case and target group 13 Strategic / Happy Path Modeling Technical Automation Domain Specific Modeling Trim down Extend Embed
14. Because twelve palette symbols are not enough https://bpmn.io/blog/posts/2015-modeling-revamped.html 14
15. 15 Because you like it dark and handwritten https://github.com/bpmn-io/bpmn-js-examples/tree/master/theming
16. Because your labels don’t fit your tasks https://github.com/ElCondor1969/bpmn-js-task-resize 16
17. Because your colleagues like cats, too! https://github.com/bpmn-io/bpmn-js-nyan 17
18. Because you model with your kids at home https://bpmn.io/blog/posts/2020-modeling-kids-at-home-edition.html 18
19. Thank you
20. Questions?
21. Go further Roll your own BPMN editor • https://github.com/nikku/roll-your-own-bpmn-editor/ • https://github.com/bpmn-io/bpmn-js-examples • https://bpmn.io/toolkit/bpmn-js/walkthrough/ • https://github.com/bpmn-io/awesome-bpmn-io • https://github.com/bpmn-io/bpmn-js-examples/tree/master/custom-elements • https://github.com/bpmn-io/diagram-js-minimap • https://github.com/bpmn-io/bpmn-js-bpmnlint Talk to us • https://github.com/bpmn-io • https://forum.bpmn.io/ 21