Mermaid圖表生成

用文字描述圖表，再渲染成 SVG

Mermaid 是以文字語法描述圖表的格式。你在程式碼區編輯節點、參與者、關係或時間安排，按下「生成圖表」後，頁面才會更新預覽；成功時可複製 Mermaid 程式碼或下載 SVG。這適合把流程或系統關係保留為可修改的文字，也方便放進支援 Mermaid 的文件工作流程。

流程圖的定義會先指出圖表類型，再列出節點和連線。例如 flowchart TD 中，flowchart 宣告流程圖，TD 表示由上往下排列；A[開始] --> B[確認] 則描述兩個節點及其方向。程式碼反映的是你寫下的關係，不會替你判斷流程是否完整或符合實際業務。

內建範例可作為起點，涵蓋流程圖、時序圖、類別圖、甘特圖、圓餅圖及 ER 圖。主題選項為 default、forest、dark、neutral、base，主要改變圖表外觀。Mermaid 官方語法文件指出，圖表宣告與各類圖表語法需要相符；流程圖的節點與連線寫法可參考官方說明。

從範例到可下載圖表

1. 選擇起始範例：在範例清單選擇接近需求的圖表類型，或直接貼上既有 Mermaid 定義。範例只會載入編輯區，不代表預覽已生成。
2. 修改文字定義：依圖表類型調整標籤、節點、連線和資料。使用者介面為繁體中文，但範例內容含簡體中文；可按需要改成台灣常用詞，語法關鍵字則維持 Mermaid 寫法。
3. 設定外觀並生成：選擇主題後按「生成圖表」。每次修改程式碼或主題，都要再次生成，預覽才會反映最新內容。若解析失敗，畫面會顯示錯誤訊息。
4. 檢查與取用：核對文字、方向和關係後，可複製程式碼以便日後編輯，或下載 SVG 放入支援向量圖的文件。重設會回到流程圖範例及預設主題。

除錯時可先縮小定義：保留圖表宣告、一個節點和一條連線，確認能生成後，再逐段加回其他標籤或關係。此作法有助於定位語法問題，但仍須對照所用圖表類型的 Mermaid 語法。

編輯與輸出時常見疑問

預覽呈現不等於內容驗證

成功渲染只表示目前文字能依所用語法生成圖形，並不會檢查商業流程是否正確、時序是否合理、甘特日期是否符合計畫，或 ER 關係是否符合資料需求。正式交付前，請由熟悉內容的人核對每個標籤、方向與關係，並在實際文件環境確認 SVG 顯示效果。

語法可用性會受 Mermaid 版本與圖表類型影響；新加入或特定部署才支援的寫法未必能在此預覽。流程圖中像 end 這類可能被解讀為語法的標籤，也可能造成解析問題，請依官方語法說明調整文字或加上引號。頁面提供程式碼複製和 SVG 下載，不提供 PNG 匯出，也不提供拖曳節點的視覺化編輯。