在Angular项目中如何通过.ts文件编辑或生成Mermaid图表

问题原因 #

你直接修改innerHTML/innerText不生效，是因为Mermaid只会在页面首次加载时自动扫描页面内所有.mermaid类的元素，将其转换为SVG图表。修改原始文本后，Mermaid不会自动触发重渲染，需要手动调用API触发更新。

具体实现步骤 #

1. 全局类型声明（可选但推荐） #

因为你是通过CDN直接引入的Mermaid，TS默认识别不到全局的mermaid对象，你可以直接在当前组件的.ts文件顶部加这段声明，也可以单独放到src/types/mermaid.d.ts全局类型文件里：

declare var mermaid: {
  initialize: (config?: any) => void;
  render: (id: string, text: string, container?: Element) => Promise<{ svg: string }>;
  init: (selector?: string) => void;
};

2. 组件代码改造 #

组件模板（.html）

给Mermaid容器加模板引用，不要直接用ID操作DOM：

<!-- 清空原来写死的Mermaid代码，留空容器即可 -->
<div #mermaidContainer class="mermaid"></div>
<!-- 示例：测试动态更新的按钮 -->
<button (click)="updateMermaid()">更新图表</button>

组件逻辑（.ts）

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

@Component({
  selector: 'app-mermaid-demo',
  templateUrl: './mermaid-demo.component.html',
  styleUrls: ['./mermaid-demo.component.css']
})
export class MermaidDemoComponent implements AfterViewInit {
  @ViewChild('mermaidContainer') mermaidContainer!: ElementRef<HTMLDivElement>;

  // 初始Mermaid代码，后续可以根据业务逻辑动态生成
  private mermaidCode = `
    stateDiagram-v2 
    [*] --> Still
    Still --> [*]
    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]
  `;

  ngAfterViewInit(): void {
    // 关闭自动加载渲染，避免重复扫描
    mermaid.initialize({ startOnLoad: false });
    this.renderMermaid();
  }

  // 封装Mermaid渲染逻辑
  private async renderMermaid(): Promise<void> {
    const container = this.mermaidContainer.nativeElement;
    // 调用render方法生成SVG字符串，第一个参数为生成SVG的ID，保证页面内唯一即可
    const { svg } = await mermaid.render('mermaid-custom-svg', this.mermaidCode);
    container.innerHTML = svg;
  }

  // 测试动态更新方法，实际业务中可以替换为你的生成逻辑
  public updateMermaid(): void {
    this.mermaidCode = `
      stateDiagram-v2
      [*] --> 待机
      待机 --> 运行
      运行 --> 待机
      运行 --> 故障
      故障 --> 维修
      维修 --> 待机
    `;
    // 修改代码后手动触发重渲染
    this.renderMermaid();
  }
}

注意事项 #

• 每次更新Mermaid代码之后，都需要调用一次渲染逻辑手动触发重渲染
• 如果不想单独封装render方法，也可以在修改完.mermaid元素的innerText之后，手动调用mermaid.init('.mermaid')，但这种方式会扫描页面所有Mermaid元素，性能不如指定单个容器渲染的方案

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