Mermaid in Angular

I try to use mermaid graph rendering in my Angular app. The graph itself comes from server, but only in mermaid code. When I try to render it, it shows only the mermaid code. I try to initialize mermaid in OnInit, AfterViewInit, AfterContentInit yet it does not works. Sometimes it do works when Angular refreshing site after changes or after some manual refresh (maybe).

The component where I wish to render:


import {AfterContentInit, Component, Input} from '@angular/core';
import mermaid from 'mermaid';

@Component({
selector: 'app-graph-draw',
standalone: true,
imports: [],
templateUrl: './graph-draw.component.html',
styleUrl: './graph-draw.component.css'
})
export class GraphDrawComponent implements AfterContentInit {
@Input() graph: string = '';

ngAfterContentInit() {
mermaid.initialize({
startOnLoad: true
});
}
}

The html:


<pre class="mermaid">
{{graph}}
</pre>

I tried to change startOnLoad in every case but it did not have any effect. I tried to lookup the issue in devtools, but every script that is responsible for this is has responding with OK.

Continue reading...