# AI代理寫完代碼之後，人類要做的是視覺化

> Author: Tony Lee
> Published: 2026-03-19
> URL: https://tonylee.im/zh-HK/blog/visualize-after-ai-agents-code-five-tools/
> Reading time: 1 minutes
> Language: zh-HK
> Tags: ai-agents, visualization, claude-code, developer-productivity, mermaid

## Canonical

https://tonylee.im/zh-HK/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 依賴，伺服器端也能運行。
- **編輯器主題聯動**: 透過 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 簡報，像瀏覽演示文稿一樣快速掌握。建立反覆學習技能後，還能形成一種結構：你先解釋自己的理解，再由代理填補空白。

- **Before**: 生成程式碼、確認運作、但不理解結構
- **After**: 生成程式碼、請求視覺化加解釋、掌握結構、應用到下一個專案

讓 AI 代理只管做事的階段已經過去了。做完之後，還要讓它視覺化並加以解釋。在 AI 代替一切的時代，人類該做的事是理解。視覺是人類處理資訊最快的方式之一，把人類的視覺能力疊加在 AI 之上，能力的維度就截然不同了。

## Related URLs

- Author: https://tonylee.im/en/author/
- Publication: https://tonylee.im/en/blog/about/
- Related article: https://tonylee.im/zh-HK/blog/eight-hooks-that-guarantee-ai-agent-reliability/
- Related article: https://tonylee.im/zh-HK/blog/claude-code-layers-over-tools-2026/
- Related article: https://tonylee.im/zh-HK/blog/codex-folder-structure-why-config-breaks/

## Citation

- Author: Tony Lee
- Site: tonylee.im
- Canonical URL: https://tonylee.im/zh-HK/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-HK/blog/
This content is original and authored by Tony Lee. Please attribute when quoting or referencing.