DevToy

文档工作流

系统化排查 Mermaid 语法错误

通过一套可重复的方法,定位 Mermaid 解析错误里的图表类型、保留字、标签、块结构和版本差异问题。

发布于 2026年7月11日 · 更新于 2026年7月11日

Mermaid 的报错通常只说明解析器在哪儿停下了,而不一定指出真正的错误起点。一个缺失的块结束符或引号,可能会让后面的合法语句看起来像是“罪魁祸首”。最快的调试方式不是乱改标点,而是先缩小源码。

先确认图表类型

第一条非注释行会选择解析器,例如 flowchart LRsequenceDiagramerDiagramgantt。在一种图表里合法的语法,在另一种图表里不一定成立。粘贴到原始编辑器之前,先确认大小写和图表前缀是否正确,并移除可能被一起复制进去的 Markdown 代码围栏。

缩小到最小可渲染例子

保留第一行和一条已知正确的语句。如果可以渲染,再把删掉的内容分成两半逐步加回去。这样定位失败区域,比对长图逐条添加语句快得多。

flowchart LR
  A[开始] --> B[结束]

如果缩小后的图仍然报错,最好重新手打一遍,而不是直接粘贴。不可见的 Unicode 标点、智能引号和不间断空格,可能会在视觉上看不出来。

检查结构和保留 token

每个打开的块都要有对应的结束符:subgraph 对应 endaltloopopt 这类时序块也要显式结束。在流程图里,小写 end 也可能被当成语法,而不是标签。含有标点、而且和图法语法冲突的标签,应该加引号或直接改名。

稳定的字母数字 ID 能减少歧义。把显示文本放在方括号或引号里,不要直接把一整句长文本当 ID。

考虑运行时版本和配置

同一张图在不同集成里可能表现不同,因为它们捆绑的 Mermaid 版本或安全配置不一样。新的图表类型和形状在旧运行时里可能根本不存在。先在最终发布的那个应用里测试,再把高级语法放到明确的最低版本说明后面。

安全配置也可能在不报语法错的情况下禁用 HTML 标签或交互链接。兼容性优先时,应该尽量使用纯文本。

保留可复现失败

写 bug 报告时,请附上最小源码、Mermaid 版本、浏览器、安全模式和预期结果。去掉机密名称和数据。十行可复现样例,比一张千行截图更有价值。

DevToy Mermaid 编辑器 会显示解析器报错,并使用严格的本地渲染。先从最接近的模板开始复现,再逐步缩小问题范围。

相关指南