title: how to render data in mermaid flowchart dynamically?
body: <p>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.</p>
  <p>Any help would be highly appreciated. Thanks in advance</p>
  <pre><code> 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] --&gt; id2([WAIT]):::blue\n
    id3([CONN]):::blue\n
    id2 --&gt; id4([APPLE]):::blue\n
    id3 --&gt; id4\n
    id5([PT]):::blue\n
    id6([sta]):::blue\n
    id7[Pt.Tr2] --&gt;id11([AQA]):::blue\n
    id4--&gt; id8[Point]\n
    id5 --&gt; id8\n
    id6 --&gt; id8\n
    id4--&gt; id9([over]):::blue\n
    id5 --&gt; id9\n
    id6 --&gt; id9\n
    id6--&gt;id10([SHT]):::blue\n
    id7 --&gt; id10\n
    id9 --&gt; id12([BRANCH]):::blue\n
    id9 --&gt; id13[Fill]\n
    id6 --&gt; id12\n
    id6 --&gt; id13\n
    id14([FT02]):::blue\n
    id13 --&gt; id15([Ae.Bi]):::blue\n
    id13 --&gt; id16([AWSAT]):::blue\n
    id14 --&gt; id16\n
    id15 --&gt; id17([EXT]):::blue\n
    id9 --&gt; id17\n
    id16 --&gt; id18([SQA]):::blue\n
    id19([Pt.APPLE2]):::blue\n
    id20([TPR]):::blue\n
    id18 --&gt; id21[CONGEST]\n
    id19 --&gt; id21\n
    id20 --&gt; id21\n
    id21 --&gt; id22[HR]\n
    id22 --&gt; id28[CO]\n
    id23([Pt CAR]):::blue\n
    id24([Pt.Apple]):::blue\n
    id22 --&gt; id25([Size]):::blue\n
    id23 --&gt; id25\n
    id22 --&gt; id26([BP]):::blue\n
    id23 --&gt; id26\n
    id24 --&gt; id26\n
    id22 --&gt; id27([HAT]):::blue\n
    id24 --&gt; id27\n
    id28 --&gt; id29[BP]`;
  
      let _local = this;
      var insertSvg = function (svgCode, bindFunctions) {
        element.innerHTML = svgCode;
        bindFunctions(element);
      };
      var id = 'theGraph';
      mermaid.render(id, graphDefinition, insertSvg, element);
    }
  </code></pre>