iT邦幫忙

4

🧠 因為 GPT 與 Notion,我選擇 Mermaid 作為我的流程圖平台

  • 分享至 

  • xImage
  •  

https://ithelp.ithome.com.tw/upload/images/20250616/20155103AszPeYqs35.png

✍️ 選擇圖表工具的契機

在維護排程服務時,我需要將一支 .ashx 的匯出流程視覺化。起初,我使用的是 draw.io,但實際使用後發現:

  • XML 不易閱讀,版本控管困難
  • 匯入失敗時無法追蹤錯誤原因
  • 圖形化編輯雖然直覺,但無法快速複製與重用

在 ChatGPT 的協助下,我接觸到一個新的選項——Mermaid


💡 為什麼最後選擇 Mermaid?

工具 優點 缺點
draw.io 拖拉簡單、圖形多 XML 難維護、匯入失敗時難除錯
Mermaid 純文字維護、版本友善、可嵌入 Notion 初期語法需學習、編輯畫面較陽春

選擇 Mermaid 的關鍵原因是:

  1. 與 Notion、Obsidian 完美整合
    可直接貼上語法呈現,無需圖檔匯入。

  2. 版本控管容易
    每段流程圖都是純文字,可以放進 Git 追蹤。

  3. 與 GPT 搭配極好
    我可以用這樣的 prompt 來快速生成流程圖語法:

   請幫我根據以下邏輯生成 Mermaid flowchart TD 的語法...

🛠 實作案例:.ashx 匯出員工資料的排程流程

這是我實際維護的任務,其中包含模擬登入、查詢資料、比對昨日筆數、判斷是否寫入等邏輯。我最終將邏輯簡化為這份流程圖:

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

這段圖示不只幫助我快速理解流程,也能貼進文件中與團隊成員即時協作。

🤖 推薦問 GPT 的語法

若你也想導入 Mermaid,可以直接這樣問:

請幫我把這段流程邏輯用 Mermaid flowchart TD 畫出來,節點包含:開始 → 檢查 → 處理 → 結束。

或更進階:

我有一段 C# 的排程邏輯,請幫我萃取出主要流程,轉換成 mermaid 流程圖。

圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

1
owan
iT邦高手 1 級 ‧ 2025-06-17 12:01:06

我是兩套都在使用
雖然 draw.io 跟 mermaid 都是畫圖
但面向的目標並不同
就好像小畫家跟 photoshop 做對比一樣

還是會根據需求採用對應的 tool

1
海綿寶寶
iT邦大神 1 級 ‧ 2025-06-19 21:35:33

幫你把圖貼出來
可能更有說服力

https://ithelp.ithome.com.tw/upload/images/20250619/20001787VZw8IczijL.png

我要留言

立即登入留言