Skip to main content
Skip table of contents

Styling BPMN Elements

The Styling panel is your tool for formatting the diagram pane and the contents of elements and attributes.

Depending on what you select on the pane, different tabs are available:

styling_panel.png

The Styling panel is hidden by default. If you use the panel preset, you can find the icon of the styling panel in the right upper corner of the diagram pane. Click it to display the panel:

styling_panel_default.png

To return to the panel preset, go to the user preferences and use the button Reset Panels.

Refer to Customizing Editors and Panels for detailed information about panel management in general.

Application Options

Use the styling panel to change the formatting of elements and attributes or of the diagram pane itself. Depending on what you click on the panes, different tabs are available:

Tab in Styling Panel

Availability

Options

Attributes

The Attributes tab is available for all BPMN elements and for the diagram pane itself.

See Options of tab Attributes

Diagram

Tab Diagram is only available if you click on the diagram pane.

See Options of tab Diagram

Shape

The Shape tab is available for all BPMN elements.

See Options of tab Shape

Text

Tab Text is only available for the following elements:

See Options of tab Text

Options of Tab Attributes

Use the Attributes tab to change the styling of an element's attribute on the diagram pane:

styling_panel_attributes.png

You can display the attributes of an element on the diagram pane. Select the attribute you want to show in the Attributes panel and move it to the pane by using drag & drop:

For some elements the attribute Name is displayed by default. If it has been deleted, it can be re-inserted on the pane in the way described.

As soon as you have created an attribute of an element on the diagram pane, the Styling panel will show the tab Attributes. Open this tab to edit the formatting of the displayed attributes:

Use section Font to select the font for display of the element's attributes on the diagram pane. You have also several formatting options:

styling_font.png

In section Font Size you can change the font size of the element's attributes on the diagram pane:

styling_font_size.png

You can also adapt the font color of the element's attributes on the diagram pane. Click on the color placeholder:

styling_font_color.png

Then use the color picker to select a new color or enter the hexadecimal code of the desired color:

color_picker.png

Section Word Wrap is helpful, when you want to display attribute text on the diagram pane:

styling_word_wrap.png

By default, the element's attributes are displayed in a single line on the diagram pane. When the word wrap option is disabled, a placeholder (...) indicates that more text is available but hidden:

In the attribute Description you can also enter line breaks using Ctl + Enter. To show the text including your line breaks, activate the word wrap option:

A placeholder (...) indicates that more text is available but hidden. If you want to display the whole text, resize the attribute on the diagram pane. Refer to Resizing BPMN Elements for detailed information.

Activate the checkbox Display Name of Attribute if you also want to display the names of the attributes on the diagram pane:

display_name_of_attribute.png

Options of Tab Diagram

Tab Diagram is only available if you click directly on the diagram pane. It contains all layout options applicable to your workspace:

styling_panel_diagram.png

Use section Background Color to select a background color:

styling_background_color_checkbox.png

Activate the checkbox and click on the color placeholder that will appear. Then use the color picker to select a new color or enter the hexadecimal code of the desired color:

color_picker.png

Option Grid Color is activated by default:

grid_color.png

If you want to change the grid color, click on the color placeholder to display the color picker. Use the color picker to select a new color or enter the hexadecimal code of the desired color. If the checkbox is disabled, the grid is is not displayed, but it is still in use: Elements still snap to the grid.

Option Grid Distance is activated by default:

grid_distance.png

Change the grid distance by changing the number of pixels. If the checkbox is disabled, the grid will neither be displayed nor used: Elements can be moved freely on the diagram pane.

Attribute Grid Style is a drop-down list that offers two options to choose from:

  • Dots

  • Lines

grid_style.png

Options of Tab Shape

In tab Shape you find all options to change the appearance of an element on the diagram pane:

styling_panel_shape.png

Tab Shape contains different options depending on your selection on the pane:

Shape Options for BPMN Elements

Use section Background Color to select a background color:

styling_background_color_checkbox.png

Activate the checkbox and click on the color placeholder that will appear. Then use the color picker to select a new color or enter the hexadecimal code of the desired color:

color_picker.png

If you want to change the Border Color of the element, click on the color placeholder to display the color picker:

styling_border_color.png

Changes of the Opacity apply equally to background and border color:

styling_opacity.png

Shape Options for Relations

If you want to change the color of the arrow, use option Line Color.

styling_line_color.png

Click on the color placeholder to display the color picker. Use the color picker to select a new color or enter the hexadecimal code of the desired color:

color_picker.png

Section Line Style gives you three options for the style of the arrow line. Use the drop-down list to select the desired option:

styling_line_style.png

Open the drop-down list of option Arrow at Start to select the styling for the arrow head:

styling_arrow_start.png

Open the drop-down list of option Arrow at End to select the styling for the arrow end:

styling_arrow_end.png

Use option Line Width to change the width of the arrow line:

styling_line_width.png

Options of Tab Text

Tab Text is only available for the elements Service Task, User Task and Receive Task

styling_panel_text.png

… because these elements contain text content:

Use section Font to select the font for the text within the element. You have also several formatting options:

styling_font.png

In section Font Size you can change the font size of the text within the element:

styling_font_size.png

You can also adapt the Font Color of text within the element. Click on the color placeholder:

styling_font_color.png

Then use the color picker to select a new color or enter the hexadecimal code of the desired color:

color_picker.png

Section Word Wrap is helpful, when you want to display text in BPMN elements:

styling_word_wrap.png

By default, element names can only be displayed in a single line. When the word wrap option is activated, the text will fill the available space in the element:

When the option is disabled, a placeholder (...) indicates that more text is available but hidden:

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.