Regarding UML Class Diagram

GoJS
1

I have used this UML class node you check here UML Class Nodes.

In this above example only two relationship is mentioned generalization and aggregation.
for this two relationship using this below code:-
this.myClassDiagram.linkTemplate = $(
go.Link,
{ routing: go.Link.Orthogonal },
new go.Binding(“isLayoutPositioned”, “relationship”, convertIsTreeLink),
$(go.Shape),
$(
go.Shape,
{ scale: 1.3, fill: “white” },
new go.Binding(“fromArrow”, “relationship”, convertFromArrow)
),
$(
go.Shape,
{ scale: 1.3, fill: “white” },
new go.Binding(“toArrow”, “relationship”, convertToArrow)
),
);

function convertFromArrow(r) {
switch (r) {
case “generalization”:
return “”;
default:
return “”;
}
}

  function **convertToArrow**(r) {
    switch (r) {
      case "generalization":
        return "Triangle";
      case "aggregation":
        return "StretchedDiamond";
      default:
        return "";
    }
  }

But I need more relationships that can be expressed in the Class Diagram

  1. Realization,
  2. Association,
  3. Composition,
  4. Dependency

Please check below attached screenshot and let me know solution how i can get these mark arrow in this attached screenshot.

image
image763×429 59.7 KB

2

The following sample:

<!DOCTYPE html>
<html>
<head>
  <title>Various Kinds of UML Relationships</title>
  <!-- Copyright 1998-2023 by Northwoods Software Corporation. -->
</head>
<body>
  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:500px"></div>
  <textarea id="mySavedModel" style="width:100%;height:300px"></textarea>

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

const myDiagram =
  new go.Diagram("myDiagramDiv",
    {
      layout: $(go.ForceDirectedLayout),
      "undoManager.isEnabled": true,
      "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 =
  $(go.Node, "Auto",
    $(go.Shape, { fill: "white" }),
    $(go.TextBlock, { margin: 8 },
      new go.Binding("text"))
  );

myDiagram.linkTemplateMap.add("Generalization",
  $(go.Link,
    $(go.Shape),
    $(go.Shape, { toArrow: "Triangle", fill: "white" })
  ));

myDiagram.linkTemplateMap.add("Realization",
  $(go.Link,
    $(go.Shape, { strokeDashArray: [3, 2] }),
    $(go.Shape, { toArrow: "Triangle", fill: "white" })
  ));

myDiagram.linkTemplateMap.add("Association",
  $(go.Link,
    $(go.Shape),
    $(go.Shape, { toArrow: "OpenTriangle" })
  ));

myDiagram.linkTemplateMap.add("Composition",
  $(go.Link,
    $(go.Shape),
    $(go.Shape, { fromArrow: "StretchedDiamond", scale: 1.5 }),
    $(go.Shape, { toArrow: "OpenTriangle" })
  ));

myDiagram.linkTemplateMap.add("Aggregation",
  $(go.Link,
    $(go.Shape),
    $(go.Shape, { fromArrow: "StretchedDiamond", fill: "white", scale: 1.5 }),
    $(go.Shape, { toArrow: "OpenTriangle" })
  ));

myDiagram.linkTemplateMap.add("Dependency",
  $(go.Link,
    $(go.Shape, { strokeDashArray: [3, 2] }),
    $(go.Shape, { toArrow: "OpenTriangle" })
  ));

myDiagram.model = new go.GraphLinksModel(
[
  { key: 1, text: "Alpha" },
  { key: 2, text: "to\nGeneralization" },
  { key: 3, text: "to\nRealization" },
  { key: 4, text: "to\nAssociation" },
  { key: 5, text: "to\nComposition" },
  { key: 6, text: "to\nAggregation" },
  { key: 7, text: "to\nDependency" },
],
[
  { from: 1, to: 2, category: "Generalization" },
  { from: 1, to: 3, category: "Realization" },
  { from: 1, to: 4, category: "Association" },
  { from: 1, to: 5, category: "Composition" },
  { from: 1, to: 6, category: "Aggregation" },
  { from: 1, to: 7, category: "Dependency" },
]);
  </script>
</body>
</html>

produces:

image
image943×737 23.6 KB

You can fiddle with the details of each kind of link template if you would like to adjust the appearances to suit your tastes.

Note that I didn’t bother with any fancy node templates, since those are independent of the link templates. Presumably you have adapted the UML class node template from the sample.