visual-explainer 是什么？AI 可视化解释 Skill 介绍

visual-explainer 是什么？它既不是在线画图网站，也不是那种把文字套进固定模板的制图工具。它是一套给 Claude Code、Codex 这类编程 Agent 用的开源 Skill：要是终端里的架构说明、代码差异或者对比表看着费劲，Agent 就会直接生成完整的 HTML 页面，在浏览器里打开给你看。

它能把哪些内容转成可视化页面？

官方仓库里把它的用途分得清清楚楚：系统架构、diff 审查、计划核对、项目回顾、数据表和幻灯片都在支持范围内。它会根据内容选最合适的呈现方式，不会硬把所有问题都套成同一种图。

• 像流程、状态机和节点关系这类内容，优先交给 Mermaid 来实现。
• 模块内部说明和大型架构用 CSS 卡片展示，必要时还会搭配一张概览图。
• 审计矩阵用语义化表格，指标看板可以用 Chart.js 来做。
• 演示文稿采用独立的单屏幻灯片结构，不会把长页面硬生生拆成好几页。

生成的结果为啥比终端 ASCII 图更实用？

输出的文件自带完整排版、明暗主题和交互控件。复杂的 Mermaid 图支持缩放、拖动、重置和展开查看，宽表格也会保留滚动区域。页面默认存到 ~/.agent/diagrams/ 目录下，本质上还是个方便保存、发送和复查的自包含 HTML 文件。

哪些人更适合安装它？

经常要让 Agent 解释陌生仓库、评审大改动、核对实施计划的人，用它的收益最明显。如果只需要三四行答案，就没必要硬触发它；它的价值在于把高密度的技术信息重新组织，而不是给简单回答加装饰。团队评审的时候，HTML 页面还能保留同一份阅读顺序，减少口头解释造成的遗漏。核心功能只依赖浏览器就能用，不需要单独的模型 API Key；只有可选的图片能力才会涉及额外工具。

判断值不值得用的检查项

1. 终端输出是不是已经需要复杂表格或多层关系了。
2. 结果需不需要分享给不在当前会话里的人。
3. 读者需不需要缩放、对比或按章节浏览。