Skip to main content

MermaidJS 渲染

🌊 Open WebUI 中的 MermaidJS 渲染支持​

概览​

Open WebUI 支持直接在聊天界面中渲染美观的 MermaidJS 图表、流程图、饼图等。MermaidJS 是一个强大的可视化工具，用于呈现复杂的信息 and 想法。当与大语言模型（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 [ 开始 ]
A[A] --> B[B]
B --> C[决策]
C -->| 是 | D[D]
C -->| 否 | E[E]
D --> F[F]
E --> F[F]

尝试不同类型的图表可以帮助您更深入地了解如何在 Open WebUI 中有效利用 MermaidJS。对于较小的模型，可以考虑参考 MermaidJS 文档 为 LLM 提供指导，或者让它将文档总结为全面的笔记或系统提示词。通过遵循这些指南并探索 MermaidJS 的功能，您可以释放 Open WebUI 中这一强大工具的全部潜力。