Arrow Node Style Demo

The ArrowNodeStyle provides several properties to customize its shape. There are five basic shapes provided that can be rotated in four directions.

For the ARROW, DOUBLE_ARROW and NOTCHED_ARROW shapes, the thickness of the arrow shaft can be defined as a shaft ratio of the node size.

For all shapes, the angle of the arrow tip can be defined. The angle is between an arrow blade and the perpendicular to which the arrow is pointing.

Things to try

• Select a node and see its style settings in the property panel on the right-hand side.
• Change some of the settings while a node is selected and see how it affects the selected node.
• Resize a selected node via its resize handles and see how the shape changes based on the node size ratio.
• Click on the canvas background to create a new node using the style settings of the property panel.

To learn how to customize the handles of the arrow node style, please see the Custom Handle Provider Demo.