需要用户理解当前话题时：按最小视图用伪代码、树…

当需要可视化解释当前对话主题、代码结构或变更时，选最小视图让关键点清晰。

适用场景

解决思路

1. 跳过前言，保持文字简短。
2. 选择能让关键点清晰的最小视图。
3. 用伪代码展示逻辑或算法。
4. 用调用树展示运行时控制流。
5. 用组件树展示 UI 结构，并包含重要的状态和模块边界。
6. 用浅层文件树展示文件职责或大范围重构。
7. 用 Mermaid 展示组件交互、控制流或数据流。
8. 当重点是“什么发生变化”且周围结构已存在时，用 diff；让 diff 的形状匹配主题。
9. 对组件变更，用 diff 展示组件树变更。
10. 对文件布局变更，用 diff 展示文件树变更。
11. 对调用树或调用栈变更，用 diff 展示调用树变更。
12. 对状态或控制流变更，用 diff 展示状态或控制流变更。
13. 当大部分内容都是新的、省略上下文会隐藏归属或顺序、或用户需要可复制的目标形状时，展示完整代码块。
14. 对视觉 UI、布局、状态对比，或 Mermaid 太密的概念，写一个聚焦的 HTML 文件——图、信息图或短 slide deck，哪种适合就用哪种。
15. 写 HTML 时匹配产品的颜色、字体、间距和组件；使用真实标签和数据；支持桌面和移动端。
16. 然后为用户打开它：Bash(open path/to/show-me-{description}.html)
17. 将每个视觉放在它所支持的简短文本旁边。
18. 只保留回答用户当前问题、或解决当前讨论点所需选项中的调用、文件、props、状态和边界。
19. 可以只用一种或几种视觉，不太可能全用；自行判断，不要压垮用户。

适用边界 · 注意事项

• 当用户只需要纯文本解释或直接可运行代码，且可视化不会增加理解时，不要强行使用。
• 当使用多个可视化会压垮用户时，不要全部使用；只选最小必要视图。
• 当 Mermaid 已能清晰表达时，不要额外写 HTML 文件。