Claude 流程圖教學：互動圖解與方案比較

Claude 可以把流程圖做成可點選的互動圖解。先整理階段與關係，請它用 HTML、SVG 畫出靜態版，再加上逐段說明或方案切換。做完要確認的，不只是按鈕能不能按，而是觀眾是否更容易看懂。

先看作品，再挑兩頁跟做

企業工作坊提案｜八頁完整示範

開啟完整總覽 G ↗試第 4 頁互動流程試第 5 頁方案比較

下載可修改的 HTML　／　八頁靜態 PDFPDF 是靜態圖像備用檔，不是可編輯簡報，不保留互動。

先開啟上方的八頁「企業工作坊提案」。按 G 看整份總覽，再試第 4 頁的流程選取、第 5 頁的方案比較：流程名稱一直看得到，需要核對條件時，也能切回完整比較。

接著，我們就挑這兩頁來做。整份簡報不用每頁都互動；封面、問題和結論留得乾淨，關鍵頁的操作才有意義。

第一步決定這頁要說清楚的關係

這份提案要讓窗口理解合作怎麼進行，再選擇適合的安排。先把兩頁各寫成一個問題：

• 流程頁：從確認需求到課後回饋，對方在哪些階段需要參與？
• 比較頁：選講座或實作工作坊，會前、現場與會後有什麼不同？

有先後順序，用流程；需要做選擇，用比較。如果只要交代一句結論，大字配一張合適的圖片就可能足夠，不必另外設計操作。

這份示範的聽眾是培訓窗口。對方最需要判斷的，是「合作怎麼進行」和「哪種安排比較適合」，所以我沒有把提案做成每頁都能點的展示台。

第二步先畫靜態流程圖，排出主次

先把四個階段列給 Claude：確認需求 → 示範 → 實作 → 回饋，每段各補一句說明。請它先畫路徑，暫時不加按鈕；不要一開始就要求「做得很炫」。

先看得懂，再處理風格

我會先看主張是否最先被注意到、順序能不能一眼讀懂，再調整線條、留白與圖示。階段名稱用同一層級，補充文字小一級，詳細說明留給講者或下一步的說明區。不要把四段文字各裝進大框，再往裡面塞小框。

SVG 是能放進 HTML 的向量圖形，適合畫線條、箭頭與圖解，放大後仍能保持清楚。Claude 可以協助製作這類圖解與互動視覺；照片、插畫則是另一種素材用途。Claude 官方說明

【情境敘述】
- 我附上現有的 HTML 簡報，要向［聽眾］說明［主題］。
- 第［頁碼］頁要讓對方理解［一個流程或關係］。
- 可用內容：［貼上已確認的階段、順序與短說明］。

【任務講解】
- 先做這一頁的靜態圖解，暫時不要加動畫或按鈕。
- 用位置、連線或分組表現關係，留下主要名稱與必要短註記。
- 指出哪些細節適合口頭補充；關係不清楚或缺資料時先問我。

【格式補充】
- 沿用現有簡報的比例、字型與配色，使用台灣繁體中文。
- 以原生圖形或 SVG 製作，保留可讀取文字，不把整頁變成一張圖片。
- 只改指定頁，保留其他頁與播放功能，交回完整 HTML。

靜態流程圖：四個階段先排清楚

第三步加入逐段說明，保留流程全貌

靜態版確認後，再請 Claude 加上階段選取。四個名稱和路徑一直留著，選到哪一段就強調哪一段，說明則在固定位置替換。

例如，選「確認需求」時顯示「先確認聽眾正在處理的工作」；選「實作」時換成「拿自己的工作材料，完成一版草稿」。切換後只留當前說明，畫面不會愈按愈長。

把圖內操作和投影片翻頁分開

圖內用「上一個階段」「下一個階段」和「看完整流程」，投影片則維持原有翻頁與總覽。名稱、位置要能分辨；按鈕也不要跟著說明文字上下跳動。

動態只需要讓觀眾看出目前位置和內容變化。先試試一個強調色、清楚的外框與短暫轉場，不必讓整張圖重新飛入。

【情境敘述】
- 沿用剛才確認的［流程頁］，讓講者能逐段說明。
- 階段與說明：［每個階段各寫一句已確認的內容］。

【任務講解】
- 所有階段名稱與連線保持可見；點選階段時，強調目前位置。
- 在固定說明區顯示該階段內容，切換時替換舊內容，不持續新增區塊。
- 加上「上一個階段」「下一個階段」和「看完整流程」，能返回與重選。

【格式補充】
- 沿用靜態版的字級與構圖，不把文字縮小來塞內容。
- 手機可點選，鍵盤能用 Tab 選取、Enter 操作，不依賴滑鼠移入。
- 控制項只影響這張圖，保留投影片翻頁與總覽，交回完整 HTML。

選取「實作」：保留其他階段與路徑

看完整流程：一次核對四段說明

先在第 4 頁點「實作」，再按「上一個階段」回到示範。順序不必重播一次，說明區也不會愈按愈長，這就是互動應該幫上的忙。

第四步比較方案，讓差異出現在同一位置

接著比較「講座」與「實作工作坊」。先整理真實條件，兩種方案都用會前、現場、會後三個面向：

換成自己的服務時，填入實際能提供的內容，價格、人數與交付條件另依已確認資料說明。

切換方案時，三個面向的位置保持不變，只更新各自內容；共同條件留著，真正不同的地方再用線條或短標記強調。講解時就能回到選擇本身：對方需要先理解方法，還是希望現場把材料改出一版？

【情境敘述】
- 這頁比較［方案 A］與［方案 B］，讓［聽眾］判斷［要做的選擇］。
- 比較資料：［貼上各面向的實際內容與共同條件］。

【任務講解】
- 兩個方案使用相同的比較面向，切換時讓差異出現在相同位置。
- 保留共同條件，只強調有變化的內容，不增加未提供的價格或成果。
- 提供明確的方案名稱，以及能同時看見兩者差異的「看完整比較」。

【格式補充】
- 主張、方案切換和比較內容分清層級，沿用現有視覺風格。
- 點選與鍵盤都能操作，不靠顏色單獨表示目前選項。
- 只改這頁，保留其他操作，交回完整 HTML。

實作工作坊：集中看一個安排

看完整比較：把兩個方案放回一起核對

第 5 頁可以先選「講座」或「實作工作坊」集中講解，再按「看完整比較」並列核對。會前、現場、會後的順序不變，聽眾才不用重新找資料。不要為了做互動，把原本能一起核對的條件全部藏起來。

第五步修好操作，再換上你的資料

每輪修改後另存一個版本，用瀏覽器重新開啟完整 HTML。不要只順著按完：試著跳到中間、往回走、快速切換，再按 G 回整份總覽。手機上也開一次，確認流程不只是被縮成一條很小的橫線。

出現這些問題，先改哪裡

• 愈按愈長：說明被持續加在下面。改成固定區域替換內容，保留流程位置。
• 切換卻看不出差別：先核對資料是否真的不同，再固定比較面向與位置；沒有差異就不用硬做切換。
• 點圖解時也翻頁：把操作及發生的結果告訴 Claude，請它只修這頁的控制範圍。
• 手機上字太小：改成垂直流程或上下排列，保留字級和點選空間，不只等比例縮小。

【情境敘述】
- 第［頁碼］頁的［圖解／方案比較］需要修正。
- 我做了［操作］，出現［問題］；希望應該是［正確結果］。

【任務講解】
- 先指出可能原因，只處理這個問題。
- 保留［主要內容、版面與必須維持的功能］；要改其他部分時先說明。
- 修正後列出我可以照做的檢查動作。

【格式補充】
- 交回完整 HTML，不只是一小段程式碼。
- 其他頁、原有翻頁與總覽維持不變。

用一頁自己的內容練習

挑一份服務說明、專案流程或課程安排，先只改一頁：

1. 寫下要讓誰看懂什麼，把必要的順序或比較條件列齊。
2. 做出不操作也看得懂的靜態版，再選一種需要的互動。
3. 完成後問自己：操作之後，多理解了什麼？被打斷時，能回到原來的位置嗎？

完成標準可以直接參考示範第 7 頁的三個檢查：看得懂、講得清、回得去。如果改完只多了動態，卻沒有讓關係更清楚，就先退回靜態版調整。

Claude 流程圖與互動圖解常見問題

把圖解放回簡報，檢查講解節奏

一張流程圖要讓人知道事情怎麼往下走，一張比較圖要讓人理解選擇之後有什麼不同。我在這份提案裡刻意只讓關鍵頁互動，其餘頁面負責把問題和結論講清楚。整份看起來有節奏，比每頁都能按更重要。

把關鍵頁放回整份簡報後，可以接著檢查 HTML 簡報的單頁修改與交付步驟。想繼續練習內容、版面與表達，也可以參考 AI 加速的 Canva 實戰課。