Mermaid.js v11 在 Firefox 中渲染复杂 HTML 节点的问题解析

Mermaid.js 是一个流行的图表生成库，它允许开发者使用简单的文本语法创建各种类型的图表。在最新发布的 v11 版本中，用户在使用 Firefox 浏览器时遇到了一个特定的渲染问题：当流程图节点中包含复杂 HTML 内容时，这些节点会被渲染为空节点。

这个问题主要出现在 Firefox 130 及以上版本中，而在 Chrome 等其他浏览器中则表现正常。具体表现为：当节点标签包含 HTML 格式的内容（如带有特殊字符的文本、链接或电子邮件地址）时，Firefox 无法正确渲染这些内容，导致节点显示为空。

从技术角度来看，这个问题源于 Mermaid.js v11 版本对 HTML 标签处理逻辑的变更。在 v10 版本中，即使节点内容包含 HTML 特殊字符或标记，也能被正确解析和显示。但在 v11 版本中，Firefox 的渲染引擎对这些内容的处理方式发生了变化，导致解析失败。

开发者社区很快响应了这个问题，并在 v11.2.1 版本中提供了修复方案。这个修复主要调整了 HTML 内容的处理逻辑，确保在 Firefox 中也能正确解析和显示复杂的节点内容。

对于开发者来说，这个问题的解决意味着：

1. 升级到 v11.2.1 或更高版本可以完全解决 Firefox 中的渲染问题
2. 在跨浏览器开发时，仍需注意不同浏览器对 HTML 内容的解析差异
3. 对于复杂的图表内容，建议进行多浏览器测试以确保兼容性

这个问题也提醒我们，在库的重大版本升级时，应该充分测试各种边界情况，特别是涉及跨浏览器兼容性的功能。同时，保持库的及时更新也是避免类似问题的有效方法。

Mermaid.js 团队对这类问题的快速响应展示了开源社区的优势，开发者遇到类似问题时可以及时获取帮助和解决方案。