Smartmate BPMN Editor

Smartmate comes with a BPMN Editor to modify .bpmn20.xml files, which define the processes flow.

Pre-requisites

The Smartmate BPMN Editor works on top of Visual Studio Code. Please make sure you have Visual Studio Code installed.

Installation

Install the smartmate-bpmn-editor extension in VSCode

Smartmate BPMN Editor VS Code Extension

Usage

After you add a process, you can select its .bpmn20.xml file, and the editor will automatically show up.

You can also edit the .xml file manually, but it’s not recommended.

Toolbar

Toolbar
drag canvas icon

Drag Canvas: Move the whole canvas

select icon

Select: Select multiple items

Shift icon

Shift: Shift multiple items up/down or left/right

Shift icon

Sequence Flow: Connect two elements of a process.

Gateway icon

Gateway: A gateway is used to control the flow of execution: make decisions, execute tasks in parallel and join executions.

Start Event icon

Start Event: Indicate where a process starts.

Timer Start Event icon

Timer: Allows to add a timer start event or a timer event.

End event icon

End event: Indicate where a process ends.

User Task icon

User Task: A task that should be completed by a user by filling out a given form.

Email Task icon

Email Task: Send an email.

Service Task icon

Service Task: A task that will be performed automatically by Smartmate.

Generate Document Task icon

Generate Document Task: Generate a document from a template.

Properties Panel

After selecting an element in the canvas, a panel will appear at the right of the screen. In this panel you set the element properties.

Note

Some property options will appear only if they are defined in the process YAML file.

For example, when creating a user task, you need to select a form. For the form to appear in the dropdown, you need to define the form in the process YAML file first. The same is valid for service tasks, variables, etc.