Bpmn-js connector extension

Hi team.

I developed an angular 9 project with camunda modeler using below dependencies.
angular - “~9.1.13”,
“bpmn-js”: “6.3.4”,
“bpmn-js-properties-panel”: “0.33.2”,
“camunda-bpmn-moddle”: “^7.0.1”,
“core-js”: “3.6.4”,
“diagram-js”: “^11.13.0”

Expected and my implementation is as below.

So far what I have done is shown in attached image left side.

Property panel seems not the updated one (might be the problem is the versions I use).

My problems are;

  • I need to show connectors in tasks and show the most updated property panel like in camunda online modeler. When I search about the connectors, I found out that I need to use bpmn-js-connectors-extension in order to show the connectors like in the attached picture right side.

  • I couldn’t find a proper version of bpmn-js-connectors-extension that matches with other dependency versions and couldn’t find proper versions that matches with each other dependency version.

I have spent 3 weeks searching for this and I seek some support to add the connectors and other options in the property panel

import * as _EntryFactory from 'bpmn-js-properties-panel/lib/factory/EntryFactory';
import * as _CamundaPropertiesProvider from 'bpmn-js-properties-panel/lib/provider/camunda';
import * as _ElementTemplates from 'bpmn-js-properties-panel/lib/provider/camunda/element-templates';
import * as _PropertiesPanelModule from 'bpmn-js-properties-panel';
// @ts-ignore
import { default as _CamundaModdleDescriptor } from 'camunda-bpmn-moddle/resources/camunda.json';
import PaletteProvider from 'bpmn-js/lib/features/palette/PaletteProvider';
import Modeler from 'bpmn-js/lib/Modeler';

export const InjectionNames = {
  eventBus: 'eventBus',
  bpmnFactory: 'bpmnFactory',
  entryFactory: 'entryFactory',
  elementFactory: 'elementFactory',
  elementRegistry: 'elementRegistry',
  translate: 'translate',
  moddle: 'moddle',
  bpmnModdle: 'bpmnModdle',
  propertiesProvider: 'propertiesProvider',
  elementTemplates: 'elementTemplates',
  paletteProvider: 'paletteProvider',
  originalPaletteProvider: 'originalPaletteProvider'

export const EntryFactory = _EntryFactory;
export const BpmnModeler = Modeler;
export const OriginalPaletteProvider = PaletteProvider;
export const CamundaPropertiesProvider = _CamundaPropertiesProvider;
export const ElementTemplates = _ElementTemplates;
export const PropertiesPanelModule = _PropertiesPanelModule;
export const CamundaModdleDescriptor = _CamundaModdleDescriptor;

export interface IPaletteProvider {
  getPaletteEntries(): any;

export interface IPalette {
  registerProvider(provider: IPaletteProvider): any;

export interface IPropertiesProvider {
  getTabs(elemnt): any;
export class WorkflowDesignComponent implements OnInit {

  title = 'Angular/BPMN';

  constructor(private http: HttpClient) {

  ngOnInit(): void {
    this.modeler = new BpmnModeler({
      container: '#canvas',
      width: '100vw',
      height: '100vh',
      additionalModules: [
        {[InjectionNames.elementTemplates]: ['type', ElementTemplates.elementTemplates[1]]},
        {[InjectionNames.propertiesProvider]: ['type', CamundaPropertiesProvider.propertiesProvider[1]]},

        {[InjectionNames.originalPaletteProvider]: ['type', OriginalPaletteProvider]},

      propertiesPanel: {
        parent: '#properties'
      moddleExtensions: {
        camunda: CamundaModdleDescriptor

  handleError(err: any) {
    if (err) {
      console.warn('Ups, error: ', err);

  load(): void {
    const url = '/../assets/bpmn/initial.bpmn';
    this.http.get(url, {
      headers: {observe: 'response'}, responseType: 'text'
      (x: any) => {
        console.log('Fetched XML, now importing: ', x);
        this.modeler.importXML(x, this.handleError);

  save(): void {
    this.modeler.saveXML((err: any, xml: any) => console.log('Result of saving XML: ', err, xml));


The connectors extension is deprecated. You can use GitHub - bpmn-io/bpmn-js-create-append-anything: A create/append anything bpmn-js extension. instead. Try and update your dependencies, too. bpmn-js v6 is 3 years old.

1 Like

Hi @philippfromme

Thank you for your reply.

I will now try bpmn-js-create-append-anything dependency.

I have tried multiple newer versions of bpmn-js and its other dependencies with angular 9. But non of them worked and I ended up using above versions. I searched for a documentation for versions that matches each other dependencies. Could you pls tell me what are the newer version for bpmn-js, bpmn-js-properties-panel, diagram-js and camunda-bpmn-moddle that altogether work with angular 9 or any example.

There is no reason why newer versions of our tools shouldn’t work with a framework like Angular. Please use the latest versions and report any issues so we can resolve them. Using a completely outdated version is not the solution.

@philippfromme can you share some example repository which are using bpmn-js-create-append-anything?
Also, can I feed elements from .bpmn files instead of .json files into this bpmn-js-create-append-anything?