Mermaid 的報錯通常只說明解析器在哪裡停下了,而不一定指出真正的錯誤起點。一個缺失的區塊結束符或引號,可能會讓後面的合法語句看起來像是「罪魁禍首」。最快的除錯方式不是亂改標點,而是先縮小原始碼。
先確認圖表類型
第一條非註解行會選擇解析器,例如 flowchart LR、sequenceDiagram、erDiagram 或 gantt。在一種圖表裡合法的語法,在另一種圖表裡不一定成立。貼到原始編輯器之前,先確認大小寫和圖表前綴是否正確,並移除可能被一起複製進去的 Markdown 程式碼圍欄。
縮小到最小可渲染範例
保留第一行和一條已知正確的語句。如果可以渲染,再把刪掉的內容分成兩半逐步加回去。這樣定位失敗區域,比在長圖裡逐條新增語句快得多。
flowchart LR
A[開始] --> B[結束]
如果縮小後的圖仍然報錯,最好重新手打一遍,而不是直接貼上。不可見的 Unicode 標點、智慧引號和不斷行空格,可能會在視覺上看不出來。
檢查結構和保留 token
每個打開的區塊都要有對應的結束符:subgraph 對應 end,alt、loop 和 opt 這類時序區塊也要顯式結束。在流程圖裡,小寫 end 也可能被當成語法,而不是標籤。含有標點、而且和圖法語法衝突的標籤,應該加引號或直接改名。
穩定的字母數字 ID 能減少歧義。把顯示文字放在方括號或引號裡,不要直接把整句長文本當 ID。
考慮執行環境版本和設定
同一張圖在不同整合裡可能表現不同,因為它們捆綁的 Mermaid 版本或安全設定不一樣。新的圖表類型和形狀在舊執行環境裡可能根本不存在。先在最終發布的那個應用裡測試,再把進階語法放到明確的最低版本說明後面。
安全設定也可能在不報語法錯的情況下停用 HTML 標籤或互動連結。相容性優先時,應該盡量使用純文字。
保留可重現失敗
寫 bug 報告時,請附上最小原始碼、Mermaid 版本、瀏覽器、安全模式和預期結果。去掉機密名稱和資料。十行可重現樣例,比一張千行截圖更有價值。
DevToy Mermaid 編輯器 會顯示解析器報錯,並使用嚴格的本地渲染。先從最接近的模板開始重現,再逐步縮小問題範圍。