<script src="https://gojs.net/latest/release/go.js"></script>
<body>

  <div id="myDiagramDiv" style="border: solid 3px red; width:300px; height:300px"></div>
  <p><a href="https://gojs.net"/>gojs.net<a/></p>
</body>
  function init() {
    if (window.goSamples) goSamples();  // init for these samples -- you don't need to call this
    var graph = go.GraphObject.make;  // for conciseness in defining templates

    myDiagram = graph(go.Diagram, "myDiagramDiv",  // create a Diagram for the DIV HTML element
                  {
                    initialContentAlignment: go.Spot.Center,  // center the content
                    "undoManager.isEnabled": true,
                    "ChangedSelection": onSelectionChanged,
                  });

    // define a simple Node template
    myDiagram.nodeTemplate =
      graph(go.Node, "Auto",  // the Shape will go around the TextBlock
        graph(go.Shape, "RoundedRectangle",
          // Shape.fill is bound to Node.data.color
          new go.Binding("fill", "color")),
        graph(go.TextBlock,
          { margin: 3 },  // some room around the text
          // TextBlock.text is bound to Node.data.key
          new go.Binding("text", "key"))
      );

    myDiagram.linkTemplate =
        graph(go.Link,
          { curve: go.Link.Bezier, toShortLength: 5 },
          {layerName: "Background"},
          graph(go.Shape,
            new go.Binding("stroke", "isHighlighted", function(h) {return h ? "#388E3C" : "#009BE1"; })
                  .ofObject()),
          graph(go.Shape, { toArrow: "Standard" },
            new go.Binding("stroke", "isHighlighted", function(h) { return h ? "#388E3C" : "#009BE1"; })
                  .ofObject()),
          graph(go.TextBlock, "test",
            {font: "13px sans-serif", stroke: "black"},
                           //key binds to the "key" property in the json
            new go.Binding("text", "isHighlighted", function (h, obj) {
              return h ? obj.part.data.from : ""
            }).ofObject())
        );


    // highlight all Links and Nodes coming out of a given Node
    function onSelectionChanged() {
      myDiagram.startTransaction("highlight");
      // remove any previous highlighting
      myDiagram.clearHighlighteds();

      myDiagram.links.each(function(l) {
        // If both from and to node are selected, highlight the link
        if (l.fromNode.isSelected && l.toNode.isSelected) l.isHighlighted = true;
      });
      myDiagram.commitTransaction("highlight");
    }

    // when the user clicks on the background of the Diagram, remove all highlighting
    myDiagram.click = function(e) {
      myDiagram.startTransaction("no highlighteds");
      myDiagram.clearHighlighteds();
      myDiagram.commitTransaction("no highlighteds");
    };


    // create the model data that will be represented by Nodes and Links
    myDiagram.model = new go.GraphLinksModel(
    [
      { key: "Alpha", color: "lightblue" },
      { key: "Beta", color: "orange" },
      { key: "Gamma", color: "lightgreen" },
      { key: "Delta", color: "pink" }
    ],
    [
      { from: "Alpha", to: "Beta" },
      { from: "Alpha", to: "Gamma" },
      { from: "Beta", to: "Beta" },
      { from: "Gamma", to: "Delta" },
      { from: "Delta", to: "Alpha" }
    ]);
  }

init();
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.