# 让AI代理写完代码之后，人类该做的是可视化 > Author: Tony Lee > Published: 2026-03-19 > URL: https://tonylee.im/zh-CN/blog/visualize-after-ai-agents-code-five-tools/ > Reading time: 1 minutes > Language: zh-CN > Tags: ai-agents, visualization, claude-code, developer-productivity, mermaid ## Canonical https://tonylee.im/zh-CN/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图表摆脱粗糙的默认样式 - 让agent写完代码还要写解说 - 生成代码不是终点，要让它解释清楚 ## Content 让agent把整个微服务重构了一遍。PR提上来了，但服务之间的调用链路在脑子里怎么也串不起来。逐行翻日志确认"这里到底对不对"的时间，比写代码本身还长。 光靠终端输出想把握全局，确实勉强。加上可视化之后，代码流转一目了然，给同事讲架构的时间也直接砍半。下面介绍的五个工具，分别从不同角度解决这个问题。 ## 把终端ASCII搬到浏览器，全局图就清晰了 让agent画架构图，出来的是等宽字体拼的方框。节点超过五个，眼睛就开始打滑。[visual-explainer](https://github.com/nicobailon/visual-explainer)做的事情是把同样的请求转成带Mermaid图表的HTML页面。暗色模式、缩放和平移都是内置的，不需要构建步骤，也没有外部依赖，浏览器打开就能用。 - **/diff-review**: 代码变更和架构对比在同一个画面里输出，不用来回切窗口。 - **/project-recap**: 几天没碰的项目要接手回来，生成一份上下文恢复快照，省掉重新理清脉络的时间。 - **/generate-slides**: 同样的内容可以转成幻灯片，直接拿去做技术分享。 - **自动切换**: 4行以上的表格要在终端里渲染时，会自动切换到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输出，可以直接内嵌到命令行工具里。 - **零DOM依赖**: 没有DOM依赖，服务端环境也能跑。 - **编辑器主题联动**: 通过Shiki集成，VS Code的主题配色可以直接应用到图表上。 ## 让agent写完代码还要写解说 Zara Zhang分享的["Claude Teacher"提示词](https://x.com/zarazhangrui/status/2015057205800980731)是一个很巧妙的做法: 在CLAUDE.md里加一段指令，让agent在每个项目结束时生成一份`FOR[名字].md`文件，用通俗的语言把整个项目梳理一遍。 这个方法之所以有效，道理并不复杂。AI代理在写代码的过程中，已经掌握了架构设计和每个决策背后的原因。我们只是把这些信息显式地要求它输出而已。 - **架构关联**: 解释技术架构和代码结构之间的对应关系。 - **决策理由**: 记录用了哪些技术栈，以及为什么选择它们。 - **实战经验**: 整理开发过程中遇到的bug、排查路径和需要避开的坑。 - **工程思维**: 提炼优秀工程师的思考方式和工作习惯。 因为指令里明确要求用比喻和故事来写，而不是干巴巴的技术文档，所以实际产出可以直接当作新人入职材料。 ## 生成代码不是终点，要让它解释清楚 这条建议来自Claude Code的作者[Boris Cherny本人](https://x.com/bcherny/status/2017742759218794768)。在`/config`中开启Explanatory输出风格，agent每次改代码时都会附带解释为什么这么改。Learning风格更进一步，会在某些环节暂停下来，让你自己动手写。 对于不熟悉的代码库，可以让agent生成HTML幻灯片，像翻演示文稿一样快速浏览整体结构。如果做一个重复学习的skill，还能形成"你讲一遍，它帮你补盲区"的循环。 - **Before**: 生成代码，确认能跑，但不理解结构 - **After**: 生成代码，请求可视化和解释，掌握结构，下个项目直接复用 只让AI干活的阶段已经过去了。要让它可视化，让它解释。在AI替你完成越来越多工作的趋势下，人真正该做的事情是理解。视觉是人类处理信息最快的通道之一，把AI的输出接入人类的视觉系统，能力的维度会完全不同。 ## Related URLs - Author: https://tonylee.im/zh-CN/author/ - Publication: https://tonylee.im/zh-CN/blog/about/ - Related article: https://tonylee.im/zh-CN/blog/eight-hooks-that-guarantee-ai-agent-reliability/ - Related article: https://tonylee.im/zh-CN/blog/claude-code-layers-over-tools-2026/ - Related article: https://tonylee.im/zh-CN/blog/codex-folder-structure-why-config-breaks/ ## Citation - Author: Tony Lee - Site: tonylee.im - Canonical URL: https://tonylee.im/zh-CN/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-CN/blog/ This content is original and authored by Tony Lee. Please attribute when quoting or referencing.