mermaid组件流式渲染的时候 抖动 id为dmermaid开头的元素重复创建和销毁 引起页面抖动

[cxybd]

重现步骤

当前行为

mermaid组件流式渲染的时候 抖动 id为dmermaid开头的元素重复创建在和根容器平行的位置并且销毁 引起页面抖动

预期行为

mermaid组件流式渲染正常

上下文

No response

版本

2.2.1

您在哪些浏览器上遇到了这个问题？

Chrome

[Div627]

@cxybd Hi，为了更好地定位问题，能否提供一个可复现的最小化示例？这将极大帮助我们快速排查和解决问题。

[dosubot]

你遇到的 Mermaid 组件流式渲染抖动问题（dmermaid 元素反复创建和销毁）在 2.2.1 版本中是已知现象，根本原因是组件没有实现渲染取消逻辑，且 ID 生成方式导致每次渲染都新建 DOM 节点，异步渲染完成后还可能操作已卸载的节点，最终引发页面抖动和闪烁 [相关源码分析]。

后续版本已通过 PR 修复（如 #1170、#1175），引入了渲染取消标记和更合理的 ID 生成方式，能有效减少抖动和 DOM 反复创建销毁 [修复说明]。

建议：

1. 升级到最新版 @ant-design/x，相关修复已合并并发布，能显著改善抖动体验。
2. 检查项目入口是否正确包裹了 StyleProvider 和 XProvider，并确保只安装了单一版本的 @ant-design/cssinjs 和 react，防止 context 丢失导致样式或渲染异常 [官方建议]。
3. 明确手动引入 Mermaid 插件样式（如 import '@ant-design/x-markdown/plugins/Mermaid/style';），避免样式丢失引发渲染异常。
4. 如果暂时无法升级，尽量用 useMemo/useCallback 包裹传递给 Markdown/Mermaid 相关组件的 props，保证引用稳定，减少不必要的重新渲染 [React 渲染优化建议]。

如升级后仍有问题，建议补充最小复现和环境信息，方便进一步定位。

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}

   

[cxybd]

import '@ant-design/x-markdown/plugins/Mermaid/style'; 提示没这个库

[cxybd]

@cxybd Hi，为了更好地定位问题，能否提供一个可复现的最小化示例？这将极大帮助我们快速排查和解决问题。
1.使用xmarkdown嵌入mermaid组件 2.流式返回```mermaid开头的代码 非 \\\\` 开头（\`\`\`会被bubble的消息解析样式捕获故没做这块的测试） 3.流式渲染时dmermaid持续在SPA页面根节点同级创建和销毁 比如spa页面的元素都挂在id为root容器上 那么mermaid会成为它的兄弟节点 持续创建和销毁 引起整个spa页面的抖动

[Div627]

import '@ant-design/x-markdown/plugins/Mermaid/style'; 提示没这个库

你好，Mermaid 需要从 x 里引入哈

[cxybd]

import '@ant-design/x-markdown/plugins/Mermaid/style'; 提示没这个库

你好，Mermaid 需要从 x 里引入哈

不是的 我这里回复的是dosubot 给我的 “明确手动引入 Mermaid 插件样式（如 import '@ant-design/x-markdown/plugins/Mermaid/style';），避免样式丢失引发渲染异常”这条建议

[Div627]

import '@ant-design/x-markdown/plugins/Mermaid/style'; 提示没这个库

你好，Mermaid 需要从 x 里引入哈

不是的 我这里回复的是dosubot 给我的 “明确手动引入 Mermaid 插件样式（如 import '@ant-design/x-markdown/plugins/Mermaid/style';），避免样式丢失引发渲染异常”这条建议

@cxybd 好的。渲染抖动问题请提供最小 demo 以便于复现。