Добавить svg динамически в bmpnjs

Question

Я использую библиотеку просмотра Bpmn- JS для отображения BPMN 2.0, мне нужна только программа просмотра (мне не нужен редактор). У меня есть XML для рисования.

Я хочу динамически добавлять шары с номером в задачу (я получаю номер из API, относящегося к каждой задаче)

Как я могу их нарисовать воздушные шары динамически? Могу ли я сделать это с помощью библиотеки?

Пример:

Answer 1

Я могу использовать оверлей

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

Я могу добавлять оверлеи, связанные с задачей по идентификатору

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