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.
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