Auto Arrange of diagram

I do the same,but still the highlighted line is not complete till the end.

And also other ports again get filled with white color.


function makePort(id, align, spot) {
var port = $(go.Shape,
fill: “transparent”,
stroke: null,
portId: id,
alignment: align,
cursor: “pointer”,
fromSpot: spot,
fromLinkable: true,
fromLinkableDuplicates: true,
fromLinkableSelfNode: true,
toSpot: spot,
toLinkable: true,
toLinkableSelfNode: true,
toLinkableDuplicates: true,
mouseEnter: portMouseEnter,
mouseLeave: portMouseLeave,
toolTip: // define a tooltip for each node that displays the color as text
$(go.Adornment, “Auto”,
$(go.Shape, { fill: “#FFFFCC” }),
$(go.TextBlock, { margin: 4 },
new go.Binding(“text”, “”, diagramInfo))
) // end of Adornment
if (align.equals(go.Spot.Top) || align.equals(go.Spot.Bottom)) {
port.height = 3;
port.stretch = go.GraphObject.Horizontal;
} else {
port.width = 3;
port.stretch = go.GraphObject.Vertical;
return port;

        function portMouseEnter(e, obj) {
            obj.stroke = "rgb(255,105,180)";
            obj.fill = "rgb(255,105,180)";
            obj.isHighlighted = true;
        function portMouseLeave(e, obj) {
            obj.stroke = null;
            obj.fill = "transparent";
            obj.isHighlighted = false;

Issue:10738 resolved(Port taking space by default.)

But highlighted color is not completed till the end on mouse over is still exist.

The example node template I give in Port taking space by default works well – please use it.