如何在Angular中正确使用MermaidJS？安装后渲染失败求助

问题复现 #

通过npm i -D mermaid安装后，按官方示例在Angular中使用Mermaid时无法正常渲染，直接使用CDN script标签输出异常；尝试旧解决方案后出现TypeScript错误：

• Property 'mermaid' has no initializer and is not definitely assigned in the constructor
• Property 'initialize' does not exist on type 'typeof'

正确配置步骤 #

1. 安装完整依赖 #

除了Mermaid本体，还需安装对应的类型定义文件，避免类型报错：

npm i -D mermaid @types/mermaid

2. 组件内规范实现 #

避免在模板中直接插入script标签，改用Angular生命周期钩子处理渲染逻辑：

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

@Component({
  selector: 'app-mermaid',
  template: `
    <pre class="mermaid">
      graph TD
      A[Client] --> B[Load Balancer]
      B --> C[Server01]
      B --> D[Server02]

      journey
      title My working day
      section Go to work
        Make tea: 5: Me
        Go upstairs: 3: Me
        Do work: 1: Me, Cat
      section Go home
        Go downstairs: 5: Me
        Sit down: 5: Me
    </pre>
  `
})
export class MermaidComponent implements AfterViewInit {
  ngAfterViewInit(): void {
    // 初始化Mermaid，关闭自动加载（避免与Angular DOM更新冲突）
    mermaid.initialize({ startOnLoad: false });
    // 定位当前组件内的mermaid元素并手动渲染
    const mermaidNodes = document.querySelectorAll('.mermaid');
    mermaidNodes.forEach(node => {
      const graphId = `mermaid-${Date.now()}`;
      mermaid.render(graphId, node.textContent || '', (svg) => {
        node.innerHTML = svg;
      });
    });
  }
}

3. 修复TypeScript类型错误 #

若仍出现类型相关报错：

• 确认@types/mermaid版本与Mermaid主版本匹配，比如Mermaid 10对应@types/mermaid@^10
• 临时精准定义类型（不推荐全局关闭严格模式），可在组件顶部添加：

declare const mermaid: {
  initialize: (opts: { startOnLoad: boolean }) => void;
  render: (id: string, code: string, cb: (svg: string) => void) => void;
};

• 或在tsconfig.json的compilerOptions中临时调整（仅用于快速验证）：

"strictPropertyInitialization": false

4. 关键注意点 #

• Angular的DOM更新机制会干扰Mermaid的自动渲染逻辑，必须在AfterViewInit钩子中手动触发渲染
• 不要依赖外部CDN的script标签，通过npm导入符合Angular模块规范
• 如需在多个组件复用，可封装成自定义指令简化调用

内容的提问来源于stack exchange，提问作者romroms