Feature bpmn-js diagram import + modeling in walkthrough

[nikku]

Is your feature request related to a problem? Please describe

It is incredibly helpful for me as a developer to go through end-to-end flows in the scope of a walkthrough. These flows usually touch numerous high level concepts and allow me to understand deeply how things plug together, and also how I need to extend things.

Describe the solution you'd like

In this particular instance two flows are of special importance:

• From XML to visual -> understand the BPMN import process
• From click to change -> understand the BPMN modeling process

Describe alternatives you've considered

None.

Additional context

Came up in the context of bpmn-io/bpmn-js#1790.

[nikku]

Import process TLDR:

• BPMN XML is being parsed via moddle-xml, using BPMN meta-model (provided by bpmn-moddle) ▶️ moddle ("business object") tree
• Importer (https://github.com/bpmn-io/bpmn-js/tree/develop/lib/import), specifically https://github.com/bpmn-io/bpmn-js/blob/develop/lib/import/Importer.js#L40 creates diagram elements on the canvas based on moddle tree ▶️ diagram is rendered
  • moddle tree is traversed (https://github.com/bpmn-io/bpmn-js/blob/develop/lib/import/BpmnTreeWalker.js), semantic and grapical ("di") parts are collected
  • BPMN importer is invoked with semantic, di, parentGfx to create a diagram-js element (gfx) using the canvas APIs (https://github.com/bpmn-io/bpmn-js/blob/develop/lib/import/BpmnImporter.js#L103)
  • In the process bpmnElement.added({ element }) is emitted allowing other components to hook into the import process