preface

Q: What is bPMn.js? 🤔 ️

“

Bpmn. js is a BPMN2.0 rendering toolkit and Web modeler that allows you to draw flowcharts in the front end.

Q: Why did I write this series? 🤔 ️

“

Due to the business needs of the company, bPMN. js is used in the project. However, as the developer of BPMN. js is a foreign friend, there are few textbooks and no detailed documents on this aspect in China. So a lot of ways to use a lot of pits have to find their own. After mulling it over, I decided to write a series of textbooks on it to help more bPMn.js users or developers who want to find a good way to draw flowcharts. It is also a kind of consolidation of their own.

Because it is a series of articles, so the update may be more frequent, if you accidentally brush and not what you need also please understand 😊.

Don’t ask for praise 👍 don’t ask for heart ❤️. I only hope to have a little help for you.

Basic use of bPMn.js

This chapter mainly introduces the basic ways of using BPMn.js. It is suitable for beginners who have no experience with BPMn.js or developers who want to use it in vUE projects.

From this chapter you can learn:

  • Bpmn.js is the easiest way to use it

  • Install bPMn.js using NPM

  • Vue uses bPMn.js

For the convenience of everyone to have a general idea of the following explanation, let’s take a look at the content of using BPMN.js drawing:


Bpmn.js is the easiest way to use it

We can introduce bpmn.js directly into our code using CDN:

<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>BPMNJS</title>
    <! - the CDN acceleration -- -- >
    <script src="https://unpkg.com/[email protected]/dist/bpmn-viewer.development.js"></script>  		 <! Introduce a simple XML string -->
    <script src="./xmlStr.js"></script>
    <style>
        #canvas {
            height: 400px;
        }
    </style>
</head>

<body>
    <div id="canvas"></div>
    <script>
        var bpmnJS = new BpmnJS({
            container: '#canvas'
        });
        bpmnJS.importXML(xmlStr, function(err) {
            if(! err) {console.log('success! ');
                // Let the graph adapt to the screen
                var canvas = bpmnJS.get('canvas')
                canvas.zoom('fit-viewport')}else {
                console.log('something went wrong:', err); }});</script>
</body>

</html>
Copy the code

(Xmlstr.js above and the case code are here lindaidai-bPMn-basic-demo)

As shown in the example above, we use CDN acceleration to import bPMn.js directly, specify a container locally (that is, the div with the ID of Canvas), and then use the method importXML provided by BPMN.js to parse the XML string to generate the corresponding workflow diagram.

Open the page to see

img1

Install bPMn.js using NPM

The way of use provided above is the most basic way. It is just to show the picture, and it cannot be drawn or operated by itself. Therefore, NPM installation is more used in the project. We can use the following command to install:

npm install --save bpmn-js
Copy the code

Use in an application:

import BpmnViewer from 'bpmn-js';
import testDiagram from './test-diagram.bpmn';

var viewer = new BpmnViewer({
  container: '#canvas'
});

viewer.importXML(testDiagram, function(err) {
  if(! err) {console.log('success! ');
    viewer.get('canvas').zoom('fit-viewport');
  } else {
    console.log('something went wrong:', err); }});Copy the code

The testDiagram above refers to a BPMN file, not the XML string in the first example.

Bpmn-js-example-bunding bPMn-js-example-bunding

Vue uses bPMn.js

The use in VUE can be divided into the following parts:

  • Use bPMN.js – Basics in VUE

  • Use bPMN.js in Vue – left toolbar

  • Use bPMn.js in Vue – right side property bar

For the sake of illustration, I’ll create an empty VUE project (with only routing installed):

vue create vue-bpmn-basic
cd vue-bpmn-basic
npm i vue-router --save-D
Copy the code

Note ⚠ ️ ️

You don’t have to create this project address locally

LinDaiDai/bpmn-vue-basic

Use bPMN.js – Basics in VUE

I created a file called basic.vue in the components folder of my project and configured the route:

const routes = [
    {
    	path: '/basic'.component: (a)= > import('. /.. /components/basic')}]Copy the code

The project structure is shown in the figure below:

img5
  1. Installation-dependent dependencies
npm i bpmn-js --save-D
Copy the code
  1. writeHTMLcode
// basic.vue
<template>
  <div class="containers">
    <div class="canvas" ref="canvas"></div>
  </div>
</template>
Copy the code
  1. writeJScode
// basic.vue
  <script>
    // Introduce related dependencies
    import BpmnModeler from 'bpmn-js/lib/Modeler'
    import {
      xmlStr
    } from '.. /mock/xmlStr' // This is a direct reference to the XML string
    export default {
      name: ' '.components: {},
      // Life cycle - creation complete (access to the current this instance)
      created() { },
      // Lifecycle - After loading, the Vue instance is mounted to the completion of the actual DOM operation, usually during which Ajax interaction takes place
      mounted() {
        this.init()
      },
      data() {
        return {
          // BPMN modeler
          bpmnModeler: null.container: null.canvas: null}},methods: {
        init() {
          // Get the dom node whose attribute ref is canvas
          const canvas = this.$refs.canvas
          / / modeling
          this.bpmnModeler = new BpmnModeler({
            container: canvas
          })
          this.createNewDiagram()
        },
        createNewDiagram() {
          // Convert the string to a graph for display
          this.bpmnModeler.importXML(xmlStr, (err) => {
            if (err) {
              // console.error(err)
            } else {
              // This is a successful callback, where you can do a bunch of things
              this.success()
            }
          })
        },
        success() {
          // console.log(' Created successfully! ')}}}</script>
Copy the code
  1. writeCSS
// basic.vue
<style scoped>
.containers{
	position: absolute;
	background-color: #ffffff;
	width: 100%;
	height: 100%;
}
.canvas{
	width: 100%;
	height: 100%;
}
.panel{
	position: absolute;
	right: 0;
	top: 0;
	width: 300px;
}
</style>
Copy the code

Use the command NPM run start to start the project.

img2

Use bPMN.js in Vue – left toolbar

Left toolbar role: To add a new node to the graph

“

As shown in the figure:

img3

To use the left toolbar, just reference the appropriate style in your project:

main.js
css 

// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
// Here is the style of the BPMN workflow drawing tool
import 'bpmn-js/dist/assets/diagram-js.css' // Style the left toolbar and edit the node
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css'
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css'
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'
new Vue({
    router,
    render: h= > h(App),
}).$mount('#app')
Copy the code

All other snippets of provider.vue are the same as basic.vue.

When you open the page, you will find the toolbar on the left, and you can add nodes.

Use bPMn.js in Vue – right side property bar

The function of the property bar: users can get the property information of the node when they click the node on the graph

“

As shown in the figure:

img4

To use the property bar on the right, you need to install a plug-in called bPMN-js-properties-Panel.

  1. Installing a plug-in
npm i bpmn-js-properties-panel --save-D
Copy the code
  1. inmain.jsTo introduce the corresponding style:
// main.js
import Vue from 'vue'. import'bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css' // Right toolbar style.Copy the code
  1. Introduced in the pagePropertiesProviderModule and propertiesPanelModule:
// panel.vue
<script>. import propertiesPanelModulefrom 'bpmn-js-properties-panel'
import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda'
import camundaModdleDescriptor from 'camunda-bpmn-moddle/resources/camunda'. methods: { init() {// Get the dom node whose attribute ref is canvas
    const canvas = this.$refs.canvas
    / / modeling
    this.bpmnModeler = new BpmnModeler({
      container: canvas,
      // Add control panel
      propertiesPanel: {
        parent: '#js-properties-panel'
      },
      additionalModules: [
        // Properties bar on the right
        propertiesProviderModule,
        propertiesPanelModule
      ],
      moddleExtensions: {
        camunda: camundaModdleDescriptor
      }
    })
    this.createNewDiagram()
  }
}
Copy the code

After the language

Git address: github.com/LinDaiDai/b… Please give a Star🌟, thank you 😊

For the full catalogue of the series, please check here: “The most detailed BPMN.js textbook in the whole Web”.

Series related recommendations:

The most detailed BPMN.js textbook in the whole web – HTTP Request

The most detailed BPMN.JS textbook in the whole Web – Events

The most detailed BPMN.js textbook on the Whole web – Renderer

The most detailed BPMN.js textbook -contextPad

“The most detailed BPMN. js textbook in the whole web – Editing and Deleting nodes”