UD5工具箱
Monorepo 依赖图生成器 - 可视化包间关系
上传或输入 lerna.json / workspace 配置，生成交互式依赖关系图。
标签： 可视化工具 - 数据与过程呈现
共 99+ 款工具防抖与节流可视化对比 - 事件触发频率演示
模拟高频事件流，分别应用防抖和节流策略，用时间轴展示处理函数实际被调用的时机。
Web 认证流程交互演示 - OAuth2/OIDC 步骤可视化
逐步展示授权码流程、隐式流程等，配合序列图帮助理解各角色间的交互。
触摸压力可视化演示 - 3D Touch/Force
在支持设备上检测触摸事件的force属性，实时展示压力大小与半径，辅助触觉交互开发。
JavaScript 闭包可视化 - 作用域链与环境记录
编写嵌套函数并单步执行，直观展示每个函数的作用域和闭包变量。
前端打包体积在线分析 - 可视化 Bundle 各模块占比
上传或粘贴 webpack 等工具的 stats.json 文件，生成交互式树状图，直观查看各模块大小与占比。
JavaScript 文件依赖关系图 - import/require 可视化
粘贴多个文件的 import/export 声明，构建模块依赖关系图，直观查看耦合结构。
焦点顺序书签工具 - 一键可视化 Tab 键路径
生成一个浏览器书签，点击后在当前页面用数字标注所有可聚焦元素的 Tab 导航顺序。
状态机可视化工具 - 绘制状态图并生成代码
拖拽添加状态和转换，定义事件和动作，生成 JavaScript 状态机代码。
Svelte 反应式声明查看器 - 可视化 $: 依赖链
解析 Svelte 组件的反应式声明，绘制变量之间的依赖关系链，便于理解更新逻辑。
Source Map 可视化分析模拟器 - 查看编译前后代码映射
上传或粘贴 source map 文件，展示原始代码与编译后代码的对应关系，辅助调试。
原型链浏览器 - 查看对象继承关系
输入一个对象构造器名称，以树状图显示其原型链，帮助理解 JS 继承机制。
Prisma Schema 可视化 - 从 schema 文件生成 ER 图
粘贴 Prisma schema 内容，自动绘制实体关系图，展示模型间关联。
音频可视化器 - Web Audio API 频谱/波形动态展示
播放本地音频文件并实时渲染频谱图或波形图，自定义颜色和样式，纯前端实现。
GraphQL 查询可视化构建器 - 勾选字段生成 Query
从 Schema 中浏览类型，勾选所需字段和嵌套，实时生成 GraphQL 查询语句。
简单虚拟ALU算术逻辑单元 - 可视化输入输出
输入两个二进制数和操作码，可视化展示简单ALU的加减乘除、与或非结果和标志位。
CSS Grid 可视化速查表 - 所有属性一览
将 CSS Grid 容器和项目的属性以图形化卡片展示，点击查看具体效果和代码。
不可见字符可视化工具 - 显示空格/制表/换行符号
输入文本，将所有空白字符用特殊符号标记显示，帮助排查缩进混乱或隐形字符问题。
JavaScript事件循环可视化 - 任务队列动画
动画展示调用栈、宏任务和微任务的执行顺序，帮助理解JS异步机制。
Promise/异步可视化 - 状态图和时间线
创建Promise并延迟解析，可视化显示挂起、兑现、拒绝的状态转换及时间线。
雷达图生成器 - 多维数据可视化工具
输入多个维度的数值，自动绘制蜘蛛网雷达图，支持多组数据叠加比较。
GraphQL Schema 关系图浏览器 - 类型图谱展示
输入 GraphQL Schema SDL，生成交互式的关系图谱，展示类型、字段及关联。
Promise 链可视化 - 异步流程时间轴
构建 Promise 链并显示每个 then/catch 的执行时间与状态，帮助理解微任务调度。
文本数据转饼图 - 分类列表直接出图
粘贴以逗号分隔的标签和数值，即刻生成饼图并自定义颜色。
数组方法可视化 - map/filter/reduce
输入数组，应用map、filter、reduce等方法，逐步动画展示元素变化过程。
测试覆盖率可视化器 - 上传 lcov 文件查看行覆盖
拖放 lcov.info 文件，以颜色标示每行代码的覆盖状态。
Git差异文件渲染器 - 可视化diff
粘贴统一diff格式文本，以并排或行内方式高亮显示代码的增减修改。
神经网络游乐场扩展版 - 自定义激活函数与架构
拖拽构造多层感知机，调整学习率和激活函数，实时观察分类任务训练过程，入门深度学习。
链接关系图谱生成 - 思维导图式网页
输入网址，抓取该页面上的出入链接并绘制成节点关系草图。
散点图在线制作 - 输入两组数据直接出图
输入或上传(CSV)两组数值数据，自动绘制散点图并显示回归趋势线。
CSS Grid可视化调试器 - 叠加网格线
为页面上使用CSS Grid的元素显示网格线和名称，辅助布局开发和调试。
定积分黎曼和可视化 - 微积分教学演示
选择函数与区间，动态展示左矩形、右矩形、中点法等近似求积过程，直观理解定积分概念。
茎叶图生成器 - 数据分布直观可视化
输入一组数值，自动按照十位和个位生成茎叶图，辅助统计学教学。
离散傅里叶变换(DFT)演示 - 信号分解
输入叠加的正弦波参数，展示时域波形和通过DFT得到的频谱图，理解频域分析。
CIDR 子网划分可视化 - 地址范围与二进制图示
输入CIDR块，以彩色网格展示网络地址、可用主机与广播地址，直观理解子网掩码。
相关系数的视觉感知 - 皮尔逊/斯皮尔曼
拖拽散点图的点，实时观察皮尔逊相关系数的变化和相应的散点趋势。
渐变断点可视化编辑器 - 拖拽色标调整渐变
在渐变条上拖拽添加和移动色标，调整颜色和位置，实时输出 CSS linear-gradient 代码。
平行坐标图生成器 - 多维数据探索
上传或输入CSV多变量数据，绘制平行坐标图，支持刷选高亮模式。
数轴教学工具 - 加减法可视化
在可交互的数轴上展示加减法运算，箭头跳跃表示数值变化，适合小学数学启蒙。
HTML空格实体可视化 - 查看不可见空白
显示文本中的非换行空格、全角空格等隐藏字符映射。
Lighthouse JSON 报告查看器 - 本地审计结果可视化
拖入Lighthouse导出的JSON报告，使用交互界面展示分数、建议和指标详情，无需Chrome DevTools。
Docker Compose 可视化编辑器 - 图形化服务编排
拖拽服务、网络和卷，直观构建docker-compose.yml，并可导出文件，降低容器编排门槛。
寻路算法可视化 - BFS/DFS/A*网格动画
在网格上设置起点/终点和障碍，动态演示广度优先、深度优先、A*等搜索过程。
NPM 审计结果可视化 - 解析 JSON 报告
粘贴 npm audit --json 的输出，以表格和图表形式展示漏洞级别、影响包和修复建议。
正则表达式状态机绘制 - NFA/DFA可视化
输入简单正则表达式，逐步构建并显示其等效的NFA和DFA状态转换图。
二重积分黎曼和演示 - 矩形逼近曲面
用无数小长方体逼近曲面下体积，调节分割精度，直观理解二重积分概念。
瀑布图生成器 - 增减变化累计展示
输入各类别增减数值，生成瀑布图，清晰展示从初始值到最终值的累积变化过程。
基数排序动画 - LSD方法逐步可视化
随机生成整数数组，逐步展示按低位优先进行的基数排序过程，辅助算法理解。
主成分分析(PCA)降维可视化 - 高维数据投影
上传CSV或手动输入多维数据，计算PCA并投影到二维空间，查看方差解释比率与载荷图。
CI/CD流水线可视化编辑器 - 阶段与任务设计
拖拽构建阶段与任务，配置触发条件，生成对应的GitLab CI或GitHub Actions YAML代码。
音频波形图实时显示 - 麦克风或音频文件
播放音频或使用话筒，实时绘制波形与频谱，前端音频可视化演示。
泛音列可视化 - 拨弦波形与泛音成分
调整基频，以波形叠加的方式展示各泛音如何构成实际乐器音色。
录音可视化简历 - 语音波形加文字
录制一段语音，生成带有音频波形和自定义文本的分享卡片图片。
CSS缓动效果可视化工具 - 动画速率对比
并排展示ease、ease-in、ease-out等不同CSS缓动函数的动画速率差异，辅助选择合适曲线。
储蓄目标进度环 - 可视化存钱计划
设定储蓄目标总额与当前余额，环形进度条动态展示完成百分比，并计算还需多少天达成。
流线绘制器 - 点选种子查看向量场
在预设向量场中点击放置种子，绘制通过该点的流线，表现场的方式。
琶音模式可视化 - 和弦分解音演奏动画
选择一个和弦,以动画方式在虚拟钢琴上展示上下行琶音的键位和音名。
栈式虚拟机演示 - 后置运算执行
输入后缀表达式或简单指令，逐步演示栈的压入弹出计算过程。
声控灯光特效 - 根据麦克风音量变色
网页全屏彩色灯光，随麦克风捕捉的音量跳动，制造派对或直播氛围。
DBSCAN 聚类可视化器 - 密度可达交互演示
在二维平面上点击生成数据点，调节Eps与MinPts参数，实时查看DBSCAN聚类结果与噪点识别。