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

The diagram pane consists of different areas:

Customizing the Diagram Pane

Image Modified

You have several options to adjust the diagram pane. When you open the pane for the first time, the default view is displayed:

The Diagram Pane is displayed in the centre at the top
(see Managing the Diagram Pane for details).
The Execution Pane is displayed below the diagram pane
(see chapter Modeling Execution for further information).
Three Designer Panels are shown in the left sidebar
(see Managing Panels for details):
- The Service Panel
- The Attributes Panel
- The Validation Panel

Managing the Diagram Pane

Multiexcerpt include

MultiExcerptName
SpaceWithExcerpt	INTERNAL

state

panel_

of_pane

customization
PageWithExcerpt	INTERNAL:_designer_excerpts

Image Removed

Multiexcerpt include

MultiExcerptName
SpaceWithExcerpt	INTERNAL

second_sidebar

DisableCaching

true

PageWithExcerpt

INTERNAL:_designer_excerpts

Image Removed

Multiexcerpt include

SpaceWithExcerpt	INTERNAL
MultiExcerptName	enlarge_panetip_panel_management
DisableCaching	true
PageWithExcerpt	INTERNAL:_designer_excerpts

Image Removed

Multiexcerpt include

SpaceWithExcerpt	INTERNAL
MultiExcerptName	hide_sidebar
DisableCaching	true
PageWithExcerpt	INTERNAL:_designer_excerpts

Image Removed

To gain more space for modeling, you can hide the whole execution pane by clicking the icon Image Removed in the model toolbar.

Managing Panels

Multiexcerpt include

SpaceWithExcerpt	INTERNAL
MultiExcerptName	panel_management
DisableCaching	true
PageWithExcerpt	INTERNAL:_designer_excerpts

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.

In addition to the standard features, you can use the Overview panel (Image Added) in the BPMN editor.

ActionExampleDescription

Navigation

Image Modified

You can use the Overview Panel to navigate in your BPMN model.

The panel displays your model and a blue frame, representing the content shown on the diagram pane.

If you

want to work on another part of the model

wan to quickly change your working location in large models, you can

use

move the frame to

quickly change the display.Zoom

Image Removed

When modeling, you have several options to apply the zoom on the diagram pane.

Press the Ctrl button and use the mouse wheel.
Use the zoom bar at the bottom of the pane.
To zoom, you can use the pin or press the plus or minus button of the zoom bar.

change the visible part of the model.
Image Modified	You can

also

use the Overview

Panel

panel to zoom in or out of the model

:

.

Hover over the right bottom corner of the blue frame. The cursor changes and you can resize the frame.

Shifting Content

Image Removed

You have also several options to shift the content on the pane:

Use the mouse wheel to move the pane and its content vertically.
Press the Shift button and use the mouse wheel to move the content horizontally.
Use the scroll bars for both directions.
Use the overview panel.

Scaling

Image Removed

Multiexcerpt include

SpaceWithExcerpt	INTERNAL
MultiExcerptName	fit_model_to_pane
DisableCaching	true
PageWithExcerpt	INTERNAL:_designer_excerpts

Image Removed

Multiexcerpt include

SpaceWithExcerpt	INTERNAL
MultiExcerptName	scale_model
DisableCaching	true
PageWithExcerpt	INTERNAL:_designer_excerpts

The Toolbars

Two toolbars are available for work on the diagram pane:

The Model Toolbar

Multiexcerpt include

SpaceWithExcerpt	INTERNAL
MultiExcerptName	model_toolbar
DisableCaching	true
PageWithExcerpt	INTERNAL:_designer_excerpts

The Elements Toolbar

Multiexcerpt include

The Toolbars

Two toolbars are available for work on the diagram pane:

The Model Toolbar

The model toolbar assists you during modeling on the diagram pane:

Image Added

The following table explains the available tools:

Tool Icon	Tool Name	Description
Image Added	Export	Use this icon to export your BPMN model in JSON format.
Image Added	Report	Click the Report icon to print your model. You have two options: You can send your model directly to a printer or save it as a Word document. See page Creating Diagram Reports for details.
Image Added	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.
Image Added	Publish to Cockpit	If you want direct access to your BPMN model in your cockpit, click on the icon Publish to cockpit. If you open your cockpit the next time, an external link tile grants you direct access to the model.
Image Added	Hide Execution Pane	Use this icon to hide the execution pane. This allows to gain more space during modeling.
Image Added	Toggle grid	Use this icon to enable or disable the grid on the diagram pane. The grid supports you during modeling: If the grid is enabled, elements snap to the grid points.
Image Added	Show invalid	Activate the icon to highlight all invalid elements.
Image Added	Insert/Remove horizontal space	Use this icon if you need more or less space on the diagram pane. Click on the pane to display the start line, the second click marks the end line and defines the size of the area to be added. To add space, click from left to right to define the area. If you want to delete a horizontal space, click from right to left to define the area.
Image Added	Insert/Remove vertical space	Use this icon if you need more or less space on the diagram pane. Click on the pane to display the start line, the second click marks the end line and defines the size of the area to be added. To add space, click from top to bottom to define the area. If you want to delete a vertical space, click from bottom to top to define the area.
Image Added	Undo	If you want to cancel your last action on the diagram pane, use this icon.
Image Added	Redo	Use this icon to restore the action that you had previously undone.

The Elements Toolbar

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

Image Added

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

But you can also expand the toolbar by using the Image Addedicon.

Image Added

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

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

Image Added

Drag the element you want to create from the toolbar and drop it on the diagram pane.

Another way to create a form element is to click on the element in the toolbar, switch to the editor and click again.

To cancel the operation, press the Esc key.

SpaceWithExcerptINTERNALMultiExcerptNamebpmn_elements_toolbarDisableCachingtruePageWithExcerptINTERNAL:_designer_excerpts

The Diagram Context Menus

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

Elements Context Menu

Anchor

	elements_context_menu
	elements_context_menu

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
Image Modified	End Event
Image Modified	Plain Event
Image Modified	Message Event
Image Modified	Timer Event
Image Modified	Service Task
Image Modified	User Task
Image Modified	Receive Task
Image Modified	Exclusive Gateway
Image Modified	Parallel Gateway

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

Tools Context Menu

Anchor

	tools_context_menu
	tools_context_menu

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
Image Modified	Delete the element.
Image Modified	Copy the element.
Image Modified	Cut the element.
Image Modified	Paste format of the element.
Image Modified	Bring the element to the front.
Image Modified	Send the element to the background.

Extended Tools Context Menu

Anchor

	x_tools_context_menu
	x_tools_context_menu

Image Modified

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

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

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

Relation Context Menu

Anchor

	relation_context_menu
	relation_context_menu

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

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

Diagram Context Menu

Anchor

	diagram_context_menu
	diagram_context_menu

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

Icon	Description
Image Modified	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.

Table Filter

hideControls	true
sparkName	Sparkline
datepattern	dd M yy
globalFilter	true
id	1614936371241_-262230388
sort	Shortcut ⇧
worklog	365\|5\|8\|y w d h m\|y w d h m
isOR	AND
separator	Point (.)
order	0

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 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 Ctrl + A	Selects all elements on the diagram pane.
CTRL Ctrl + Arrow down	Moves the selected element(s) downwards by increments of one pixel.
CTRL Ctrl + Arrow left	Moves the selected element(s) to the left by increments of one pixel.
CTRL Ctrl + Arrow right	Moves the selected element(s) to the right by increments of one pixel.
CTRL Ctrl + Arrow up	Moves the selected element(s) upwards by increments of one pixel.
CTRL Ctrl + C	Copies the selected element(s) to the clipboard.
CTRL Ctrl + D	Closes the active model window.
CTRL Ctrl + left mouse button	Allows you to add or remove individual elements from the selection one by one.
CTRL Ctrl + Mouse Wheel	Reduces (scrolling down) or enlarges (scrolling up) the zoom factor of the model.
CTRL Ctrl + SHIFT Shift + D	Closes all tabs and switches to explorer tab.
CTRL Ctrl + V	Generates copies of the selected element(s).
CTRL Ctrl + X	Cuts the selected element(s) and copies them to the clipboard.
CTRL Ctrl + Y	Repeats editing steps that have been undone.
CTRL Ctrl + Z	Undoes previous editing steps.
DELDel	Press Del to remove selected elements from the diagram pane.
ESCEsc	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 Shift + Mouse Wheel	Moves the model to the right (scrolling up) or left (scrolling down).
SHIFT Shift + Page down	Switches to the next tab from left to right.
SHIFT Shift + Page up	Switches to the next tab from right to left.

Otp

Floating	false
maxHLevel	2

Rp
Working With the Explorer BPMN Model Modeling Execution PAS Designer Developer Guide Supported BPMN Elements Getting Started With Designer Customizing Editors and Panels

Page tree

Versions Compared

Old Version 8

New Version 9

Key

Customizing the Diagram Pane

Managing the Diagram Pane

Managing Panels

Modeling on the Diagram Pane

Modeling on the Diagram Pane

The Toolbars

The Model Toolbar

The Elements Toolbar

The Toolbars

The Model Toolbar

The Elements Toolbar

The Diagram Context Menus

Shortcuts

Page tree

Page History

Versions Compared

Old Version 8

New Version 9

Key

Customizing the Diagram Pane

Managing the Diagram Pane

Managing Panels

Modeling on the Diagram Pane

Modeling on the Diagram Pane

The Toolbars

The Model Toolbar

The Elements Toolbar

The Toolbars

The Model Toolbar

The Elements Toolbar

The Diagram Context Menus

Shortcuts