昨天把官方的兩份指令貼進 Claude Project，也看懂了它的運作邏輯：選格式、用 Python 算出網址、再用 HTML 把連結送出去。今天實際產圖，看看這條路徑最後交到手上的東西長什麼樣，並整理它的優點與限制。

第四次使用同一段登入流程

沿用前三次的同一段需求：「AI 客服智慧退換貨流程說明」中的電商購物網站登入子流程。四次測試都用同一份輸入，差異才會落在呈現方式上。

不過這次的下法和前三次不一樣。前三次我都在句首寫明要用哪一種整合方式——「請使用 draw.io MCP App Server」「請使用 draw.io MCP Tool Server」「請使用 draw.io 外掛」——因為那三種都是外接的工具，需要點名它。

Project Instructions 沒有工具可以點名。指令已經寫在專案設定裡，Claude 進到這個 Project 就已經知道該怎麼做，所以我直接把需求講完就好：

請將以下內容繪製成由上往下的流程圖：

流程名稱：電商購物網站登入

流程步驟：
1. 會員進入電商購物網站登入頁。
2. 會員輸入會員帳號與密碼。
3. 會員按下登入。
4. 系統檢查欄位格式是否正確。
5. 若欄位格式不正確，顯示錯誤訊息，提示會員重新輸入。
6. 若欄位格式正確，系統繼續檢查帳號密碼是否正確。
7. 若帳號密碼不正確，顯示錯誤訊息，並返回輸入帳號密碼步驟。
8. 若帳號密碼正確，會員進入首頁，流程結束。

請使用菱形表示判斷節點，並在判斷連線上標示「是」與「否」。

交到手上的不是圖，是一個按鈕

前三種方式產完圖，得到的東西各不相同：App Server 是對話裡的一張圖，Tool Server 是自動開啟的瀏覽器分頁，Assistant Plugins 是專案目錄裡的一個檔案。

Project Instructions 又是另一種：Claude 執行完 Python 後，產生一個 HTML 產出物，裡面是一顆按鈕，點下去才會開啟 draw.io。

昨天已經說明過為什麼要繞這一圈——官方指令明文禁止 Claude 把網址打進回覆，怕重打時弄壞那串 base64。所以按鈕不是為了好看，是為了讓網址完全不經過 Claude 的文字生成。

實際使用起來，這代表多了一個步驟：產圖之後不會看到圖，要先點按鈕、開新分頁，才看得到結果。

檢查點還是那三個：兩個判斷節點在不在、是／否標示對不對、兩條錯誤路徑有沒有正確回到「輸入會員帳號與密碼」。四次測試都用同一組標準。

Project Instructions 的優點與限制

走過設定與產圖後，優點：

• 設定門檻是四種裡最低的，不裝套件、不改設定檔、不裝外掛，複製貼上就結束。
• 在不能安裝東西的環境也能用——公司電腦不給裝 npm 套件、不給改設定檔的情況，這是唯一還走得通的做法。
• 和 Tool Server 一樣支援 Mermaid、CSV、XML 三種輸入格式。
• 貼在 Claude Project 裡，同一個 Project 的所有對話都適用，也能和上傳到 Project 的流程文件一起使用。

限制：

• 官方標示這是 Claude.ai 搭配 Projects 的做法，不能在 Claude Code、Codex CLI 等環境使用。
• 圖表不會出現在對話中，也不會自動開啟，要多點一次按鈕。
• 專案指令欄位被這兩份文件佔掉一大塊，同一個 Project 若還有其他用途的指令，要考慮空間與互相干擾。

今天完成了什麼

到這裡，Project Instructions 走完了一輪：貼上指令、直接下需求、拿到一顆按鈕、點開看圖。

四種整合方式到今天全部測完了。明天把它們放在一起做總結，比較設定方式、圖表呈現與產出物的差異，並說明我最後為什麼選了其中一種。