Adornment for link with a label panel


How would you make a link adornment that outlines link and it’s label?

By default link looks like this:

The closest I came to is:

selectionAdornmentTemplate: $(go.Adornment, 'Auto', $(go.Shape, {
	fill: null,
	stroke: 'dodgerblue',
	strokeWidth: 3
}, new go.Binding('geometry', '', (data, part) => {
		let diagram = part.diagram;
		let geometry;
		if (diagram && diagram.selection) {
			diagram.selection.each((selection) => {
				if ( === data) {
					geometry = selection.geometry.copy();
					selection.elements.each((el) => {
						combineFigures(el, geometry);
		return geometry;


function combineFigures(el, geometry) {
	if (el.geometry) {
		el.geometry.figures.each((fig) => {
	else if (el.panel) {
		combineFigures(el.panel, geometry);

But it seems that link label is passes by and I got almost same arrow.

The Adornment will always be of Panel.type “Link”, so that you can arrange labels in it just as with the labels on the Link itself.

    myDiagram.linkTemplate =
        $(go.Shape, { toArrow: "OpenTriangle" }),
        $(go.Panel, "Auto",
          $(go.Shape, "RoundedRectangle", { fill: "lightgray" }),
          $(go.TextBlock, { margin: 3 },
            new go.Binding("text", "to", function(t) { return t[0]; }))
            $(go.Adornment, "Link",
              $(go.Shape, { isPanelMain: true, stroke: "dodgerblue", strokeWidth: 2 }),
              $(go.Panel, "Auto",
                $(go.Shape, "RoundedRectangle", { fill: "lightgray", stroke: "dodgerblue", strokeWidth: 2 }),
                $(go.TextBlock, { margin: 3, stroke: "dodgerblue" },
                  new go.Binding("text", "to", function(t) { return t[0]; }))


So I have to duplicate everything that determines width and position of my label in adornment template? Label is editable so I have to move editor to the adornment as well.

I thought, Isn’t it possible to combine objects?

In that case, why use a Part.selectionAdornmentTemplate at all? Set Part.selectionAdorned to false and change the appearance of the objects in the Link when it Part.isSelected.

You can do that either with a Binding like:

    new go.Binding(...someProperty..., "isSelected",
                   function(sel) { return sel ? valueWhenSelected : normalValue; })

or with a Part.selectionChanged event handler.