Verification of process Designer based on BPMN-JS

bpmnlintIntroduction to the

It validates your chart against a defined set of rules and reports it as an error or warning. It can check your BPMN diagram from the command line, or integrate it into our BPMN modeler via bPMn-js-bPMNLint:

Core rules

At the heart of the library are rules for detecting certain patterns in BPMN diagrams. Each rule is defined by a piece of code that detects and reports on everything from missing tags to the fact that a particular error-prone modeling pattern has been detected.

To give you a better idea of what the rules might be, here is the list of rules built into the library as of today:

From zero to bpmnlint

Let’s get a better idea of the configuration and extensibility of BPMNLint. First, check out and run bPMNLint-Playground, a project specifically designed for model validation projects.

git clone [email protected]:bpmn-io/bpmnlint-playground.git

cd bpmnlint-playground

npm install
npm start
Copy the code

When executed, NPM start opens a browser window with a browser application that already has Lint support.

Configuring Available Rules

A.bpmNlintrc placed in the current working directory defines the file, its rules to apply, and whether to treat it as an error or warning. Holding a.bPMNlintrc on the playground looks like this:

{
  "extends": [
    "bpmnlint:recommended"."plugin:playground/recommended"]."rules": {
    "playground/no-manual-task": "warn"}}Copy the code

The extends block tells BPMNLint to inherit configuration from two predefined rule sets: BPMNLint :recommended and Playground /recommended, the latter provided by the playground plug-in.

The Rules block overrides the report for a particular rule. This example sets playground/ no-manual-Task to a warning (rather than an error). We can select any rule, such as the built-in rule, or we can turn it off completely:

{..."rules": {..."bpmnlint/label-required": "off"}}Copy the code

In the sports field application, we can see that the staple cotton no longer reports an unlabeled start event.

Create a custom rule

Customizing reports of existing rules is useful, but not sufficient for every use case. Sometimes, users or organizations want to identify domain-specific patterns that are relevant to their particular modeling style. Bpmnlint solves this problem by allowing you to contribute custom rules and rule sets.

For example, what if we wanted to make a rule to force the inclusion of emojis in the labels of each stream node? Let’s jump into the “playground” plugin folder and emoji-label-required create the rules in the rules/emoji-label-required.js file:

const {
  isAny
} = require('bpmnlint-utils');

const emojiRegex = require('emoji-regex');

/** * Detect and report missing emojis in element names. */
module.exports = function() {

  function check(node, reporter) {
    if (isAny(node, [
      'bpmn:FlowNode'.'bpmn:SequenceFlow'.'bpmn:Participant'.'bpmn:Lane']) {const name = (node.name || ' ').trim();

      if(! emojiRegex().test(name)) { reporter.report(node.id,'Element must have an emoji'); }}}return {
    check
  };
};
Copy the code

This rule exposes the ability for check(node, Reporter) to report only when BPMN tags are missing emojis. The emoji regular expression utility will perform our check. We must install this as a dependency in the plug-in directory to make the rule run:

cd plugin
npm install emoji-regex
Copy the code

We then need to adjust the configuration to use the emoji-label-required rule. Since this is not a built-in rule, we prefix it (playground in this case) :

{
  "rules": {..."playground/emoji-label-required": "error"}}Copy the code

Back to the playground app, shorthair cats will now report tagging errors without emojis:Verify the presence of emojis in the tag.

This completes our quick look at bPMNLint extensibility.

Check out the playground branch that contains the emoji tag, which contains the implementation described in this blog post. To learn more about rule packaging and testing, check out the sample plug-in.

This is the official BPMN tutorial

The first option

1. Download dependencies

Add the following dependencies to package.json

"bpmnlint": "^ 6.4.0"."bpmn-js-bpmnlint": "^ 0.15.0"."bpmnlint-loader": "^ 0.1.4"."file-drops": "^ 0.4.0".Copy the code

2. Create a rule file

Create a new.bpmNlintrc file in your project and use the extends block to inherit from the common configuration:

{
  "extends": "bpmnlint:recommended"
}
Copy the code

Use the rules block to add or customize rules:

{
  "extends": "bpmnlint:recommended"."rules": {
    "label-required": "off"}}Copy the code

3. Configure the loader inwebpack.config.js

module.exports = {
  // ...
  module: {
    rules: [{test: /\.bpmnlintrc$/,
        use: [
          {
            loader: 'bpmnlint-loader',}]}]}};Copy the code

This will ensure that your build can use the BPMNLint configuration file.

4. Integrate Linter intoBPMN – js

import lintModule from 'bpmn-js-bpmnlint';

import BpmnModeler from 'bpmn-js/lib/Modeler';

import bpmnlintConfig from './.bpmnlintrc';

var modeler = new BpmnModeler({
  linting: {
    bpmnlint: bpmnlintConfig
  },
  additionalModules: [
    lintModule
  ]
});
Copy the code

A second solution can be used if an error message is reported during the project run. Bpmnlintrc is not recognized

Second option

Add the following dependencies to the first scenario:

npm i -g bpmnlint bpmnlint-pack-config
Copy the code

Then execute from the command line:

bpmnlint-pack-config -c .bpmnlintrc -o packed-config.js -t es
Copy the code

Generate the packed-config.js file

The rule file is then introduced into BPMN-JS in the same way

import * as bpmnlintConfig from './packed-config';

var modeler = new BpmnModeler({
  linting: {
    bpmnlint: bpmnlintConfig
  },
  additionalModules: [
    lintModule
  ]
});
Copy the code

The advantage of converting to a packed-config.js file is that you can write your own logic

For example, I translated the rules into Chinese. For example, I added: If a user task is dragged into the canvas, the user task must have left and right lines and cannot exist alone in the canvas.

Check or not can be controlled

import fileDrop from 'file-drops';

var modeler = new BpmnModeler({
    linting: {
        bpmnlint: bpmnlintConfig,
        active: that.getUrlParam('linting')},additionalModules: [
        lintModule
    ],
});

modeler.on('linting.toggle'.function(event) {
    const active = event.active;
    that.setUrlParam('linting', active);
});

const dndHandler = fileDrop('Drop BPMN Diagram here.'.function(files) {
    this.bpmnModeler.importXML(files[0].contents);
});
document.querySelector('body').addEventListener('dragover', dndHandler);


// Process validation is used
setUrlParam = (name, value) = > {

    var url = new URL(window.location.href);

    if (value) {
        url.searchParams.set(name, 1);
    } else {
        url.searchParams.delete(name);
    }

    window.history.replaceState({}, null, url.href);
}
// Process validation is used
getUrlParam = (name) = > {
    var url = new URL(window.location.href);

    return url.searchParams.has(name);
}
Copy the code

The main code is this part, and the final effect is as follows: