Multiple non-overlapping link line shapes

GoJS
1

In reference to the docs (emphasis mine):

More than one shape may automatically get the route geometry. This is useful when you want to have multiple link shapes with different thicknesses to create a gradient effect across the path of the link or to produce parallel lines along the path. Just set GraphObject.isPanelMain to true on each such Shape.

I can get the overlapping lines with different stroke widths to appear over top each other, but how can i position the shapes side by side?

I have this: 56%20PM

but want this: 56%20PM%20copy

$(go.Shape, {
  strokeWidth: 5,
  stroke: "red",
  isPanelMain: true,
}),
$(go.Shape, {
  strokeWidth: 3,
  stroke: "#0064a6",
  isPanelMain: true,
},),

Thanks!

2

I don’t know if there’s a good and easy solution. The obvious, but rough, solution is to use Shape.pathPattern: Custom Relationships

3

Indeed that is the only way I’ve seen to produce parallel lines from the examples. It would be nice if we could verify why the highlighted text in my original post is in the documentation because it is the approach I’d like to take.
thank you

4

Yes, that phrase was just referring to (symmetric) parallel lines that you can get:
image

by using this template:

    myDiagram.linkTemplate =
      $(go.Link,
        { routing: go.Link.Orthogonal },
        $(go.Shape, { isPanelMain: true, strokeWidth: 6 }),
        $(go.Shape, { isPanelMain: true, strokeWidth: 2, stroke: "white" })
      );

Sorry for the confusion.

You can get this:
image
with this template:

    var RedBluePattern =
      $(go.Shape,
        {
          width: 1, height: 4,
          strokeWidth: 0,
          fill: $(go.Brush, "Linear", { 0.49999: "red", 0.5: "blue" }),
        });

    myDiagram.linkTemplate =
      $(go.Link,
        { routing: go.Link.Orthogonal },
        $(go.Shape, { stroke: null, strokeWidth: 4, pathPattern: RedBluePattern })
      );
5

Walter, I appreciate the explanation and examples!