UI of chart in gojs

GoJS
1

Hi walter, I have been looking for a better design of diagram using gojs but so far i have achieved this graph given below

image
image1353×614 64.3 KB

i have given data to mermaid js library and i found graph shape -

image
image937×655 109 KB

should i get design like this graph in gojs.

graph TD
start_node → create_payment_through_template
start_node → create_invoice
start_node → create_withholding_invoice
start_node → create_invoice_from_spreadsheet
start_node → create_credit_memo
start_node → create_prepayment_invoice
approve_invoice → create_accounting_for_invoice
approve_invoice → create_payment
approve_invoice → create_payment_through_template
cancel_invoice → on_hold_invoice
cancel_invoice → withdraw_invoice
create_accounting_for_invoice → create_payment
create_accounting_for_invoice → create_payment_through_template
create_accounting_for_invoice → delegate_invoice
create_accounting_for_invoice → suspend_invoice
create_accounting_for_invoice → unpaid_invoice
create_credit_memo → approve_invoice
create_credit_memo → create_accounting_for_invoice
create_invoice → approve_invoice
create_invoice → cancel_invoice
create_invoice → create_accounting_for_invoice
create_invoice → create_payment
create_invoice → create_payment_through_template
create_invoice → delegate_invoice
create_invoice → force_approve_invoice
create_invoice → on_hold_invoice
create_invoice → reassign_invoice
create_invoice → reject_invoice
create_invoice → request_information_for_invoice
create_invoice → suspend_invoice
create_invoice → withdraw_invoice
create_invoice_from_spreadsheet → force_approve_invoice
create_invoice_from_spreadsheet → on_hold_invoice
create_payment → cleared_payments
create_prepayment_invoice → create_accounting_for_invoice
delegate_invoice → reassign_invoice
delegate_invoice → withdraw_invoice
force_approve_invoice → create_accounting_for_invoice
force_approve_invoice → create_payment
force_approve_invoice → create_payment_through_template
force_approve_invoice → on_hold_invoice
on_hold_invoice → release_invoice
release_invoice → create_accounting_for_invoice
release_invoice → create_payment_through_template
withdraw_invoice → create_accounting_for_invoice
create_payment_through_template → end_node
create_invoice → end_node
approve_invoice → end_node
on_hold_invoice → end_node
create_withholding_invoice → end_node
create_payment → end_node
create_accounting_for_invoice → end_node
create_invoice_from_spreadsheet → end_node
release_invoice → end_node
cleared_payments → end_node
request_information_for_invoice → end_node
suspend_invoice → end_node
reject_invoice → end_node
withdraw_invoice → end_node
reassign_invoice → end_node
force_approve_invoice → end_node
cancel_invoice → end_node
unpaid_invoice → end_node

2

The two screenshots appear to show vastly different graphs. The first one which you say was laid out in GoJS has a lot more nodes and links than the second one. How did you define the GraphLinksModel?

What do you like more about the second one? I don’t understand the criteria you are using.

What layout options are you using?
Have you tried setting LayeredDigraphLayout.alignOption to go.LayeredDigraphLayout.AlignAll?

Here’s what I get:
image

Or if I set layeringOption: go.LayeredDigraphLayout.LayerLongestPathSource:
image

Or if I set LayeredDigraphLayout.setsPortSpots to false and I change the node’s port’s fromSpot and toSpot to be go.Spot.LeftRightSides:
image

The complete code:

<!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>

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

const myDiagram =
  new go.Diagram("myDiagramDiv",
    {
      layout:
        $(go.LayeredDigraphLayout,
          {
            alignOption: go.LayeredDigraphLayout.AlignAll
          }),
      "undoManager.isEnabled": true
    });

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

myDiagram.linkTemplate =
  $(go.Link,
    { curve: go.Link.Bezier },
    $(go.Shape),
    $(go.Shape, { toArrow: "OpenTriangle" })
  );

myDiagram.model = new go.GraphLinksModel(
  {
    archetypeNodeData: {},
    linkDataArray:
    [
{ from: "start_node", to: "create_payment_through_template" },
{ from: "start_node", to: "create_invoice" },
{ from: "start_node", to: "create_withholding_invoice" },
{ from: "start_node", to: "create_invoice_from_spreadsheet" },
{ from: "start_node", to: "create_credit_memo" },
{ from: "start_node", to: "create_prepayment_invoice" },
{ from: "approve_invoice", to: "create_accounting_for_invoice" },
{ from: "approve_invoice", to: "create_payment" },
{ from: "approve_invoice", to: "create_payment_through_template" },
{ from: "cancel_invoice", to: "on_hold_invoice" },
{ from: "cancel_invoice", to: "withdraw_invoice" },
{ from: "create_accounting_for_invoice", to: "create_payment" },
{ from: "create_accounting_for_invoice", to: "create_payment_through_template" },
{ from: "create_accounting_for_invoice", to: "delegate_invoice" },
{ from: "create_accounting_for_invoice", to: "suspend_invoice" },
{ from: "create_accounting_for_invoice", to: "unpaid_invoice" },
{ from: "create_credit_memo", to: "approve_invoice" },
{ from: "create_credit_memo", to: "create_accounting_for_invoice" },
{ from: "create_invoice", to: "approve_invoice" },
{ from: "create_invoice", to: "cancel_invoice" },
{ from: "create_invoice", to: "create_accounting_for_invoice" },
{ from: "create_invoice", to: "create_payment" },
{ from: "create_invoice", to: "create_payment_through_template" },
{ from: "create_invoice", to: "delegate_invoice" },
{ from: "create_invoice", to: "force_approve_invoice" },
{ from: "create_invoice", to: "on_hold_invoice" },
{ from: "create_invoice", to: "reassign_invoice" },
{ from: "create_invoice", to: "reject_invoice" },
{ from: "create_invoice", to: "request_information_for_invoice" },
{ from: "create_invoice", to: "suspend_invoice" },
{ from: "create_invoice", to: "withdraw_invoice" },
{ from: "create_invoice_from_spreadsheet", to: "force_approve_invoice" },
{ from: "create_invoice_from_spreadsheet", to: "on_hold_invoice" },
{ from: "create_payment", to: "cleared_payments" },
{ from: "create_prepayment_invoice", to: "create_accounting_for_invoice" },
{ from: "delegate_invoice", to: "reassign_invoice" },
{ from: "delegate_invoice", to: "withdraw_invoice" },
{ from: "force_approve_invoice", to: "create_accounting_for_invoice" },
{ from: "force_approve_invoice", to: "create_payment" },
{ from: "force_approve_invoice", to: "create_payment_through_template" },
{ from: "force_approve_invoice", to: "on_hold_invoice" },
{ from: "on_hold_invoice", to: "release_invoice" },
{ from: "release_invoice", to: "create_accounting_for_invoice" },
{ from: "release_invoice", to: "create_payment_through_template" },
{ from: "withdraw_invoice", to: "create_accounting_for_invoice" },
{ from: "create_payment_through_template", to: "end_node" },
{ from: "create_invoice", to: "end_node" },
{ from: "approve_invoice", to: "end_node" },
{ from: "on_hold_invoice", to: "end_node" },
{ from: "create_withholding_invoice", to: "end_node" },
{ from: "create_payment", to: "end_node" },
{ from: "create_accounting_for_invoice", to: "end_node" },
{ from: "create_invoice_from_spreadsheet", to: "end_node" },
{ from: "release_invoice", to: "end_node" },
{ from: "cleared_payments", to: "end_node" },
{ from: "request_information_for_invoice", to: "end_node" },
{ from: "suspend_invoice", to: "end_node" },
{ from: "reject_invoice", to: "end_node" },
{ from: "withdraw_invoice", to: "end_node" },
{ from: "reassign_invoice", to: "end_node" },
{ from: "force_approve_invoice", to: "end_node" },
{ from: "cancel_invoice", to: "end_node" },
{ from: "unpaid_invoice", to: "end_node" }
    ]
  });
  </script>
</body>
</html>