Shape Port Style Demo

This demo shows the main features of the ShapePortStyle class, most notably its supported shapes. The exact shape of each node port is displayed in the node label.

Besides shapes, the color, size, outline, offset and aspect ratio of ports can also be customized with ShapePortStyle.

One can also create fully custom port visualizations by extending the PortStyleBase class. See Tutorial: Port Style Implementation for detailed tutorials.

Things to Try

• Drag from one unselected port to another to create new connections.
• Drag a node around or resize it to see how its ports move accordingly.
• Switch between SVG and WebGL render mode. Note that in WebGL some shapes are currently not supported and replaced with other shapes.