Actualmente estoy trabajando en un diagrama de flujo de sirena en el que quiero agregar diferentes nodos basados en datos dinámicos y agregar información sobre herramientas en función de esos datos, agregué esos datos estáticamente pero quiero que sean dinámicos. Por favor, ayúdame con respecto a eso. A continuación se muestra el código que he hecho hasta ahora.

Cualquier ayuda sería muy apreciada. Gracias por adelantado

 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); }