How to use different nodeTemplate on the Diagram

Good morning dear developers. I wanna create diagram with any kind of nodeTemplate.

I use next code to create node the first nodeTemplate, but how to create nodeTemplate for the second type of node?

the first nodeTemplate:

myDiagram.nodeTemplate =
        $(go.Node, "Auto",
          { doubleClick: nodeDoubleClick },
          { // handle dragging a Node onto a Node to (maybe) change the reporting relationship
            mouseDragEnter: function(e, node, prev) {
              var diagram = node.diagram;
              var selnode = diagram.selection.first();
              if (!mayWorkFor(selnode, node)) return;
              var shape = node.findObject("SHAPE");
              if (shape) {
                shape._prevFill = shape.fill;  // remember the original brush
                shape.fill = "darkred";
              }
            },
            mouseDragLeave: function(e, node, next) {
              var shape = node.findObject("SHAPE");
              if (shape && shape._prevFill) {
                shape.fill = shape._prevFill;  // restore the original brush
              }
            },
            mouseDrop: function(e, node) {
              var diagram = node.diagram;
              var selnode = diagram.selection.first();  // assume just one Node in selection
              if (mayWorkFor(selnode, node)) {
                // find any existing link into the selected node
                var link = selnode.findTreeParentLink();
                if (link !== null) {  // reconnect any existing link
                  link.fromNode = node;
                } else {  // else create a new link
                  diagram.toolManager.linkingTool.insertLink(node, node.port, selnode, selnode.port);
                }
              }
            }
          },
          // for sorting, have the Node.text be the data.name
          new go.Binding("text", "name"),
          // bind the Part.layerName to control the Node's layer depending on whether it isSelected
          new go.Binding("layerName", "isSelected", function(sel) { return sel ? "Foreground" : ""; }).ofObject(),
          // define the node's outer shape
          $(go.Shape, "Rectangle",
            {
              name: "SHAPE", fill: "#333333", stroke: 'white', strokeWidth: 3.5,
              // set the port properties:
              portId: "", fromLinkable: true, toLinkable: true, cursor: "pointer"
            }),
          $(go.Panel, "Horizontal",
            $(go.Picture,
              {
                name: "Picture",
                desiredSize: new go.Size(70, 70),
                margin: 1.5,
              },
              new go.Binding("source", "key", findHeadShot)),
            // define the panel where the text will appear
            $(go.Panel, "Table",
              {
                minSize: new go.Size(130, NaN),
                maxSize: new go.Size(150, NaN),
                margin: new go.Margin(6, 10, 0, 6),
                defaultAlignment: go.Spot.Left
              },
              $(go.RowColumnDefinition, { column: 2, width: 4 }),
              $(go.TextBlock, textStyle(),  // the name
                {
                  row: 0, column: 0, columnSpan: 5,
                  font: "12pt Segoe UI,sans-serif",
                  editable: true, isMultiline: false,
                  minSize: new go.Size(10, 16)
                },
                new go.Binding("text", "name").makeTwoWay()),
              $(go.TextBlock, "Title: ", textStyle(),
                { row: 1, column: 0 }),
              $(go.TextBlock, textStyle(),
                {
                  row: 1, column: 1, columnSpan: 4,
                  editable: true, isMultiline: false,
                  minSize: new go.Size(10, 14),
                  margin: new go.Margin(0, 0, 0, 3)
                },
                new go.Binding("text", "title").makeTwoWay()),
              $(go.TextBlock, textStyle(),
                { row: 2, column: 0 },
                new go.Binding("text", "key", function(v) { return "ID: " + v; })),
              $(go.TextBlock, textStyle(),
                { name: "boss", row: 2, column: 3, }, // we include a name so we can access this TextBlock when deleting Nodes/Links
                new go.Binding("text", "parent", function(v) { return "Boss: " + v; })),
              $(go.TextBlock, textStyle(),  // the comments
                {
                  row: 3, column: 0, columnSpan: 5,
                  font: "italic 9pt sans-serif",
                  wrap: go.TextBlock.WrapFit,
                  editable: true,  // by default newlines are allowed
                  minSize: new go.Size(10, 14)
                },
                new go.Binding("text", "comments").makeTwoWay())
            )  // end Table Panel
          ) // end Horizontal Panel
        );  // end Node

the second nodeTemplate:

myDiagram.nodeTemplate =
        $(go.Node, "Vertical",
          {
            mouseEnter: function(e, node) { node.isHighlighted = true; },
            mouseLeave: function(e, node) { node.isHighlighted = false; },
            locationSpot: go.Spot.Center,  // the location is the center of the Shape
            locationObjectName: "SHAPE",
            selectionAdorned: false,  // no selection handle when selected
            resizable: true, resizeObjectName: "SHAPE",  // user can resize the Shape
            rotatable: true, rotateObjectName: "SHAPE",  // rotate the Shape without rotating the label
            // don't re-layout when node changes size
            layoutConditions: go.Part.LayoutStandard & ~go.Part.LayoutNodeSized
          },
          new go.Binding("layerName", "isHighlighted", function(h) { return h ? "Foreground" : ""; }).ofObject(),
          $(go.Shape,
            {
              name: "SHAPE",  // named so that the above properties can refer to this GraphObject
              width: 70, height: 70,
              strokeWidth: 3
            },
            // Color the built in shapes green, and the figures.js shapes Pink
            new go.Binding("fill", "key", function(k) {
              return isBuiltIn(k) ? "palegreen" : "lightpink";
            }),
            new go.Binding("stroke", "key", function(k) {
              return isBuiltIn(k) ? "darkgreen" : "#C2185B";
            }),
            // bind the Shape.figure to the figure name, which automatically gives the Shape a Geometry
            new go.Binding("figure", "key")),
          $(go.TextBlock,  // the label
            {
              margin: 4,
              font: "bold 18px sans-serif",
              background: 'white'
            },
            new go.Binding("visible", "isHighlighted").ofObject(),
            new go.Binding("text", "key"))
        );

Yes, there can only be a single default template for all Nodes. But you can use as many templates as you like, normally by adding them to the Diagram.nodeTemplateMap and then naming them in the model data by setting the node data’s category property.

Please read https://gojs.net/latest/intro/templateMaps.html

There are many samples that make use of template maps. Just search for “templateMap”.