Change the notation of Start and End Event to other shapes

Hello Team,
I know it’s againt the BPMN 2.0 standard, Is it possible to change the notation of Start and End Event to other shapes
in my case:
Start event: a green colored rectangle filled with a text “Start”,
End event: a blue colored rectangle filled with a text “End”.

which javascript code and css files i have to customize, in order to have these features both in the palette and the diagram.

Thanks and Regards,

You’d need to provide a custom renderer similar to the BpmnRenderer.

Checkout the bpmn-js-task-priorities project that provides a custom renderer.

I figure out how to change the start event, end event service task and task shapes in the palette,
but when I drag any of these elements into the diagram for example the StartEvent (the red rounded square) i get the default shapes
Do you have any clues what I am missing?
code source link:

Main changes:

under \custom-elements\dist\vendor\bpmn-font\css
I updated bpmn.css and bpmn-embedded.css to include the new classes which points to a new fonts (\custom-elements\dist\vendor\bpmn-font\font\bpmn.svg)

.bpmn-icon-Status1-open:before {
  content: "\e8c5";

 .bpmn-icon-Status1-closing:before {
  content: "\e8c5";

.bpmn-icon-Status2-free-flow:before {
			content: "\e8c6";
.bpmn-icon-Status2-status:before {
			content: "\e8c6";

then in the CustomPalette.js

'create.start-event': createAction(
			'bpmn:StartEvent', 'event', 'bpmn-icon-Status1-open'  //bpmn-icon-start-event-none icon-Status1-open
//		'create.intermediate-event': createAction(
//			'bpmn:IntermediateThrowEvent', 'event', 'bpmn-icon-intermediate-event-none'
//		),
		'create.end-event': createAction(
			'bpmn:EndEvent', 'event', 'bpmn-icon-Status1-closing'  //icon-Status1-closing bpmn-icon-end-event-none
//		'create.exclusive-gateway': createAction(
//			'bpmn:ExclusiveGateway', 'gateway', 'bpmn-icon-gateway-xor'
//		),
//		'create.task': createAction(
//			'bpmn:Task', 'activity', 'bpmn-icon-task'
//		),
		'create.task': createAction(
			'bpmn:Task', 'activity', 'bpmn-icon-Status2-free-flow'
		'create.ServiceTask': createAction(
			'bpmn:ServiceTask', 'ServiceTask', 'bpmn-icon-Status2-status'

thank you in advance

You need to implement a custom shape renderer. Did you implement one?

See our custom elements example and especially the CustomRenderer used.

1 Like

But I need to keep the same behavior of the start event, end event and task as implmented by default?

thank you for your reactivity.