Dify中的Mermaid代码渲染报错排查

1 阅读2分钟

起因:

在dify中创建了一个代码助手,并使用提示词要求智能体 可使用mermaid来绘图进行展示,但输出的mermaid代码老是不能正常渲染,报错以下内容(只是举例,可能还会报错其他类型):

Rendering failed: Parse error on line 4:
... C[设置右边界 right = len(arr) - 1]    C -->
-----------------------^
Expecting 'SQE', 'DOUBLECIRCLEEND', 'PE', '-)', 'STADIUMEND', 'SUBROUTINEEND', 'PIPE', 'CYLINDEREND', 'DIAMOND_STOP', 'TAGEND', 'TRAPEND', 'INVTRAPEND', 'UNICODE_TEXT', 'TEXT', 'TAGSTART', got 'PS'

image.png

排查过程:

首先是怀疑大模型输出的mermaid代码不规范导致的报错,于是将生成的mermaid代码运行到mermaid.live的官方绘图网站上,同样报错。

image.png

然后使用元宝客户端要求模型 输出同样的代码却能正常显示,不经疑惑,连官方提供的在线页面都不能正常渲染,为何元宝的页面却能正常渲染?

image.png

后续又使用千问网页进行测试,虽没有报错,却只渲染了dify中报错之前部分代码的图形。 image.png

问题解决:

image.png

经网上查找解决方案,有的说把英文的符号换成中文符号,有的说把括号中的文字都用英文引号包起来,经本人实践,给大模型加上提示词“Mermaid代码中的中括号和大括号中的内容必须用双引号包起来”确实可以解决问题。通义千问 给的解释是:“当使用 方括号 [] 或 花括号 {} 时,Mermaid 解析器会将这些特殊字符误认为是语法标记,导致解析错误。”但是这并没有解释清楚为什么元宝能够正确渲染出图形来。

继续追问,发现这与 Mermaid 版本的解析器严格程度有关,Mermaid 版本v9.x 及更早解析器规则较宽松,可以容忍部分特殊字符,而v10.x(我用的 ^10.6.1)以上版本更严格,必须规范转义。