從零開始，透過互動學習 Mermaid
歡迎來到 Mermaid 流程圖的互動指南。這裡不僅提供文件，更讓您親手操作。在下方的「語法沙盒」中嘗試各種設定，即時查看視覺變化與產生的程式碼，輕鬆掌握流程圖的繪製技巧。
🛠️ 控制面板
新增節點
新增連接線
👁️ 即時預覽
由此處開始建立您的流程圖
💻 Mermaid 程式碼
核心語法概念
點擊下方的按鈕，將各個核心語法的範例載入上方的沙盒中，親手修改並觀察變化。
節點形狀
使用不同括號來定義步驟、決策或資料庫等不同形狀。
連接線樣式
用實線、虛線、粗線與不同箭頭來表達流程關係。
線上文字
在連接線上加上文字，常用於表示決策分支的條件。
子圖
使用 `subgraph` 將相關的節點群組起來，讓複雜的圖表更有條理。
完整範例：泡咖啡流程
這是一個結合了多種節點與決策分支的綜合範例。點擊載入，看看它是如何構成的，並試著修改它！