How to save current diagram in the canvas to a .bpmn file

Developers Modeler
1

Hi,
in a previous question, I was wondering how to not recreate the canvas after a page refresh (the reset will be handle manually later on) in order to always show the latest diagram.
I thought that a solution could be to save current diagram xml to a bpmn file in a specific path.
To simplify the coding, I’d need to overwrite ./diagram.bpmn. The initial diagram file will be restored later on.

import diagramXML from "./diagram.bpmn";
[...]
function registerFileDrop(container, callback) {
  async function handleDroppedModule(e) {
    e.stopPropagation();
    e.preventDefault();
   // if current diagram is empty
    if (parseFloat(localStorage.getItem('numOfTasksDropped')) == 0) {
      await createNewDiagram();
    } else {
     // save the current xml to ./diagram.bpmn
      modeler.saveXML();
    }

I thought that modeler.saveXML() would save the current xml to the location of diagramXML but it does not.
Could you help me? Thank you in advance.

2

The imported XML stored in diagramXML is a string. When importing the XML bpmn-js will use that XML string to construct the diagram.

saveXML returns a promise that will eventually resolve with a string containing the XML. What you do with that string is entirely up to you.

const { xml } = modeler.saveXML();

// ...
3

Thank you for your answer.
If I’ve understood correctly, when canvas loads, bpmn-js reads and loads the XML string (named diagramXML) obtained from ./diagram.bpmn.
How can I make the canvas initialiser to read a different xml string (for ex. the one got from modeler.saveXML())?