Custom diagram with icons

GoJS
1

Hi Walter,
I am a little confused about the diagram. I need to create it using icons, but I’m unsure which layout to use to achieve the same diagram.

image
image991×475 37.4 KB

2

If users are manually placing all nodes, then no layout is needed.

If you have a model without node locations, then you probably want to use ForceDirectedLayout.

3

can you give the diagram as per the above image but without using location in node

4

You’ll have to find the icons for each of the nodes.

image
image1216×438 26.1 KB

Here’s the complete source code for the sample that shows the model in JSON format below the diagram. Note how for each node data object in the model you could set the icon property to a URL for the particular image.

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

  <script src="https://unpkg.com/gojs@beta"></script>
  <script id="code">
const myDiagram =
  new go.Diagram("myDiagramDiv",
    {
      layout: new go.ForceDirectedLayout({ defaultElectricalCharge: 100 }),
      "ModelChanged": e => {     // just for demonstration purposes,
        if (e.isTransactionFinished) {  // show the model data in the page's TextArea
          document.getElementById("mySavedModel").textContent = e.model.toJson();
        }
      }
    });

myDiagram.nodeTemplate =
  new go.Node("Vertical")
    .add(
      new go.Picture({ maxSize: new go.Size(50, 30), background: "whitesmoke" })
        .bind("source", "icon"),
      new go.TextBlock({ visible: false, maxSize: new go.Size(100, NaN) })
        .bind("text")
        .bind("visible", "text", t => !!t)
    );

myDiagram.linkTemplate =
  new go.Link()
    .add(
      new go.Shape({ stroke: "slateblue" }),
      new go.Shape({ fromArrow: "Backward", scale: 0.75, fill: "slateblue", strokeWidth: 0, visible: false })
        .bind("visible", "back"),
      new go.Shape({ toArrow: "Standard", scale: 0.75, fill: "slateblue", strokeWidth: 0 })
    );

myDiagram.model = new go.GraphLinksModel(
[
  { key: 1, text: "Outlook", icon: "" },
  { key: 2, text: "Salesforce", icon: "" },
  { key: 3, text: "Warehouse Management System", icon: "" },
  { key: 4, text: "Custom App", icon: "" },
  { key: 5, text: "Shopify", icon: "" },
  { key: 6, text: "Oracle", icon: "" },
  { key: 7, text: "Coupa", icon: "" },
  { key: 8, text: "ADP", icon: "" },
],
[
  { from: 2, to: 1 },
  { from: 2, to: 3, back: true },
  { from: 3, to: 4 },
  { from: 3, to: 6 },
  { from: 4, to: 2 },
  { from: 5, to: 2 },
  { from: 5, to: 6 },
  { from: 6, to: 7 },
  { from: 6, to: 8 },
]);
  </script>
</body>
</html>