1 Introduction

Components here refer to each node, such as text blocks , shapes , pictures and panels , which may contain more graphic objects

2. Create components

1. Complex version

(Configure the shape one by one, generate a box in the textblock, add it to the legend through node.add, and add the node to the rendered icon through 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添加进图表

Generate the image:

2. Concise version

Create via GraphObject.make: Supports building objects in a nested fashion, where indentation gives you clues about depth in the visual tree.

a. (Small complex version) Rewrite the above complex version code:

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. (optimized version) rewrite the small complex version above

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

Generation: the image generated by a, b is the same as the complex version

c. Adding an extension here ( GraphObject.make builds a Brush)

eg: the original fill is blue, but the go.Brush here makes it a gradient color

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

generate:

There is a more concise way later!

Teaching of the use of go.js in vue (3: Create components)