UD5工具箱
Flexbox 高级演练场 - 所有属性可视化控制
通过滑块和开关调整 Flex 容器和子项的所有 CSS 属性，实时观察布局变化，理解弹性盒子。
标签： 可视化工具 - 数据与过程呈现
共 88+ 款工具Docker Compose 可视化编辑器 - 图形化服务编排
拖拽服务、网络和卷，直观构建docker-compose.yml，并可导出文件，降低容器编排门槛。
Promise 链可视化 - 异步流程时间轴
构建 Promise 链并显示每个 then/catch 的执行时间与状态，帮助理解微任务调度。
测试覆盖率可视化器 - 上传 lcov 文件查看行覆盖
拖放 lcov.info 文件，以颜色标示每行代码的覆盖状态。
声控灯光特效 - 根据麦克风音量变色
网页全屏彩色灯光，随麦克风捕捉的音量跳动，制造派对或直播氛围。
音频波形图实时显示 - 麦克风或音频文件
播放音频或使用话筒，实时绘制波形与频谱，前端音频可视化演示。
相关系数的视觉感知 - 皮尔逊/斯皮尔曼
拖拽散点图的点，实时观察皮尔逊相关系数的变化和相应的散点趋势。
泛音列可视化 - 拨弦波形与泛音成分
调整基频，以波形叠加的方式展示各泛音如何构成实际乐器音色。
基数排序动画 - LSD方法逐步可视化
随机生成整数数组，逐步展示按低位优先进行的基数排序过程，辅助算法理解。
流线绘制器 - 点选种子查看向量场
在预设向量场中点击放置种子，绘制通过该点的流线，表现场的方式。
平行坐标图生成器 - 多维数据探索
上传或输入CSV多变量数据，绘制平行坐标图，支持刷选高亮模式。
雷达图生成器 - 多维数据可视化工具
输入多个维度的数值，自动绘制蜘蛛网雷达图，支持多组数据叠加比较。
寻路算法可视化 - BFS/DFS/A*网格动画
在网格上设置起点/终点和障碍，动态演示广度优先、深度优先、A*等搜索过程。
正则表达式可视化工具 - 图形化Regex解析
将正则表达式语句转换为直观的铁路图（状态机图），帮助理解复杂的正则模式。
GraphQL Schema 关系图浏览器 - 类型图谱展示
输入 GraphQL Schema SDL，生成交互式的关系图谱，展示类型、字段及关联。
定积分黎曼和可视化 - 微积分教学演示
选择函数与区间，动态展示左矩形、右矩形、中点法等近似求积过程，直观理解定积分概念。
CSS Grid 调试覆盖层 - 显示网格线与区域
在页面上叠加可拖拽的半透明网格线，辅助网格布局对齐。
分数披萨可视化 - 切分圆理解几分之几
拖动滑块切分圆形披萨，显示分数值与等价小数，直观学习分数概念。
储蓄目标进度环 - 可视化存钱计划
设定储蓄目标总额与当前余额，环形进度条动态展示完成百分比，并计算还需多少天达成。
Lighthouse JSON 报告查看器 - 本地审计结果可视化
拖入Lighthouse导出的JSON报告，使用交互界面展示分数、建议和指标详情，无需Chrome DevTools。
SVM 决策边界可视化 - 交互式支持向量机演示
添加二维点并选择核函数，直观展示SVM决策边界与支持向量，理解最大间隔分类原理。
Git可视化学习器 - 理解分支与合并
用彩色小球串演示Git仓库的提交(commit)、创建分支(branch)和合并(merge)过程。
链接关系图谱生成 - 思维导图式网页
输入网址，抓取该页面上的出入链接并绘制成节点关系草图。
简单虚拟ALU算术逻辑单元 - 可视化输入输出
输入两个二进制数和操作码，可视化展示简单ALU的加减乘除、与或非结果和标志位。
散点图在线制作 - 输入两组数据直接出图
输入或上传(CSV)两组数值数据，自动绘制散点图并显示回归趋势线。
分数大小比较天平 - 拖动比较两个分数
用准星或天平模型直观对比两个分数的大小，帮助建立数感。
离散傅里叶变换(DFT)演示 - 信号分解
输入叠加的正弦波参数，展示时域波形和通过DFT得到的频谱图，理解频域分析。
逻辑表达式转电路图 - 门级电路自动生成
输入布尔表达式，自动绘制用与、或、非门构成的逻辑电路图，并允许交互式输入测试。
JavaScript事件循环可视化 - 任务队列动画
动画展示调用栈、宏任务和微任务的执行顺序，帮助理解JS异步机制。
数组方法可视化 - map/filter/reduce
输入数组，应用map、filter、reduce等方法，逐步动画展示元素变化过程。
CSS Grid可视化调试器 - 叠加网格线
为页面上使用CSS Grid的元素显示网格线和名称，辅助布局开发和调试。
逻辑斯蒂映射分岔图 - 混沌可视化
绘制逻辑斯蒂映射的分岔图，调节参数观察周期倍增与进入混沌的过程。
CI/CD流水线可视化编辑器 - 阶段与任务设计
拖拽构建阶段与任务，配置触发条件，生成对应的GitLab CI或GitHub Actions YAML代码。
神经网络游乐场扩展版 - 自定义激活函数与架构
拖拽构造多层感知机，调整学习率和激活函数，实时观察分类任务训练过程，入门深度学习。
DBSCAN 聚类可视化器 - 密度可达交互演示
在二维平面上点击生成数据点，调节Eps与MinPts参数，实时查看DBSCAN聚类结果与噪点识别。
跳跃表可视化器 - 插入/搜索层级演示
随机可视化Skip List的层级结构和快速查找过程，对比链表效率。
茎叶图生成器 - 数据分布直观可视化
输入一组数值，自动按照十位和个位生成茎叶图，辅助统计学教学。
文本数据转饼图 - 分类列表直接出图
粘贴以逗号分隔的标签和数值，即刻生成饼图并自定义颜色。
栈式虚拟机演示 - 后置运算执行
输入后缀表达式或简单指令，逐步演示栈的压入弹出计算过程。
HTML空格实体可视化 - 查看不可见空白
显示文本中的非换行空格、全角空格等隐藏字符映射。
主成分分析(PCA)降维可视化 - 高维数据投影
上传CSV或手动输入多维数据，计算PCA并投影到二维空间，查看方差解释比率与载荷图。
网格渐变可视化编辑器 - 多点自由着色
在画布上放置多个色点，利用双线性插值生成平滑梦幻的多色渐变背景，可导出CSS或图片。
钢琴帘文件播放器 - MIDI/音符可视化
加载简单序列，以钢琴帘形式横向滚动显示音符，同时音频播放。
N皇后问题可视化 - 回溯算法演示
设置皇后数量，逐步或自动展示回溯算法如何找到所有解，并高亮冲突位置。
正则表达式状态机绘制 - NFA/DFA可视化
输入简单正则表达式，逐步构建并显示其等效的NFA和DFA状态转换图。
录音可视化简历 - 语音波形加文字
录制一段语音，生成带有音频波形和自定义文本的分享卡片图片。
Promise/异步可视化 - 状态图和时间线
创建Promise并延迟解析，可视化显示挂起、兑现、拒绝的状态转换及时间线。
按位运算可视化 - AND/OR/XOR/NOT实时
输入两个数字，显示它们的二进制表示，并逐位展示与、或、异或等运算过程。
递归树可视化 - 斐波那契/阶乘调用图
输入参数运行递归函数（如斐波那契），绘制递归调用树结构，理解重复计算。
z-index层级可视化 - 拖拽相互遮挡关系
添加多个色块拖拽顺序，直观表现层叠上下文与z-index值。
二重积分黎曼和演示 - 矩形逼近曲面
用无数小长方体逼近曲面下体积，调节分割精度，直观理解二重积分概念。
韦恩图生成器 - 多圆交集可视化
自定义两到三个圆的标签和区域数值，绘制用于展示集合关系的韦恩图。
渐变断点可视化编辑器 - 拖拽色标调整渐变
在渐变条上拖拽添加和移动色标，调整颜色和位置，实时输出 CSS linear-gradient 代码。
CIDR 子网划分可视化 - 地址范围与二进制图示
输入CIDR块，以彩色网格展示网络地址、可用主机与广播地址，直观理解子网掩码。
Git差异文件渲染器 - 可视化diff
粘贴统一diff格式文本，以并排或行内方式高亮显示代码的增减修改。
音频可视化组件生成 - 播放器频谱
生成与原生HTML5音频播放器配套的音频频谱可视化组件代码。
绳结拓扑展示 - 三叶结等绘制旋转
展示常见纽结（三叶结、八字结等）的三维弯曲造型，用户可旋转观察交叉。
子网掩码可视化计算器 - 滑条切分网络
拖拽滑块改变CIDR后缀，直观显示划分出的子网范围、主机数和广播地址。
进程调度可视化 - FCFS/SJF/轮转对比
输入进程列表，同时对比先来先服务、短作业优先和轮转调度算法的甘特图和平均等待时间。
整数划分可视化 - 分堆块图演示
输入正整数，以图形化块图展示所有不同的整数划分方式。