some Mermaid chart cannot got rendered

该报错发生在 LobeChat 客户端(桌面端/Web)中,部分 Mermaid 图表显示为占位符(placeholder),无法正常渲染。优先排查图表中是否包含 HTML 标签(如
),这可能是导致部分 Mermaid 语法在 fullFeatured: false 模式下解析失败的原因

快速结论:该报错发生在 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 应用上的渲染结果对比。

解决步骤

  1. 可优先尝试:排查引发异常的 Mermaid 图表中是否含有 HTML 标签(如 <br>)。移除图表节点标签中的 <br> 标签(改为 \n 或换行符号),重新渲染查看是否恢复。
  2. 确认 @lobehub/lobe-ui 仓库是否已存在类似 Issue,或检查当前使用的 @lobehub/ui 版本是否已更新修复。
  3. 若问题持续,可在 @lobehub/lobe-ui 仓库提交新 Issue,提供无法渲染的 Mermaid 示例。

验证方法

检查之前无法渲染的 Mermaid 图表现在能否正确显示为流程图,不再显示占位符。

参考来源

lobehub/lobe-chat #15631

这个方案解决了吗?

celebrityanime
celebrityanime
文章: 15168

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注