Problems with Mermaid integration in Angular

Question

I have a problem with the integration of Mermaid since despite having checked documentation and other people asking for this library in stackoverflow and other forums the example they gave was to start such a project as well.

Component TS

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

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  title = "testMermaid";

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

HTML

<div class="mermaid">
  graph TD A[Hard] 
  -->|Text| B(Round) B 
  --> C{Decision} C 
  -->|One| D[Result 1] C
  -->|Two| E[Result 2]
</div>

I hope you can help me with this problem since I really don't understand why it doesn't start anything.

Answer 1

Try adding the following to your component.

@ViewChild('mermaid', { static: true }) mermaid: ElementRef;

And add #mermaid to your div like this:

<div #mermaid class="mermaid">
</div>

Adding #mermaid is creating a template variable called "mermaid", and allows you to get a reference to the native element in your typescript.

My inkling is that the element won't be available in ngOnInit(), but try for yourself by adding console.log(this.mermaid.nativeElement); to ngOnInit() to see if it is available (has been added to the DOM) yet.

Instead, try implementing AfterContentInit on your content, and move the code you currently have in ngOnInit() to ngAfterContentInit().