Business Process Model and Notation

I am writing to describe

1. What BPMN is
2. Should we use this in our project or not
3. My BPMN parts
4. Requirements and techniques
5. General steps to follow to start using BPMN
6. Exporting and Saving your BPMN

What BPMN is?

First, you have to know it’s a short form of Business Process Model and Notation, which helps us to make our whole project more sensible and friendlier to our users. It contains custom elements and icons for different purposes with custom properties and values for different strategies.

Should we use this in our project or not?

The main reason to use BPMN in our project is to make it possible for users to have more interaction with the project, and design the project based on their ideas, business, and strategies.

To make sure you have to use this on your project or not here are three main questions you have to ask yourself first to be clear about what to do:

1. How big your project is?
2. Do users need to be able to make this much interaction?
3. Is your project based on users' ideas and strategies?

Depending on your answers we can go forward to the next parts.

My BPMN parts

Mine is a customized and more flexible and optimal one than other versions available on the net. I used my Chinese colleague and continued developing and improving this based on BPMN.io, bpmnJs, diagramJs, viteJs, and vueJs. This has 4 main units:

1. Navbar (the left side which contains custom elements and icons)
2. Display (the center of the screen which shows the changes)
3. Data Entry (the right side where we can bind different values to different properties)
4. Process (the top part where we can export, import, and save created BPMN and many other extra abilities)

Requirements and techniques

You don’t need to be an expert developer to be able to use this. You just need to know the basics of web development and HTML, CSS, and Javascript for more ability to make this custom you may need the knowledge of vueJs too.

General steps to follow to start using my BPMN

This is a general repo on my GitHub you can achieve it by clicking on the underlined words or here: https://github.com/TaheriSohrab/SeenTa_BPMN after cloning and finish indexing you need to follow these steps to run the project:
1. npm i
2. npm run dev — watch

For deployment, you need this command:
npm build run
— -> copy your icons to dist > assets > src > bpmn-icons
— -> copy tour icons to dist > src > bpmn-icons

At the end copy your final <dist> folder to your server/backend side.

Exporting and Saving your BPMN

It depends on your structure and strategy on what you want to do after the client or user creates this, you can write a parser for what you see in the preview dialog as SVG, JSON, or XML.
You can also save it locally on your device and open it again if you wish.
It can be changed and opened again after saving using your written parser too.

At the End

Feel free to ask any question about this and you can reach me with the links below:
My site
My LinkedIn

I will be happy to hear your experiences
Thanks for your time

Sohrab