Layout for sequence flow

GoJS
1

Hi, My requirement is to create a sequence/ process flow that looks like the following

image
image754×372 16.3 KB

My requirements are -
a) Primary flow to be configured horizontally based on user input (between start and end node).
b) secondary nodes to be configured vertically
c) Appropriate spacing to not cause overlaps

I checked some of the layouts provided, I think tree layout could be used for my case except layers are being created from links instead of nodes as per my requirement.
Uploading: image.png…

Is there a way to achieve my usecase using tree layout? If not, is there a better layout that i can use for my particular use case?

Thanks

2

If I understand you correctly, I think you want to use a TreeLayout that grows downward, and you want each of the nodes that are at the top to be the root of their own subtrees, and you want the horizontal links connecting those root nodes not to be considered as parent-child links.

So you can use a regular TreeLayout for that, if you set TreeLayout.arrangement so that the separate subtrees are arranged horizontally.

You also need to make sure that the links connecting those subtree roots aren’t considered for the layout and for any other tree operations. Just set or bind Part.isLayoutPositioned and Link.isTreeLink to false. See the link template I’ve defined for it, below.

image
image1098×465 18.2 KB 

<!DOCTYPE html>
<html>
<head>
  <title>Minimal GoJS Sample</title>
  <!-- Copyright 1998-2022 by Northwoods Software Corporation. -->
</head>
<body>
  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:600px"></div>

  <script src="https://unpkg.com/gojs"></script>
  <script id="code">
const $ = go.GraphObject.make;

const myDiagram =
  $(go.Diagram, "myDiagramDiv",
    {
      layout:
        $(go.TreeLayout,
          {
            angle: 90,
            setsPortSpot: false,
            setsChildPortSpot: false,
            arrangement: go.TreeLayout.ArrangementHorizontal
          }),
      "undoManager.isEnabled": true
    });

myDiagram.nodeTemplate =
  $(go.Node, "Auto",
    $(go.Shape,
      { fill: "white" },
      new go.Binding("fill", "color")),
    $(go.TextBlock,
      { margin: 8, editable: true },
      new go.Binding("text").makeTwoWay())
  );

myDiagram.linkTemplateMap.add("Seq",
  $(go.Link,
    { isLayoutPositioned: false, isTreeLink: false },
    $(go.Shape),
    $(go.Shape, { toArrow: "OpenTriangle" })
  ));

myDiagram.model = new go.GraphLinksModel(
[
  { key: 0, text: "Start" },
  { key: 1, text: "Alpha", color: "lightblue" },
  { key: 2, text: "Beta", color: "orange" },
  { key: 3, text: "Gamma", color: "lightgreen" },
  { key: 4, text: "Delta", color: "pink" },
  { key: 11, text: "Alpha1", color: "lightblue" },
  { key: 12, text: "Beta1", color: "orange" },
  { key: 13, text: "Gamma1", color: "lightgreen" },
  { key: 21, text: "Alpha2", color: "lightblue" },
  { key: 22, text: "Beta2", color: "orange" },
  { key: 23, text: "Gamma2", color: "lightgreen" },
  { key: 24, text: "Delta3", color: "pink" },
  { key: 25, text: "Epsilon3", color: "yellow" },
  { key: 31, text: "Alpha3", color: "lightblue" },
  { key: 32, text: "Beta3", color: "orange" },
  { key: 33, text: "Gamma3", color: "lightgreen" },
  { key: 99, text: "End" }
],
[
  { from: 0, to: 1, category: "Seq" },
  { from: 1, to: 2 },
  { from: 1, to: 3 },
  { from: 3, to: 4 },
  { from: 1, to: 11, category: "Seq" },
  { from: 11, to: 12 },
  { from: 11, to: 13 },
  { from: 11, to: 21, category: "Seq" },
  { from: 21, to: 22 },
  { from: 21, to: 23 },
  { from: 22, to: 24 },
  { from: 24, to: 25 },
  { from: 21, to: 31, category: "Seq" },
  { from: 31, to: 32 },
  { from: 31, to: 33 },
  { from: 31, to: 99, category: "Seq" }
]);
  </script>
</body>
</html>
3

Hi Walter,
Thanks for your reply. I tried with your said method and it worked!
Setting each node in the top level as their own subtree was helpful.
I had one more requirement.
Is there a way to create straight links for subtrees with multiple children?
Here is an image of the expected UI

image
image1197×542 12.5 KB

Regards
Elice

4

What? Changing requirements already?

image
image1069×440 14.5 KB 

<!DOCTYPE html>
<html>
<head>
  <title>Minimal GoJS Sample</title>
  <!-- Copyright 1998-2022 by Northwoods Software Corporation. -->
</head>
<body>
  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:600px"></div>

  <script src="https://unpkg.com/gojs"></script>
  <script id="code">

// This custom Link class is smart about computing the link point and direction
class BarLink extends go.Link {
  getLinkPoint(node, port, spot, from, ortho, othernode, otherport) {
    const r = port.getDocumentBounds();
    const op = otherport.getDocumentBounds();
    const below = op.centerY > r.centerY;
    const y = below ? r.bottom : r.top;
    if (op.right < r.left) return new go.Point(r.left, y);
    if (op.left > r.right) return new go.Point(r.right, y);
    return new go.Point((Math.max(r.left, op.left) + Math.min(r.right, op.right))/2, y);
  }

  getLinkDirection(node, port, linkpoint, spot, from, ortho, othernode, otherport) {
    const p = port.getDocumentPoint(go.Spot.Center);
    const op = otherport.getDocumentPoint(go.Spot.Center);
    const below = op.y > p.y;
    return below ? 90 : 270;
  }
}
// end BarLink class

const $ = go.GraphObject.make;

const myDiagram =
  $(go.Diagram, "myDiagramDiv",
    {
      layout:
        $(go.TreeLayout,
          {
            angle: 90,
            setsPortSpot: false,
            setsChildPortSpot: false,
            arrangement: go.TreeLayout.ArrangementHorizontal
          }),
      "undoManager.isEnabled": true
    });

myDiagram.nodeTemplate =
  $(go.Node, "Auto",
    $(go.Shape,
      { fill: "white" },
      new go.Binding("fill", "color")),
    $(go.TextBlock,
      { margin: 8, editable: true },
      new go.Binding("text").makeTwoWay())
  );

myDiagram.linkTemplate =
  $(BarLink,
    { routing: go.Link.Orthogonal },
    $(go.Shape),
    $(go.Shape, { toArrow: "Standard" })
  );

myDiagram.linkTemplateMap.add("Seq",
  $(go.Link,
    { isLayoutPositioned: false, isTreeLink: false },
    $(go.Shape),
    $(go.Shape, { toArrow: "OpenTriangle" })
  ));

myDiagram.model = new go.GraphLinksModel(
[
  { key: 0, text: "Start" },
  { key: 1, text: "Alpha", color: "lightblue" },
  { key: 2, text: "Beta", color: "orange" },
  { key: 3, text: "Gamma", color: "lightgreen" },
  { key: 4, text: "Delta", color: "pink" },
  { key: 11, text: "Alpha1", color: "lightblue" },
  { key: 12, text: "Beta1", color: "orange" },
  { key: 13, text: "Gamma1", color: "lightgreen" },
  { key: 21, text: "Alpha2", color: "lightblue" },
  { key: 22, text: "Beta2", color: "orange" },
  { key: 23, text: "Gamma2", color: "lightgreen" },
  { key: 24, text: "Delta3", color: "pink" },
  { key: 25, text: "Epsilon3", color: "yellow" },
  { key: 31, text: "Alpha3", color: "lightblue" },
  { key: 32, text: "Beta3", color: "orange" },
  { key: 33, text: "Gamma3", color: "lightgreen" },
  { key: 99, text: "End" }
],
[
  { from: 0, to: 1, category: "Seq" },
  { from: 1, to: 2 },
  { from: 1, to: 3 },
  { from: 3, to: 4 },
  { from: 1, to: 11, category: "Seq" },
  { from: 11, to: 12 },
  { from: 11, to: 13 },
  { from: 11, to: 21, category: "Seq" },
  { from: 21, to: 22 },
  { from: 21, to: 23 },
  { from: 22, to: 24 },
  { from: 24, to: 25 },
  { from: 21, to: 31, category: "Seq" },
  { from: 31, to: 32 },
  { from: 31, to: 33 },
  { from: 31, to: 99, category: "Seq" }
]);
  </script>
</body>
</html>
5

Thanks Walter,
I appreciate your quick response.

7

And you are changing the requirements yet again. There’s a limit to how much we can do for you.

Replace the regular TreeLayout with the BroadTreeLayout that is in Minimal GoJS Sample. I’m not sure if this is sufficient to get what you show in your screenshot.