@tom_doerr: 24种算法的交互式逐步可视化 https://github.com/TamimEhsan/AlgorithmVisualizer…

X AI KOLs Timeline 工具
algorithms visualization open-source react educational interactive

摘要

一个基于Web的交互式工具，可逐步可视化24种算法，涵盖寻路、排序、递归等，使用React构建。

24种算法的交互式逐步可视化 https://github.com/TamimEhsan/AlgorithmVisualizer…
查看原文
查看缓存全文

缓存时间: 2026/05/26 09:07

TamimEhsan/AlgorithmVisualizer

来源：https://github.com/TamimEhsan/AlgorithmVisualizer

banner

算法可视化器

使用 React 制作的不同算法的更好可视化效果。

访问：https://tamimehsan.github.io/AlgorithmVisualizer/

访客计数

探索超过 24 种算法，通过逐步可视化简化学习过程，使其更具吸引力，便于理解。

目前有 6 个板块：

  • 寻路算法
  • 素数
  • 排序算法
  • N 皇后问题
  • 凸包算法
  • 二分查找游戏
  • 递归树
  • 图灵机

我已经实现了总共 24 种算法，并将在后续继续添加更多。

已实现的算法

  • 图搜索
    • DFS（深度优先搜索）
    • BFS（广度优先搜索）
    • Dijkstra（迪杰斯特拉算法）
    • A*（A星算法）
    • 递归迷宫生成
  • 排序
    • 冒泡排序
    • 选择排序
    • 插入排序
    • 堆排序
    • 归并排序
    • 快速排序
  • 埃拉托斯特尼筛法
  • 阿基米德螺旋线
  • N 皇后回溯算法
  • 格雷厄姆扫描凸包算法
  • 二分查找
  • 递归
    • 斐波那契数
    • 二项式系数
    • 错排问题
    • 快速幂
    • 第二类斯特林数
  • 图灵机
    • 按位取反
    • 加一操作
    • 二进制补码

贡献

我不确定是否有人愿意为此项目做出贡献，但任何形式的贡献都欢迎。如果你喜欢这个项目，请给这个仓库点个 star，这能激励我继续前进。

特殊功能添加时间线

  • 提交 16：为原地排序组件添加 Flip Move 动画
  • 提交 20：添加树结构
  • 2024 年 12 月 13 日：发布 v2.0.0：将项目从遗留项目迁移到使用了 shadcn ui 的 Next.js 版本（#3 https://github.com/TamimEhsan/AlgorithmVisualizer/pull/3）

致谢

我的一些板块灵感来源于以下资源：

  • 寻路算法：让我进入 Google 的那些项目（https://youtu.be/n4t_-NjY_Sg）
  • 素数阿基米德螺旋线：为什么素数会形成这些螺旋？（https://youtu.be/EK32jo7i5LQ）
  • 递归树可视化器：递归树可视化器（https://github.com/brpapa/recursion-tree-visualizer）
  • 图灵机：Tursi（https://github.com/schaetzc/tursi）

本地运行

请确保你的系统已安装 Node.js。然后运行：

npm i
npm run dev

这将启动应用，访问地址为 http://localhost:3000/AlgorithmVisualizer。

后续板块灵感来源

  • 旧金山大学网站（https://www.cs.usfca.edu/~galles/visualization/Algorithms.html）
  • algorithm-visualizer（https://github.com/algorithm-visualizer）
  • 新加坡国立大学网站（https://visualgo.net/en）

相似文章