快速结论:该报错发生在 LobeChat 客户端(桌面端/Web)中,部分 Mermaid 图表显示为占位符(placeholder),无法正常渲染。优先排查图表中是否包含 HTML 标签(如 <br>),这可能是导致部分 Mermaid 语法在 fullFeatured: false 模式下解析失败的原因。
适用环境:LobeChat v2.2.2、Windows 操作系统、Edge 浏览器、Desktop App (Electron) / 自托管 Docker 部署。
最快修复方案:暂无确认的一步修复方案。该问题已被 LobeChat 标记为 @lobehub/ui 组件的渲染问题,且存在多个重复 Issue(#8227、#11624、#12307)。
注意事项:以下解决步骤中的第 1 步是基于评论区推测的可能原因,未经 Issue 提交者或开发者最终验证,但可优先尝试。移除 <br> 标签后,图表视觉效果可能改变。
问题场景
用户在 LobeChat(Windows 桌面客户端/Web 端 Edge 浏览器)中与 AI 智能体对话,部分智能体回复包含 Mermaid 流程图时,某些图表无法显示,仅显示占位符。但同一图表在 LobeChat Android APP 上可以正常渲染。
报错原文
some Mermaid chart cannot got rendered
原因分析
可能原因(基于评论区分析):LobeChat 在聊天上下文中渲染 Mermaid 时使用了 fullFeatured: false 模式以提升性能(参见 src/features/Conversation/Markdown/index.tsx)。此模式可能限制了对部分 Mermaid 语法特性的支持,例如包含 <br> HTML 标签的节点标签、复杂的子图嵌套等。评论分析中指出,问题图表使用了 <br> 标签(如 "G0期白血病细胞<br>同步进入S期"),而能正常渲染的图表则未使用。由于 @lobehub/ui 包中的 Mermaid 组件版本差异,可能导致 Android 应用与桌面端/Web 端行为不一致。
环境排查
- 确认 LobeChat 版本是否为 v2.2.2 或相近版本。
- 确认
@lobehub/ui包版本(可通过项目依赖锁定文件查看)。 - 确认 Mermaid.js 版本(路径:
@lobehub/ui内部依赖)。 - 确认操作系统与浏览器:Windows + Edge / Chrome,与 Android 应用上的渲染结果对比。
解决步骤
- 可优先尝试:排查引发异常的 Mermaid 图表中是否含有 HTML 标签(如
<br>)。移除图表节点标签中的<br>标签(改为\n或换行符号),重新渲染查看是否恢复。 - 确认
@lobehub/lobe-ui仓库是否已存在类似 Issue,或检查当前使用的@lobehub/ui版本是否已更新修复。 - 若问题持续,可在 @lobehub/lobe-ui 仓库提交新 Issue,提供无法渲染的 Mermaid 示例。
验证方法
检查之前无法渲染的 Mermaid 图表现在能否正确显示为流程图,不再显示占位符。
参考来源
这个方案解决了吗?
可以继续搜索完整报错,或查看同一工具的其他排查指南。
![[BUG]: when scrolling up, scrolling jumps](https://www.chat-gpts.plus/wp-content/uploads/2026/07/5846-1433eaaa-768x403.jpg)

