Angular 4 与美人鱼 js 兼容？

Question

<分区>

Answer 1

它非常易于使用。

1. 将美人鱼添加到您的项目中:npm i mermaid
2. 在你想使用mermaid的 View 中，import 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