iT邦幫忙

鐵人檔案

2026 iThome 鐵人賽
回列表
自我挑戰組

用 AI + draw.io MCP 建立可重複使用的流程圖工作流 系列

本系列從實務上的流程圖痛點出發,探討需求反覆變動時,Mermaid、draw.io 手動繪圖與 AI 產圖各自面臨的限制。接著導入 draw.io MCP,搭配結構化需求文件、繪圖規格與 Skill,逐步建立一套可重複使用的 AI 繪圖工作流。全系列將以同一案例進行產圖、局部修改與不同圖表實測,不只展示 AI 能否畫圖,也著重於如何讓產出更穩定、可控且便於維護。

參賽天數 23 天 | 共 23 篇文章 | 3 人訂閱 訂閱系列文 RSS系列文
DAY 1

Day 1|AI 真的會畫流程圖嗎?我想把它變成一套可重複的工作流

「畫得出來」,不代表「能拿來工作」 近幾年,只要把需求交給 AI,幾乎都能得到相對應不錯的產出,畫流程圖當然也不例外。第一次看見 AI 能快速完成一張圖時,確實...

2026-08-03 ‧ 由 n620970v11 分享
DAY 2

# Day 2|當需求反覆變動時,改圖成本不容忽視

畫流程圖真正花時間的地方,通常不在第一次畫,而在後面的每一次改。 需求很少一次就定案 每當提出新需求,或既有功能需要調整時,通常需要與 BU 經過多次討論,逐步...

2026-08-04 ‧ 由 n620970v11 分享
DAY 3

# Day 3|從手動操作 draw.io 到 AI 產圖,改圖成本真的降低了嗎?

使用 Mermaid 時,我發現版面很難依照預期精確調整。再加上流程圖需要提供給團隊成員與 BU 共同檢視及討論,因此最後仍回到較熟悉的 draw.io。dra...

2026-08-05 ‧ 由 n620970v11 分享
DAY 4

# Day 4|這次要畫什麼?以 AI 客服智慧退貨流程為例

前三天整理了使用 Mermaid、draw.io 與 AI 繪製流程圖時遇到的問題。從今天開始,我會帶入一個案例,作為後續產圖、修改與建立工作流時共同使用的示範...

2026-08-06 ‧ 由 n620970v11 分享
DAY 5

# Day 5|MCP 是什麼?AI 如何透過它使用外部工具

昨天介紹的退貨案例中,AI 智慧客服需要查詢會員訂單,並建立退貨單與退款申請。這些資料來自訂單系統與金流系統,AI 無法只靠對話內容取得,更不能自行假設查詢結果...

2026-08-07 ‧ 由 n620970v11 分享
DAY 6

# Day 6|draw.io MCP 能做什麼?讓產圖與編輯接在一起

前面提到,直接請 AI 產生 draw.io 圖檔時,通常還要下載檔案,再開啟 draw.io 匯入及檢查。draw.io MCP Tool Server 則把...

2026-08-08 ‧ 由 n620970v11 分享
DAY 7

# Day 7|draw.io 與 AI 有哪些整合方式?四種做法快速總覽

昨天介紹的 MCP Tool Server,可以讓 AI 產圖後直接開啟 draw.io。不過,這只是官方專案提供的其中一種做法,依照工作環境與圖表呈現位置,還...

2026-08-09 ‧ 由 n620970v11 分享
DAY 8

# Day 8|MCP App Server(上):認識對話內產圖,並在 Claude.ai 完成設定

昨天整理了 draw.io 官方提供的四種 AI 整合方式。從今天開始,我會依序實測這四種方式,每種方式分成上下兩篇:上篇說明運作方式與設定步驟,下篇再用相同的...

2026-08-10 ‧ 由 n620970v11 分享
DAY 9

# Day 9|MCP App Server(下):實測產圖結果、優點限制與適用情境

昨天已經把 draw.io 官方託管的 MCP App Server,以自訂 Connector 的方式加入 Claude.ai。今天接著實際產圖,檢查圖表在對...

2026-08-11 ‧ 由 n620970v11 分享
DAY 10

# Day 10|MCP Tool Server(上):在 Claude Code 完成設定

昨天在 Claude.ai 完成了 MCP App Server 的設定與產圖測試,也看到圖表如何直接顯示在對話中。今天接著介紹第二種做法:MCP Tool S...

2026-08-12 ‧ 由 n620970v11 分享