Algorithm Visualizer · 让算法“动”起来

English | 中文

---

项目简介

Algorithm-Visualizer是一款轻量级、零依赖且高度可交互的算法可视化学习平台。
无需任何安装配置，打开浏览器即可直观理解排序、图论、动态规划、搜索、贪心以及字符串等经典算法的执行过程与状态变化。

立即在线体验

---

核心特色

• 实时流畅动画：基于 ES6 Async/Await 异步循环与 DOM 动画过渡，丝滑呈现每一步比较、交换与状态转移。
• 交互式控制台：数据规模、动画速度动态可调，支持单步播放、暂停与重置。
• 性能与指标监测：实时统计比较次数、交换/计算次数、算法运行耗时。
• 代码同步高亮：算法逻辑与 UI 可视化同步联动，辅助深刻理解执行流程。
• 响应式与深色模式：自适应桌面、平板与移动端界面，支持系统深色主题。
• LLM / AI 开发者友好：内置 llms.txt 规范文档，便于 LLM 与开发者深入了解各可视化引擎架构。

---

快速开始

本项目为纯前端轻量架构，无需任何复杂的构建步骤：

1. 克隆仓库

   git clone https://github.com/aoright/algorithm-visualizer.git
   cd algorithm-visualizer

2. 启动服务 直接在浏览器中打开 index.html，或通过简易静态服务器启动：

   # 使用 npx serve
   npx serve .
   
   # 或使用 Python 简易 HTTP 服务
   python3 -m http.server 8000

   访问 http://localhost:8000 即可体验。

---

支持的算法模块

模块	包含算法	可视化引擎
排序算法(sorting.html)	冒泡排序、选择排序、插入排序、归并排序、快速排序、堆排序	sorting-algorithms.js
图论算法(graph.html)	广度优先搜索 (BFS)、深度优先搜索 (DFS)、Dijkstra 最短路径	graph-algorithms.js
动态规划(dp.html)	斐波那契数列、0-1 背包问题、最长公共子序列 (LCS)、最长递增子序列 (LIS)	dp-algorithms.js
搜索算法(search.html)	顺序查找、二分查找、跳跃查找、插值查找	search-algorithms.js
贪心算法(greedy.html)	活动选择问题、零钱兑换、分数背包问题、哈夫曼编码	greedy-algorithms.js
字符串算法(string.html)	朴素匹配、KMP 算法、Rabin-Karp 算法、Z 算法	string-algorithms.js

---

项目结构

algorithm-visualizer/
├── .github/
│   └── workflows/
│       └── ci.yml             # GitHub Actions 代码质量 CI 工作流
├── llms.txt                   # LLM & AI 引擎架构与 API 规范文档
├── index.html                 # 平台主页
├── sorting.html               # 排序算法可视化页面
├── graph.html                 # 图论算法可视化页面
├── dp.html                    # 动态规划可视化页面
├── search.html                # 搜索算法可视化页面
├── greedy.html                # 贪心算法可视化页面
├── string.html                # 字符串算法可视化页面
├── main.js                    # 核心路由与 UI 交互逻辑
├── sorting-algorithms.js      # 排序引擎实现
├── graph-algorithms.js        # 图论引擎实现
├── dp-algorithms.js           # 动态规划引擎实现
├── search-algorithms.js       # 搜索引擎实现
├── greedy-algorithms.js       # 贪心引擎实现
├── string-algorithms.js       # 字符串引擎实现
└── resources/                 # 演示截图与静态资源

---

技术栈与 CI

• 前端核心：HTML5, CSS3, ES6+ JavaScript (原生 Zero-Dependency)
• UI 布局：Tailwind CSS (via CDN), Flexbox & Grid
• 持续集成：GitHub Actions（包含 JavaScript 语法检查、HTML 规范校验及文档完整性验证）

---

贡献指南

欢迎贡献代码或提出改进建议！

1. Fork 本仓库
2. 创建特性分支 (git checkout -b feature/AmazingFeature)
3. 提交更改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 提交 Pull Request

---

开源协议

MIT © Algorithm-Visualizer Contributors

---

English README

Introduction

Algorithm-Visualizeris an interactive, browser-native platform for learning classic computer science algorithms through real-time animations. No installation or complex build environment required!

Key Features

• Live Smooth Animations: Built using async/await state loops and DOM updates.
• Interactive Controls: Dynamic dataset sizing, execution speed adjustment, pause, and step execution.
• Performance Metrics: Real-time stats for operations, element swaps/comparisons, and execution time.
• AI & LLM Integration: Detailed engine technical specifications provided in llms.txt.

Quick Start

git clone https://github.com/aoright/algorithm-visualizer.git
cd algorithm-visualizer
npx serve .

Open http://localhost:3000 in your browser.

License

MIT License © Algorithm-Visualizer Contributors