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

  <div id="myDiagramDiv" style="border: solid 3px red; width:500px; height:500px"></div>
  
  <p><a href="https://gojs.net"/>gojs.net<a/></p>
</body>
  function init() {
    var $ = go.GraphObject.make;  // for conciseness in defining templates

    myDiagram = $(go.Diagram, "myDiagramDiv",  // create a Diagram for the DIV HTML element
                  {
                     scale: 2,
                    "undoManager.isEnabled": true  // enable undo & redo
                  });

    myDiagram.nodeTemplate = go.GraphObject.make(go.Node, "Table",
      {
        stretch: go.GraphObject.Fill,
        background: 'lime',
        defaultColumnSeparatorStroke: "black",
        defaultRowSeparatorStroke: "red"

      },
      getNodeImageTemplate(1, 0, "imageN"),
      getNodeImageTemplate(1, 2, "imageS"),
      getNodeImageTemplate(2, 1, "imageE"),
      getNodeImageTemplate(0, 1, "imageW"),
      getNodeImageTemplate(2, 0, "imageNE"),
      getNodeImageTemplate(0, 0, "imageNW"),
      getNodeImageTemplate(2, 2, "imageSE"),
      getNodeImageTemplate(0, 2, "imageSW"),
      // main image
      go.GraphObject.make(go.Picture,
        {
          row: 1,
          column: 1
        },
        new go.Binding("source", "image"),
        new go.Binding("stretch", "imageStretch")
      )
    );


  function getNodeImageTemplate(col, row, source) {
    var imageStretch = go.GraphObject.Default;

    switch (source) {
      case "imageW":
      case "imageE":
        imageStretch = go.GraphObject.Vertical;
        break;
      case "imageN":
      case "imageS":
        imageStretch = go.GraphObject.Horizontal;
        break;
    }

    return go.GraphObject.make(go.Picture,
      {
        row: row,
        column: col,
        stretch: imageStretch
      },
      new go.Binding("source", source)
    );
  }
    // create the model data that will be represented by Nodes and Links
    myDiagram.model = new go.GraphLinksModel(
    [
      { image: "https://upload.wikimedia.org/wikipedia/commons/thumb/9/97/2013.03.24.-2-Mannheim_Vogelstang-Elster.jpg/180px-2013.03.24.-2-Mannheim_Vogelstang-Elster.jpg" }
    ],
    [
    ]);
  }

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.