Class Diagram

The main diagram-js entry point that bootstraps the diagram with the given configuration.

To register extensions with the diagram, pass them as Array to the constructor.

Example: Creating a plug-in that logs whenever a shape is added to the canvas.

// plug-in implementation
function MyLoggingPlugin(eventBus) {
  eventBus.on('shape.added', function(event) {
    console.log('shape ', event.shape, ' was added to the diagram');
  });
}

// export as module
export default {
  __init__: [ 'myLoggingPlugin' ],
    myLoggingPlugin: [ 'type', MyLoggingPlugin ]
};
Copy

Use the plug-in in a Diagram instance:

import MyLoggingModule from 'path-to-my-logging-plugin';

var diagram = new Diagram({
  modules: [
    MyLoggingModule
  ]
});

diagram.invoke([ 'canvas', function(canvas) {
  // add shape to drawing canvas
  canvas.addShape({ x: 10, y: 10 });
});

// 'shape ... was added to the diagram' logged to console
Copy