Issue with mermaid along with ngx-markdown

[arora-kushal]

This is related to bug: #979

Issue #1: Its not working in Firefox.

Issue #2: Please see the output of chrome. Why these 2 diagrams are different given the same sequence code.

[IOrlandoni]

Hey, apologies if I closed your other issue prematurely.

For your second issue, by removing the call to mermaid.init(), I noted that you're not generating the same sequence code.

[IOrlandoni]

As for your first issue, I suspect the markup is being included in the page after mermaid has already run. In which case, you should be able to fix it by changing the event you're using to initialize mermaid.

As I have no experience with angular I could not say which are the other options.

[arora-kushal]

Thanks @dunning-kruger for your help.. I have fixed this after reading your suggestions.

The solution:
Instead of using markdown like this
<markdown [src]="'path/to/file.md'"></markdown>
I have used this like
<div markdown [src]="'path/to/file.md'" (load)="onLoad($event)" ></div>

and in TS file

onLoad(event) {
    mermaid.init();
    mermaid.initialize({
      securityLevel: 'loose'
    });
  }