With Patchley, you can convert text or audio into a correct BPMN 2.0 file in seconds. You can also explore all of our agents through the Sandbox dropdown inside the tool.

The generation is free to use and doesn’t require login. Feel free to test it and share your feedback!

Thanks for sharing. I looked at the tool and noticed that you removed the bpmn.io logo. What is the reason for that? Note that this is contrary to the bpmn.io license: License | bpmn.io .

I created a tool to create a BPMN diagram, with AI.
You can try it here.
(free, no registration)

BPMN can be generated through chat or by uploading images

According to our license notice, you’re all good.

Am I meeting the required licensing for bpmn-js?Do I need to do anything else to comply with the license?

I’m new to bpmn-js and I’m experimenting on customization.
On my Angular project I’m trying to put a shape on top of a connection, so I’ve started from your example. Here you put a red rectangle on top of other existing rectangles from the BPMN file.

I managed to achieve that, but what I actually want to accomplish is to draw that red rectangle on top of the arrows, if the corresponding sequenceFlow on the BPMN has a conditionExpression. Then I want to print that condition as a label on the rectangle.

Unfortunately, I can’t even manage to put the rectangle on the arrow.
This is what I’ve tried:

override drawConnection(parentNode: SVGElement, element: Connection): SVGElement {
  const connection = this.bpmnRenderer.drawConnection(parentNode, element);
  const rect = drawRect(parentNode, 30, 20, TASK_BORDER_RADIUS, '#cc0000')

  svgAttr(rect, {
    transform: 'translate(185, 178)'
  });

  return connection;
}

This does not put the rectangle on top of the arrow, so I tried to translate it according to the arrow’s path d directions, but I was not able to calculate the translation properly (the 185 and 178 are just examples).

Is there a better way, through the library, to achieve that? Without the translation the red rectangle gets positioned at 0, 0, even though it is in the same djs-group as its arrow.

Diagram: diagram
Diagram without fixed height: without fixed height

Diagram with fixed 300px height: with fixed 300px height

You can accomplish that by zooming the diagram to fit the available viewport, copied from our starter example:

// zoom to fit full viewport
viewer.get('canvas').zoom('fit-viewport');

For example, in React I’m using a component like this:

import React, { useEffect, useRef } from 'react';
import BpmnViewer from 'bpmn-js';

const BpmnDiagram = ({ xml }) => {
  const containerRef = useRef(null);
  const viewerRef = useRef(null);

  useEffect(() => {
    if (!viewerRef.current) {
      viewerRef.current = new BpmnViewer({
        container: containerRef.current,
        width: '100%',
        height: '700px'
      });
    }

    if (xml) {
      viewerRef.current.importXML(xml).catch(err => {
        console.error('Failed to load diagram', err);
      });
    }
  }, [xml]);

  return <div ref={containerRef} style={{ width: '100%', height: '700px' }} />;
};

export default BpmnDiagram;

Different from bpmn-js you have to ensure that the properties panel extension is registered for the correct DMN editor view, mind the drd in the following example:

const dmnModeler = new DmnModeler({
  container: '#canvas',
  drd: {
    propertiesPanel: {
      parent: '#properties-panel-parent'
    },
    additionalModules: [
      DmnPropertiesPanelModule,
      DmnPropertiesProviderModule,
      magicPropertiesProviderModule,
      changedLoggerModule
    ]
  },
  moddleExtensions: {
    magic: magicModdleDescriptor
  }
});

and here you can see empty group

Can you point me to some examples or documentation on how to add such entries to a custom group and then how to save the entered data into the BPMN diagram?
I know about custom moddle — I already have it.

This one is based on camunda-modeler-process-io-specification-plugin/client/properties-panel /process-io-extension-provider.js)

import { TextFieldEntry, isTextFieldEntryEdited, useService } from 'camunda-modeler-plugin-helpers/vendor/bpmn-js-properties-panel';

function CustomTextEntry(props) {
  const { element, id } = props;

  const modeling = useService('modeling');

  const getValue = () => {
    return element.businessObject.get('custom:text') || '';
  };

  const setValue = (value) => {
    modeling.updateProperties(element, { 'custom:text': value });
  };

  return TextFieldEntry({
    element,
    id,
    label: 'Custom Text',
    description: 'Enter some custom text',
    getValue,
    setValue
  });
}

export default class SampleExtensionProvider {
  constructor(propertiesPanel, injector) {
    this._injector = injector;
    propertiesPanel.registerProvider(this);
  }

  getGroups(element) {
    return (groups) => {
      const customGroup = {
        id: 'customGroup',
        label: 'Custom Group',
        // How to define entries and components ?
        entries: [ 
          {
            id: 'customText',
            component: CustomTextEntry,
            isEdited: isTextFieldEntryEdited
          }
        ]
      };

      return [...groups, customGroup];
    };
  }
}

SampleExtensionProvider.$inject = ["propertiesPanel", "injector"];

and the second approach (this one is based on properties-panel-extension/src/provider/magic/MagicPropertiesProvider.js)

import { TextFieldEntry, isTextFieldEntryEdited, useService } from 'camunda-modeler-plugin-helpers/vendor/bpmn-js-properties-panel';

import { html } from 'htm/preact';
import { is } from 'bpmn-js/lib/util/ModelUtil';

function Spell(props) {
  const { element, id } = props;

  const modeling = useService('modeling');
  const translate = useService('translate');
  const debounce = useService('debounceInput');

  const getValue = () => {
    return element.businessObject.spell || '';
  };

  const setValue = value => {
    return modeling.updateProperties(element, {
      spell: value
    });
  };

  return html`<${TextFieldEntry}
    id=${id}
    element=${element}
    description=${translate('Apply a black magic spell')}
    label=${translate('Spell')}
    getValue=${getValue}
    setValue=${setValue}
    debounce=${debounce}
    tooltip=${translate('Check available spells in the spellbook.')}
  />`;
}


const LOW_PRIORITY = 500;

export default class SampleExtensionProvider {
  constructor(propertiesPanel, injector) {
    this._injector = injector;
    propertiesPanel.registerProvider(LOW_PRIORITY, this);
  }

  getGroups(element) {
    return (groups) => {
      if (is(element, 'bpmn:ServiceTask')) {

        const customGroup = {
          id: 'customGroup',
          label: 'Custom Group',

          entries: [
            {
              id: 'spell',
              element,
              component: Spell,
              isEdited: isTextFieldEntryEdited
            }
          ]
        }

        groups.push(customGroup);
      }

      return groups;
    };
  }
}

SampleExtensionProvider.$inject = ["propertiesPanel", "injector"];

But still same result - I see the group but no options after I will expand it

If I want to add other types besides Decision Table and Literal Expression to this change type, is that possible?

If you want to help us with the fix (or even work on it yourself), try to reproduce this problem with a test case.

We have a UI project that makes use of bpmn-io js to bring up a modeler and canvas that lets user create workflows.
We have a feature wherein we are making use of the autoplace feature from bpmn-js.

Autoplace on the task places nodes over other nodes.

Appreciate if someone can guide me on how to solve it.

As far as I know, the usual patter is to lower case properties names, and you should be fine.

{
  "name": "Options",
  "extends": ["bpmn:ExclusiveGateway"],
  "properties": [
    { "name": "options", "type": "Option", "isMany": true, "isAttr": false }
  ]
}

The problem is, that the frame is not keeping the size after resizing.

Code:
I have added a module using the rule provider with the code like this:

this.addRule(‘shape.resize’, function(context) {
return true; // allow resize temporarly. (TODO: Filter external labels)
}

How can I ensure the frame size is kept after resizing?

I want to add a custom attribute to a gateway.

I want something with this type

Array<{color:string; text: string}>

So I created an extension with the following:

However when I call modeler.saveXML I have the following error:

I made a small CodeSandbox that reproduces the issue

By following exactly the example of “custom:triangle” & “custom:circle” i was able to create custom element, but now the issue is when i grab that and want to put inside diagram as the diagram refuses to add there:

Is there a way to allow adding the custom element?

I’ve tried to set this up myself on my dmn modeler using the examples included in the bpmn-js-examples for creating a custom group in the properties panel.
My setup for this extension is almost identical to that of the bpmn-js-example except for repointing the imports and methods being called to be from dmn-js and the element types for this change to be applied to to be “dmn:Inputdata”.

The code compiles and doesn’t throw any errors but the new custom group doesn’t get created in the properties panel and I can see that the custom provider I’ve created isn’t being called when i open or create new inputs in the model.

Can someone please clarify if the properties panel for dmn-js should be customizable like the one for bpmn-js? Are there any other changes that would likely need to be made in order to get this example working?

Thanks

Could you please explain what needs to be done in order to swap the custom linting for camunda/linting and swap the modeler for the camuna modeler

We believe the documentation on our project is enough to get you started. We are happy to answer specific, self-contained questions in the forum, but you need to do your homework.

Could you please explain what needs to be done in order to swap the custom linting for camunda/linting and swap the modeler for the camuna modeler (‘camunda-bpmn-js/lib/camunda-platform/Modeler’) with this configuration:

    executionPlatform: {
        name: 'Camunda Platform',
        version: '7.24'
    },

I also inspected the code of the properties panel and its fields. The onValidate function does not fire any events and only sets local errors. How does the linter get access to these local errors and displays them on the canvas?

Thank you very much!

Thank you for the reply. I have been trying to set it up but i cannot get it to run with the modeler. Is there a working example anywhere? It is very confusing which packages work with what.

I want to embed the camunda modeler in a web project which is bundled with vite and I am using these packages:

import BpmnModeler from ‘camunda-bpmn-js/lib/camunda-platform/Modeler’;
import lintingModule from ‘@camunda/linting/modeler’;
import ‘@camunda/linting/assets/linting.css’;

const Modeler = () => {
    const modeler = useModelerContext();
    const modelerContainerRef = useRef<HTMLDivElement>(null);
    const modelerPropertiesPanelRef = useRef<HTMLDivElement>(null);
    const styles = useStyles();

    useEffect(() => {
        modeler.attachTo(modelerContainerRef.current!);
        const propertiesPanel = modeler.get<any>('propertiesPanel');
        propertiesPanel.attachTo(modelerPropertiesPanelRef.current!);

        modeler
            .createDiagram()
            .then(
                () => {
                    modeler.get<any>('canvas').zoom('fit-viewport');
                    // return;
                    // modeler.get<any>('linting').activate();
                    return modeler
                        .saveXML({format: true})
                        .then(
                            xmlResult => {
                                console.log(xmlResult);
                                return;
                                const linter = new Linter({
                                    modeler: 'web', // `desktop` or `web` modeler, defaults to `desktop`
                                    type: 'platform' // `cloud` or `platform` diagrams, defaults to `cloud`
                                });
                                return linter
                                    // .lint(xmlResult.xml)
                                    // modeler:executionPlatform="camunda-platform" modeler:executionPlatformVersion="7.24"
                                    // xmlns:stepgen="http://example.com/stepgen"
                                    .lint(`
<?xml version="1.0" encoding="UTF-8"?>
<bpmn:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL bpmn0.xsd" id="sample-diagram" targetNamespace="http://bpmn.io/schema/bpmn" 
modeler:executionPlatform="camunda-platform" modeler:executionPlatformVersion="7.24">
  <bpmn:process id="Process_1" isExecutable="false" name="Mein Entwurf">
    <bpmn:startEvent id="StartEvent_1" name="Startereignis"/>
  </bpmn:process>
</bpmn:definitions>
                                        `)
                                    .then(
                                        lintResult => {
                                            console.log('### lint', lintResult);
                                            modeler.get<any>('linting').setErrors(lintResult);
                                        }
                                    );
                                console.log(modeler.get<any>('linting'));
                            }
                        );
                }
            ).catch(console.error);

        return () => {
            propertiesPanel.detach();
            modeler.detach();
        };
    }, [modeler]);

    return (
        <div className={styles.root}>
            <div className={styles.modeler} ref={modelerContainerRef} />
            <div
                className={styles.modelerPropPanel}
                ref={modelerPropertiesPanelRef}
            />
        </div>
    );
};

Have a look around and feel to ask more specific follow up questions.

I think the Camunda Modeler Desktop application does this but I have no clue how it works. Would you mind explining how to marry the field validations inside the properties panel and the linting module? Both for custom groups/fields and for groups which are already included in the camunda properties panel.

Any tips and guidance would be awesome. Thank you!

In Camunda, we fire those away in our linting project.

Here is a snippet on how we do that:

modeler.get('elementTemplates').removeTemplate(element);

There is no error message or anything, it just doesn’t remove the template.

Is that a known issue?

Please do not post the same question multiple times in many topics. Create your own, with a clear explanation of what you tried, what failed and what you want to do.