如何修改Mermaid.render方法在Angular项目中生成的SVG尺寸？

原有代码失效的核心原因是仅修改了外层容器的样式，没有命中mermaid渲染生成的SVG元素本身：mermaid渲染时会给生成的<svg>标签插入内联宽高、max-width属性，优先级高于外层容器样式；同时Angular默认的视图封装模式会阻止组件内部CSS选中动态生成的SVG元素，因此普通CSS修改也会失效。

你可以通过以下3种方式解决：

• 方案1：渲染完成后直接修改SVG元素属性（TS层面直接覆盖）

mermaid.render("graphDiv", graphDefinition, (svgCode, bindFunctions) => {
  element.innerHTML = svgCode;
  bindFunctions(element);
  // 选中生成的svg元素直接修改样式
  const svgEle = element.querySelector('svg');
  if (svgEle) {
    // 可先移除自带的固定宽高属性
    svgEle.removeAttribute('width');
    svgEle.removeAttribute('height');
    svgEle.style.maxWidth = '1000px';
    svgEle.style.width = '100%';
  }
});

• 方案2：调整mermaid初始化配置，从根源关闭宽度限制
  在调用render之前的mermaid初始化逻辑中添加以下配置：

mermaid.initialize({
  startOnLoad: false,
  useMaxWidth: false, // 关闭mermaid默认的最大宽度限制
  width: 1000 // 直接指定渲染宽度
});

• 方案3：使用CSS全局样式或穿透规则修改
  如果希望用CSS控制，可将样式写入项目全局的styles.css文件，或在组件CSS中使用Angular的样式穿透语法：

/* 组件CSS中使用穿透语法 */
::ng-deep #graphDiv svg {
  max-width: 1000px !important;
  width: 100% !important;
}

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