Visual Explainer 用于生成自包含的 HTML 文件，对技术图表、可视化和数据表进行解释。它不会在适用时退回到 ASCII 艺术，并始终在浏览器中打开结果。出于效率考虑，当表格达到 4 行以上或 3 列以上时，应自动渲染为 HTML 页面，并在聊天中给出文件路径，仍可附加简短文字摘要。
可用命令包括：generate-web-diagram 生成任意主题的 HTML 图表；generate-visual-plan 生成功能的可视化实施计划；generate-slides 生成杂志级幻灯片；diff-review 做可视化差异审查与架构对比和代码审查；plan-review 将计划与代码库对比并评估风险；project-recap 生成项目心智模型快照以帮助切换上下文；fact-check 对照实际代码核验文档准确性。
工作流程分四步。第一步思考方向：视觉为默认形式，散文元素仅作为点缀；明确读者身份、内容类型（架构、流程图、时序图、数据流、模式图、状态机、思维导图、类图、C4 架构、数据表、时间线、仪表盘或散文页）并选定美学风格。推荐受限风格（蓝图、编辑风、纸墨风、单色终端），灵活风格（IDE 风格、数据密集）需谨慎使用；明确禁止霓虹仪表盘、渐变网格以及 Inter 字体配紫罗兰色调的组合。
第二步结构：生成前阅读对应模板文件，按内容类型选择渲染方式。文本密集型架构用 CSS Grid 卡片加流程箭头；拓扑或流程类用 Mermaid；数据表用 HTML table；时间线用 CSS；仪表盘用 CSS Grid 加 Chart.js。Mermaid 须使用 theme: 'base' 与自定义 themeVariables，复杂图可用 elk 布局；容器须居中添加缩放控件，禁止裸用 pre.mermaid。10 个以上节点应调整字号或改用混合模式。
第三步样式：强调字体搭配、配色叙事、表面层次、视觉权重与动画克制，禁止发光、脉冲和持续加载后的动画，并尊重 prefers-reduced-motion。
第四步交付：输出到 ~/.agent/diagrams/ 并用系统命令在浏览器打开，告知用户路径。限制方面，资料未提供收费、价格、平台或效果信息；部分 Mermaid 语法（如状态机标签含特殊字符）存在解析限制。