When you open a model from the service panel, a second tab will open, displaying the model on the diagram pane. This is where you design your BPMN model.

Designer > Working with the BPMN Editor > bpmn_editor_sections.png

The diagram pane consists of different areas:

Diagram Pane
Model Toolbar
Elements Toolbar
Designer Panels

Customizing the Diagram Pane

Documentation Library > _designer_images > bpmn_editor_default.png

Modeling on the Diagram Pane

While modeling, some general functionalities help you to browse through your model, and to adjust your working location within the model. Refer to Customizing Editors and Panels for more details.

The Toolbars

Two toolbars are available for work on the diagram pane:

The Model Toolbar
The Elements Toolbar

The Model Toolbar

	The model toolbar assists you during modeling on the diagram pane.
	Enabled options are highlighted in blue.

The following table explains the available tools:

Tool Icon	Tool Name	Description
	Export	Use this icon to export your BPMN model in JSON format.
	Share	If you click the Share icon, the URL of your BPMN model is copied to the clipboard and you can paste it elsewhere, for example in an email.
	Hide Execution Pane	Use this icon to hide the execution pane. This allows to gain more space during modeling.
	Toggle grid
	Insert/Remove horizontal space
	Insert/Remove vertical space
	Undo
	Redo

The Elements Toolbar

The elements toolbar contains all BPMN elements that you can create on the diagram pane.

Documentation Library > _designer_images > objects_toolbar.png

By default, the elements toolbar only displays the icons of the available BPMN elements.

But you can also expand the toolbar by using the Documentation Library > _designer_images > icon_expand_objects.png icon.

Documentation Library > _designer_images > objects_toolbar_expanded.png

In its expanded version, the names of all elements are also displayed.

In chapter Supported BPMN Elements all elements and their specific properties are described.

Documentation Library > _designer_images > drag_object_to_canvas.png

The Diagram Context Menus

Various context menus support the user during modeling on the diagram pane:

The Elements Context Menu
The Tools Context Menu
The Extended Tools Context Menu
The Relation Context Menu
The Diagram Context Menu

Elements Context Menu

Documentation Library > _designer_images > open_context_menu_on_object.png

If you click on an element, the element context menu opens. You can use it to create new elements instead of using the elements toolbar.

Choose one of the icons to create the corresponding element:

Icon	Element
	End Event
	Plain Event
	Message Event
	Timer Event
	Service Task
	User Task
	Receive Task
	Exclusive Gateway
	Parallel Gateway

If you create a new element using the context menu, the relation to the current element is drawn automatically.

Tools Context Menu

Designer > Working with the BPMN Editor > open_tool_context_menu.png

If you right click on an element, the tools context menu opens. Use it to edit the current element.

The following options are available:

Icon	Description
	Delete the element.
	Copy the element.
	Cut the element.
	Paste format of the element.
	Bring the element to the front.
	Send the element to the background.

Extended Tools Context Menu

Designer > Working with the BPMN Editor > open_tool_context_menu_multiple.png

If you have selected more than one element on the pane, the tools context menu is enhanced with additional options:

Icon	Description
	Align left
	Align right
	Align center
	Align top
	Align bottom
	Align middle
	Auto layout
	Distribute horizontally
	Distribute vertically
	Align relation

The number of displayed options depends on your selection on the diagram pane.

Relation Context Menu

Designer > Working with the BPMN Editor > open_relation_context_menu.png

Right-click a relation to open the relation context menu. Only the following options are applicable to relations:

Icon	Description
	Delete the relation.
	Paste format of the relation.
	Bring the relation to the front.
	Send the relation to the background.
	Align the relation.

Diagram Context Menu

Designer > Working with the BPMN Editor > open_bpmn_editor_cm.png

With a right-click on the diagram pane itself, you open the diagram context menu:

Icon	Description
	Paste a copied element.

Shortcuts

You can also use shortcuts on the diagram pane. The following list of shortcuts can be searched. Enter your search term in the Global Filter field.

Shortcut	Description
Arrow down	Moves the selected element(s) downwards by increments of one gridline. If no elements are selected, the whole diagram pane is moved downwards.
Arrow left	Moves the selected element(s) to the left by increments of one gridline. If no elements are selected, the whole diagram pane is moved to the left.
Arrow right	Moves the selected element(s) to the right by increments of one gridline. If no elements are selected, the whole diagram pane is moved to the right.
Arrow up	Moves the selected element(s) upwards by increments of one gridline. If no elements are selected, the whole diagram pane is moved upwards.
Ctrl + 1, 2, 3 ... 9	Opens the tab corresponding to the chosen number. The first nine opened models are offered for activation. Press a number to activate the corresponding model and bring it to the foreground.
Ctrl + A	Selects all elements on the diagram pane.
Ctrl + Arrow down	Moves the selected element(s) downwards by increments of one pixel.
Ctrl + Arrow left	Moves the selected element(s) to the left by increments of one pixel.
Ctrl + Arrow right	Moves the selected element(s) to the right by increments of one pixel.
Ctrl + Arrow up	Moves the selected element(s) upwards by increments of one pixel.
Ctrl + C	Copies the selected element(s) to the clipboard.
Ctrl + D	Closes the active model window.
Ctrl + Mouse Wheel	Reduces (scrolling down) or enlarges (scrolling up) the zoom factor of the model.
Ctrl + Shift + D	Closes all tabs and switches to explorer tab.
Ctrl + V	Generates copies of the selected element(s).
Ctrl + X	Cuts the selected element(s) and copies them to the clipboard.
Ctrl + Y	Repeats editing steps that have been undone.
Ctrl + Z	Undoes previous editing steps.
Ctrl + left mouse button	Allows you to add or remove individual elements from the selection one by one.
Del	Press Del to remove selected elements from the diagram pane.
Esc	Pressing the Esc key aborts the following processes: adding a new element closing a dialog drawing a relation moving elements reattaching a relation changing the relation path creating an image changing the name of an element
Mouse Wheel	Moves the model up or down.
Shift + Mouse Wheel	Moves the model to the right (scrolling up) or left (scrolling down).
Shift + Page down	Switches to the next tab from left to right.
Shift + Page up	Switches to the next tab from right to left.