JointJS+ bpmn

The BPMN plugin provides you with set of Business Process Model and Notation 2.0 shapes. They are designed to be easily configurable with the ui.Inspector plugin.

The plugin consists of flow objects (Activities, Events, Gateways), connection objects (Flows), swim lanes (Pools) and artifacts (DataObjects, Groups, Annotation). It also covers models introduced in version 2.0 as Conversations, Choreographies and Messages.

Install

Include joint.shapes.bpmn.js file to your HTML:

<script src="joint.shapes.bpmn.js"></script>

joint.shapes.bpmn.Activity

The Activity attributes:

Usage:

var activity = new joint.shapes.bpmn.Activity({
    attrs: {
        '.body': { fill: 'gold', stroke: 'black' },
        '.label': { text: 'My Activity' }
    },
    content: 'A content of the Activity',
    activityType: 'transaction'
});

joint.shapes.bpmn.Annotation

The Annotation attributes:

Usage:

var annotation = new joint.shapes.bpmn.Annotation({
    attrs: {
        '.body': { fill: 'gold' },
        '.stroke': { stroke: 'silver' }
    },
    content: 'A content of the Annotation'
});

joint.shapes.bpmn.Choreography

The Choreography attributes:

Usage:

var choreography = new joint.shapes.bpmn.Choreography({
    attrs: {
        '.body': { fill: 'gold', stroke: 'black' },
        '.label': { fill: 'gray', text: 'My Choreography' },
        '.participant-rect': { fill: 'silver' }
    },
    participants: ['partic1', 'partic2', 'partic3'],
    initiatingParticipant: 2, // ='partic3',
    content: 'A content of the Choreography'
});

joint.shapes.bpmn.Conversation

The Conversation attributes:

Usage:

var conversation = new joint.shapes.bpmn.Conversation({
    attrs: {
        '.body': { fill: 'gold', stroke: 'black' },
        '.label': { fill: 'gray', text: 'My Conversation' }
    },
    conversationType: 'call-conversation'
});

joint.shapes.bpmn.DataObject

The Data Object attributes:

Usage:

var dataObject = new joint.shapes.bpmn.DataObject({
    attrs: {
        '.body': { fill: 'gold', stroke: 'black' },
        '.label': { fill: 'gray', text: 'My Data Object' }
    }
});

joint.shapes.bpmn.Event

The Event attributes:

Usage:

var event = new joint.shapes.bpmn.Event({
    attrs: {
        '.body': { fill: 'gold', stroke: 'black' },
        '.label': { fill: 'gray', text: 'My Event' }
    },
    icon: 'message',
    eventType: 'end'
});

joint.shapes.bpmn.Flow

The Flow as the only one inherits from joint.dia.Link.

The Annotation attributes:

Usage:

var flow = new joint.shapes.bpmn.Flow({
    source: { id: task.id },
    target: { id: annotation.id },
    flowType: 'association'
});

joint.shapes.bpmn.Gateway

The Gateway attributes:

Usage:

var gateway = new joint.shapes.bpmn.Gateway({
    attrs: {
        '.body': { fill: 'gold', stroke: 'black' },
        '.label': { fill: 'gray', text: 'My Gateway' }
    },
    icon: 'cross'
});

joint.shapes.bpmn.Group

The Group attributes:

Usage:

var group = new joint.shapes.bpmn.Group({
    attrs: {
        '.label-rect': { fill: 'gold', stroke: 'black' },
        '.label': { fill: 'gray' }
    }
});

joint.shapes.bpmn.Message

The Message attributes:

Usage:

var message = new joint.shapes.bpmn.Message({
    attrs: {
        '.body': { fill:'gold', stroke: 'black' },
        '.label': { fill: 'gray' }
    }
});

joint.shapes.bpmn.Pool

The Pool attributes:

Usage:

var pool = new joint.shapes.bpmn.Pool({
    attrs: {
        '.header': { fill:'gold' },
        '.lane-header': { fill:'silver' },
        '.myClass .lane-body': { fill: 'goldenrod' } // customize a specific lane body color
    },
    lanes: {
        label: 'My Pool',
        sublanes: [
            {
                label: 'lane 1',
                name: 'myClass', // this lane has an unique css class and therefore can be targeted
                                 // in attrs above
                ratio: 0.6 // this lane will take up 60% of width of the parent lane
                           // the other lanes (in this case `lane 2`) will take up the rest i.e. 40%
            },
            {
                label: 'lane 2',
                headerWidth: 40, // sets the header size for `lane2` to 40px
                sublanes: [] // it may consist of another sublanes
            }
        ]
    }
});

Each rendered lane DOM element has class name lane and attribute data-lane-path, that references corresponding lane configuration inside the model's lanes attribute. e.g. data-lane-path="lanes/sublanes/1" for the `lane 2` in the example above. It's useful when one needs to know, what lane a user just clicked on.

paper.on('element:pointerup', function(elementView, evt) {
    var pool = elementView.model;
    if (pool.get('type') === 'bpmn.Pool') {
       var lanePath = $(evt.target).closest('.lane').data('lane-path') || 'lanes';
       console.log(pool.prop(lanePath + '/label')); // log the lane label
    }
});

joint.shapes.bpmn.icons

The joint.shapes.bpmn.icons namespace includes several icons that can be used within the shapes.

none	No image.
message
user
plus
cross
circle
service

Usage:

gateway.set('icon', 'circle');
var task = new joint.shapes.bpmn.Activity({ icon: 'user' });

Adding custom icons can be made by inserting them into the joint.shapes.bpmn.icons namespace.

joint.shapes.bpmn.icons['myIcon'] = 'pathToImage'; // or data URI

// later on in the code
gateway.set('icon', 'myIcon');

Sub-process handling

The subProcess value is stored as a data attribute on the sub-process icon (SVG path) element. An interaction with the sub-process icon can be therefore caught and handled on the joint.dia.Paper. In the example bellow the model's subProcess value is shown after an user doubleclicks the icon.

conversation.set('subProcess', 'My sub-process ID');

paper.on('cell:pointerdblclick', function(cellView, evt) {

    var subProcess = $(evt.target).data('sub-process');

    if (subProcess) {
        alert(subProcess);
    }
});

// a doubleclick on conversation's sub-process icon will alert 'My sub-process ID'