Add svg dynamically in bmpnjs

Question

I am using the Bpmn-JS viewer library to display BPMN 2.0, I need only the viewer (I don't need an editor). I have an XML to draw.

I want to add balloons with a number in task dynamically (I get the number from an API related to each task)

How can I draw those balloons dynamically? Can I do it with the library?

Example:

Answer 1

I can use overlay

viewer = new BpmnViewer();
viewer.attachTo('#container');
viewer.importXML(...)

I can add overlays associated to task by id

const number = 4;
overlays = this.viewer.get('overlays');
overlays.add('taskId', {
   position: {
      top:0,
      right:0
   },
   html: `<div class='circle'>${number}</div>`
});