Angular 4是否与Mermaid js兼容？

Question

我正在寻找一个JavaScript库来创建类似顶级动态块图的东西用在我的Angular项目中。请问有人知道mermaid是否兼容Angular 4？如果还有其他好的图表库也请告诉我。谢谢！

- Vasudev Deshpande

Answer 1

这很容易使用。

1. 将mermaid添加到你的项目中：npm i mermaid
2. 在你想要使用mermaid的视图中，导入mermaid并调用init方法。

例如：

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"
        });
    }
}

在这种情况下，您需要转义像 { 这样的字符。如果您无论如何都有图形内容作为字符串，可以使用 mermaidAPI 代替：

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;
        });
    }
}

更多细节请参见https://mermaidjs.github.io/#/mermaidAPI

- Maximilian Friedmann

---

如果您能为此创建一个 StackBlitz，那将非常有用。 - K-Dawg