Example of Ports in Javascript Diagram Control


This sample visualizes the process flow of publishing a book using connection points. Connection points are static points over the shapes that allow creating connections to the shapes. Customizing the size and appearance of the connection points is illustrated in this example.

More Details...

Fill Color
Stroke Color
Stroke Width

This example shows how to add connection ports to shapes. The ports property of the node defines the static connection ports. The offset, horizontalAlignment, verticalAlignment and margin properties of the ports define its position. The style property of the port can be used to customize its appearance. The visibility property can also be used to define when the connection ports should be visible. In this example, the appearance and visibility of the ports can be customized using the options added to the property panel.