UD5工具箱
桑基图生成器 - 流量/能量分流图
通过CSV或手动输入源、目标、数值，生成展示流向和占比的桑基图。
标签： 可视化工具 - 数据与过程呈现
共 99+ 款工具雷达图生成器 - 多维数据可视化工具
输入多个维度的数值，自动绘制蜘蛛网雷达图，支持多组数据叠加比较。
按位运算可视化 - AND/OR/XOR/NOT实时
输入两个数字，显示它们的二进制表示，并逐位展示与、或、异或等运算过程。
递归树可视化 - 斐波那契/阶乘调用图
输入参数运行递归函数（如斐波那契），绘制递归调用树结构，理解重复计算。
Svelte 反应式声明查看器 - 可视化 $: 依赖链
解析 Svelte 组件的反应式声明，绘制变量之间的依赖关系链，便于理解更新逻辑。
焦点顺序书签工具 - 一键可视化 Tab 键路径
生成一个浏览器书签，点击后在当前页面用数字标注所有可聚焦元素的 Tab 导航顺序。
Prisma Schema 可视化 - 从 schema 文件生成 ER 图
粘贴 Prisma schema 内容，自动绘制实体关系图，展示模型间关联。
GraphQL 查询可视化构建器 - 勾选字段生成 Query
从 Schema 中浏览类型，勾选所需字段和嵌套，实时生成 GraphQL 查询语句。
CSS Grid 可视化速查表 - 所有属性一览
将 CSS Grid 容器和项目的属性以图形化卡片展示，点击查看具体效果和代码。
逻辑斯蒂映射分岔图 - 混沌可视化
绘制逻辑斯蒂映射的分岔图，调节参数观察周期倍增与进入混沌的过程。
数轴教学工具 - 加减法可视化
在可交互的数轴上展示加减法运算，箭头跳跃表示数值变化，适合小学数学启蒙。
NPM 审计结果可视化 - 解析 JSON 报告
粘贴 npm audit --json 的输出，以表格和图表形式展示漏洞级别、影响包和修复建议。
Flexbox 高级演练场 - 所有属性可视化控制
通过滑块和开关调整 Flex 容器和子项的所有 CSS 属性，实时观察布局变化，理解弹性盒子。
GraphQL Schema 关系图浏览器 - 类型图谱展示
输入 GraphQL Schema SDL，生成交互式的关系图谱，展示类型、字段及关联。
渐变断点可视化编辑器 - 拖拽色标调整渐变
在渐变条上拖拽添加和移动色标，调整颜色和位置，实时输出 CSS linear-gradient 代码。
Promise 链可视化 - 异步流程时间轴
构建 Promise 链并显示每个 then/catch 的执行时间与状态，帮助理解微任务调度。
触摸压力可视化演示 - 3D Touch/Force
在支持设备上检测触摸事件的force属性，实时展示压力大小与半径，辅助触觉交互开发。
CI/CD流水线可视化编辑器 - 阶段与任务设计
拖拽构建阶段与任务，配置触发条件，生成对应的GitLab CI或GitHub Actions YAML代码。
定积分黎曼和可视化 - 微积分教学演示
选择函数与区间，动态展示左矩形、右矩形、中点法等近似求积过程，直观理解定积分概念。
测试覆盖率可视化器 - 上传 lcov 文件查看行覆盖
拖放 lcov.info 文件，以颜色标示每行代码的覆盖状态。
Monorepo 依赖图生成器 - 可视化包间关系
上传或输入 lerna.json / workspace 配置，生成交互式依赖关系图。
状态机可视化工具 - 绘制状态图并生成代码
拖拽添加状态和转换，定义事件和动作，生成 JavaScript 状态机代码。
Web 认证流程交互演示 - OAuth2/OIDC 步骤可视化
逐步展示授权码流程、隐式流程等，配合序列图帮助理解各角色间的交互。
前端打包体积在线分析 - 可视化 Bundle 各模块占比
上传或粘贴 webpack 等工具的 stats.json 文件，生成交互式树状图，直观查看各模块大小与占比。
防抖与节流可视化对比 - 事件触发频率演示
模拟高频事件流，分别应用防抖和节流策略，用时间轴展示处理函数实际被调用的时机。
原型链浏览器 - 查看对象继承关系
输入一个对象构造器名称，以树状图显示其原型链，帮助理解 JS 继承机制。
JavaScript 闭包可视化 - 作用域链与环境记录
编写嵌套函数并单步执行，直观展示每个函数的作用域和闭包变量。
Source Map 可视化分析模拟器 - 查看编译前后代码映射
上传或粘贴 source map 文件，展示原始代码与编译后代码的对应关系，辅助调试。
JavaScript 文件依赖关系图 - import/require 可视化
粘贴多个文件的 import/export 声明，构建模块依赖关系图，直观查看耦合结构。
音频可视化器 - Web Audio API 频谱/波形动态展示
播放本地音频文件并实时渲染频谱图或波形图，自定义颜色和样式，纯前端实现。
不可见字符可视化工具 - 显示空格/制表/换行符号
输入文本，将所有空白字符用特殊符号标记显示，帮助排查缩进混乱或隐形字符问题。
声控灯光特效 - 根据麦克风音量变色
网页全屏彩色灯光，随麦克风捕捉的音量跳动，制造派对或直播氛围。
HTML空格实体可视化 - 查看不可见空白
显示文本中的非换行空格、全角空格等隐藏字符映射。
z-index层级可视化 - 拖拽相互遮挡关系
添加多个色块拖拽顺序，直观表现层叠上下文与z-index值。
CSS Grid 调试覆盖层 - 显示网格线与区域
在页面上叠加可拖拽的半透明网格线，辅助网格布局对齐。
音频波形图实时显示 - 麦克风或音频文件
播放音频或使用话筒，实时绘制波形与频谱，前端音频可视化演示。
分数披萨可视化 - 切分圆理解几分之几
拖动滑块切分圆形披萨，显示分数值与等价小数，直观学习分数概念。
历史事件时间线制作 - 自定义条目生成横向轴
输入事件名称与年代，自动生成美观的横向时间轴图，打印用于学习展示。
储蓄目标进度环 - 可视化存钱计划
设定储蓄目标总额与当前余额，环形进度条动态展示完成百分比，并计算还需多少天达成。
风险评估矩阵 - 5x5影响概率可视化
在5x5矩阵上放置风险点，根据影响与概率自动分级，生成风险登记册，辅助项目风控。
文件大小可视化 - 相对体积气泡图
选择多个本地文件，以气泡面积表示相对大小，直观呈现项目静态资源占比。
Lighthouse JSON 报告查看器 - 本地审计结果可视化
拖入Lighthouse导出的JSON报告，使用交互界面展示分数、建议和指标详情，无需Chrome DevTools。
CIDR 子网划分可视化 - 地址范围与二进制图示
输入CIDR块，以彩色网格展示网络地址、可用主机与广播地址，直观理解子网掩码。
Docker Compose 可视化编辑器 - 图形化服务编排
拖拽服务、网络和卷，直观构建docker-compose.yml，并可导出文件，降低容器编排门槛。
主成分分析(PCA)降维可视化 - 高维数据投影
上传CSV或手动输入多维数据，计算PCA并投影到二维空间，查看方差解释比率与载荷图。
神经网络游乐场扩展版 - 自定义激活函数与架构
拖拽构造多层感知机，调整学习率和激活函数，实时观察分类任务训练过程，入门深度学习。
SVM 决策边界可视化 - 交互式支持向量机演示
添加二维点并选择核函数，直观展示SVM决策边界与支持向量，理解最大间隔分类原理。
DBSCAN 聚类可视化器 - 密度可达交互演示
在二维平面上点击生成数据点，调节Eps与MinPts参数，实时查看DBSCAN聚类结果与噪点识别。
色盲安全调色板推荐 - 数据可视化配色
提供多组在各色盲类型下仍可区分的定性、连续配色方案，辅助图表设计。
网格渐变可视化编辑器 - 多点自由着色
在画布上放置多个色点，利用双线性插值生成平滑梦幻的多色渐变背景，可导出CSS或图片。
子网掩码可视化计算器 - 滑条切分网络
拖拽滑块改变CIDR后缀，直观显示划分出的子网范围、主机数和广播地址。
Git可视化学习器 - 理解分支与合并
用彩色小球串演示Git仓库的提交(commit)、创建分支(branch)和合并(merge)过程。
链接关系图谱生成 - 思维导图式网页
输入网址，抓取该页面上的出入链接并绘制成节点关系草图。
简单虚拟ALU算术逻辑单元 - 可视化输入输出
输入两个二进制数和操作码，可视化展示简单ALU的加减乘除、与或非结果和标志位。
跳跃表可视化器 - 插入/搜索层级演示
随机可视化Skip List的层级结构和快速查找过程，对比链表效率。
散点图在线制作 - 输入两组数据直接出图
输入或上传(CSV)两组数值数据，自动绘制散点图并显示回归趋势线。
分数大小比较天平 - 拖动比较两个分数
用准星或天平模型直观对比两个分数的大小，帮助建立数感。
相关系数的视觉感知 - 皮尔逊/斯皮尔曼
拖拽散点图的点，实时观察皮尔逊相关系数的变化和相应的散点趋势。
茎叶图生成器 - 数据分布直观可视化
输入一组数值，自动按照十位和个位生成茎叶图，辅助统计学教学。
琶音模式可视化 - 和弦分解音演奏动画
选择一个和弦,以动画方式在虚拟钢琴上展示上下行琶音的键位和音名。