Modify Modeler Example

I use bpmn-js lib on example folder: modeler/dist. This Ok if i use this library.
At a time, i want to call one method on index.js of example (e.g: openDiagram(xml)) but method not found on console of browser.

I try write a js file as:

> 'use strict';
var $ = require('jquery'),
    BpmnModeler = require('bpmn-js/lib/Modeler');
var container = $('#js-drop-zone');
var canvas = $('#js-canvas');
var renderer = new BpmnModeler({ container: canvas });
var newDiagramXML = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<bpmn2:definitions xmlns:xsi=\"\" xmlns:bpmn2=\"\" xmlns:bpmndi=\"\" xmlns:dc=\"\" xmlns:di=\"\" xsi:schemaLocation=\" BPMN20.xsd\" id=\"sample-diagram\" targetNamespace=\"\">\n  <bpmn2:process id=\"Process_111\" isExecutable=\"false\">\n    <bpmn2:startEvent id=\"StartEvent_1\"/>\n  </bpmn2:process>\n  <bpmndi:BPMNDiagram id=\"BPMNDiagram_1\">\n    <bpmndi:BPMNPlane id=\"BPMNPlane_1\" bpmnElement=\"Process_1\">\n      <bpmndi:BPMNShape id=\"_BPMNShape_StartEvent_2\" bpmnElement=\"StartEvent_1\">\n        <dc:Bounds height=\"36.0\" width=\"36.0\" x=\"412.0\" y=\"240.0\"/>\n      </bpmndi:BPMNShape>\n    </bpmndi:BPMNPlane>\n  </bpmndi:BPMNDiagram>\n</bpmn2:definitions>";
function createNewDiagram() {
function openDiagram(xml) {
  renderer.importXML(xml, function(err) {
    if (err) {
      container.find('.error pre').text(err.message);
    } else {

But browser console: require is not defined
I’m new js :smile:

require is only available in NodeJS or similar environments.

If you’d like to have a quick and easy getting started I’d suggest you to have a look at our seed project.

Edit: Just saw you that you referred to our modeler example. Simply follow the build instructions and you should be fine.