Using ‎Mermaid in angular project

Question

I'm beginner at ‎Mermaid and I'm trying to use ‎Mermaid in my angular project. I add it in my html and it works.

<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/9.0.1/mermaid.min.js"></script>

<div class="mermaid" id="mermaidHTML">
    stateDiagram-v2 [*] --> Still
    Still --> [*]
    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]
</div>

but now I want to edit or make a new ‎Mermaid in .ts file and display it in my browser and I don't know how to do this. I tried .innerHTML and .innerText to edit ‎Mermaid text, but it didn't work out.

Answer 1

I fixed this by making a function for creating the mermaid graph instead of edditing the previous one. I add this to my .ts file.

 stringFlowChart: any = [];
 createFlowchart() {  
    this.flowChart = [  
      "stateDiagram-v2 [*] --> still still --> [test]",
      "stateDiagram-v2 [*] --> still still --> [*]",
      "stateDiagram-v2 [*] --> still"
       
  ];
  //or use a loop
     this.stringFlowChart[0] = this.flowChart[0];
     this.stringFlowChart[1] = this.flowChart[1];
     this.stringFlowChart[2] = this.flowChart[2];
     
  }   

and in my html code, I added this:

<div style="margin-top: 50px">
      <div *ngFor="let flow of stringFlowChart; let i = index">
        index is:{{i}}
        <div class="mermaid">
          {{ flow }}
        </div>
      </div>
</div>

in this way, I added an array of mermaid chart