Problem getting started

when i’am trying this…

it’s showing : “Invalid DIV id; could not get element with id: myDiagramDiv”

table { border-collapse: collapse; }
    table, td, th {
        border: 1px solid black;
        padding: 20px;
        text-align: center;
    }
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/1.6.23/go.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/1.6.23/go-debug.js"></script>

<script type="text/javascript">
    var $ = go.GraphObject.make;
    var myDiagram =
    $(go.Diagram, "myDiagramDiv",
{
  initialContentAlignment: go.Spot.Center, // center Diagram contents
  "undoManager.isEnabled": true // enable Ctrl-Z to undo and Ctrl-Y to redo
});

var myModel = $(go.Model);

// in the model data, each node is represented by a JavaScript object:
myModel.nodeDataArray = [
{ key: “Alpha” },
{ key: “Beta” },
{ key: “Gamma” }
];
myDiagram.model = myModel;

<body

First, you should not be loading the library twice. I suggest for now that you only load the go-debug.js library.

Second, you are executing the code to create a Diagram for an HTML DIV element named “myDiagramDiv” before that DIV element even exists. You are creating it later on the page.

Instead you should do all of your initialization after the HTML DOM has been created. There are many ways to do this. Look at any of our samples for one way – we call the initialization code in a BODY onload event. But there are other ways to accomplish that.