How to use the gojs.Diagram function in gojs

init() {
        const $ = go.GraphObject.make;  // for conciseness in defining templates

        this.myDiagram = $(
            go.Diagram,
            'myDiagramDiv',  // create a Diagram for the DIV HTML element
            {
                initialContentAlignment: go.Spot.LeftCenter,
                layout: $(
                    go.TreeLayout,
                    {
                        angle: 0,
                        arrangement: go.TreeLayout.ArrangementVertical,
                        treeStyle: go.TreeLayout.StyleLayered
                    }),
                isReadOnly: true
            });

        this.myDiagram.allowHorizontalScroll = true;
        this.myDiagram.allowVerticalScroll = true;
        this.myDiagram.allowZoom = false;

ngAfterViewInit(): void {
        this.myDiagram = this.$(go.Diagram, this.div.nativeElement,
            {
                initialContentAlignment: go.Spot.Center,
                padding: 10,
                isReadOnly: false,
                'animationManager.isEnabled': false, // disable Animation
                'allowVerticalScroll': false, // no vertical scroll for diagram
                'toolManager.mouseWheelBehavior': go.ToolManager.WheelNone // do not zoom diagram on wheel scroll
            });
        this.myDiagram.addLayerBefore(this.$(go.Layer, { name: 'red' }), this.myDiagram.findLayer('Grid'));
        this.myDiagram.addLayerBefore(this.$(go.Layer, { name: 'green' }), this.myDiagram.findLayer('Grid'));
        let commonToolTip = this.$(go.Adornment, 'Auto',
            {
                isShadowed: true
            },
            this.$(go.Shape, { fill: '#FFFFCC' }),
            this.$(go.Panel, 'Vertical',

componentDidMount() {
    var $ = go.GraphObject.make;
    var myDiagram: any = {};
    myDiagram =
      $(go.Diagram, "myDiagramDiv",
        {
          "undoManager.isEnabled": true,
          layout: $(go.TreeLayout,
                    { // this only lays out in trees nodes connected by "generalization" links
                      angle: 90,
                      path: go.TreeLayout.PathSource,  // links go from child to parent
                      setsPortSpot: false,  // keep Spot.AllSides for link connection spot
                      setsChildPortSpot: false,  // keep Spot.AllSides
                      // nodes not connected by "generalization" links are laid out horizontally
                      arrangement: go.TreeLayout.ArrangementHorizontal
                    })
        });

    // show visibility or access as a single character at the beginning of each property or method
    function convertVisibility(v) {
      switch (v) {

renderDiagram() {
    var $ = go.GraphObject.make;
    var myDiagram: any = {};
    var myPalette: any = {};
    myDiagram =
      $(go.Diagram, "myStateMachineDiagramDiv",  // must name or refer to the DIV HTML element
        {
          grid: $(go.Panel, "Grid",
                  $(go.Shape, "LineH", { stroke: "lightgray", strokeWidth: 0.5 }),
                  $(go.Shape, "LineH", { stroke: "gray", strokeWidth: 0.5, interval: 10 }),
                  $(go.Shape, "LineV", { stroke: "lightgray", strokeWidth: 0.5 }),
                  $(go.Shape, "LineV", { stroke: "gray", strokeWidth: 0.5, interval: 10 })
                ),
          "draggingTool.dragsLink": true,
          "draggingTool.isGridSnapEnabled": true,
          "linkingTool.isUnconnectedLinkValid": true,
          "linkingTool.portGravity": 20,
          "relinkingTool.isUnconnectedLinkValid": true,
          "relinkingTool.portGravity": 20,
          "relinkingTool.fromHandleArchetype":
            $(go.Shape, "Diamond", { segmentIndex: 0, cursor: "pointer", desiredSize: new go.Size(8, 8), fill: "tomato", stroke: "darkred" }),
          "relinkingTool.toHandleArchetype":

initDiagram () {
      const $ = go.GraphObject.make
      this.diagram =
          $(go.Diagram, 'erDiagramDiv', // must name or refer to the DIV HTML element
            {
              initialContentAlignment: go.Spot.Center,
              allowDelete: false,
              allowCopy: false,
              layout: $(go.ForceDirectedLayout),
              'undoManager.isEnabled': true
            })

      // the template for each attribute in a node's array of item data
      const itemTempl =
          $(go.Panel, 'Horizontal',
            $(go.Shape,
              { desiredSize: new go.Size(10, 10),
                margin: new go.Margin(0, 5, 0, 0) },
              new go.Binding('figure', 'figure'),
              new go.Binding('fill', 'color')),

initDiagram() {
    this.diagram =
      this.$(go.Diagram, "go-flow", {
        initialContentAlignment: go.Spot.Center, // center Diagram contents
        "undoManager.isEnabled": false // enable Ctrl-Z to undo and Ctrl-Y to redo
      });
    this.diagram.isReadOnly = true;
  }
  loadData(props) {

private createDiagram(diagramId: string): Diagram {
        const $ = go.GraphObject.make;

        const myDiagram: Diagram = $(go.Diagram, diagramId, {
            initialContentAlignment: go.Spot.LeftCenter,
            layout: $(go.TreeLayout, {
                angle: 0,
                arrangement: go.TreeLayout.ArrangementVertical,
                treeStyle: go.TreeLayout.StyleLayered
            }),
            isReadOnly: false,
            allowHorizontalScroll: true,
            allowVerticalScroll: true,
            allowZoom: false,
            allowSelect: true,
            autoScale: Diagram.Uniform,
            contentAlignment: go.Spot.LeftCenter,
            TextEdited: this.onTextEdited
        });