let myPalette = $goPalette this$refsmyPaletteDiv1 must name or refer to the DIV HTML element animationManagerduration 800 slightly longer than default 6

要改造myDiagram.nodeTemplateMap.add的部分，以适应使用端口。首先，需要将myDiagram.nodeTemplateMap.add的第一个参数修改为节点的category。然后，需要在节点模板中添加端口定义。具体代码如下：

myDiagram.nodeTemplateMap.add('Start',
    $(go.Node, 'Spot', this.nodeStyle(),
        $(go.Panel, 'Auto',
            $(go.Picture, {
                desiredSize: new go.Size(60, 60),
                opacity: 0.5,
                margin: 8
            },
            new go.Binding('source', 'imageSrc')),
            $(go.TextBlock, 'Start',
                {
                    font: 'bold 11pt Helvetica, Arial, sans-serif',
                    stroke: 'whitesmoke',
                    margin: 8,
                    maxSize: new go.Size(160, NaN),
                    wrap: go.TextBlock.WrapFit,
                    editable: true,
                    visible: false
                },
                new go.Binding('text').makeTwoWay())
        ),
        $(go.Panel, 'Vertical',
            $(go.Panel, 'Spot',
                $(go.Shape, 'Circle',
                    {
                        width: 8,
                        height: 8,
                        fill: 'blue',
                        portId: 'in',
                        alignment: go.Spot.Left,
                        fromLinkable: true,
                        toLinkable: true
                    }),
                $(go.Shape, 'LineH',
                    { width: 30, height: 1, stroke: 'black', strokeWidth: 1 })
            ),
            $(go.Panel, 'Spot',
                $(go.Shape, 'Circle',
                    {
                        width: 8,
                        height: 8,
                        fill: 'green',
                        portId: 'out',
                        alignment: go.Spot.Right,
                        fromLinkable: true,
                        toLinkable: true
                    }),
                $(go.Shape, 'LineH',
                    { width: 30, height: 1, stroke: 'black', strokeWidth: 1 })
            )
        )
    )
);

myDiagram.nodeTemplateMap.add('Command',
    $(go.Node, 'Spot', this.nodeStyle(),
        $(go.Panel, 'Auto',
            $(go.Picture, {
                desiredSize: new go.Size(60, 60),
                opacity: 0.5,
                margin: 8
            },
            new go.Binding('source', 'imageSrc')),
            $(go.TextBlock, 'Command',
                {
                    font: 'bold 11pt Helvetica, Arial, sans-serif',
                    stroke: 'whitesmoke',
                    margin: 8,
                    maxSize: new go.Size(160, NaN),
                    wrap: go.TextBlock.WrapFit,
                    editable: true,
                    visible: false
                },
                new go.Binding('text').makeTwoWay())
        ),
        $(go.Panel, 'Vertical',
            $(go.Panel, 'Spot',
                $(go.Shape, 'Circle',
                    {
                        width: 8,
                        height: 8,
                        fill: 'blue',
                        portId: 'in',
                        alignment: go.Spot.Left,
                        fromLinkable: true,
                        toLinkable: true
                    }),
                $(go.Shape, 'LineH',
                    { width: 30, height: 1, stroke: 'black', strokeWidth: 1 })
            ),
            $(go.Panel, 'Spot',
                $(go.Shape, 'Circle',
                    {
                        width: 8,
                        height: 8,
                        fill: 'green',
                        portId: 'out',
                        alignment: go.Spot.Right,
                        fromLinkable: true,
                        toLinkable: true
                    }),
                $(go.Shape, 'LineH',
                    { width: 30, height: 1, stroke: 'black', strokeWidth: 1 })
            )
        )
    )
);

myDiagram.nodeTemplateMap.add('End',
    $(go.Node, 'Spot', this.nodeStyle(),
        $(go.Panel, 'Auto',
            $(go.Picture, {
                desiredSize: new go.Size(60, 60),
                opacity: 0.5,
                margin: 8
            },
            new go.Binding('source', 'imageSrc')),
            $(go.TextBlock, 'End',
                {
                    font: 'bold 11pt Helvetica, Arial, sans-serif',
                    stroke: 'whitesmoke',
                    margin: 8,
                    maxSize: new go.Size(160, NaN),
                    wrap: go.TextBlock.WrapFit,
                    editable: true,
                    visible: false
                },
                new go.Binding('text').makeTwoWay())
        ),
        $(go.Panel, 'Vertical',
            $(go.Panel, 'Spot',
                $(go.Shape, 'Circle',
                    {
                        width: 8,
                        height: 8,
                        fill: 'green',
                        portId: 'out',
                        alignment: go.Spot.Right,
                        fromLinkable: true,
                        toLinkable: true
                    }),
                $(go.Shape, 'LineH',
                    { width: 30, height: 1, stroke: 'black', strokeWidth: 1 })
            )
        )
    )
);

这样，myDiagram.nodeTemplateMap中的节点模板就适应了使用端口