跳到主要内容

MermaidJS 渲染

🌊 OPL 数据空间中的 MermaidJS 渲染支持​

概览​

OPL 数据空间支持直接在聊天界面中渲染美观的 MermaidJS 图表、流程图、饼图等内容。MermaidJS 很适合把复杂信息和想法结构化地可视化；配合大语言模型后，它在生成与探索新想法时会变得非常高效。

在 OPL 数据空间中使用 MermaidJS​

要生成 MermaidJS 图表，只需要在任意聊天里请求模型使用 MermaidJS 创建图示即可。例如：

  • “帮我用 Mermaid 画一个简单决策流程图，并解释这个流程图如何运作。”
  • “用 Mermaid 画一个决策树，判断今天是否适合出门散步。”

需要注意的是，要让 OPL 数据空间正确渲染，模型输出必须以单词 mermaid 开头，后面紧跟 MermaidJS 代码。你也可以参考 MermaidJS 文档 来校验语法，并通过更结构化的提示词引导模型生成更稳定的 MermaidJS 代码。

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

当你请求 MermaidJS 可视化时，LLM 会生成相应代码。只要语法合法， OPL 数据空间就会自动在聊天中完成渲染。

如果模型已经输出了 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]

通过尝试不同类型的图表和图示，你会更直观地理解如何在 OPL 数据空间中高效使用 MermaidJS。对于较小模型，建议参考 MermaidJS 文档，或者先让模型把文档总结成简明笔记或系统提示词，再用这些信息辅助出图。