Using the overlays on local .xml and .bpmn files

Developers
1

Hi all, a beginner to bpmn and programming here.

I have managed to get the overlays running (https://github.com/bpmn-io/bpmn-js-examples/tree/master/overlays) , and am trying to load in my own bpmn diagrams to make overlays on them. May I kindly enquire as to how to do so, and if both .xml and .bpmn file formats are supported?

This is what I attempted (by editing the js file provided in the example) but it doesnt seem to work, apologies for the trouble

var _qrCode = require('../resources/test.xml');

var _qrCode2 = _interopRequireDefault(_qrCode);

var _NavigatedViewer = require('bpmn-js/lib/NavigatedViewer');

var _NavigatedViewer2 = _interopRequireDefault(_NavigatedViewer);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

// we use stringify to inline an example XML document.
var bpmnViewer = new _NavigatedViewer2.default({
  container: '#canvas'
  /* uncomment to configure defaults for all overlays
  overlays: {
    defaults: {
      show: { minZoom: 1 },
      scale: true
    }
  }
  */
});

// import qr diagram

bpmnViewer.importXML(_qrCode2.default).then(function () {

  var canvas = bpmnViewer.get('canvas'),
      overlays = bpmnViewer.get('overlays');

  // zoom to fit full viewport
  canvas.zoom('fit-viewport');




  
}).catch(function (err) {

  console.error('could not import BPMN 2.0 diagram', err);
});

},{"../resources/test.xml":88,"bpmn-js/lib/NavigatedViewer":3}],2:[function(require,module,exports){
'use strict';