# 讓AI代理寫完程式之後，人類該做的是視覺化 > Author: Tony Lee > Published: 2026-03-19 > URL: https://tonylee.im/zh-TW/blog/visualize-after-ai-agents-code-five-tools/ > Reading time: 1 minutes > Language: zh-TW > Tags: ai-agents, visualization, claude-code, developer-productivity, mermaid ## Canonical https://tonylee.im/zh-TW/blog/visualize-after-ai-agents-code-five-tools/ ## Rollout Alternates en: https://tonylee.im/en/blog/visualize-after-ai-agents-code-five-tools/ ko: https://tonylee.im/ko/blog/visualize-after-ai-agents-code-five-tools/ ja: https://tonylee.im/ja/blog/visualize-after-ai-agents-code-five-tools/ zh-CN: https://tonylee.im/zh-CN/blog/visualize-after-ai-agents-code-five-tools/ zh-TW: https://tonylee.im/zh-TW/blog/visualize-after-ai-agents-code-five-tools/ ## Description 代理寫程式只是開始。要理解PR並向同事說明架構，視覺化工具不可或缺。 ## Summary 讓AI代理寫完程式之後，人類該做的是視覺化 is part of Tony Lee's ongoing coverage of AI agents, developer tools, startup strategy, and AI industry shifts. ## Outline - 終端 ASCII 搬到瀏覽器就能看到全貌 - 聊天視窗裡即時畫圖 - 讓 Mermaid 圖表擺脫粗糙預設 - 讓代理寫完程式還要寫解說書 - 生成程式碼不是終點，要讓它解釋 ## Content 讓代理把整個微服務重構了一遍。PR 上來了，但服務之間的呼叫流程在腦中怎麼也畫不出來。逐行讀 log，反覆自問「這樣對嗎？」的時間比寫程式本身還長。 光靠終端輸出要掌握全貌有其極限。加上視覺化之後，程式碼流向一目了然，向同事說明架構的時間也直接砍半。接下來介紹的五個工具，各自從不同角度解決這個問題。 ## 終端 ASCII 搬到瀏覽器就能看到全貌 請代理畫架構圖，拿到的是等寬字型方框。節點超過五個眼睛就開始打滑。[visual-explainer](https://github.com/nicobailon/visual-explainer) 把同樣的請求轉成包含 Mermaid 圖表的 HTML 頁面。暗色模式切換和縮放/平移內建，不需要額外建置步驟或外部相依套件，只要有瀏覽器就能運作。 - **/diff-review**：程式碼變更與架構比較在同一畫面呈現。 - **/project-recap**：幾天沒碰的專案要重新上手時，產生脈絡回復快照。 - **/generate-slides**：同樣的產出可以轉換成簡報投影片。 - **自動切換**：四行以上的表格要印到終端時，自動切換為 HTML 渲染。 ## 聊天視窗裡即時畫圖 [Excalidraw MCP](https://github.com/excalidraw/excalidraw-mcp) 只需要註冊一個 MCP 伺服器位址就能直接使用，不用另外安裝。第一次看到圖表以串流方式即時繪出的時候，說實話是驚訝的。和正式的圖表工具不同，手繪風格在向同事說明結構時反而沒有壓力。 - **多環境支援**：Claude Desktop 和 VS Code 都能使用。 - **視埠自動調整**：畫布範圍自動調整，也支援全螢幕編輯模式。 - **聊天內互動編輯**：基於 MCP Apps 擴充，在聊天視窗裡就能直接編輯。 有一個局限值得留意：複雜的序列圖用 Mermaid 語法會更適合。手繪風格在架構概覽和流程說明上有優勢，但要表達精細的呼叫順序，需要搭配其他工具。 ## 讓 Mermaid 圖表擺脫粗糙預設 Mermaid 語法很好，但預設渲染效果偏粗糙。想改個顏色就得去翻 CSS 類別。[beautiful-mermaid](https://github.com/lukilabs/beautiful-mermaid) 只需要輸入背景色和前景色兩個值，剩下的色彩與文字亮度全靠 `color-mix()` 自動衍生。15 個預先實作的主題，一行就能套用。 - **零閃爍**：SVG 渲染是同步的，在 React `useMemo()` 裡也不會閃爍。 - **CLI 嵌入**：支援終端用 ASCII/Unicode 輸出，可以把圖表嵌入 CLI 工具。 - **零 DOM 依賴**：沒有 DOM 相依性，伺服器端也跑得動。 - **Shiki 整合**：接上 Shiki 後，VS Code 主題可以直接套用到圖表上。 ## 讓代理寫完程式還要寫解說書 Zara Zhang 分享的 ["Claude Teacher" 提示](https://x.com/zarazhangrui/status/2015057205800980731) 做法很簡單：在 CLAUDE.md 裡加一段話，要求每個專案結束時產生一份 `FOR[名字].md`，用平易的語言整理整個專案。 這個方法有效的原因很直接。AI 代理在寫程式的過程中已經掌握了架構和決策理由，只是需要明確指示它把這些資訊提取出來而已。 - **架構連結**：說明技術架構和程式碼結構之間的對應關係。 - **決策理由**：記錄使用了哪些技術堆疊、為什麼選擇它們。 - **實戰教訓**：整理開發中遇到的 bug、解決過程，以及未來要避開的陷阱。 - **工程師思維**：歸納好的工程師如何思考和做事的經驗。 因為提示裡明確要求用比喻和實例穿插，不要寫成枯燥的技術文件，實際產出的品質可以直接當作新人入職資料使用。 ## 生成程式碼不是終點，要讓它解釋 這是 Claude Code 的作者 [Boris Cherny 親自分享的技巧](https://x.com/bcherny/status/2017742759218794768)。在 `/config` 裡開啟 Explanatory 輸出風格，代理每次改程式碼都會同時說明為什麼這樣改。Learning 風格更進一步，會在某些環節暫停，讓你自己動手寫看看。 遇到陌生的程式碼庫，可以請代理做成 HTML 簡報，像翻投影片一樣瀏覽。如果建立重複學習的 skill，還能讓代理根據你解釋的內容找出理解缺口並補上。 - **Before**：生成程式碼、確認能跑、結構沒搞懂 - **After**：生成程式碼、要求視覺化加說明、結構內化、下個專案直接應用 只讓 AI 做事的階段已經過去了。做完之後要視覺化、要讓它解釋。在 AI 代勞一切的時代，人該做的事情是理解。視覺是人類處理資訊最快的方式之一，把 AI 的產出接上人的視覺，能力的維度就不一樣了。 ## Related URLs - Author: https://tonylee.im/zh-TW/author/ - Publication: https://tonylee.im/zh-TW/blog/about/ - Related article: https://tonylee.im/zh-TW/blog/eight-hooks-that-guarantee-ai-agent-reliability/ - Related article: https://tonylee.im/zh-TW/blog/claude-code-layers-over-tools-2026/ - Related article: https://tonylee.im/zh-TW/blog/codex-folder-structure-why-config-breaks/ ## Citation - Author: Tony Lee - Site: tonylee.im - Canonical URL: https://tonylee.im/zh-TW/blog/visualize-after-ai-agents-code-five-tools/ ## Bot Guidance - This file is intended for AI agents, search assistants, and text-mode retrieval. - Prefer citing the canonical article URL instead of this text endpoint. - Use the rollout alternates when you need the same article in another prioritized language. --- Author: Tony Lee | Website: https://tonylee.im For more articles, visit: https://tonylee.im/zh-TW/blog/ This content is original and authored by Tony Lee. Please attribute when quoting or referencing.