Are you using the same Shape.stroke to be both the orange border as well as the red border?
You’ll need to use another Shape that is in front of the main Shape and the Orange Circle. Something like:
myDiagram.nodeTemplate =
$(go.Node, "Auto", // the Panel will go around the TextBlock
{ width: 100, height: 50 },
$(go.Panel, "Auto",
// the background
$(go.Shape, { stroke: null, fill: $(go.Brush, go.Brush.Linear, { 0.0: "lightyellow", 1.0: "peachpuff" }), portId: "" }),
// the Orange Circle
$(go.Shape, { figure: "Circle", stroke: null, fill: "orange", width: 50, height: 50, alignment: new go.Spot(0, 0, -20, -20) }),
// the email figure
$(go.Shape, { figure: "Email", width: 12, height: 8, stroke: "orange", fill: "white", alignment: new go.Spot(0, 0, 6, 6) }),
// the validity border
$(go.Shape, { stretch: go.GraphObject.Fill, stroke: "orange", strokeWidth: 2, fill: null },
new go.Binding("stroke", "valid", function(v) { return v ? "orange" : "red"; }))
),
$(go.TextBlock,
new go.Binding("text", "key"))
);
which when combined with this model data:
myDiagram.model = new go.GraphLinksModel(
[
{ key: "Alpha", valid: true },
{ key: "Beta", valid: false }
],
[
{ from: "Alpha", to: "Beta" },
{ from: "Beta", to: "Beta" }
]);
produces this: