how to render data in mermaid flowchart dynamically?

Question

Currently I am working on mermaid flowchart in that I want to add different nodes based on dynamic data and add tooltip based on that data, i added that data statically but i want it be dynamic. Please help me regarding that. Below is the code that i have done so far.

Any help would be highly appreciated. Thanks in advance

 public ngAfterViewInit(): void {
    mermaid.initialize({
      startOnLoad: true,
      securityLevel: 'loose',
      theme: 'default',
      themeCSS:
        '.node rect { fill: white; stroke: black ;stroke-width:2px; color:#000}',
    });

    const element: any = this.mermaid.nativeElement;
    const graphDefinition = `graph TD\nclassDef blue fill:#484242,stroke:black,stroke-width:2px,color:white\n
  id1[Pt. Tr] --> id2([WAIT]):::blue\n
  id3([CONN]):::blue\n
  id2 --> id4([APPLE]):::blue\n
  id3 --> id4\n
  id5([PT]):::blue\n
  id6([sta]):::blue\n
  id7[Pt.Tr2] -->id11([AQA]):::blue\n
  id4--> id8[Point]\n
  id5 --> id8\n
  id6 --> id8\n
  id4--> id9([over]):::blue\n
  id5 --> id9\n
  id6 --> id9\n
  id6-->id10([SHT]):::blue\n
  id7 --> id10\n
  id9 --> id12([BRANCH]):::blue\n
  id9 --> id13[Fill]\n
  id6 --> id12\n
  id6 --> id13\n
  id14([FT02]):::blue\n
  id13 --> id15([Ae.Bi]):::blue\n
  id13 --> id16([AWSAT]):::blue\n
  id14 --> id16\n
  id15 --> id17([EXT]):::blue\n
  id9 --> id17\n
  id16 --> id18([SQA]):::blue\n
  id19([Pt.APPLE2]):::blue\n
  id20([TPR]):::blue\n
  id18 --> id21[CONGEST]\n
  id19 --> id21\n
  id20 --> id21\n
  id21 --> id22[HR]\n
  id22 --> id28[CO]\n
  id23([Pt CAR]):::blue\n
  id24([Pt.Apple]):::blue\n
  id22 --> id25([Size]):::blue\n
  id23 --> id25\n
  id22 --> id26([BP]):::blue\n
  id23 --> id26\n
  id24 --> id26\n
  id22 --> id27([HAT]):::blue\n
  id24 --> id27\n
  id28 --> id29[BP]`;

    let _local = this;
    var insertSvg = function (svgCode, bindFunctions) {
      element.innerHTML = svgCode;
      bindFunctions(element);
    };
    var id = 'theGraph';
    mermaid.render(id, graphDefinition, insertSvg, element);
  }