Rectangle Node Style Demo

The RectangleNodeStyle class can display a variety of shapes including rectangles with rounded and cut corners, hexagons, octagons, pills, half-circles, and more.

This is made possible by numerous configuration options for the representation of the node corners. This demo allows you to interactively explore those options. The current configuration of each node is shown as label.

Things to Try

  • Change some of the settings in the property panel on the right-hand side while a node is selected and see how it affects the selected node.
  • Resize a selected node via its round handles and see how the shape changes based on the value of Scale Corner Size.
  • Drag the rectangular handle of a selected node to change its Corner Size interactively. A blue rectangle will be displayed during the drag that visualizes the top-left corner using the current corner size.

Related Demos

  • Shape Node Style
  • Group Node Style
  • Arrow Node Style
  • Tutorial: Custom Node Style

Style Properties

Please select a node to modify its settings.

Affected Corners