JointJS+ bpmn2

Usage:

activity.attr('border/borderStyle', 'dashed');

const task = new joint.shapes.bpmn2.Activity({
    attrs: {
        border: {
            borderStyle: 'dashed'
        }
    }
});

Usage:

activity.attr('border/borderType', 'double');

const task = new joint.shapes.bpmn2.Activity({
    attrs: {
        border: {
            borderType: 'double'
        }
    }
});

Usage:

activity.attr('icon/iconColor', '#6764A7');

const task = new joint.shapes.bpmn2.Activity({
    attrs: {
        icon: {
            iconType: 'send',
            iconColor: '#6764A7'
        }
    }
});

activity.attr('markers/iconColor', '#6764A7');

const task = new joint.shapes.bpmn2.Activity({
    attrs: {
        markers: {
            iconTypes: ['ad-hoc', 'loop'],
            iconColor: '#6764A7'
        }
    }
});

Usage:

activity.attr('markers/iconsFlow', 'column');

const task = new joint.shapes.bpmn2.Activity({
    attrs: {
        markers: {
            iconTypes: ['ad-hoc', 'loop'],
            iconsFlow: 'column'
        }
    }
});

Usage:

activity.attr('markers/iconSize', 24);

const task = new joint.shapes.bpmn2.Activity({
    attrs: {
        markers: {
            iconTypes: ['ad-hoc', 'loop'],
            iconSize: 24
        }
    }
});

Usage:

activity.attr('markers/iconsOrigin', 'center');

const task = new joint.shapes.bpmn2.Activity({
    attrs: {
        markers: {
            iconTypes: ['ad-hoc', 'loop'],
            iconsOrigin: 'center'
        }
    }
});

Usage:

activity.attr('icon/iconType', 'send');

const task = new joint.shapes.bpmn2.Activity({
    attrs: {
        icon: {
            iconType: 'send'
        }
    }
});

Usage:

activity.attr('markers/iconTypes', ['parallel', 'sequential'], { rewrite: true }); // pass 'rewrite' option to replace markers, instead of merging them with existing ones

const task = new joint.shapes.bpmn2.Activity({
    attrs: {
        markers: {
            iconTypes: ['parallel', 'sequential']
        }
    }
});

Usage:

annotation.attr('border/annotationD', { size: 30, side: 'bottom' });

const task = new joint.shapes.bpmn2.Annotation({
    attrs: {
        border: {
            annotationD: {
                size: 30,
                side: 'bottom'
            }
        }
    }
});

Usage:

conversation.attr('markers/iconColor', '#6764A7');

const task = new joint.shapes.bpmn2.Conversation({
    attrs: {
        markers: {
            iconTypes: ['ad-hoc', 'loop'],
            iconColor: '#6764A7'
        }
    }
});

Usage:

conversation.attr('markers/iconsFlow', 'column');

const task = new joint.shapes.bpmn2.Conversation({
    attrs: {
        markers: {
            iconTypes: ['ad-hoc', 'loop'],
            iconsFlow: 'column'
        }
    }
});

Usage:

conversation.attr('markers/iconSize', 24);

const task = new joint.shapes.bpmn2.Conversation({
    attrs: {
        markers: {
            iconTypes: ['ad-hoc', 'loop'],
            iconSize: 24
        }
    }
});

Usage:

conversation.attr('markers/iconsOrigin', 'center');

const task = new joint.shapes.bpmn2.Conversation({
    attrs: {
        markers: {
            iconTypes: ['ad-hoc', 'loop'],
            iconsOrigin: 'center'
        }
    }
});

Usage:

conversation.attr('markers/iconTypes', ['ad-hoc', 'loop'], { rewrite: true }); // pass 'rewrite' option to replace markers, instead of merging them with existing ones

const task = new joint.shapes.bpmn2.Conversation({
    attrs: {
        markers: {
            iconTypes: ['ad-hoc', 'loop']
        }
    }
});

Usage:

dataObject.attr('collectionIcon/collection', 'true');

const task = new joint.shapes.bpmn2.DataObject({
    attrs: {
        collectionIcon: {
            collection: 'true'
        }
    }
});

Usage:

dataObject.attr('collectionIcon/iconColor', '#6764A7');

const task = new joint.shapes.bpmn2.DataObject({
    attrs: {
        collectionIcon: {
            collection: 'true',
            iconColor: '#6764A7'
        }
    }
});

dataObject.attr('dataTypeIcon/iconColor', '#6764A7');

const task = new joint.shapes.bpmn2.DataObject({
    attrs: {
        dataTypeIcon: {
            iconType: 'input',
            iconColor: '#6764A7'
        }
    }
});

Usage:

dataObject.attr('dataTypeIcon/iconType', 'input');

const task = new joint.shapes.bpmn2.DataObject({
    attrs: {
        dataTypeIcon: {
            iconType: 'input'
        }
    }
});

Usage:

dataObject.attr('body/objectD', 30);

const task = new joint.shapes.bpmn2.DataObject({
    attrs: {
        body: {
            objectD: 30
        }
    }
});

    dataStore.topRy()

Return the vertical radius of the exposed area of the DataStore base (the value of the body/lateralArea attribute; 10 by default).

dataStore.topRy(t, [opt])

Set the dataStore vertical radius of the exposed area of the cylinder base.

If the provided value is a percentage, it is relative to the refBBox.height of the shape. In practice, only values between '0%' and '50%' make sense. If the provided value is a number, it determines the vertical radius directly. Only values between 0 and half of refBBox.height make sense.

The function automatically sets the value of several attributes: body/lateralArea; and top/ry, top/cy, top/refRy and top/refCy. If these arguments need to be modified further, make sure to assign them only after calling dataStore.topRy.

Example usage:

const dataStore = new bpmn2.DataStore();
dataStore.resize(100, 200);
dataStore.position(525, 75);
dataStore.attr('root/title', 'joint.shapes.bpmn2.DataStore');
dataStore.attr('body/fill', 'lightgray');
dataStore.attr('top/fill', 'gray');
dataStore.attr('label/text', 'DataStore');
dataStore.topRy('10%');
dataStore.addTo(graph);

Usage:

event.attr('border/borderStyle', 'dashed');

const task = new joint.shapes.bpmn2.Event({
    attrs: {
        border: {
            borderStyle: 'dashed'
        }
    }
});

Usage:

event.attr('border/borderType', 'double');

const task = new joint.shapes.bpmn2.Event({
    attrs: {
        border: {
            borderType: 'double'
        }
    }
});

Usage:

event.attr('icon/iconColor', '#6764A7');

const task = new joint.shapes.bpmn2.Event({
    attrs: {
        icon: {
            iconType: 'message1',
            iconColor: '#6764A7'
        }
    }
});

Usage:

event.attr('icon/iconType', 'message1');

const task = new joint.shapes.bpmn2.Event({
    attrs: {
        icon: {
            iconType: 'message1'
        }
    }
});

The joint.shapes.bpmn2.Flow link comes with 4 flow types:

Usage:

const flow = new joint.shapes.bpmn2.Flow({
    source: { x: 100, y: 200 },
    target: { x: 500, y: 200 },
    attrs: {
        line: {
            flowType: 'message'
        }
    }
});

Note: markerFill applies only to message and conditional flowTypes.

Usage:

flow.attr('line/markerFill', '#fe854f');

const flow = new joint.shapes.bpmn2.Flow({
    source: { x: 100, y: 200 },
    target: { x: 500, y: 200 },
    attrs: {
        line: {
            markerFill: '#fe854f',
            flowType: 'message'
        }
    }
});

Usage:

gateway.attr('icon/iconColor', '#6764A7');

const task = new joint.shapes.bpmn2.Gateway({
    attrs: {
        icon: {
            iconType: 'exclusive',
            iconColor: '#6764A7'
        }
    }
});

Usage:

gateway.attr('icon/iconType', 'exclusive');

const task = new joint.shapes.bpmn2.Gateway({
    attrs: {
        icon: {
            iconType: 'exclusive'
        }
    }
});

All methods are inherited from the joint.shapes.bpmn2.Pool shape.

All configuration properties are inherited from the joint.shapes.bpmn2.Pool shape. They are set during shape definition with the Cell.define function, or anytime later with the Cell.set function:

headeredPool.set('padding', 20);
headeredPool.set('padding', { top: 10, right: 20, bottom: 5, left: 10 });
headeredPool.set('lanes', [
    {
        label: 'fixed lane',
        size: 80,
        headerSize: 40
    },
    {
        label: 'lane with sublanes',
        sublanes: [
            {
                // omit the label property or make it undefined to hide the header
            },
            {
                label: 'sublane 1'
            }
        ]
    }
]);
headeredPool.set('milestones', [
    {
        label: 'milestone'
    },
    {
        label: 'milestone with fixed width',
        size: 350
    }
]);

The Pool shape exposes functions that enable working with lanes and milestones:

pool.getLaneBBox(laneGroupId)

Get the bounding box of a lane group (header + lane) with laneGroupId id.

pool.getLanePath(laneGroupId)

Returns the path to the lane in attributes with laneGroupId id.

Example:

const path = pool.getLanePath('customId') + '/label';
pool.prop(path, 'new label', { rewrite: true });

pool.getLanesFromPoint(point)

Find lanes from a given point, where point is an object with x and y coordinates in the paper local coordinate system. Returns a sorted array of lane ids (from the most nested lane to the top parent) which bounding box contains the point.

Note: if lane has a custom id assigned, it will be returned instead.

pool.getMilestoneBBox(milestoneGroupId)

Get the bounding box of a milestone group (including its header) by milestoneGroupId id.

pool.getMilestoneFromPoint(point)

Find a milestone from a given point, where point is an object with x and y coordinates in the paper local coordinate system. Returns a string id of the milestone which bounding box contains point.

Note: if milestone has a custom id assigned, it will be returned instead.

pool.getMinimalSize()

Return the width and height of the minimal bounding box necessary to encompass all of the shape's content.

Configuration properties

Configuration properties are set during shape definition with the Cell.define function, or anytime later with the Cell.set function:

pool.set('padding', 20);
pool.set('padding', { top: 10, right: 20, bottom: 5, left: 10 });
pool.set('lanes', [
    {
        label: 'fixed lane',
        size: 80,
        headerSize: 40
    },
    {
        label: 'lane with sublanes',
        sublanes: [
            {
                id: 'customLane'
                // omit the label property or make it undefined to hide the header
            },
            {
                label: 'sublane 1'
            }
        ]
    }
]);
pool.set('milestones', [
    {
        label: 'milestone'
    },
    {
        label: 'milestone with fixed width',
        id: 'customMilestone',
        size: 350,
    }
]);

// change the attrs using custom id
pool.attr('lane_customLane/fill', '#3cb371');
pool.attr('milestoneLabel_customMilestone/fontSize', '18');

Id of lanes and milestones

• lane rectangle (prefix lane)
• header rectangle (prefix header, note that header won't be added if label is undefined)
• label text (prefix label, note that label won't be added if it is undefined)

lanes: [
    {
        label: 'lane' // group id: 'lanes_0', lane id: 'lane_0', header id: 'header_0', label id: 'label_0'
    },
    {
        label: 'lane with sublanes', // group id: 'lanes_1', lane id: 'lane_1', header id: 'header_1', label id: 'label_1'
        sublanes: [
            {
                label: 'sublane 1' // group id: 'lanes_1_0', lane id: 'lane_1_0', header id: 'header_1_0', label id: 'label_1_0'
            },
            {
                label: 'sublane 2' // group id: 'lanes_1_1', lane id: 'lane_1_1', header id: 'header_1_1', label id: 'label_1_1'
            }
        ]
    },
    // example with custom id
    {
        id: 'customId',
        label: 'lane with custom id', // group id: 'lanes_customId', lane id: 'lane_customId', header id: 'header_customId', label id: 'label_customId'
        sublanes: [
            {
                label: 'sublane 1' // group id: 'lanes_2_0', lane id: 'lane_2_0', header id: 'header_2_0', label id: 'label_2_0'
            },
            {
                id: 'sublaneId',
                label: 'sublane 2' // group id: 'lanes_sublaneId', lane id: 'lane_sublaneId', header id: 'header_sublaneId', label id: 'label_sublaneId'
            }
        ]
    }
]

• header rectangle (prefix milestoneHeader)
• label text (prefix milestoneLabel)
• milestone line (prefix milestoneLine)

milestones: [
    {
        label: 'milestone 1' // group id: 'milestone_0', header id: 'milestoneHeader_0', label id: 'milestoneLabel_0', line id: 'milestoneLine_0'
    },
    {
        label: 'milestone 2' // group id: 'milestone_1', header id: 'milestoneHeader_1', label id: 'milestoneLabel_1', line id: 'milestoneLine_1'
    },
    // example with custom id
    {
        id: 'customId',
        label: 'milestone 3' // group id: 'milestone_customId', header id: 'milestoneHeader_customId', label id: 'milestoneLabel_customId', line id: 'milestoneLine_customId'
    }
]

Aligns the label to the specified side, relatively to the header:

Usage:

const pool = new joint.shapes.bpmn2.Pool({
    lanes: [
        {
            label: 'pool lane',
            id: 'firstLane'
        },
        {
            label: 'pool lane'
        }
    ],
    milestones: [
        {
            label: 'pool milestone',
            id: 'firstMilestone'
        },
        {
            label: 'pool milestone'
        }
    ],
    attrs: {
        laneLabels: {
            labelAlignment: 'left' // aligns all lane labels to the left side
        },
        milestoneLabels: {
            labelAlignment: 'center' // aligns all milestone labels in the center
        },

        label_firstLane: {
            labelAlignment: 'right' // align lane label with custom id
        },
        milestoneLabel_firstMilestone: {
            labelAlignment: 'right' // align milestone label with custom id
        }
    }
});

// align all labels
pool.attr('laneLabels/labelAlignment', 'left');
pool.attr('milestoneLabels/labelAlignment', 'center');

// align individual labels with custom id
pool.attr('label_firstLane/labelAlignment', 'right');
pool.attr('milestoneLabel_firstMilestone/labelAlignment', 'right');

Applies margin around the label. The util.normalizeSides is used to understand the provided value. A single number is applied as padding to all sides of the elements. An object may be provided to specify values for left, top, right, bottom, horizontal and/or vertical sides.

Usage:

const pool = new joint.shapes.bpmn2.Pool({
    headerSize: 32,
    milestonesSize: 32,
    lanes: [
        {
            label: 'pool lane',
            id: 'firstLane'
        },
        {
            label: 'pool lane'
        }
    ],
    milestones: [
        {
            label: 'pool milestone',
            id: 'firstMilestone'
        },
        {
            label: 'pool milestone'
        }
    ],
    attrs: {
        laneLabels: {
            labelMargin: 4 // adds 4px margin on all sides to all lane labels
        },
        milestoneLabels: {
            labelMargin: { vertical: 10 } // adds 10px top and 10px bottom margin to all milestone labels
        },

        // control margin of individual labels with custom id
        label_firstLane: {
            labelMargin: 0
        },
        milestoneLabel_firstMilestone: {
            labelMargin: { horizontal: 8 }
        }
    }
});

// add margin to all labels
pool.attr('laneLabels/labelMargin', 4);
pool.attr('milestoneLabels/labelMargin', { vertical: 6 });

// control the margin of individual labels with custom id
pool.attr('label_firstLane/labelMargin', 0);
pool.attr('milestoneLabel_firstMilestone/labelMargin', { vertical: 4, horizontal: 20 });