How to save updated bpmn diagram in Camunda Modeler plungin

When user click the “save file” menu item, I would like to do some update on bpmn diagram and save it. The code looks like below.

function LoggingPlugin(canvas, eventBus, bpmnFactory, bpmnjs) {
var self = this;
this._canvas = canvas;
this._bpmnFactory = bpmnFactory;
this._bpmnjs = bpmnjs;

this.electron = window.require(‘electron’);‘menu:action’, function (action, options) {
if (action === ‘save’) {

  var definitions = this._canvas.getRootElement().businessObject.$parent;
  var rootElements = definitions.rootElements;
  // Add message
  var msg = this._bpmnFactory.create("bpmn:Message"); = 'testMessage';
  // How save this update bpmn?


My question is how I can save this updated bpmn diagram? Second question is how catch the this “save file” event if user click on the toolbar item?



Hi @steventao,

It is possible to save the updated diagram using bpmnjs.saveXML method.

Regarding the second question, it would be really helpful if you could explain why would you try to intercept all save file events? What exactly would you like to achieve by doing so?

Thank you siffogh

Since current element template is really limited. For example, Camunda Modeler do not support templating Java classes as Execution Listeners right now. I would like to use Camunda Modeler Plugin to achieve this feature. Based on my element template id, I would like to update the bpmn xml string to add Java classes delegate when user click save button.