GoJS Sample for JSFIDDLE

Impressive software, just way too expensive in my opinion.

by Pandiyan Murugan

HTML

<script src="http://www.gojs.net/latest/release/go.js"></script>
<div id="sample">
  <div id="myDiagramDiv" style="border: solid 1px black; width:auto; height:650px"></div>

</div>

JavaScript

init();

function init() {
  if (window.goSamples) goSamples(); // init for these samples -- you don't need to call this
  var $ = go.GraphObject.make; // for conciseness in defining templates

  var colors = [{
      color: "#FFFFFF",
      strokeColor: "#595959"
    },
    {
      color: "#FFFFFF",
      strokeColor: "#2ecc71"
    },
    {
      color: "#FFFFFF",
      strokeColor: "#e74b3b"
    },
    {
      color: "#FFFFFF",
      strokeColor: "#f5a523"
    }
  ];

  myDiagram =
    $(go.Diagram, "myDiagramDiv", // the DIV HTML element
      {
        // Put the diagram contents at the top center of the viewport
        initialDocumentSpot: go.Spot.TopCenter,
        initialViewportSpot: go.Spot.TopCenter,
        // OR: Scroll to show a particular node, once the layout has determined where that node is
        //"InitialLayoutCompleted": function(e) {
        //  var node = e.diagram.findNodeForKey(28);
        //  if (node !== null) e.diagram.commandHandler.scrollToPart(node);
        //},
        layout: $(go.TreeLayout, // use a TreeLayout to position all of the nodes
          {
            treeStyle: go.TreeLayout.StyleLastParents,
            // properties for most of the tree:
            angle: 90,
            layerSpacing: 80,
            // properties for the "last parents":
            alternateAngle: 0,
            alternateAlignment: go.TreeLayout.AlignmentStart,
            alternateNodeIndent: 20,
            alternateNodeIndentPastParent: 1,
            alternateNodeSpacing: 20,
            alternateLayerSpacing: 40,
            alternateLayerSpacingParentOverlap: 1,
            alternatePortSpot: new go.Spot(0.001, 1, 20, 0),
            alternateChildPortSpot: go.Spot.Left
          })
      });

  // define Converters to be used for Bindings
  function theNationFlagConverter(nation) {
    if (nation == "biztalk")
      return "https://msdnshared.blob.core.windows.net/media/2017/05/icon.png";
    else if (nation == "logicapps")
     ...