教材插圖版模板¶

這份模板不是正式教材章節，而是提供你之後替各章補「逐步操作截圖說明」時的統一格式。

這份模板怎麼用¶

當你要替某一章補步驟圖時，不要直接隨手插圖。
先複製這個結構，再把章節名稱、步驟、圖檔與圖說換成該章內容。

建議每個需要操作圖的章節，都至少有：

操作目標
節點清單
步驟
對應截圖
常見錯誤

操作目標¶

這一段先寫清楚：

你要做出什麼
做完後會看到什麼結果
這一段最容易卡在哪裡

範例：

本段要完成第一條 `Manual Trigger + Set` workflow。做完後你應該能看到 1 筆 item 與 3 個欄位輸出。最容易卡住的地方是找不到 `Set` 節點，以及不知道 output 在哪裡看。

節點清單¶

1. Manual Trigger
2. Set
3. Respond to Webhook

如果有 workflow JSON，也放在這裡：

對應範例 JSON：
- [workflow JSON 範例包/12-manual-trigger-set-first-workflow.json](workflows/12-manual-trigger-set-first-workflow.json)

Step 1. 新增節點¶

文字說明：

在 workflow 畫布按 `+`，搜尋 `Set`，把它接在 `Manual Trigger` 後面。

插圖：

> 圖片預留：`step-01-add-set-node.png`

圖 1：從節點搜尋區加入 `Set` 節點。

Step 2. 填欄位¶

文字說明：

在 `Set` 節點中新增 `name`、`topic`、`createdAt` 三個欄位。

插圖：

> 圖片預留：`step-02-fill-set-fields.png`

圖 2：`Set` 節點欄位填寫完成的畫面。

Step 3. 執行並查看結果¶

文字說明：

按 `Execute workflow`，查看右側 output 是否出現 1 筆 item。

插圖：

> 圖片預留：`step-03-check-output.png`

圖 3：執行後在右側 output 看到 3 個欄位。

常見錯誤¶

這一段建議固定寫 2 到 4 個最常見錯誤。

範例：

1. 找不到節點¶

可能原因： - 打錯關鍵字 - 還不熟節點分類

2. 執行後沒看到 output¶

可能原因： - 沒有真的按下 Execute workflow - 看錯節點 output

3. expression 沒有生效¶

可能原因： - 忘了用 {{ }} 包起來 - 寫錯欄位名稱

想一想¶

當一個教學章節開始放截圖時，你不是只是補插圖，而是在決定讀者要怎麼走過這個介面。好的步驟圖不只是「這裡長怎樣」，而是要幫讀者知道「下一步做什麼、做對了會看到什麼、做錯了通常會卡在哪裡」。如果你只貼畫面不講判斷點，讀者還是會迷路；如果你只講文字不給畫面，讀者又可能找不到位置。所以最好的做法，是每一步都同時給三樣東西：操作動作、畫面位置、完成判斷。

你之後替教材補圖時，可以用一個簡單標準檢查：這張圖有沒有幫讀者更快找到按鈕、欄位、結果，或錯誤？如果沒有，那它可能只是裝飾；如果有，它才是真正有教學價值的圖。