GoJS Sample for JSFIDDLE

Impressive software, just way too expensive in my opinion.

by sundaramkumar

HTML

<script src="http://www.gojs.net/latest/samples/goSamples.js"></script>
<script src="http://www.gojs.net/latest/release/go.js"></script>
<div id="sample">
    <div id="myDiagram" style="border: solid 1px black; width:100%; height:300px"></div>
</div>

CSS

/* Copyright 1998-2014 Northwoods Software Corporation. All Rights Reserved. */
 body {
    font-family: sans-serif;
    font-size: 13px;
}
p {
    max-width: 700px;
}
p.box {
    border: 1px solid #BBB;
    padding: 4px 4px 6px 4px;
}
p.warning {
    background-color: #FCD5CD
}
.diagramContainer {
    border : solid 1px blue;
}
pre {
    font-size : 9pt;
}
.footer {
    text-align: right;
    font-size: 10px;
}
/* new: */
 #sample {
    margin-left: 0px;
}
#menu {
    white-space: nowrap;
    overflow: hidden;
    border: 1px solid #DDD;
    padding: 4px;
    margin-right: 5px;
    background-color: #F9F9F9;
    width: 120px;
    float: left;
}
#sections {
    list-style-type: none;
    font-size: 13px;
    padding: 0px;
    margin: 0px;
    line-height: 1.3em;
}
a {
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
a li {
    color: #0645AD;
}
a li:hover, a li:focus {
    background: #CEDFF2;
}
a li.selected {
    background: #1E90FF;
    color: white
}
.index {
    margin-top: 0px;
}

JavaScript

init();

    function init() {
        
      var $ = go.GraphObject.make;  // for conciseness in defining templates

      myDiagram =
        $(go.Diagram, "myDiagram",
          {
            initialContentAlignment: go.Spot.Center,
            validCycle: go.Diagram.CycleNotDirected,
            "undoManager.isEnabled": true
          });
          
          function getpropety(property){
            return function(prop){ return prop[property] };
          }
      var fieldTemplate =
        $(go.Panel, "TableRow",
          new go.Binding("portId", "name"),
          /* { background: "transparent",  
            fromSpot: go.Spot.Right,
            toSpot: go.Spot.Left,
            fromLinkable: true, toLinkable: true }, */
          //$(go.Panel, go.Panel.Horizontal,
            $(go.Shape,
            { width: 12, height: 12, column: 0, strokeWidth: 2, margin: 4,
              fromLinkable: false, toLinkable: false },
            new go.Binding("figure", "prop", getpropety("figure")),
            new go.Binding("fill", "color"))
           // )
          
          
          /* $(go.TextBlock,
            { margin: new go.Margin(0, 2), column: 1, font: "bold 13px sans-serif",
              fromLinkable: false, toLinkable: false },
            new go.Binding("text", "name")),
          $(go.TextBlock,
            { margin: new go.Margin(0, 2), column: 2, font: "13px sans-serif",
              fromLinkable: false, toLinkable: false },
            new go.Binding("text", "info")) */
        );

      // This template represents a whole "record".
      
      function getVisibility(fields){
      	return fields.length > 3
      }
      
      myDiagram.nodeTemplate =
        $(go.Node, "Auto",
          { movable: true,
            copyable: false,
            deletable: false },
          new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
          $(go.Shape,
            { fill: "#EEEEEE" }),
          $(go.Panel,...