Customise BPMN elements while use library connections

Hello guys, I’ve successfully revived an old topic BPMN-Connection for custom-elements and I’m sorry.
But since then I’ve think a bit, so here is the new one!

What I want to achieve is next:
I want to be able to model a signal path through the devices.
To do so, I suppose, I need to customise BPMN elements, for instance I want to create a device representation, it could look like this image
Such element should be available as a whole custom element - just get it from palette, place it and you are good.
So here is my first question - how to create such composite element and do not allow user to change it internals.

Next, to be able to model a whole path I need to create some custom elements, like “internet”. I was playing with custom elements repo but I’ve found any custom element can’t be connected with regular connection.
Here is my second question - as I was planing to ad “internet” elements as such custom I need to understand how to implement such behaviour.

Thank you!


This sounds like a cool project, I’ll try to give you some hints :slight_smile:

So here is my first question - how to create such composite element

Have a look at how we create expanded Subprocesses:
Recording 2022-02-17 at 15.58.45

It is a composite of 2 elements, you can easily expand on it to include more elements. Here is a link to github:

and do not allow user to change it internals.

You can add custom rules that restrict movement. For example, check out the MoveRules or, for a more complex example, BpmnRules. These rules also define which elements can be connected to each other.

Great hint on expanded Subprocesses - I’ll take a look, and another one with move rules is also great, thank you very much!

I’ll update this thread with example, once I’ll have something working, for anyone with same requirements to start from.

First question: How is this related to BPMN? If it’s not then I’d argue bpmn-js isn’t the right tool. Maybe a custom editor based on diagram-js would be a better choice.

well, here is my point:

  • signal flow could be described with terms of BPM (start/process/end)
  • a lot of needed features (grid alignment, labels, connections) already implemented within bpmn.js and not in diagram.js
  • export/import abilities
  • ability to bind modelling events to actual actions

I was thinking, at first, to start from diagram-js but lack of documentation is an issue there so I thought it would better to use bpmn-js instead.

Given these requirements, I’d definitely build it with diagram-js. You can still look at how certain features were built in bpmn-js as inspiration. I’d argue that something like start and end semantics isn’t enough to justify using bpmn-js. All the basics of snapping, grid snapping, etc. are part of diagram-js.

There is postit-js as another example of how to create stuff upon diagram-js, but it did take bpmn-js as an inspiration.

1 Like