Best way to create a custom link template

GoJS
1

Hello,

I would like to create the following link template:
image

Could you point me to the best/easiest way? Tried the strokeDashArray and the pathPattern with a geometryString but not really successful.
For the strokeDashArray I don’t know how to draw a border line around the link, for the pathPattern it seems to be difficult to draw a thick line/rectangle.

2

Do you mean something like this (zoomed in for a closer view)?
image

myDiagram.linkTemplate =
  new go.Link({ curve: go.Link.Bezier, toShortLength: 8 })
    .add(
      new go.Shape({ isPanelMain: true, strokeWidth: 10 }),
      new go.Shape({ isPanelMain: true, strokeWidth: 6, stroke: "white", strokeDashArray: [6, 2]}),
      new go.Shape({ toArrow: "Triangle" })
    );
3

Thank you, that worked very well!

Do you have any suggestion for this kind of arrow?
grafik

I tried it with the same approach as the previous arrow but I have issues with the vertical starting line of the arrow and I am wondering how to implement the “open” connection between the arrow body and the head?
grafik

4

Well, this is close:

  new go.Link({ curve: go.Link.Bezier, toShortLength: 7 })
    .add(
      new go.Shape({ isPanelMain: true, strokeWidth: 8 }),
      new go.Shape({ isPanelMain: true, strokeWidth: 4, stroke: "white"}),
      new go.Shape({ fromArrow: "Line", strokeWidth: 2 }),
      new go.Shape({ toArrow: "OpenTriangle", strokeWidth: 1.4, scale: 1.4 })
    );
5

Great, thanks!
If I’d want to close the arrow at the open triangle intersection, best way would be to create a custom arrowhead geometry I guess?

6

If you want a closed triangle as the arrowhead, use:

      new go.Shape({ toArrow: "Triangle", fill: "white", strokeWidth: 1.4, scale: 1.4 }),

image

If you want it only partly closed, yes, define your own arrowhead geometry. Shape | GoJS API

Wait: just change the order of the Shapes:

  new go.Link({ curve: go.Link.Bezier, toShortLength: 7 })
    .add(
      new go.Shape({ isPanelMain: true, strokeWidth: 8 }),
      new go.Shape({ toArrow: "Triangle", fill: "white", strokeWidth: 1.4, scale: 1.4 }),
      new go.Shape({ isPanelMain: true, strokeWidth: 4, stroke: "white"}),
      new go.Shape({ fromArrow: "Line", strokeWidth: 2 }),
    );

which produces:
image

7

Awesome, thanks!