🌳 MySQL InnoDB B+ Tree Visualizer

交互式数据库内核可视化工具
Interactive visualization of MySQL InnoDB B+ Tree index structures

功能特性 • 技术栈 • 快速开始 • 使用指南

📖 简介 (Introduction)

本项目是一个基于 React 和 D3.js 的教育工具，旨在通过可视化的方式揭示 MySQL InnoDB 存储引擎中 B+树索引 的工作原理。

通过动态的交互界面，用户可以直观地观察数据插入时 B+ 树的分裂过程，理解聚簇索引 (Clustered Index) 与非聚簇索引 (Secondary Index) 的结构差异，并借助集成的大模型 (AI) 深入解析数据库内核概念。

✨ 核心特性 (Features)

1. 双模式索引可视化

• 🔴 聚簇索引 (Primary Key): 展示数据如何按主键 (ID) 排序存储。叶子节点包含完整的行数据 (Row Data)。
• 🔵 非聚簇索引 (Secondary Index): 展示辅助索引 (如 Age) 的结构。叶子节点存储索引键值 + 主键 ID，直观演示回表 (Row Lookup) 的基础结构。

2. 动态数据交互

• 实时增删: 手动添加或删除数据行，观察树结构的实时重组。
• 🎲 随机生成: 支持一键生成随机数据，快速构建复杂的 B+ 树结构，观察节点分裂 (Split) 和平衡过程。

3. 🤖 AI 智能助教

集成多模型 AI 支持，点击任意节点即可获取上下文相关的专业解释：

• Google Gemini: 默认支持。
• SiliconFlow (硅基流动): 支持 DeepSeek 等高性能模型。
• Ollama: 支持本地 LLM 运行。
• 场景示例: 点击非聚簇索引的叶子节点，AI 会解释为什么这里只有 ID 而没有完整数据。

4. DDL 与 Schema 视图

• 实时生成当前结构的 SQL 语句 (CREATE TABLE, CREATE INDEX).
• 展示当前的 INSERT 语句流，方便理解数据状态。

🛠️ 技术栈 (Tech Stack)

• Frontend: React 19, TypeScript
• Styling: Tailwind CSS
• Visualization: D3.js (用于绘制动态 SVG 树状图)
• Icons: Lucide React
• AI SDK: Google GenAI SDK, Custom Fetch for OpenAI-compatible APIs

🚀 快速开始 (Getting Started)

安装 (Installation)

1. 克隆仓库

   git clone https://github.com/yourusername/innodb-btree-viz.git
   cd innodb-btree-viz

2. 安装依赖

   npm install

3. 启动开发服务器

   npm run dev

4. 打开浏览器访问 http://localhost:3000 (或控制台提示的地址)。

📖 使用指南 (Usage)

界面导航

• 聚簇索引 (PK): 查看主键索引树。
• 非聚簇索引 (Age): 查看 Age 字段的辅助索引树。
• DDL & Index: 查看对应的 SQL 定义。

AI 配置

点击右上角的 设置 (Settings) 图标配置 AI 服务：

1. Gemini: 输入您的 Google API Key。
2. SiliconFlow: 输入 API Token (Base URL 默认为 https://api.siliconflow.cn/v1)。
3. Ollama: 确保本地 Ollama 服务已启动，且允许跨域 (Base URL 默认为 http://localhost:11434/v1)。

操作演示

💡 Tip: 点击图表中的 "Leaf Page" (绿色节点) 可以触发 AI 分析该数据页的内容。

---

Made with ❤️ by Frontend Engineer