z4rs zep4yrs
◉ v0.1 迭代中 — 快速排序、二叉树遍历、链表、栈队列、冒泡/插入/选择/归并排序、SQL 查询/建表/更新/索引/E-R/规范化已完成。图遍历、最小生成树、最短路径、拓扑排序、关键路径、二分查找、KMP 已加入。继续扩充中。

PROJECT N° 07 · WEB · SELF-LEARNING TOOL

StructVis 数据结构与数据库自学工具

把抽象的算法过程变成可交互、可步进、可自己动手试的可视化练习,让自学者不靠老师也能把每个步骤搞明白。

SPECIFICATION v0.1-dev
定位
教材对齐自学工具
形态
SvelteKit 静态站点
教材
数据结构教程MySQL 教程
框架
Svelte 5SvelteKit
样式
TailwindCSS 4
可视化
GSAPanime.jsCanvas 2D
SQL
sql.jsSQLite WASM
部署
adapter-staticGitHub Pages
状态
v0.1 迭代中

定位与目标

§ 01 · PURPOSE

脑子里想象不出过程,这才是自学的核心痛点。

自学数据结构和数据库时,最痛苦的不是语法记不住,而是脑子里想象不出过程。看书上的静态图示,看完好像懂了,一做题就错;跟着视频学,看起来很顺,自己写就卡壳。

StructVis 把抽象的算法过程变成可交互、可步进、可自己动手试的可视化练习。不是看动画,是每一步都可以暂停、可以自己操作、可以试错。做错了立刻告诉你为什么错,不是只给一个答案。

工具跟着教材走 — 李春葆《数据结构教程》第5版和杨宏霞《数据库技术及应用(MySQL)》。不是通用算法可视化网站,不是在线 IDE,不是题库平台,不是课程平台。

learner@structvis · quicksort · step 7/23 
// 步进模式:每一步都可以暂停、操作、试错
learner@sv:~$ step next
[step 7] partition: pivot = arr[4] = 3
  [5, 2, 8, 1, 3, 7, 4, 6]
         ↑i         ↑j  ↑pivot
  比较 arr[1]=2 < pivot=3, 交换到左侧
  比较 arr[3]=1 < pivot=3, 交换到左侧

learner@sv:~$ practice --choose-next
[quiz] 分区完成后,pivot 3 的最终位置是?
  A) index 1   B) index 2
  C) index 3   D) index 4

learner@sv:~$ answer B
[correct] 小于 pivot 的有 2,1 共 2 个
         pivot 落在 index 2,左侧全 < 3 ✓

教材对齐清单

§ 02 · TEXTBOOK ALIGNED

跟着教材章节走,不是给所有人看的炫技 Demo。

StructVis 不追求覆盖所有算法,而是严格对齐两本教材的章节顺序。每个知识点标注可视化价值、自学练习价值和实现优先级,确保先做最有用的内容。

数据结构以李春葆《数据结构教程》第5版为主线,数据库以杨宏霞《数据库技术及应用(MySQL)》为主线。v0.0.1 已发布,包含快速排序、二叉树遍历、链表、栈和队列、冒泡排序、插入排序、选择排序、归并排序、SQL 查询、建表练习、数据更新、索引原理、E-R 模型、关系规范化等交互式可视化模块。

TARGET USERS

自学者(你自己)

学得懂、记得住、做得出题。v0.1 唯一用户,100% 围绕自学效率设计。

同校学生

跟着教材学,做题不会了来练。未来可能的用户,教材对齐降低上手门槛。

授课老师

课堂演示用,代替黑板画图。附加价值,v0.3 开始考虑教学辅助功能。

数据结构 — 李春葆《数据结构教程》第5版

章节 内容 可视化 练习 优先级
第1章基本概念、时间复杂度★★★后期
第2章顺序表、链表(单/双/循环)★★★★★★★★★v0.0.1 ✓
第3章顺序栈、链栈、队列★★★★★★★★★v0.0.1 ✓
第4章KMP、稀疏矩阵★★★★★★v0.1 ✓
第5章二叉树遍历、线索树、BST★★★★★★★★★★v0.0.1 ✓
第6章存储、遍历、最小生成树、最短路径、拓扑排序、关键路径★★★★★★★★v0.1 ✓
第7章二分查找、BST、哈希表、B树★★★★★★★v0.1 ✓
第8章插入/交换/选择/归并/基数排序★★★★★★★★★★v0.0.1 ✓
第9章多路归并、置换选择★★★★远期
第10章顺序/索引/哈希文件★★远期

数据库 — 杨宏霞《数据库技术及应用(MySQL)》

章节 内容 sql.js 适配 练习 优先级
第1章概念、数据模型、E-R图100%★★★v0.0.1 ✓
第2章安装、配置、客户端N/A★不做
第3章CREATE/ALTER/DROP、数据类型85%★★★★v0.0.1 ✓
第4章SELECT、JOIN、子查询、分组95%★★★★★v0.0.1 ✓
第5章INSERT/UPDATE/DELETE95%★★★v0.0.1 ✓
第6章索引原理、B+树、视图创建70%★★★★v0.0.1 ✓
第7章存储过程、函数、触发器0%★★等后端
第8章ACID、隔离级别、锁60%★★★远期
第9章E-R图、范式、模式转换100%★★★★v0.0.1 ✓

技术架构

§ 03 · ARCHITECTURE

算法引擎是唯一真相源。

四层架构严格分层:UI 层只管渲染,State 层管进度和设置,Engine 层是核心 — 算法引擎和 SQL 引擎适配器各司其职,Data 层存放教材数据、题库和示例数据库。

单向数据流:只有控制面板能修改引擎状态(调用 next/prev/goTo/play/pause),所有其他模块都是只读视图。引擎状态变了,所有视图自动重绘。数据流永远是单向的:控制面板 → 引擎 → 所有视图。

动画系统采用两层结构 — 引擎只产出离散关键帧,渲染层在两个关键帧之间做平滑补间插值。步进模式和自动播放共享同一条 GSAP 时间线,不管怎么操作动画永远丝滑。

L4

UI Layer (Svelte)

页面组件 · 可视化组件 · 练习组件 · 导航/布局组件

↓
L3

State Layer

Svelte Stores · 进度/掌握度 · 错题本 · 设置

↓
L2

Engine Layer

Algo Engine(步进控制) · SQL Engine Adapter(sql.js / MySQL 待)

↓
L1

Data Layer

教材章节数据 · 算法题库 · SQL 示例库 · 示例数据库

TECH STACK

层级技术选型理由
框架Svelte 5 + SvelteKitRunes 响应式简洁,文件路由方便,编译后体积小
构建Vite 8快,Svelte 官方推荐
样式Tailwind CSS 4快速开发,主题切换方便
可视化Canvas 2D + d3-shapeCanvas 做步进动画,d3 辅助布局计算
动画GSAP + anime.jsGSAP 步进时间线控制,anime.js 辅助简单动画
SQL 引擎sql.js (SQLite WASM)纯前端,零后端,离线可用
状态管理Svelte runes + localStorage简单够用,进度本地持久化
测试VitestVite 生态原生支持
部署adapter-static → GitHub Pages纯静态,零运维成本
ALGORITHM ENGINE

步进状态机

每个算法是一个独立的步进状态机,自己生成完整的步骤序列。UI 层只管播放和渲染,算法逻辑和可视化完全解耦。

interface AlgorithmEngine {
  name: string;
  pseudocode: string[];
  totalSteps: number;
  init(input): void;
  next(): AlgorithmStep;
  prev(): AlgorithmStep;
  goTo(step): void;
  reset(): void;
}
SQL ENGINE ADAPTER

统一接口 · 双实现

sql.js 模式下执行前经过方言适配层,让学生写 MySQL 方言也能跑。遇到不支持的语法明确提示"需 MySQL 模式"。

interface SQLEngine {
  execute(sql): Promise<QueryResult>;
  explain(sql): Promise<ExplainNode>;
  getDialect(): 'mysql' | 'sqlite';
  loadDatabase(name): Promise<void>;
  listDatabases(): string[];
}
UNIFIED PLAYER

一套播放器 + N 个引擎

所有算法引擎实现同一个接口,外面套一个通用 AlgoPlayer 容器。加新算法只需写一个 Engine 类,不用改播放器。渲染器按数据结构类型独立,引擎声明 renderType 后自动匹配。

type PracticeType =
  'choose-next' | 'fill-array'
  | 'drag-pointer' | 'fill-code';

// 检测到练习题自动暂停
ANIMATION SYSTEM

两层结构 — 关键帧 + 补间

引擎层只产出离散关键帧,渲染层做平滑补间插值。播放控制器用浮点数 playbackPos 驱动,不是整数 step。步骤时长不一致,比较快、交换慢、关键节点给消化时间。

// GSAP Timeline 统一调度
tl.play()        // 播放
tl.tweenTo(5)    // 平滑到第5步
tl.seek(3.5)      // 拖拽进度条
tl.timeScale(2)   // 2倍速

RENDERER PLUGINS

渲染器适用算法技术
ArrayRenderer排序、数组操作Canvas 2D(柱状图)
TreeRenderer二叉树、BST、AVLSVG + d3-shape(布局计算)
LinkedListRenderer单/双/循环链表Canvas 2D(节点+箭头)
GraphRenderer图的遍历、最短路径Canvas 2D(节点+边)
SqlTableRendererSQL 分步执行DOM 表格(高亮行/列变化)

内容生产体系

§ 04 · CONTENT

每个知识点统一包含三种模式。

数据结构知识点统一包含动画演示、分步练习和测试三个 Tab。动画演示可自定义输入,分步练习在每步暂停出题并即时反馈,测试模式做完出分数和错题解析。

SQL 知识点统一包含分步学习、练习题和挑战三个 Tab。分步学习展示每步中间结果和文字解释,练习模式运行校验并给提示,挑战模式不给提示且计时统计。

预置四个教学常用示例数据库,学生打开就能练,每个数据库十几到几十行数据,保证查询结果有意义但不复杂。

  • ✓
    动画演示模式 — 可视化画布 + 伪代码同步高亮 + 播放控制条 + 自定义输入
  • ✓
    分步练习模式 — 每步暂停出题、即时反馈(对/错/为什么)、提示系统
  • ✓
    测试模式 — 3~5 道题,做完出分数 + 错题解析
  • ✓
    SQL 分步执行 — FROM→WHERE→GROUP BY→SELECT→ORDER BY 逐步展示中间结果
  • ✓
    键盘优先 — 步进用左右箭头,空格播放/暂停,所有操作键盘可完成
  • ✗
    不靠颜色 alone — 状态除了颜色还有图标或文字标注

SAMPLE DATABASES

数据库表适用章节
companydepartments, employees, projects基础查询、JOIN、分组
schoolstudents, courses, scores, teachers多表联查、子查询
shopproducts, orders, order_items, customers综合练习
librarybooks, borrowers, records中等难度练习

版本路线图

§ 05 · v0.1a → v1.0

v0.0.1 已发布，v0.1a 已扩充 — 图遍历、最小生成树、最短路径、拓扑排序、关键路径、二分查找、KMP 已加入。继续扩充串/数组、BST、哈希表等内容，目标 v1.0 达到两本教材核心章节全覆盖。

V0.0.1
已发布:排序/树/链表/栈队列 + SQL 查询/建表/更新/索引/E-R/规范化
V0.1a
已扩充:图遍历/最小生成树/最短路径/拓扑排序/关键路径 + 二分查找 + KMP
V0.1b
继续扩充:串/数组、BST、哈希表、视图、高级查询、演示模式
V0.2
教学辅助:演示投影模式、讲授剧本、可选 MySQL 后端
V1.0
完整版本:两本教材核心章节全覆盖

MILESTONES

里程碑内容状态
M0工程骨架:SvelteKit + Tailwind + 基础布局✓ 已完成
M1快速排序、二叉树遍历、链表可视化 + 练习✓ 已完成
M2SQL 分步执行 + 基础查询 + 建表✓ 已完成
M3v0.0.1 发布:排序/树/链表/栈队列 + SQL 查询/建表/更新/索引/E-R/规范化✓ 2026-08-02
M4v0.1a 扩充:图遍历、最小生成树、最短路径、拓扑排序、关键路径✓ 2026-08-05
M5v0.1a 补齐:二分查找、KMP 串匹配✓ 2026-08-05
M6v0.1b 继续扩充:串/数组、BST、哈希表、视图、高级查询、演示模式进行中
M7v0.2 教学:演示模式 + 可选后端规划中

最终目标:李春葆数据结构第2~8章全部可视化 + 练习,杨宏霞 MySQL 第1、3~6、9章全部覆盖,完整的错题本/掌握度/复习系统,演示模式 + 剧本系统,可选 MySQL 后端模式。当前 v0.1a 已完成图遍历、最小生成树、最短路径、拓扑排序、关键路径、二分查找、KMP 等核心内容。

v0.1
迭代中

StructVis v0.0.1 已发布，v0.1a 已扩充图遍历、最小生成树、最短路径、拓扑排序、关键路径、二分查找、KMP 等核心内容。在线可访问，继续迭代中。

教学实现仅用于自学辅助。部分功能标记为"soon"的内容将在后续版本中逐步添加。

访问在线工具 ↗ GitHub 仓库 ↗ 返回作品集 ←