This extension now lives in an officially supported extension for bpmn-js>=12.

bpmn-js-connectors-extension

This module extends bpmn-js with an element templates everywhere modeling experience.

Features

Built on top of element templates:

• Append template tasks during modeling
• Upgrade template task via replace menu
• (Optionally) Upgrade template tasks via properties panel
• Modern replace and append with search + keyboard support
• Documentation links and icons
• Visually distinguish template tasks from standard BPMN tasks on the canvas

Resources

• Issues
• Changelog

Use Extension

Install via npm:

npm install bpmn-js-connectors-extension

Use in your bpmn-js powered editor:

import ConnectorsExtensionModule from 'bpmn-js-connectors-extension';

import 'bpmn-js-connectors-extension/dist/connectors-extension.css';

const modeler = new BpmnModeler({
  additionalModules: [
    ...,
    ConnectorsExtensionModule,
  ],
  moddleExtensions: {
    zeebe: ZeebeModdle
  }
});

The extension relies on elementTemplates to be provided via additional setup, i.e. camunda-bpmn-js.

See example for a full featured demo or check it out in action.

Configuration

Customize this extension via the connectorsExtension config:

Option	Impact
appendAnything=false	If true, append and create anything modeling experience
elementTemplateChooser=true	If false, do not integrate with the properties panel element template chooser

Related

• @bpmn-io/element-template-icon-renderer - A renderer for task icons
• @bpmn-io/element-template-chooser - A simple element template chooser that plugs into the BPMN properties panel

Run locally

To run the demo application, execute:

npm start