1.介绍

这边的零部件，指的是每一个节点，例如文本块、形状、图片和面板，可能包含更多图形对象

2.创建零部件

一.复杂版

（通过一个一个的塞配置到shape，到textblock里生成一个方框，在通过node.add添加进图例，并把node通过add添加进渲染的图标）

 var node = new go.Node(go.Panel.Auto);//创建node

  var shape = new go.Shape();//创建shape自定义图
  shape.figure = "RoundedRectangle";//配置figure的边框圆弧
  shape.fill = "lightblue";//配置边框颜色
  node.add(shape);//把自定义shape添加进node

  var textblock = new go.TextBlock();//创建文本自定义
  textblock.text = "Hello!";//文本的显示内容
  textblock.margin = 5;//文本的margin宽度
  node.add(textblock);//把自定义textblock添加进node

  diagram.add(node);//把node添加进图表

生成图像：

二.简洁版

通过GraphObject.make创建：支持以嵌套方式构建对象，其中缩进为您提供有关可视化树中深度的线索。

a.(小复杂版)重写上方复杂版代码：

var $ = go.GraphObject.make;//创建make
//添加入diagram，这边是创建画板后的id那个对象，可以看第一章
  diagram.add(
//添加node
    $(go.Node, go.Panel.Auto,
      //添加shape
      $(go.Shape,
        { figure: "RoundedRectangle",
          fill: "lightblue" }),
      //添加TextBlock
      $(go.TextBlock,
        { text: "Hello!",
          margin: 5 })
    ));

b.（优化版）重写上方小复杂版

var $ = go.GraphObject.make;
  diagram.add(
    $(go.Node, "Auto",
      $(go.Shape, "RoundedRectangle", { fill: "lightblue" }),
      $(go.TextBlock, "Hello!", { margin: 5 })
    ));

生成：a,b生成的图像与复杂版一样

c.这边在加一个扩展（GraphObject.make 构建一个 Brush）

eg：原本fill是蓝色，这边的go.Brush，使他变成了渐变色

diagram.add(
    $(go.Node, "Auto",
      $(go.Shape, "RoundedRectangle",
        { fill: $(go.Brush, "Linear",
                  { 0.0: "Violet", 1.0: "Lavender" }) }),
      $(go.TextBlock, "Hello!",
        { margin: 5 })
    ));

生成：

后面还有更简洁方法！

vue中go.js的使用教学（三：创建零部件）