# MExplain

**Repository Path**: zhaowuyan/MExplain

## Basic Information

- **Project Name**: MExplain
- **Description**: 一个mysql执行计划可视化工具
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2025-08-28
- **Last Updated**: 2025-08-31

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# MySQL EXPLAIN 可视化工具

一个纯本地运行的 MySQL EXPLAIN 执行计划可视化分析工具，支持多种格式解析和交互式图形展示。

## 功能特性

### 🔍 多格式支持
- **Tree 格式** - MySQL 8.0+ `EXPLAIN FORMAT=tree`
- **JSON 格式** - `EXPLAIN FORMAT=json`  
- **Traditional 格式** - 传统表格格式
- **自动检测** - 智能识别输入格式

### 📊 可视化展示
- 交互式树形图展示执行计划
- 节点点击查看详细信息
- 颜色编码显示不同操作类型
- 性能警告高亮显示

### 📝 SQL示例功能 ⭐ 新功能
- **智能SQL示例生成** - 为每个节点类型提供相关的SQL查询示例
- **一键复制功能** - 复制SQL语句和EXPLAIN语句到剪贴板
- **上下文适配** - 智能提取表名和索引信息，生成贴近实际的示例
- **性能优化建议** - 针对性能问题自动生成优化SQL
- **语法高亮显示** - 支持多主题的SQL代码高亮

### 🎨 现代化界面
- 响应式双栏布局
- 明亮/暗黑/科技主题切换
- 简洁直观的操作界面
- 移动端友好设计

### 📁 多种输入方式
- 直接粘贴文本
- 文件上传支持
- 拖拽文件上传
- 内置示例数据

### 🚀 导出功能
- PNG 图片导出
- JSON 数据导出
- SQL示例一键复制
- 优化建议复制

## 使用方法

### 1. 获取 EXPLAIN 数据
在 MySQL 中执行以下命令获取执行计划：

```sql
-- Tree 格式（推荐）
EXPLAIN FORMAT=tree SELECT * FROM orders WHERE status = 'active';

-- JSON 格式
EXPLAIN FORMAT=json SELECT * FROM orders WHERE status = 'active';

-- Traditional 格式
EXPLAIN SELECT * FROM orders WHERE status = 'active';

-- 带实际执行数据（MySQL 8.0+）
EXPLAIN ANALYZE SELECT * FROM orders WHERE status = 'active';
```

### 2. 输入数据
- 将 EXPLAIN 输出结果复制粘贴到左侧输入框
- 或者将保存的文件拖拽到上传区域
- 选择对应的格式（支持自动检测）

### 3. 解析和查看
- 点击"解析执行计划"按钮
- 在右侧查看可视化结果
- 点击节点查看详细信息和SQL示例
- 使用工具栏控制视图

### 4. SQL示例功能 ⭐ 新功能
- 点击任意节点查看详情面板
- 在"SQL示例"部分查看相关的查询示例
- 点击"📋 复制SQL"复制查询语句
- 点击"🔍 复制EXPLAIN"复制对应的EXPLAIN语句
- 查看性能优化建议SQL

## 快捷键

- `Ctrl/Cmd + Enter` - 解析执行计划
- `Escape` - 关闭模态框和详情面板

## 节点类型说明

| 节点类型 | 颜色 | 说明 |
|---------|------|------|
| 排序操作 | 绿色 | ORDER BY、filesort 等排序操作 |
| 连接操作 | 蓝色 | JOIN、嵌套循环等连接操作 |
| 索引扫描 | 青色 | 使用索引进行数据查找 |
| 表扫描 | 红色 | 全表扫描，可能需要优化 |
| 过滤条件 | 橙色 | WHERE 条件过滤 |
| 聚合操作 | 蓝色 | GROUP BY、聚合函数等 |

## 性能警告

工具会自动识别以下性能问题：
- ⚠️ **全表扫描** - 建议添加合适的索引
- ⚠️ **文件排序** - 考虑使用索引排序
- ⚠️ **临时表** - 可能影响查询性能
- ⚠️ **高成本操作** - 成本超过阈值的操作

## 浏览器支持

- Chrome 80+
- Firefox 75+
- Safari 13+
- Edge 80+

## 技术架构

- **前端框架**: 纯 HTML + CSS + JavaScript
- **图形渲染**: AntV G6 4.8+
- **数据解析**: 自研多格式解析引擎
- **主题系统**: CSS 变量 + 本地存储

## 文件结构

```
├── index.html          # 主页面
├── demo.html           # 功能演示页面
├── styles.css          # 样式文件
├── js/                 # JavaScript 源码
│   ├── parser.js       # 解析引擎
│   ├── visualizer.js   # 可视化引擎
│   ├── sql-examples.js # SQL示例生成器 ⭐ 新增
│   └── app.js          # 主应用逻辑
├── docker/             # Docker 部署配置
│   ├── Dockerfile      # Docker 镜像配置
│   ├── docker-compose.yml # 容器编排配置
│   ├── nginx.conf      # Nginx 服务器配置
│   └── deployment.md   # 部署文档
├── docs/               # 项目文档
│   ├── SQL示例功能说明.md
│   ├── 功能实现总结.md
│   ├── 节点样式升级总结.md
│   └── 项目实现总结.md
├── examples/           # 示例文件
│   └── test-data.sql   # 测试数据和SQL示例
├── requirements/       # 需求文档
└── README.md           # 项目说明
```

## 开发说明

本工具完全在浏览器中运行，无需服务器支持：

1. 直接用浏览器打开 `index.html`
2. 所有数据处理在本地完成
3. 不会向任何服务器发送数据
4. 关闭浏览器后数据自动清除

## 示例数据

工具内置了多种格式的示例数据，点击"示例数据"按钮即可查看和使用。

## 更新日志

### v1.1.0 (2025-08-28) ⭐ 最新版本
- 🎉 **新增SQL示例功能** - 为每个节点类型提供相关的SQL查询示例
- ✅ 一键复制SQL语句和EXPLAIN语句
- ✅ 智能上下文适配，提取表名和索引信息
- ✅ 性能优化建议SQL自动生成
- ✅ SQL语法高亮显示，支持多主题
- ✅ 展开/收起功能，优化界面体验
- ✅ 跨浏览器兼容的复制功能

### v1.0.0 (2025-08-27)
- 🎉 首次发布
- ✅ 支持多种 EXPLAIN 格式解析
- ✅ 交互式树形图可视化
- ✅ 现代化响应式界面
- ✅ 主题切换功能
- ✅ 文件上传和导出功能

---

**许可证**: MIT License  
**更新时间**: 2025-08-28