在維護排程服務時,我需要將一支 .ashx
的匯出流程視覺化。起初,我使用的是 draw.io,但實際使用後發現:
在 ChatGPT 的協助下,我接觸到一個新的選項——Mermaid。
工具 | 優點 | 缺點 |
---|---|---|
draw.io | 拖拉簡單、圖形多 | XML 難維護、匯入失敗時難除錯 |
Mermaid | 純文字維護、版本友善、可嵌入 Notion | 初期語法需學習、編輯畫面較陽春 |
選擇 Mermaid 的關鍵原因是:
與 Notion、Obsidian 完美整合
可直接貼上語法呈現,無需圖檔匯入。
版本控管容易
每段流程圖都是純文字,可以放進 Git 追蹤。
與 GPT 搭配極好
我可以用這樣的 prompt 來快速生成流程圖語法:
請幫我根據以下邏輯生成 Mermaid flowchart TD 的語法...
這是我實際維護的任務,其中包含模擬登入、查詢資料、比對昨日筆數、判斷是否寫入等邏輯。我最終將邏輯簡化為這份流程圖:
flowchart TD
Start([開始 ProcessRequest])
GetData[查詢 DBList.KL 員工資料]
NoData[無資料 - HandleFailure]
CheckLock[檢查 lock 檔存在?]
LockExists[❌ 有其他程序 - HandleFailure]
WriteEmp[寫入 emp.txt]
ReadYesterday[讀昨日 emp_YYYYMMDD.txt 筆數]
CountCompare[筆數差異 ≥ 10?]
WarnDiff[⚠️ 差異過大 - HandleResult 不覆寫]
WriteToday[寫入 emp_YYYYMMDD.txt]
FileCheck[檢查 emp.txt 是否成功寫入?]
WriteSuccess[✅ HandleResult:成功,紀錄筆數與大小]
WriteFail[❌ HandleFailure:找不到檔案]
RemoveLock[刪除 lock 檔]
End([結束])
Start --> GetData
GetData -->|無資料| NoData --> RemoveLock --> End
GetData -->|有資料| CheckLock
CheckLock -->|是| LockExists --> RemoveLock --> End
CheckLock -->|否| WriteEmp --> ReadYesterday --> CountCompare
CountCompare -->|差異過大| WarnDiff --> RemoveLock --> End
CountCompare -->|正常| WriteToday --> FileCheck
FileCheck -->|存在| WriteSuccess --> RemoveLock --> End
FileCheck -->|不存在| WriteFail --> RemoveLock --> End
這段圖示不只幫助我快速理解流程,也能貼進文件中與團隊成員即時協作。
若你也想導入 Mermaid,可以直接這樣問:
請幫我把這段流程邏輯用 Mermaid flowchart TD 畫出來,節點包含:開始 → 檢查 → 處理 → 結束。
或更進階:
我有一段 C# 的排程邏輯,請幫我萃取出主要流程,轉換成 mermaid 流程圖。
我是兩套都在使用
雖然 draw.io 跟 mermaid 都是畫圖
但面向的目標並不同
就好像小畫家跟 photoshop 做對比一樣
還是會根據需求採用對應的 tool