Yes, I want the figure drawn. The inside part has to be the picture. If the node is female, the parts of the picture outside the circle should not be visible. but the frame of the circle should be visible.
https://gojs.net/latest/intro/pictures.html
Actually, I tried to do this by looking at the examples here. It seems to have worked. But there is a problem.

The panel I added does not contain the textblock part, but it works as if it includes the textblock part. This can be seen when focusing or looking at marriage links.
When delete the textblock part, it looks like it should. But i need textblock.

myDiagram.nodeTemplateMap.add(
"M", // male
$(
go.Node,
"Vertical",
{
locationSpot: go.Spot.Center,
locationObjectName: "ICON",
selectionObjectName: "ICON",
},
new go.Binding("opacity", "hide", (h) => (h ? 0 : 1)),
new go.Binding("pickable", "hide", (h) => !h),
$(
go.Panel,
"Spot",
$(go.Shape, "Square", { width: 40, strokeWidth: 2, fill: "black" }),
$(
go.Panel,
{
itemTemplate: $(
go.Panel,
$(
go.Shape,
{ stroke: null, strokeWidth: 0 },
new go.Binding("fill", "", attrFill),
new go.Binding("geometry", "", maleGeometry)
)
),
margin: 1,
},
new go.Binding("itemArray", "a")
),
$(
go.Picture,
"https://t3.ftcdn.net/jpg/03/51/39/36/360_F_351393603_yTkY09jjL7mg39Wnzv2bdrmEDv1rbvFQ.jpg",
{
width: 40,
height: 40,
}
),
$(
go.Panel,
"Spot",
{ isClipping: true },
$(go.Shape, "Square", { width: 40, strokeWidth: 2 })
)
),
$(
go.TextBlock,
{
font: "16px sans-serif",
textAlign: "center",
maxSize: new go.Size(80, NaN),
},
new go.Binding("text", "n")
)
)
);
I tried to adapt the codes you suggested, but I kept getting errors. I think I didn’t understand what you wanted to say correctly, sorry.