MermaidJS 渲染

🌊 Open WebUI 中的 MermaidJS 渲染支持

概述

Open WebUI 支持在对话界面中直接渲染精美的 MermaidJS 图表、流程图、饼图等。MermaidJS 是一种用于将复杂信息和想法可视化的强大工具，当与大语言模型（LLM）的能力相结合时，它能成为生成和探索新想法的利器。

在 Open WebUI 中使用 MermaidJS

要生成 MermaidJS 图表，只需在任何对话中要求 LLM 使用 MermaidJS 创建图表即可。例如，您可以让 LLM：

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

请注意，为了使 LLM 的回复能够被正确渲染，它必须以单词 mermaid 开头，后跟 MermaidJS 代码。您可以参考 MermaidJS 官方文档 来确保语法正确，并向 LLM 提供结构化的 Prompt，以引导其生成更好的 MermaidJS 语法。

在对话中直接可视化 MermaidJS 代码

当您请求 MermaidJS 可视化时，大语言模型（LLM）将生成所需的代码。只要代码使用有效的 MermaidJS 语法，Open WebUI 就会自动在对话界面中直接渲染该可视化图表。

如果模型生成了 MermaidJS 语法，但可视化图表未能成功渲染，这通常表明代码中存在语法错误。不用担心 —— 在回复完全生成后，系统会向您通知任何错误。如果发生这种情况，请尝试参考 MermaidJS 官方文档 来找出问题，并相应地修改您的 Prompt。

与您的可视化图表交互

一旦您的可视化图表显示出来，您可以：

• 放大和缩小以更仔细地观察它。
• 点击显示区域右上角的复制按钮，复制用于生成该可视化的原始 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 提供引导，或者让它将文档总结为全面的笔记或系统提示词（System Prompt）。通过遵循这些准则并探索 MermaidJS 的功能，您可以在 Open WebUI 中充分释放这一强大工具的全部潜力。