BPMN shapes

The shapes.bpmn2 namespace provides you with a set of Business Process Model and Notation 2.0 shapes.

In this section we will provide markup selectors for all bpmn shapes, so you can style them accordingly.

Elements

Activity

A rectangular Activity shape with icons.

Supported attrs properties:

Selector	Node	Description
root	SVGGElement	Container of all nodes
background	SVGRectElement	Rectangle background of the shape
border	SVGPathElement	Border of the shape (see built-in border styles and border types)
icon	SVGImageElement	Image containing the icon (see list of available icons)
label	SVGTextElement	Text inside the shape
markers	SVGGElement	Container for marker icons (see list of available markers)

const activity = new shapes.bpmn2.Activity({
    attrs: {
        background: { fill: '#6764A7' },
        icon: { iconType: 'receive' },
        label: { text: 'My Activity' },
        markers: {
            iconTypes: ['ad-hoc', 'loop'],
            iconsFlow: 'column',
            iconColor: '#ffffff'
        }
    }
});

Static properties

ACTIVITY_MARKER_ICONS

Static property containing several marker icons that can be used with the Activity shape.

Name	Image
none	No image
parallel
sequential
sub-process
compensation
ad-hoc
loop

Add custom icons by defining them in the shapes.bpmn2.Activity.ACTIVITY_MARKER_ICONS static property.

// define myIcon
shapes.bpmn2.Activity.ACTIVITY_MARKER_ICONS['myIcon'] = 'pathToImage'; // or data URI

// later on in the code
activity.attr('markers/iconTypes', ['myIcon']);

The marker is triggering 'element:marker:*' paper events.

ACTIVITY_TYPE_ICONS

Static property including Activity type icons that can be used within the shapes.

Name	Image
none	No image
receive
send
business-rule
service
script
manual
user

Add custom icons by defining them in the shapes.bpmn2.Activity.ACTIVITY_TYPE_ICONS static property.

// define myIcon
shapes.bpmn2.Activity.ACTIVITY_TYPE_ICONS['myIcon'] = 'pathToImage'; // or data URI

// later on in the code
activity.attr('icon/iconType', 'myIcon');

Special attributes

borderRadius

Set the border radius of the shape.

activity.attr('border/borderRadius', 20);

borderStyle

Set the style of the border.

Name	Description
solid	Solid style border (default)
dashed	Dashed style border
dotted	Dotted style border

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

borderType

Set the border type.

Name	Description
single	Single line border (default)
thick	Single line border but thicker
double	Double line border

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

iconColor

Set the icon or marker icons color.

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

iconsFlow

Set the marker icons flow, available values are:

Name	Description
row	Marker icons will be displayed in a row (default)
column	Marker icons will be displayed in a column

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

iconSize

Set the markers icon size.

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

iconsOrigin

Set the marker icons origin:

Name	Description
left-top	Sets the origin to top left
left-bottom	Sets the origin to left bottom
right-top	Sets the origin to right top
right-bottom	Sets the origin to right bottom
top	Sets the origin to top middle
bottom	Sets the origin to bottom middle (default)
right	Sets the origin to right middle
left	Sets the origin to left middle
center	Sets the origin to center

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

iconType

Set the main icon. See icon types.

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

iconTypes

Set the marker icons. See icon types. Attribute has to be an array of strings. Note: an array is required.

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

Annotation

An annotation shape.

Supported attrs properties:

Selector	Node	Description
root	SVGGElement	Container of all nodes
body	SVGRectElement	Rectangle body of the shape
border	SVGPathElement	Border of the shape
label	SVGTextElement	Annotation text

const annotation = new shapes.bpmn2.Annotation({
    attrs: {
        'body': {
            stroke: '#fe854f'
        },
        'label': {
            text: 'Group'
        }
    }
});

Special attributes

annotationD

Change the annotation border length. annotationD is an object with the following properties:

Property	Type	Description
size	number	Thickness of annotation border
side	'left' | 'top' | 'right' | 'bottom'	side on which to render annotation border

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

Choreography

A choreography shape.

Supported attrs properties:

Selector	Node	Description
root	SVGGElement	Container for all shape nodes
body	SVGPathElement	Rectangular body of the shape
content	HTMLDivElement	Text content inside of the initiating participant.
participants	SVGGElement	The wrapping groups around participants
participantsBodies	SVGRectElement	Participant rectangular bodies
participantsLabels	SVGTextElement	Participant labels.
initiatingParticipant	SVGGElement	The wrapping group around the initiating participant.
initiatingParticipantBody	SVGRectElement	Initiating participant body.
initiatingParticipantLabel	SVGTextElement	Initiating participant label.
subProcess	SVGPathElement	The sub-process icon.

const choreography = new shapes.bpmn2.Choreography({
    attrs: {
        body: {
            fill: '#ffc2a7',
            stroke: '#fe854f'
        },
        content: {
            html: 'Choreography'
        },
        participantsBodies: {
            fill: 'lightblue'
        }
    },
    participants: ['Participant 1', 'Participant 2'],
    initiatingParticipant: 1
});

Model attributes

participants

An array of participant names.

const participants: string[] = choreography.get('participants');
choreography.set('participants', ['Participant 1', 'Participant 2']);

participantHeight

The height of a single participant.

const participantHeight: number = choreography.get('participantHeight');
choreography.set('participantHeight', 20);

initiatingParticipant

An index or the name of the initiating participant.

const initiatingParticipant: string | number = choreography.get('initiatingParticipant');
choreography.set('initiatingParticipant', 'Participant 2');

Conversation

A polygon shape with label and markers.

Supported attrs properties:

Selector	Node	Description
root	SVGGElement	Container for all shape nodes
body	SVGPolygonElement	Polygon body of the shape
markers	SVGGElement	Container for marker icons (see list of available markers)
label	SVGTextElement	Shape text

const conversation = new shapes.bpmn2.Conversation({
    attrs: {
        'body': {
            fill: '#ffc2a7',
            stroke: '#fe854f'
        },
        'label': {
            text: 'My Conversation'
        }
    }
});

Static properties

CONVERSATION_MARKER_ICONS

The CONVERSATION_MARKER_ICONS static property includes icons that can be used within the shape.

none	No image.
parallel
sequential
sub-process
compensation
ad-hoc
loop

Add custom icons by defining them in the shapes.bpmn2.Conversation.CONVERSATION_MARKER_ICONS static property.

shapes.bpmn2.Conversation.CONVERSATION_MARKER_ICONS['myIcon'] = 'pathToImage'; // or data URI

// later on in the code
conversation.attr('markers/iconTypes', ['myIcon']);

The marker is triggering 'element:marker:*' paper events.

Special attributes

iconColor

Set the marker icons color.

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

iconSize

Set the marker icons size.

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

iconTypes

Set the marker icons. Property has to be an array of strings. Note: an array is required.

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

iconsFlow

Set the marker icons flow, available values are:

row	Marker icons will be displayed in a row (default)
column	Marker icons will be displayed in a column

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

iconsOrigin

Set the marker icons origin, available values are:

left-top	Sets the origin to top left
left-bottom	Sets the origin to left bottom
right-top	Sets the origin to right top
right-bottom	Sets the origin to right bottom
top	Sets the origin to top middle
bottom	Sets the origin to bottom middle (default)
right	Sets the origin to right middle
left	Sets the origin to left middle
center	Sets the origin to center

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

DataObject

A polygon shape with label.

Supported attrs properties:

Selector	Node	Description
root	SVGGElement	Container for all shape nodes
body	SVGPathElement	Path body of the shape (see body configuration options)
label	SVGTextElement	Shape text
dataTypeIcon	SVGImageElement	Image containing the icon (see list of available icons)
collectionIcon	SVGImageElement	Image containing the collection icon (see list of available icons)

const dataObject = new shapes.bpmn2.DataObject({
    attrs: {
        'body': {
            fill: '#ffc2a7',
            stroke: '#fe854f'
        },
        'label': {
            text: 'Data Store'
        }
    }
});

Static properties

DATA_OBJECT_COLLECTION_ICONS

The DATA_OBJECT_COLLECTION_ICONS static property includes one icon that can be used within the shape.

false	No image.
true

Add custom icons by defining them in the shapes.bpmn2.DataObject.DATA_OBJECT_COLLECTION_ICONS static property.

shapes.bpmn2.DataObject.DATA_OBJECT_COLLECTION_ICONS['myIcon'] = 'pathToImage'; // or data URI

// later on in the code
dataObject.attr('collectionIcon/iconType', 'myIcon');

DATA_OBJECT_TYPE_ICONS

The DATA_OBJECT_TYPE_ICONS static property includes icons that can be used within the shape.

none	No image.
input
output

Add custom icons by defining them in the shapes.bpmn2.DataObject.DATA_OBJECT_TYPE_ICONS static property.

shapes.bpmn2.DataObject.DATA_OBJECT_TYPE_ICONS['myIcon'] = 'pathToImage'; // or data URI

// later on in the code
dataObject.attr('dataTypeIcon/iconType', 'myIcon');

Special attributes

collection

Set the collection icon.

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

iconColor

Set the icon or collection icon color.

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

iconType

Set the main icon.

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

objectD

Changes the fold of the shape.

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

DataStore

A polygon shape with label.

Supported attrs properties:

Selector	Node	Description
root	SVGGElement	Container for all shape nodes
body	SVGPathElement	Path body of the shape
top	SVGEllipseElement	Top ellipse element
label	SVGTextElement	Shape text

const dataStore = new shapes.bpmn2.DataStore({
    attrs: {
        'body': {
            fill: '#ffc2a7',
            stroke: '#fe854f'
        },
        'top': {
            fill: '#ffc2a7',
            stroke: '#fe854f'
        },
        'label': {
            text: 'Data Store'
        }
    }
});

Methods

topRy()

dataStore.topRy(t?: string | number, opt?: dia.ModelSetOptions): string | number;

If used without parameters, returns the vertical radius of the exposed area of the DataStore base (the value of the body/lateralArea attribute; 10 by default).

If first parameter is not undefined, sets the cylinder DataStore radius of the exposed area of the DataStore 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 cylinder.topRy.

Event

A circular shape with icon and label.

Supported attrs properties:

Selector	Node	Description
root	SVGGElement	Container for all shape nodes
background	SVGEllipseElement	Ellipse background of the shape
border	SVGPathElement	Border of the shape (see built-in border types)
icon	SVGImageElement	Image containing the icon (see list of available icons)
label	SVGTextElement	Shape text

const group = new shapes.bpmn2.Event({
    attrs: {
        'body': {
            stroke: '#fe854f'
        },
        'label': {
            text: 'Group'
        }
    }
});

Static properties

EVENT_ICONS

The EVENT_ICONS static property includes several icons that can be used within the shape.

none	No image.
message1
message2
timer1
conditional1
link1
link2
signal1
signal2
error1
error2
escalation1
escalation2
termination1
termination2
compensation1
compensation2
cancel1
cancel2
multiple1
multiple2
parallel1
parallel2

Add custom icons by defining them in the shapes.bpmn2.Event.EVENT_ICONS static property.

shapes.bpmn2.Event.EVENT_ICONS['myIcon'] = 'pathToImage'; // or data URI

// later on in the code
event.attr('icon/iconType', 'myIcon');

Special attributes

borderStyle

Set the style of the border.

solid	Solid style border (default)
dashed	Dashed style border
dotted	Dotted style border

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

borderType

Set the border type.

single	Single line border (default)
thick	Single line border but thicker
double	Double line border

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

iconColor

Set the icon color.

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

iconType

Set the icon.

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

Gateway

A polygon shape with icon.

Supported attrs properties:

Selector	Node	Description
root	SVGGElement	Container for all shape nodes
body	SVGPolygonElement	Polygon body of the shape
label	SVGTextElement	Shape text
icon	SVGImageElement	Image containing the icon (see list of available icons)

const gateway = new shapes.bpmn2.Gateway({
    attrs: {
        'body': { fill: 'gold', stroke: 'black' },
        'icon': { iconType: 'exclusive' },
        'label': { text: 'My Activity' }
    }
});

Static properties

GATEWAY_ICONS

The GATEWAY_ICONS static property includes several icons that can be used within the shapes.

exclusive_blank	No image.
exclusive
inclusive
parallel
event
exclusive_event
parallel_event
complex

Add custom icons by defining them in the shapes.bpmn2.Gateway.GATEWAY_ICONS static property.

shapes.bpmn2.Gateway.GATEWAY_ICONS['myIcon'] = 'pathToImage'; // or data URI

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

Special attributes

iconColor

Set the icon color.

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

iconType

Set the icon.

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

Group

A rectangle shape with label.

Supported attrs properties:

Selector	Node	Description
root	SVGGElement	Container for all shape nodes
body	SVGRectElement	Rectangle body of the shape
wrapper	SVGRectElement	Rectangle wrapper of the shape
label	SVGTextElement	Shape text

const group = new shapes.bpmn2.Group({
    attrs: {
        'body': {
            stroke: '#fe854f'
        },
        'label': {
            text: 'Group'
        }
    }
});

HeaderedPool

A rectangle shape with nested lanes and an additional header. Inherits from Pool shape and adds a header rectangle and headerLabel text label.

Additional attrs properties:

Selector	Node	Description
header	SVGRectElement	Rectangular header of the shape, positioned to the left of the shape's body
headerLabel	SVGTextElement	Text label inside the header

const headeredPool = new shapes.bpmn2.HeaderedPool();
headeredPool.resize(700, 400);
headeredPool.position(25, 200);
headeredPool.attr('root/magnet', false);
headeredPool.attr('laneHeaders/fill', '#3cb371');
headeredPool.attr('milestoneHeaders/fill', '#00fa9a');
headeredPool.attr('milestoneHeaders/stroke', '#333333');
headeredPool.attr('milestoneLines/stroke', '#3cb371');
headeredPool.attr('milestoneLines/strokeWidth', 2);
headeredPool.attr('milestoneLabels/fill', '#333333');
headeredPool.attr('milestoneLabels/fontStyle', 'italic');
headeredPool.attr('header/fill', '#00fa9a');
headeredPool.attr('headerLabel/text', 'Headered Pool');
headeredPool.attr('headerLabel/fill', '#ffffff');

Pool

A rectangle shape with nested lanes.

Supported attrs properties:

Selector	Node	Description
root	SVGGElement	Container for all shape nodes
body	SVGRectElement	Rectangle body of the shape
laneGroups	SVGGElement	Selector for all lane groups
laneHeaders	SVGRectElement	Selector for all lane rect headers
laneLabels	SVGTextElement	Selector for all lane text labels
lanes	SVGRectElement	Selector for all lane rect bodies
milestoneGroups	SVGGElement	Selector for all milestone groups
milestoneHeaders	SVGRectElement	Selector for all milestone rect headers
milestoneLabels	SVGTextElement	Selector for all milestone text labels
milestoneLines	SVGLineElement	Selector for all milestone lines

const pool = new shapes.bpmn2.Pool({
    position: { x: 100, y: 100 },
    attrs: {
        laneHeaders: {
            fill: '#3cb371'
        },
        milestoneHeaders: {
            fill: '#00fa9a',
            stroke: '#333333'
        },
        milestoneLines: {
            stroke: '#3cb371',
            strokeWidth: 1
        },
        milestoneLabels: {
            fill: '#333333',
            fontStyle: 'italic'
        }
    },
    milestonesSize: 30,
    milestones: [
        {
            label: 'milestone',
        },
        {
            label: 'fixed milestone',
            size: 200
        },
        {
            label: 'milestone',
        }
    ],
    headerSize: 30,
    lanes: [
        {
            label: 'lane',
        },
        {
            label: 'fixed lane',
            size: 100
        },
        {
            label: 'lane'
        }
    ]
});

Methods

getLaneBBox()

pool.getLaneBBox(laneGroupId: string): g.Rect | null;

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

getLanePath()

pool.getLanePath(laneGroupId: string): string[];

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

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

getLanesFromPoint()

pool.getLanesFromPoint(point: dia.Point): string[];

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.

getLanesIds()

pool.getLanesIds()

Returns an array of all lane identifiers (in non-specific order).

getMilestoneBBox()

pool.getMilestoneBBox(milestoneGroupId: string): g.Rect | null;

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

getMilestoneFromPoint()

pool.getMilestoneFromPoint(point: dia.Point): string | null;

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.

getMinimalSize()

pool.getMinimalSize(): dia.Size;

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

getParentLaneId()

pool.getParentLaneId(laneGroupId)

Returns a parent lane id or null if the lane is a top-level lane.

Model attributes

lanes

Lanes in the Pool. Each lane is contained in a group along with the header and has a unique id. Each lane may have optional properties:

Property	Type	Description
label	string	Text content of the lane's label (when left undefined the header with label will not be shown)
id	string	Custom id of the lane group
size	number	Size of the lane, when defined it will fix the lane height to the specified value
headerSize	number	Size of the lane header
sublanes	Sublane	Nested lanes

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'
            }
        ]
    }
]);

milestones

Milestones in the Pool. Each milestone may have optional properties:

Property	Type	Description
label	string	Text content of the milestone's label
id	string	Custom id of the milestone group
size	number	Size of the milestone, when defined it will fix the milestone width to the specified value

pool.set('milestones', [
    {
        label: 'milestone'
    },
    {
        label: 'milestone with fixed width',
        id: 'customMilestone',
        size: 350,
    }
]);

milestonesSize

Height of all milestones

const milestonesSize: number = pool.get('milestonesSize');
pool.set('milestonesSize', 100);

headerSize

Default size of all lane headers

const headerSize: number = pool.get('headerSize');
pool.set('headerSize', 20);

padding

Padding within the Pool's body element, useful when creating another shapes based on Pool.

const padding: dia.Padding = pool.get('padding');
pool.set('padding', 20);
pool.set('padding', { top: 10, right: 20, bottom: 5, left: 10 });

Special attributes

labelAlignment

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

left-top	Sets the alignment to top left
left-bottom	Sets the alignment to left bottom
right-top	Sets the alignment to right top
right-bottom	Sets the alignment to right bottom
top	Sets the alignment to top middle
bottom	Sets the alignment to bottom middle
right	Sets the alignment to right middle (default for milestone labels)
left	Sets the alignment to left middle
center	Sets the alignment to center (default for lane labels)

// 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');

labelMargin

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.

// 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 });

Types

Pool namespace exports several helper types.

Sublane

Interface, which describes lanes of a Pool shape (see lanes).

interface Sublane {
    label?: string;
    size?: number;
    id?: string;
    headerSize?: number;
    sublanes?: Sublane[];
}

Milestone

Interface, which describes milestones of a Pool shape (see milestones).

interface Milestone {
    label?: string;
    size?: number;
}

Links

AnnotationLink

A dashed link.

Supported attrs properties:

Selector	Node	Description
line	SVGPathElement	Visible connection of the link
wrapper	SVGPathElement	An invisible, interactable wrapper around the connection used to make clicking on the link easier.

const annotationLink = new shapes.bpmn2.AnnotationLink({});
annotationLink.prop('source', { x: 450, y: 600 });
annotationLink.prop('target', { x: 400, y: 750 });
annotationLink.attr('line/stroke', '#fe854f');

ConversationLink

A double lined link.

Supported attrs properties:

Selector	Node	Description
line	SVGPathElement	Visible connection of the link
outline	SVGPathElement	Outline of the link
wrapper	SVGPathElement	An invisible, interactive wrapper around the connection used to make clicking on the link easier.

const conversationLink = new joint.shapes.bpmn2.ConversationLink({
    source: { x: 250, y: 260 },
    target: { x: 700, y: 260 },
    attrs: {
        line: {
            stroke: '#30d0c6',
        },
        outline: {
            stroke: '#5654a0'
        }
    }
});

DataAssociation

A dashed link.

Supported attrs properties:

Selector	Node	Description
line	SVGPathElement	Visible connection of the link
wrapper	SVGPathElement	An invisible, interactive wrapper around the connection used to make clicking on the link easier.

const dataAssociation1 = new joint.shapes.bpmn2.DataAssociation({
    source: { x: 250, y: 260 },
    target: { x: 700, y: 260 },
    attrs: {
        line: {
            stroke: '#30d0c6',
        }
    }
});

Flow

A link with configurable flow.

Supported attrs properties:

Selector	Node	Description
line	SVGPathElement	Visible connection of the link
wrapper	SVGPathElement	An invisible, interactive wrapper around the connection used to make clicking on the link easier.

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

Special attributes

flowType

The Flow link comes with 4 flow types:

sequence	A simple link with no additional elements
default	Adds crossed line at the source of the link
conditional	Adds a rhombus at the source of the link
message	Dashed link with circle at the source of the link

flow.attr('line/flowType', 'message');

markerFill

Flow link accepts additional attribute for styling the fill of the markers.

Note: markerFill applies only to message and conditional flowTypes.

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