Drawing a new BPMN Model keeps old Overlays

I created a BpmnViewer and added some badges like this (as in the overlays example):

          overlays.add(statistics.id, {
            position: {
              top: 0,
              right: 0
            html: badge

Then I call a function on-click which draws a new process and add overlays there (i DO NOT leave the page).

However - the old overlays seems not to be romved correctly in this case. Do I have to call some overlays.removeAll()? Or do I somehow need to “cleanup” some divs or the like before painting a new model?


How do you draw a new process?

modeler.importXML(xml, ...);

That should properly clean up old overlays.

is that possible not to importXml again but clear all overlays?

@nikku is there any way just remove all overlays but keep the graph?

Hi Nico.

We do a
viewer.importXML(data.bpmn20Xml, function(err) {

and call that again to show a new process. However, overlays do not get cleared in all cases. Do I understand correctly that this is a bug then? What is the best way to move on - trying to isolate a small example making it reproducible i guess (not sure how easy this is).

If there is a dedicated clearOverlay method I would like to try this first, could be much less effort :slight_smile:


@nikku can we clear overlays only but keep the diagram?

Great - thanks! …and some text to fill the 20 characters…

With the soon to be released version of bpmnjs you can do

1 Like

hi @nikku, may I ask when the new version can be released?

hi @nikku is that possiable to remove specific overlay in this case?

BTW, i have get the new version and test “bpmnjs.get(‘overlays’).clear();”

User Overlays#remove to remove added overlays:

// remove by id
var overlayId = overlays.add(...);

// remove by element and/or type
overlays.remove({ element: 'SCAN_OK' });

Checkout the updated overlays example for details.

Nikku, Thanks a lot!