Skip to main content

🌊 Open WebUI 中的 MermaidJS 渲染支持

概述​

Open WebUI 支持直接在聊天界面中渲染视觉上吸引人的 MermaidJS 图表、流程图、饼图等。MermaidJS 是一个强大的工具，用于可视化复杂信息和想法，当与大型语言模型 (LLM) 的功能配对时，它可以成为生成和探索新想法的强大工具。

在 Open WebUI 中使用 MermaidJS​

要生成 MermaidJS 图表，只需在任何聊天中要求 LLM 使用 MermaidJS 创建图表或图表。例如，您可以要求 LLM：

  • "为我使用 Mermaid 创建一个简单决策过程的流程图。解释流程图如何工作。"
  • "使用 Mermaid 可视化一个决策树，以确定是否适合外出散步。"

请注意，为了正确渲染 LLM 的响应，它必须以单词 mermaid 开头，然后是 MermaidJS 代码。您可以参考 MermaidJS 文档 以确保语法正确，并向 LLM 提供结构化提示以指导其生成更好的 MermaidJS 语法。

直接在聊天中可视化 MermaidJS 代码​

当您请求 MermaidJS 可视化时，大型语言模型 (LLM) 将生成必要的代码。只要代码使用有效的 MermaidJS 语法，Open WebUI 就会自动在聊天界面中直接渲染可视化。

如果模型生成 MermaidJS 语法，但可视化未渲染，通常表示代码中存在语法错误。不用担心 - 一旦响应完全生成，您将收到任何错误的通知。如果发生这种情况，请尝试参考 MermaidJS 文档 来识别问题并相应地修改提示。

与您的可视化交互​

一旦显示您的可视化，您可以：

  • 放大和缩小以更仔细地检查它。
  • 通过单击显示区域右上角的复制按钮，复制用于生成可视化的原始 MermaidJS 代码。

示例​

这将生成如下流程图：

 startAncestor [ start ]
A[A] --> B[B]
B --> C[Decision]
C -->| Yes | D[D]
C -->| No  | E[E]
D --> F[F]
E --> F[F]

尝试不同类型的图表和图表可以帮助您对如何在 Open WebUI 中有效利用 MermaidJS 产生更细致的理解。对于较小的模型，考虑参考 MermaidJS 文档 为 LLM 提供指导，或让它将文档总结为综合笔记或系统提示。通过遵循这些指导原则并探索 MermaidJS 的功能，您可以在 Open WebUI 中释放这个强大工具的全部潜力。