Duplicated diagram in ObservableHQ

This tool is awesome and I tried to implemented it on ObservableHQ.

But I have an issue, when I refresh the notebook cell, the diagram duplicate the information.

Please can you help me to find the reason.

This seems to be an issue with Observable, not with bpmn-js. How are you creating and tearing down the bpmn-js instance?

Here is the snippet and using a div container with canvas as id:

  const viewer = new bpmnjs({
    container: "#canvas",
    height: 300
  async function openDiagram(bpmnXML) {
    // import diagram
    try {
      await viewer.importXML(bpmnXML);
      // access viewer components
      var canvas = viewer.get("canvas");
      var overlays = viewer.get("overlays");

      // zoom to fit full viewport

      // attach an overlay to a node
      overlays.add("SCAN_OK", "note", {
        position: {
          bottom: 0,
          right: 0
        html: '<div class="diagram-note">Mixed up the labels?</div>'

      // add marker
      canvas.addMarker("SCAN_OK", "needs-discussion");
    } catch (err) {
      console.error("could not import BPMN 2.0 diagram", err);
  await openDiagram(data)

I’m not familiar with Observable, but you have to make sure you’re reusing the bpmn-js instance instead of creating a new one every time.

I think here is the error, Observable create new instances each time we press on run button of the cell, because it works like Jupyter notebook.

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.