javascript - 在 bmpnjs 中动态添加 svg

Question

我正在使用 Bpmn-JS 查看器库来显示 BPMN 2.0，我只需要查看器（我不需要编辑器）。我有一个要绘制的 XML。

我想在任务中动态添加带有数字的气球（我从与每个任务相关的 API 中获取数字）

如何动态绘制这些气球？我可以用图书馆做吗？

例子：

Answer 1

我可以使用覆盖

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

我可以通过 id 添加与任务关联的叠加层

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