Handling asynchronous data with mermaid-js in angular

Question

So, I am working on a project where I need to get data from the DB asynchronously and then use that data to draw a sequence diagram using mermaid.js' markdown syntax. But the problem that I'm facing is that apparently the sequence diagram is rendered in the UI during the initial loading time itself and then it shows the diagram as a simple HTML content. I tried the setTimeOut() to pause the mermaid.initialize() for a second or so and then execute it but it does not work as well.

However, if there are no backend calls to the db, ie, the data is hard-coded then the sequence diagram works just fine.

I also tried keeping startOnLoad property as false, but again it shows the diagram as a simple HTML content.

Any idea on how to handle this particular use case?

Case 1: When the data is hard-coded.

.html file

<div class="mermaid">
  sequenceDiagram
  {{final}}
</div>

.ts file

import { Component, OnInit } from '@angular/core';
import * as mermaid from "mermaid";

@Component({
 selector: 'app-mermaid',
 templateUrl: './mermaid.component.html',
 styleUrls: ['./mermaid.component.css']
})
export class MermaidComponent implements OnInit {

 constructor() { }
 final:string = '';
 items=[
 { 
  source:"1",
  destination:"2",
  message:"Request from 1"
},
{ 
  source:"2",
  destination:"1",
  message:"Response from 2"
 }
]


ngOnInit(): void {
 mermaid.initialize({
  theme: "forest"
}
);

for(let i=0; i<this.items.length; i++) {
  this.final += `Node${this.items[i].source}->>Node${this.items[i].destination}: ${this.items[i].message};`
  }
 }
}

For this case, a sequence diagram is rendered in the UI:

when data is hard coded, the sequence diagram is this.

Case 2: When the data is received from a db.

Here, instead of calling data from a db, I have simply created a setTimeOut in my ngOnInit(), to imitate an asynchronous call.

  ngOnInit(): void {
mermaid.initialize({
  theme: "forest"
}
);
setTimeout(() => {
  for(let i=0; i<this.items.length; i++) {
    this.final += `Node${this.items[i].source}->>Node${this.items[i].destination}: ${this.items[i].message};`
  }
},100)

}

Here, I get some svg error, I tried to solve it with and additional property in initialize() ie;

mermaid.initialize({
  theme: "forest",
  startOnLoad: false,
}

But, this renders the string as it is. Somewhat like this.

sequenceDiagram Node1->>Node2: Request from 1;Node2->>Node1: Response from 2;

Any ideas on how to solve this?

Answer 1

So, I found a solution to this. I used a mermaid.init() function along with a setTimeOut() of a second. It solves the issue for now.

This is what I did.

ngOnInit(){
  mermaid.initialize({
    theme: "forest",
    startOnLoad: false,
  }
  );
  setTimeout(() => {
    for(let i=0; i<this.items.length; i++) {
      this.final += `Node${this.items[i].source}->>Node${this.items[i].destination}: ${this.items[i].message};`
    }
  },1000)

   setTimeout(() => {
     mermaid.init()
   },1000)
 }