Run example for diagram-js

Developers General
1

Hi guys,

I would like to use diagram.js and play around with another kind of diagrams. I have found some examples in the diagram-js repo, but with my limited knowledge of the java script development environment I’m not able to run them successfully.

After starting the node http-server, I got a 404: common.js and 404: diagram.js not found.

I tried npm and bower to install, but with no luck.

What do I have to do get the files into the expected location?

Cheers, Ingo

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