How to change the palette like this picture?


I know how to create new custom elements on the palette, but i want to change the palette’s style and add module retraction and deployment function that i don’t know how to achieve the effect as shown in the figure .


You can use CSS to do that.

Thank you.
I have another question, can i custom the type like: bpmn:SendTask1 , bpmn:SendTask2, and how to realization it ?

bpmn:SendTask1 is not a valid BPMN element. Have a look at this example to learn about how to customize elements:

Thank you for your answer. :grinning:

Hi, I want to create a new custom-shapes, i run

and I use ‘saveXMl’ it works this ‘bpmn-js’ version is ‘3.2.2’.

I use the newest ‘bpmn-js’ it was wrong because the version of ‘bpmn-js’ is ’ 7.2.1’ ,like this:

Hi, I am sorry to ask you so many question.
I have another question about new custom shape, I find I have the same result about ‘modeler.saveXML()’ whether I use it or not.


You won’t find the custom shape in the exported BPMN diagram because it is not a BPMN element. The whole point of this example is that on a diagram-js level you can add more than just BPMN elements to the diagram. However, in most cases this doesn’t make any sense. I mean, what is the yellow circle supposed to represent? There is no yellow circle in the BPMN spec.

Thank you . :stuck_out_tongue:


  1. Please keep the communication in English, since not so many forum members will understand you otherwise.
  2. Please do not necrobump old topics. Instead link to this thread from new topic.