Custom render content in shape for bpmn diagram

[Sanjana]

Hi,
i am following below example for custom rendering

GitHub - bpmn-io/bpmn-js-example-custom-rendering: An example of creating...

is it possible to change content within the shape or add more content rendered in shape? I want shape to be rendered in below image.

attaching below snip for reference:

[Niklas_Kiefer]

Yes, that’s possible. As the example reveals, you have full control over the to-be-rendered shape via the drawShape method. For example, you can use the diagram-js text util to create texts.

drawShape(parentNode, element) {
  // ...

  if (is(element, 'bpmn:Task')) {
    // ..

    // add top label
    const textUtil = new TextUtil();

    const text = textUtil.createText('task type', {});

    svgAppend(parentNode, text);

    return shape;
  }
}

Source: custom render texts - CodeSandbox

[Sanjana]

Hi Kiefer,

Thanks it worked!