🚀 從報錯到成功：Mermaid 流程圖語法避坑指南 🚀
🚨 問題背景
在開發文檔或技術博客中，我們經常使用 Mermaid 流程圖 來可視化代碼邏輯。但最近我在嘗試繪制一個 Java Stream 轉換流程圖時，遭遇了以下報錯：
🔥 Error: Parse error on line 2... Expecting 'SQE', got 'PS' 🔥
經過多次調試，最終解決了 尖括號轉義、特殊符號處理 等關鍵問題。以下是完整的踩坑記錄和解決方案！
🔍 錯誤復現
?? 初始錯誤代碼
flowchart TDA[Start: List<InviteCode> <br> inviteCodes] --> B[Stream<InviteCode> <br> inviteCodes.stream()]B --> C[For each InviteCode in Stream]...
? 錯誤現象
Mermaid 解析器報錯：Expecting 'SQE', got 'PS'，指向箭頭連接符后的節點定義，流程圖直接 渲染失敗！💥
🛠? 分步解決方案
🔧 階段一：尖括號轉義問題
🎯 錯誤原因
Mermaid 會將 < 和 > 識別為 HTML 標簽，導致語法樹解析混亂。例如 List<InviteCode> 會被誤認為 未閉合的標簽。
? 修復方法
使用 HTML 實體轉義符號：
- List<InviteCode> // 🚫 錯誤寫法
+ List<InviteCode> // ? 正確寫法
📝 修改后代碼
flowchart TDA[Start: List<InviteCode> <br> inviteCodes] --> B[Stream<InviteCode> <br> inviteCodes.stream()]...
🔧 階段二：特殊符號包裹問題
🎯 新報錯
即使轉義了尖括號，仍然報錯：Expecting 'SQE', got 'PS' 😱
💡 錯誤根源
Mermaid 對節點文本中的 空格、括號 和 換行符 <br> 敏感，未包裹的文本會被分割成多個語法元素！
? 終極修復
用雙引號包裹含特殊符號的文本：
- A[Start: List<InviteCode> <br> inviteCodes] // 🚫 未包裹
+ A["Start: List<InviteCode> <br> inviteCodes"] // ? 雙引號包裹
🌟 最終正確代碼
📜 核心原則總結
-
轉義所有尖括號 🔠
?<→<
?>→>
? 📌 通用規則：所有泛型聲明都需要轉義！ -
包裹含特殊符號的文本 📦
? 如果文本包含[],(),<br>,/或空格，必須用雙引號包裹：["Text with symbols"]
? ? 重要提示：箭頭后的節點定義必須立刻接雙引號，例如--> C["描述文本"] -
換行符保留規則 ?
?<br>可以正常使用，但必須位于雙引號包裹的文本塊內 -
箭頭語法的純凈性 ??
? 確保連接符-->后面緊跟節點定義，不要摻雜未包裹的文本
🛠? 驗證工具推薦
? Mermaid Live Editor 🔗 https://mermaid.live
實時渲染調試，可快速定位語法錯誤位置，開發者的救命神器！ 🚑
🎉 最終效果
💡 經驗延伸
? 當 Mermaid 報 Expecting 'XXX', got 'YYY' 時，通常意味著：
? 🚩 符號未轉義
? 🚩 文本塊未正確包裹
? 🚩 存在非法嵌套結構
? 🔍 優先檢查箭頭連接符（-->）附近的語法
? 👉 復雜文本建議先在 Mermaid Live Editor 中逐段驗證
希望這篇博客能幫助您避開 Mermaid 的常見語法陷阱。如果遇到其他問題，歡迎在評論區交流！🎯
Happy Coding! 👨💻👩💻
? 下期預告：如何用 Mermaid 繪制時序圖？訂閱專欄不錯過更新！🔔
