How to show the ellipsis on the label?

I want to show the ellipsis on the notation label, when label name length exceeds the limit.


I think you’ll have to create a custom label renderer which offers that functionality

could you please provide any example how to created custom label renderer ?

I think the custom elements example will show how to create custom labels.

Simple module for render ellipsis label:

import BaseRenderer from 'diagram-js/lib/draw/BaseRenderer';
import { isAny } from 'bpmn-js/lib/features/modeling/util/ModelingUtil';
export default class EllipsisRenderer extends BaseRenderer {
  constructor(eventBus, bpmnRenderer) {
    super(eventBus, 1500);
    this.bpmnRenderer = bpmnRenderer;
  canRender(element) {
    return isAny(element, [ 'bpmn:Task', 'bpmn:UserTask' ]) && !element.labelTarget;
  drawShape(parentNode, element) {
    let originName =;
    if(!originName || originName.length<55){
      return this.bpmnRenderer.drawShape(parentNode, element);
    } = originName.substring(0,52)+'...';
    let shape = this.bpmnRenderer.drawShape(parentNode, element); = originName;
    return shape;
  getShapePath(shape) {
    return this.bpmnRenderer.getShapePath(shape);

EllipsisRenderer.$inject = [ 'eventBus', 'bpmnRenderer' ];