Upgrade to Pro — share decks privately, control downloads, hide ads and more …

How to (not) roll your own BPMN diagram editor ...

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.

Nico Rehwaldt

April 24, 2020
Tweet

More Decks by Nico Rehwaldt

Other Decks in Programming

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. 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
  5. Tailor towards your use case and target group 13 Strategic

    / Happy Path Modeling Technical Automation Domain Specific Modeling Trim down Extend Embed
  6. 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