Angular 4 compatible with Mermaid js?

Question

I am looking for diagram Javascript library to create some kind of top level dynamic block diagram for my angular project. Can anyone pls tell me if mermaid is compatible to work with Angular 4? Also pls let me know if there are any other good diagram libraries to work on. Thanks!

Answer 1

Its quite easy to use.

1. Add mermaid to your project: npm i mermaid
2. In the view you want to use mermaid, import mermaid and call the init method

Example:

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

@Component({
    selector: "MermaidTest",
    template: `
        <div class="mermaid">
            graph LR
            A-->B
        </div>`
})
export class MermaidTest implements OnInit {    

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

In this case, you have to escape characters like {. If you happen to have the graph content as string anyway, you can use the mermaidAPI instead:

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

@Component({
    selector: "MermaidTest",
    template: `<div #mermaid></div>`
})
export class MermaidTest implements AfterContentInit {

    @ViewChild("mermaid")
    public mermaidDiv;

    public ngAfterContentInit(): void {
        mermaid.initialize({
            theme: "dark"
        });

        const element: any = this.mermaidDiv.nativeElement;
        const graphDefinition = "graph TB\na-->b";
        mermaid.render("graphDiv", graphDefinition, (svgCode, bindFunctions) => {
            element.innerHTML = svgCode;
        });
    }
}

For more details see https://mermaidjs.github.io/#/mermaidAPI