跳到主要内容

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 文档,或者先让模型把文档总结成简明笔记或系统提示词,再用这些信息辅助出图。