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: