CustomElement have to behave like "bpmn:Task"


in Bpmn-js version 9.4.x I try to re-implement my custom modeler with extiontion for custom element / shape. I found this example: GitHub - bpmn-io/bpmn-js-example-custom-shapes: Creating custom elements in bpmn-js that live outside a BPMN 2.0 diagram.

My custom element have to behave like “bpmn:Task” and should be inside the diagram layer.
Does I always need a customRules?
Should I copy all rules from “BpmnRules.js”?
Or is there any better solution?

Best Regards,

Hi! Did you already check out this example? I think extending existing BPMN elements should not necessarily require adding custom rules.

This example is part of the custom elements example.

Hi Niklas,

thank you very much for your fast reply.
Unfortunately, it does not work.

My custom shape has a different size {width: 120, height: 60} than “bpmn:Task”.
So the selection path around the shape has the size of default task and the connection path starts at the middle of the shape.


I also tried to use a custom ElementFactory like

But with this customElementFactory there is an issue during creating the customShape.


Do you have any idea how to fix it?

Best Regards, Anja

Can you please share your extension in a CodeSandbox? This way, it would be easier for us to help!

Hi Niklas,

here is my example

At the palette you find a black star as my custom task. Just create a new element with the star icon.

You can see that the selection border does not fit to the shape.

Afterwards you can go in the code to “custom/index.js” and remove comment for customElementFactory. If you now try to create a new task with star icon an error occur.

Many Thanks for your support.
Best Regards, Anja

Hi Niklas,

do you have any update for me?

Best Regards, Anja

Thanks for sharing the codesandbox! I had a quick look.

The custom element you create does not have any di properties. These are needed to render it properly, e.g. to retrieve the correct fill color. Since the di is missing only if the custom element factory is loaded, it might be removed along these lines. You’d try to debug why this is happening.

Hi Niklas,

thanks right. At the moment I don’t have any idea why this is happen.
But does I need a customElementFactory?

It seams to work without a customElementFactory. But then the frame and the connection lines does not fit to my shape size.

Is it possible to go ahead without customElementFactory?

Best Regards, Anja

I had a second look on your custom element factory. One way to fix it would be to add the missing di manually: customElement with and without customElementFactory (forked) - CodeSandbox

// add missing di
var diAttrs = assign({}, { id: + "_di" });

attrs.di = this._bpmnFactory.createDiShape(attrs.businessObject, diAttrs);


This would work, but would be monkey-patching as well. Better would be to gather why the di is missing in the first place.

Is it possible to go ahead without customElementFactory?

Probably, you’d try to find out why the selection visuals are using wrong bounds in this case.

If your custom element is essentially a task then the GitHub - bpmn-io/bpmn-js-example-custom-shapes: Creating custom elements in bpmn-js that live outside a BPMN 2.0 diagram. example is not the right example. Have look at this example instead: GitHub - bpmn-io/bpmn-js-example-custom-rendering: An example of creating custom rendering for bpmn-js

Hi Niklas, Hi Philipp,

many thank for your support.
I discovered the root cause for both scenarios.

  1. If I try to use an customModeler without customElementFactory, the defaultSize ({width: 100, heigth: 80}) will be set for the selection frame. (bpmn-js/ElementFactory.js at develop · bpmn-io/bpmn-js · GitHub)

  2. I reworked the scenario with customElementFactory further. The main issue was there, that the di was missing. This happened because I took over the customElementFactory from the customShape example (bpmn-js-example-custom-shapes/CustomElementFactory.js at master · bpmn-io/bpmn-js-example-custom-shapes · GitHub) and there is no di added to the shape. In comparison with the main ElementFactory.js (bpmn-js/ElementFactory.js at develop · bpmn-io/bpmn-js · GitHub) I modified my customElementFactory. Now it is working:

Maybe you could rework the example?

If you have any advice to my coding, I am happy about any feedback.

Best Regards,