npm install gojs --save

// 注意了： 如果你是2022版本的話需要，將? 1998-2021 Northwoods Software 改成 ? 1998-2022 Northwoods Software
// 這個你可以在水印上查看是哪個年限以及哪個版本：
if(f.indexOf(‘GoJS 2.1 evaluation')>-1
|| f.indexOf(‘? 1998-2021 Northwoods Software')>-1
|| f.indexOf(‘Not for distribution or production use')>-1
|| f.indexOf(‘gojs.net')>-1
){
return ‘';
}else{
return f
}

<!--
 @description：Flowchart drawing, dedicated to customization
 @date：Created in  2022/7/24 15:55
 @modified By：luofei-create
 @version: 1.0.0
-->
<template>
  <div>
    <div>
       <!-- 主畫布區(qū)域 -->
      <div ref="diagram">
        <canvas
          tabindex="0"
          width="954"
          height="700">
          This text is displayed if your browser does not support the CanvasHTML element.
          </canvas>
        <div>
          <div></div>
        </div>
      </div>
      <!-- 右邊組件拖拽 -->
      <div ref="myPaletteDiv" v-show="isRight">
        <canvas
          tabindex="0"
          width="560"
          height="700">
        </canvas>
        <div>
          <div>
            工具組件
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'example',
  data() {
    return {
      myDiagramRefs: null, //這個是為了將初始化的結(jié)構(gòu)保存起來，可以調(diào)用go.js的方法
    };
  },
  props: {
  	//父組件傳過來的json數(shù)據(jù)
    jsonData: {
      type: Object,
      require: true,
      default: () => ({}),
    },
    // 是否展示右側(cè)的工具欄
    isRight: {
      type: Boolean,
      default: () => true,
    },
  },
  watch: {
    //監(jiān)聽json數(shù)據(jù)， 再次初始化
    jsonData: {
      handler(n, o) {
        this.load();
      },
    },
  },
  mounted() {
    //調(diào)用test方法，初始化畫布
    this.test();
  },
  methods: {
    test() {
      // 初始化go.js
      const $ = go.GraphObject.make; // 為了定義模板的簡潔性
      const myDiagram = $(
        go.Diagram,
        this.$refs.diagram,
        // 'my-diagram-div', // id掛載dome節(jié)點
        // 這里是控制那個菱形在連線的時候出現(xiàn)文字的，我暫時不需要，所以注釋掉
        {
          // LinkDrawn: showLinkLabel,
          // LinkRelinked: showLinkLabel,
          'draggingTool.dragsTree': true,
          'undoManager.isEnabled': true, //是否可以粘貼復(fù)制等，delete建刪除
        },
      );
      this.myDiagramRefs = myDiagram;
      // 當(dāng)修改文檔時，在標(biāo)題中添加一個“*”，并啟用“保存”按鈕
      myDiagram.addDiagramListener('Modified', e => {
        const button = document.getElementById('SaveButton');
        if (button) button.disabled = !myDiagram.isModified;
        const idx = document.title.indexOf('*');
        if (myDiagram.isModified) {
          if (idx < 0) {
            myDiagram.layout = $(go.TreeLayout, { angle: 90 });
          }
        } else if (idx >= 0) document.title = document.title.slice(0, idx);
      });
      // 節(jié)點模板的Helper定義
      function nodeStyle() {
        return [
          // 節(jié)點。 location來自于節(jié)點數(shù)據(jù)的“l(fā)oc”屬性，由Point轉(zhuǎn)換。 解析靜態(tài)方法。
          // 如果節(jié)點。 location發(fā)生變化時，它更新節(jié)點數(shù)據(jù)的“l(fā)oc”屬性，并使用Point轉(zhuǎn)換回來。 stringify靜態(tài)方法。
          new go.Binding('location', 'loc', go.Point.parse).makeTwoWay(
            go.Point.stringify,
          ),
          {
            // 這個節(jié)點位置位于每個節(jié)點的中心
            locationSpot: go.Spot.Center,
          },
        ];
      }
      // 定義一個用于創(chuàng)建通常是透明的“端口”的函數(shù)。
      function makePort(name, align, spot, output, input) {
        const horizontal = align.equals(go.Spot.Top) || align.equals(go.Spot.Bottom);
        return $(go.Shape, {
          fill: 'transparent',
          strokeWidth: 0,
          width: horizontal ? NaN : 8, // 如果不是水平拉伸，寬度只有8
          height: !horizontal ? NaN : 8, // 如果不是垂直拉伸，也就是8英尺高
          alignment: align, // 對齊主形狀上的端口
          stretch: horizontal
            ? go.GraphObject.Horizontal
            : go.GraphObject.Vertical,
          portId: name, // 將此對象聲明為“端口”
          fromSpot: spot, // 聲明此端口的鏈接可能連接到哪里
          fromLinkable: output, // 聲明用戶是否可以從這里繪制鏈接 
          toSpot: spot, // 聲明此端口的鏈接可能連接到哪里
          toLinkable: input, // 聲明用戶是否可以在此繪制鏈接 
          cursor: 'pointer', // 顯示不同的游標(biāo)以指示潛在的鏈接點 
          mouseEnter: (e, port) => {
            // PORT參數(shù)將是這個Shape
            if (!e.diagram.isReadOnly) port.fill = 'rgba(255,0,255,0.5)';
          },
          mouseLeave: (e, port) => (port.fill = 'transparent'),
        });
      }
      // 文字顏色
      function textStyle() {
        return {
          font: 'bold 11pt Lato, Helvetica, Arial, sans-serif',
          stroke: '#F8F8F8',
        };
      }
	 //這一句是我自己加上的，目的是為了在連線的時候可以幫我自動對齊
      myDiagram.layout = $(go.TreeLayout, { angle: 90 });
      // 定義普通節(jié)點的Node模板
      myDiagram.nodeTemplateMap.add(
        '', // 自己定義模板名稱
        $(
          go.Node,
          'Spot',
          {
            resizable: true,
            resizeObjectName: 'SHAPE',
            selectionObjectName: 'SHAPE',
            margin: new go.Margin(10, 0, 10, 0),
          },
          nodeStyle(),
          // 主要對象是一個面板，它圍繞著一個矩形形狀的TextBlock 
          $(
            go.Panel,
            'Auto',
            $(
              go.Shape,
              'Rectangle',
              {
                name: 'SHAPE',
                fill: '#282c34',
                stroke: '#00A9C9',
                margin: new go.Margin(0, 0, 0, 0),
                strokeWidth: 1.5, // strokeWidh表示Step的盒子邊框大小
              },
              new go.Binding('figure', 'figure'),
            ),
            $(
              go.TextBlock,
              textStyle(),
              {
                margin: 8,
                maxSize: new go.Size(560, NaN),
                wrap: go.TextBlock.WrapFit,
                editable: true,
              },
              new go.Binding('text').makeTwoWay(),
            ),
          ),
          //這里也是我自己加的，目的是為了可以像樹一樣可以收縮展開
          $('TreeExpanderButton',
            {
              margin: new go.Margin(0, 0, 0, 20),
              alignment: go.Spot.Bottom,
              alignmentFocus: go.Spot.Top,
            },
            { visible: true }),
          // 四個命名端口，每邊一個:
          makePort('T', go.Spot.Top, go.Spot.TopSide, false, true), //表示端口哪里可以鏈接，哪里不可以鏈接
          makePort('L', go.Spot.Left, go.Spot.LeftSide, true, true),
          makePort('R', go.Spot.Right, go.Spot.RightSide, true, true),
          makePort('B', go.Spot.Bottom, go.Spot.BottomSide, true, false),
        ),
      );
      // 菱形的樣式  -> 改成長方形
      myDiagram.nodeTemplateMap.add(
        'Conditional',
        $(
          go.Node,
          'Spot',
          {
            resizable: true,
            resizeObjectName: 'SHAPE',
            selectionObjectName: 'SHAPE',
          },
          nodeStyle(),
          $(
            go.Panel,
            'Auto',
            $(
              go.Shape,
              'Rectangle',
              {
                name: 'SHAPE',
                fill: '#282c34',
                stroke: 'rgba(98, 251, 243)',
                strokeWidth: 1.5,
              },
              new go.Binding('figure', 'figure'),
            ),
            $(
              go.TextBlock,
              textStyle(),
              {
                margin: 8,
                maxSize: new go.Size(560, NaN),
                wrap: go.TextBlock.WrapFit,
                editable: true,
              },
              new go.Binding('text').makeTwoWay(),
            ),
          ),
          $('TreeExpanderButton',
            { alignment: go.Spot.Bottom, alignmentFocus: go.Spot.Top },
            { visible: true }),
          // four named ports, one on each side:
          makePort('T', go.Spot.Top, go.Spot.TopCenter, false, true),
          makePort('L', go.Spot.Left, go.Spot.LeftCenter, true, true),
          makePort('R', go.Spot.Right, go.Spot.RightCenter, true, true),
          makePort('B', go.Spot.Bottom, go.Spot.BottomCenter, true, false),
        ),
      );
      // 圓形開始
      myDiagram.nodeTemplateMap.add(
        'Start',
        $(
          go.Node,
          'Spot',
          {
            resizable: true,
            resizeObjectName: 'SHAPE',
            selectionObjectName: 'SHAPE',
          },
          nodeStyle(),
          $(
            go.Panel,
            'Spot',
            $(
              go.Shape,
              'Rectangle', // 決定形狀： Circle代表圓形，Rectangle代表正方形或者長方形，Diamond代表菱形
              {
                name: 'SHAPE',
                desiredSize: new go.Size(90, 40),
                fill: '#282c34',
                stroke: '#09d3ac',
                strokeWidth: 1.5,
              },
            ),
            $(
              go.TextBlock,
              'Start',
              textStyle(),
              {
                margin: 8,
                maxSize: new go.Size(360, NaN),
                wrap: go.TextBlock.WrapFit,
                editable: true,
              },
              new go.Binding('text').makeTwoWay(),
            ),
          ),
          $('TreeExpanderButton',
            { alignment: go.Spot.Bottom, alignmentFocus: go.Spot.Top },
            { visible: true }),
          // three named ports, one on each side except the top, all output only:
          makePort('T', go.Spot.Top, go.Spot.TopCenter, false, true),
          makePort('L', go.Spot.Left, go.Spot.LeftCenter, true, true),
          makePort('R', go.Spot.Right, go.Spot.RightCenter, true, true),
          makePort('B', go.Spot.Bottom, go.Spot.BottomCenter, true, false),
        ),
      );
      // 原型，結(jié)束樣式
      myDiagram.nodeTemplateMap.add(
        'End',
        $(
          go.Node,
          'Table',
          nodeStyle(),
          {
            resizable: true,
            resizeObjectName: 'SHAPE',
            selectionObjectName: 'SHAPE',
          },
          $(
            go.Panel,
            'Spot',
            $(go.Shape, 'Circle', {
              desiredSize: new go.Size(60, 60),
              fill: '#282c34',
              stroke: '#DC3C00',
              strokeWidth: 3.5,
            }),
            $(go.TextBlock, 'End', textStyle(), new go.Binding('text')),
          ),
          $('TreeExpanderButton',
            { alignment: go.Spot.Bottom, alignmentFocus: go.Spot.Top },
            { visible: true }), // three named ports, one on each side except the bottom, all input only:
          makePort('T', go.Spot.Top, go.Spot.Top, false, true),
          makePort('L', go.Spot.Left, go.Spot.Left, false, true),
          makePort('R', go.Spot.Right, go.Spot.Right, false, true),
        ),
      );
      // taken from ../extensions/Figures.js:
      go.Shape.defineFigureGenerator('File', (shape, w, h) => {
        const geo = new go.Geometry();
        const fig = new go.PathFigure(0, 0, true); // starting point
        geo.add(fig);
        fig.add(new go.PathSegment(go.PathSegment.Line, 0.75 * w, 0));
        fig.add(new go.PathSegment(go.PathSegment.Line, w, 0.25 * h));
        fig.add(new go.PathSegment(go.PathSegment.Line, w, h));
        fig.add(new go.PathSegment(go.PathSegment.Line, 0, h).close());
        const fig2 = new go.PathFigure(0.75 * w, 0, false);
        geo.add(fig2);
        // The Fold
        fig2.add(new go.PathSegment(go.PathSegment.Line, 0.75 * w, 0.25 * h));
        fig2.add(new go.PathSegment(go.PathSegment.Line, w, 0.25 * h));
        geo.spot1 = new go.Spot(0, 0.25);
        geo.spot2 = go.Spot.BottomRight;
        return geo;
      });
      // 定義comment文本樣式
      myDiagram.nodeTemplateMap.add(
        'Comment',
        $(
          go.Node,
          'Auto',
          nodeStyle(),
          $(go.Shape, 'File', {
            fill: '#282c34',
            stroke: '#DEE0A3',
            strokeWidth: 3,
          }),
          $(
            go.TextBlock,
            textStyle(),
            {
              margin: 8,
              maxSize: new go.Size(200, NaN),
              wrap: go.TextBlock.WrapFit,
              textAlign: 'center',
              editable: true,
            },
            new go.Binding('text').makeTwoWay(),
          ),
          // 沒有端口，因為不允許鏈接連接注釋 
        ),
      );
      //替換linkTemplateMap中默認(rèn)的Link模板 
      myDiagram.linkTemplate = $(
        go.Link, // the whole link panel
        {
          routing: go.Link.AvoidsNodes,
          curve: go.Link.JumpOver,
          corner: 5,
          toShortLength: 4,
          relinkableFrom: true,
          margin: new go.Margin(10, 0, 10, 0),
          relinkableTo: true,
          reshapable: true,
          resegmentable: true,
          // mouse-overs subtly highlight links:
          mouseEnter: (e, link) => (link.findObject('HIGHLIGHT').stroke = 'rgba(30,144,255,0.2)'),
          mouseLeave: (e, link) => (link.findObject('HIGHLIGHT').stroke = 'transparent'),
          selectionAdorned: false,
        },
        new go.Binding('points').makeTwoWay(),
        $(
          go.Shape, // 高光形狀，通常是透明的
          {
            isPanelMain: true,
            strokeWidth: 8,
            stroke: 'transparent',
            name: 'HIGHLIGHT',
          },
        ),
        $(
          go.Shape, // 鏈接路徑形狀，或者樣式也可以設(shè)置
          { isPanelMain: true, stroke: 'gray', strokeWidth: 2 },
          new go.Binding('stroke', 'isSelected', sel => (sel ? 'dodgerblue' : 'gray')).ofObject(),
        ),
        $(
          go.Shape, // 箭頭
          { toArrow: 'standard', strokeWidth: 0, fill: 'gray' },
        ),
        $(
          go.Panel,
          'Auto', //鏈接標(biāo)簽，通常不可見
          {
            visible: false,
            name: 'LABEL',
            segmentIndex: 2,
            segmentFraction: 0.5,
          },
          new go.Binding('visible', 'visible').makeTwoWay(),
          $(
            go.Shape,
            'RoundedRectangle', // 鏈接標(biāo)簽，通常不可見的標(biāo)簽形狀 
            { fill: '#F8F8F8', strokeWidth: 0 },
          ),
          //這里是由于我不需要菱形那個形狀，有需要的可以不用注釋，還有連接線上的文字 Yes
          // $(
          //   go.TextBlock,
          //   'Yes',
          //   {
          //     textAlign: 'center',
          //     font: '10pt helvetica, arial, sans-serif',
          //     stroke: '#333333',
          //     editable: true,
          //   },
          //   new go.Binding('text').makeTwoWay(),
          // ),
        ),
      );
      // 如果鏈接來自“條件”節(jié)點，則使其可見。 
      // 這個監(jiān)聽器由“LinkDrawn”和“LinkRelinked”diagramevent調(diào)用。 
      function showLinkLabel(e) {
        const label = e.subject.findObject('LABEL');
        if (label !== null) label.visible = e.subject.fromNode.data.category === 'Conditional';
      }
      // LinkingTool和RelinkingTool使用的臨時鏈接也是正交的: 
      myDiagram.toolManager.linkingTool.temporaryLink.routing = go.Link.Orthogonal;
      myDiagram.toolManager.relinkingTool.temporaryLink.routing = go.Link.Orthogonal;
      // 調(diào)用load？？？？？？？？？？？
      // 人造數(shù)據(jù)
      // this.load(myDiagram); // 從一些JSON文本加載一個初始圖
      //啟動初始化畫布數(shù)據(jù)
      myDiagram.model = go.Model.fromJson(this.jsonData);
      const myPalette = $(
        go.Palette,
        this.$refs.myPaletteDiv, // must name or refer to the DIV HTML element
        {
          // Instead of the default animation, use a custom fade-down
          'animationManager.initialAnimationStyle': go.AnimationManager.None,
          InitialAnimationStarting: animateFadeDown, // Instead, animate with this function
          nodeTemplateMap: myDiagram.nodeTemplateMap, // share the templates used by myDiagram
          model: new go.GraphLinksModel([
            // specify the contents of the Palette
            { category: 'Start', text: '開始' },
            { Category: 'Assess', text: '業(yè)務(wù)組件' },
            { category: 'Conditional', text: '業(yè)務(wù)組件' },
            { category: 'End', text: '結(jié)束組件' },
            { category: 'Comment', text: 'Comment' },
          ]),
        },
      );
      // 這是默認(rèn)動畫的重新實現(xiàn)，只不過它是從向下淡入，而不是向上淡入。 
      function animateFadeDown(e) {
        const { diagram } = e;
        const animation = new go.Animation();
        animation.isViewportUnconstrained = true; // 因此，圖表定位規(guī)則允許動畫從屏幕外開始 
        animation.easing = go.Animation.EaseOutExpo;
        animation.duration = 900;
        //淡出“向下”，換句話說，從上面淡出 
        animation.add(
          diagram,
          'position',
          diagram.position.copy().offset(0, 200),
          diagram.position,
        );
        animation.add(diagram, 'opacity', 0, 1);
        animation.start();
      }
    },
    // 保存功能，我將數(shù)據(jù)傳到父組件中
    save() {
      const data = this.myDiagramRefs.model.toJson();
      this.$emit('getJsonDataList', data); //導(dǎo)出數(shù)據(jù)
      this.myDiagramRefs.isModified = false;
    },
    // 初始化數(shù)據(jù)，形成畫布
    load() {
      this.myDiagramRefs.model = go.Model.fromJson(this.jsonData);
      this.myDiagramRefs.isModified = true;
    },
    printDiagram() {
      const svgWindow = window.open();
      if (!svgWindow) return; // failure to open a new Window
      const printSize = new go.Size(700, 960);
      const bnds = myDiagram.documentBounds;
      let { x } = bnds;
      let { y } = bnds;
      while (y < bnds.bottom) {
        while (x < bnds.right) {
          const svg = myDiagram.makeSvg({
            scale: 1.0,
            position: new go.Point(x, y),
            size: printSize,
          });
          svgWindow.document.body.appendChild(svg);
          x += printSize.width;
        }
        x = bnds.x;
        y += printSize.height;
      }
      setTimeout(() => svgWindow.print(), 1);
    },
  },
};
</script>
<style scoped>
.example{
    margin-top: 5px;
}
.example-box{
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.myPaletteDiv{
    width: 160px;
    background-color: rgb(24, 43, 133);
    position: relative;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
.canvas-right{
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 2;
    user-select: none;
    touch-action: none;
    width: 160px;
    height: 700px;
    overflow: hidden;
}
.right-box{
    position: absolute;
    width: 160px;
    height: 700px;
    overflow: hidden;
    z-index: 1;
}
.right-box-item{
    position: absolute;
    width: 1px;
    height: 1px
}
/* 主畫布區(qū)域 */
.myDiagramDiv{
    flex-grow: 1;
    height: 700px;
    margin-right: 2px;
    background-color: rgb(24, 43, 133);
    position: relative;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    cursor: auto;
}
.canvas-left{
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 2;
    user-select: none;
    touch-action: none;
    width: 954px;
    height: 700px;
    cursor: auto;
}
.left-box{
    position: absolute;
    width: 954px;
    height: 700px;
    z-index: 1;
}
.left-box-item{
    position: absolute; width: 1px; height: 1px
}
.text{
    color: rgba(255,0,255,0.5);
    background: #00A9C9;
}
</style>

diagram.nodeTemplate =
  $(go.Node, "Auto",
    { locationSpot: go.Spot.Center },
    $(go.Shape, "Rectangle",
      { fill: "gold" }),
    $(go.Panel, "Vertical",
      { margin: 3 },
      $("Button",
        { margin: 2,
          click: incrementCounter },
        $(go.TextBlock, "Click me!")),
      $(go.TextBlock,
        new go.Binding("text", "clickCount",
                       function(c) { return "Clicked " + c + " times."; }))
    )
  );
function incrementCounter(e, obj) {
  var node = obj.part;
  var data = node.data;
  if (data && typeof(data.clickCount) === "number") {
    node.diagram.model.commit(function(m) {
      m.set(data, "clickCount", data.clickCount + 1);
    }, "clicked");
  }
}
diagram.model = new go.GraphLinksModel(
  [ { clickCount: 0 } ]);

diagram.nodeTemplate =
  $(go.Node, "Auto",
    { locationSpot: go.Spot.Center },
    $(go.Shape, "Rectangle",
      { fill: "gold" }),
    $(go.Panel, "Vertical",
      { margin: 3 },
      $("Button",
        {
          margin: 2,
          // 設(shè)置邊框?qū)傩园粹o的形狀 
          "ButtonBorder.fill": "fuchsia",
          // 設(shè)置“按鈕”本身事件處理程序使用的屬性 
          "_buttonFillOver": "pink",
          click: function(e, button) { alert(button.findObject("ButtonBorder").fill); }
        },
        $(go.TextBlock, "fuchsia button\nwith pink highlight", { margin: 2, textAlign: "center" })
      ),
      $("Button",
        {
          margin: 2,
          // 設(shè)置邊框?qū)傩园粹o的形狀 
          "ButtonBorder.figure": "Circle",
          "ButtonBorder.fill": "cyan",
          "ButtonBorder.stroke": "darkcyan",
          "ButtonBorder.strokeWidth": 3,
          // 設(shè)置“按鈕”本身事件處理程序使用的屬性 
          "_buttonFillOver": "white",
          "_buttonStrokeOver": "cyan",
          "_buttonFillPressed": "lightgray",
          click: function(e, button) { alert(button.findObject("ButtonBorder").stroke); }
        },
        $(go.TextBlock, "Circular\nbutton", { margin: 2, textAlign: "center" })
      ),
      $("Button",
        {
          margin: 2,
          click: function(e, button) { alert(button.findObject("PIC").source); }
        },
        // 按鈕內(nèi)容可以是任何東西——它不一定是一個TextBlock 
        $(go.Picture, "images/50x40.png", { name: "PIC", width: 50, height: 40 })
      ),
      $("Button",
        {
          margin: 2,
          // 按鈕也可以通過設(shè)置或數(shù)據(jù)綁定禁用: 
          isEnabled: false,
          click: function(e, button) { alert("won't be alerted"); }
        },
        $(go.TextBlock, "disabled", { stroke: "gray" })
      )
    )
  );
diagram.model = new go.GraphLinksModel([ { } ]);

diagram.nodeTemplate =
  $(go.Node, "Spot",
    $(go.Panel, "Auto",
      $(go.Shape, "Rectangle",
        { fill: "gold" }),
      $(go.TextBlock, "Click small button\nto collapse/expand subtree",
        { margin: 5 })
    ),
    $("TreeExpanderButton",
      { alignment: go.Spot.Bottom, alignmentFocus: go.Spot.Top },
      { visible: true })
  );
diagram.layout = $(go.TreeLayout, { angle: 90 });
diagram.model = new go.GraphLinksModel(
  [ { key: 1 },
    { key: 2 } ],
  [ { from: 1, to: 2 } ] );

diagram.nodeTemplate =
  $(go.Node, "Spot",
    $(go.Panel, "Auto",
      $(go.Shape, "Rectangle",
        { fill: "gold" }),
      $(go.TextBlock, "Click small button\nto collapse/expand subtree",
        { margin: 5 })
    ),
    $("TreeExpanderButton",
      {
        // set the two additional properties used by "TreeExpanderButton"
        // that control the shape depending on the value of Node.isTreeExpanded
        "_treeExpandedFigure": "TriangleUp",
        "_treeCollapsedFigure": "TriangleDown",
        // set properties on the icon within the border
        "ButtonIcon.fill": "darkcyan",
        "ButtonIcon.strokeWidth": 0,
        // set general "Button" properties
        "ButtonBorder.figure": "Circle",
        "ButtonBorder.stroke": "darkcyan",
        "_buttonStrokeOver": "darkcyan"
      },
      { alignment: go.Spot.Bottom, alignmentFocus: go.Spot.Top },
      { visible: true })
  );
diagram.layout = $(go.TreeLayout, { angle: 90 });
diagram.model = new go.GraphLinksModel(
  [ { key: 1 },
    { key: 2 } ],
  [ { from: 1, to: 2 } ] );

diagram.groupTemplate =
  $(go.Group, "Auto",
    $(go.Shape, "Rectangle",
      { fill: "gold" }),
    $(go.Panel, "Vertical",
      { margin: 5,
        defaultAlignment: go.Spot.Left },
      $(go.Panel, "Horizontal",
        $("SubGraphExpanderButton",
          { margin: new go.Margin(0, 3, 5, 0) }),
        $(go.TextBlock, "Group")
      ),
      $(go.Placeholder)
    )
  );
diagram.model = new go.GraphLinksModel(
  [ { key: 0, isGroup: true },
    { key: 1, group: 0 },
    { key: 2, group: 0 },
    { key: 3, group: 0 } ] );

diagram.groupTemplate =
  $(go.Group, "Auto",
    $(go.Shape, "Rectangle",
      { fill: "gold" }),
    $(go.Panel, "Vertical",
      { margin: 5,
        defaultAlignment: go.Spot.Left },
      $(go.Panel, "Horizontal",
        $("SubGraphExpanderButton",
          {
            // 設(shè)置"SubGraphExpanderButton"使用的兩個附加屬性 
            // 根據(jù)Group.isSubGraphExpanded的值來控制形狀 
            "_subGraphExpandedFigure": "TriangleUp",
            "_subGraphCollapsedFigure": "TriangleDown",
            // set other properties on the button icon
            "ButtonIcon.angle": -45,
            // 和按鈕邊框上的屬性或按鈕本身 
            "ButtonBorder.opacity": 0.0
          }),
        $(go.TextBlock, "Group")
      ),
      $(go.Placeholder)
    )
  );
diagram.model = new go.GraphLinksModel(
  [ { key: 0, isGroup: true },
    { key: 1, group: 0 },
    { key: 2, group: 0 },
    { key: 3, group: 0 } ] );

diagram.nodeTemplate =
  $(go.Node, "Auto",
    $(go.Shape,
      { fill: "gold" }),
    $(go.Panel, "Table",
      { defaultAlignment: go.Spot.Top, defaultColumnSeparatorStroke: "black" },
      $(go.Panel, "Table",
        { column: 0 },
        $(go.TextBlock, "List 1",
          { column: 0, margin: new go.Margin(3, 3, 0, 3),
            font: "bold 12pt sans-serif" }),
        $("PanelExpanderButton", "LIST1",
          { column: 1 }),
        $(go.Panel, "Vertical",
          { name: "LIST1", row: 1, column: 0, columnSpan: 2 },
          new go.Binding("itemArray", "list1"))
      ),
      $(go.Panel, "Table",
        { column: 1 },
        $(go.TextBlock, "List 2",
          { column: 0, margin: new go.Margin(3, 3, 0, 3),
            font: "bold 12pt sans-serif" }),
        $("PanelExpanderButton", "LIST2",
          { column: 1 }),
        $(go.Panel, "Vertical",
          { name: "LIST2", row: 1, column: 0, columnSpan: 2 },
          new go.Binding("itemArray", "list2"))
      )
    )
  );
diagram.model = new go.GraphLinksModel([
  {
    key: 1,
    list1: [ "one", "two", "three", "four", "five" ],
    list2: [ "first", "second", "third", "fourth" ]
  }
]);

diagram.nodeTemplate =
  $(go.Node, "Auto",
    $(go.Shape,
      { fill: "gold" }),
    $(go.Panel, "Table",
      { defaultAlignment: go.Spot.Top, defaultColumnSeparatorStroke: "black" },
      $(go.Panel, "Table",
        { column: 0 },
        $(go.TextBlock, "List 1",
          { column: 0, margin: new go.Margin(3, 3, 0, 3),
            font: "bold 12pt sans-serif" }),
        $("PanelExpanderButton", "LIST1",
          { column: 1,
            // 設(shè)置"PanelExpanderButton"使用的兩個附加屬性 
            // 根據(jù)GraphObject.visible的值來控制形狀 
            // 命名為“LIST1”的對象的
            "_buttonExpandedFigure": "M0 0 L10 0",
            "_buttonCollapsedFigure": "M0 5 L10 5 M5 0 L5 10",
            "ButtonIcon.stroke": "blue",
            height: 16
          }),
        $(go.Panel, "Vertical",
          { name: "LIST1", row: 1, column: 0, columnSpan: 2 },
          new go.Binding("itemArray", "list1"))
      ),
      $(go.Panel, "Table",
        { column: 1 },
        $(go.TextBlock, "List 2",
          { column: 0, margin: new go.Margin(3, 3, 0, 3),
            font: "bold 12pt sans-serif" }),
        $("PanelExpanderButton", "LIST2",
          { column: 1,
            // 設(shè)置"PanelExpanderButton"使用的兩個附加屬性 
            // 根據(jù)GraphObject.visible的值來控制形狀 
            //  命名為“LIST1”的對象的
            "_buttonExpandedFigure": "F M0 10 L5 0 10 10z",
            "_buttonCollapsedFigure": "F M0 0 L10 0 5 10z",
            "ButtonIcon.strokeWidth": 0,
            "ButtonIcon.fill": "blue"
          }),
        $(go.Panel, "Vertical",
          { name: "LIST2", row: 1, column: 0, columnSpan: 2 },
          new go.Binding("itemArray", "list2"))
      )
    )
  );
diagram.model = new go.GraphLinksModel([
  {
    key: 1,
    list1: [ "one", "two", "three", "four", "five" ],
    list2: [ "first", "second", "third", "fourth" ]
  }
]);

diagram.nodeTemplate =
  $(go.Node, "Auto",
    $(go.Shape, "Rectangle",
      { fill: "gold" }),
    $(go.TextBlock, "Use ContextMenu!",
      { margin: 5 })
  );
diagram.nodeTemplate.contextMenu =
  $("ContextMenu",
    $("ContextMenuButton",
      $(go.TextBlock, "Shift Left"),
      { click: function(e, obj) { shiftNode(obj, -20); } }),
    $("ContextMenuButton",
      $(go.TextBlock, "Shift Right"),
      { click: function(e, obj) { shiftNode(obj, +20); } })
  );
function shiftNode(obj, dist) {
  var adorn = obj.part;
  var node = adorn.adornedPart;
  node.diagram.commit(function(d) {
    var pos = node.location.copy();
    pos.x += dist;
    node.location = pos;
  }, "Shift");
}
diagram.model = new go.GraphLinksModel(
  [ { key: 1 } ] );

diagram.nodeTemplate =
  $(go.Node, "Auto",
    $(go.Shape, "Rectangle",
      { fill: "gold" }),
    $(go.TextBlock, "Use ContextMenu!",
      { margin: 5 })
  );
diagram.nodeTemplate.contextMenu =
  $("ContextMenu",
    $("ContextMenuButton",
      {
        "ButtonBorder.fill": "yellow",
        "_buttonFillOver": "cyan",
        "_buttonFillPressed": "lime"
      },
      $(go.TextBlock, "Shift Left"),
      { click: function(e, obj) { shiftNode(obj, -20); } }
    ),
    $("ContextMenuButton",
      {
        "ButtonBorder.fill": "yellow",
        "_buttonFillOver": "cyan",
        "_buttonFillPressed": "lime"
      },
      $(go.TextBlock, "Shift Right"),
      { click: function(e, obj) { shiftNode(obj, +20); } }
    ),
    $("ContextMenuButton",
      { isEnabled: false },
      $(go.TextBlock, "Shift Right", { stroke: "gray" }),
      { click: function(e, obj) { alert("won't be alerted"); } }
    )
  );
function shiftNode(obj, dist) {
  var adorn = obj.part;
  var node = adorn.adornedPart;
  node.diagram.commit(function(d) {
    var pos = node.location.copy();
    pos.x += dist;
    node.location = pos;
  }, "Shift");
}
diagram.model = new go.GraphLinksModel(
  [ { key: 1 } ] );