Run example for diagram-js

Developers General
2

Hi Ingo,

I had a look into examples in the diagram-js and they seam to be quite outdated.

diagram-js is not intended to be used as standalone library, but rather than as a dependency.

Think, best at the moment would be to use this example as a base, as it has necessary build tasks set up.

Do following in the project directory:

npm install diagram-js 
npm install -g grunt-cli

Then adapt app.js file to use diagram-js instead of bpmn-js.
E.g. you could do something like this (adapted from this example):

'use strict';

var Diagram = require('diagram-js');

var diagram = new Diagram({
  components: [
    'selectionVisuals',
    'dragVisuals',
    'bendpoints'
  ]
});

diagram.invoke([ 'eventBus', 'canvas', function(events, canvas) {

  var s1 = { id: 's1', x: 10, y: 20, width: 100, height: 80 };
  var s2 = { id: 's2', x: 300, y: 300, width: 100, height: 80 };

  canvas.addShape(s1);
  canvas.addShape(s2);

  canvas.addConnection({ id: 'c1', waypoints: [ { x: 25, y: 25 }, {x: 115, y: 115} ]});
  canvas.addConnection({ id: 'c2', waypoints: [ { x: 150, y: 150 }, { x: 200, y: 150 }, { x: 200, y: 200 }, { x: 300, y: 200} ]});
  canvas.addConnection({ id: 'c3', waypoints: [ { x: 300, y: 300 }, { x: 100, y: 400 }, { x: 400, y: 100 }, { x: 500, y: 100 } ]});
}]);

Then run:

grunt auto-build

Hope this helps to get going.

Cheers,
Vladimir

1 Like