桑基图生成器 - 流量/能量分流图
通过CSV或手动输入源、目标、数值,生成展示流向和占比的桑基图。
UD5工具箱
Mermaid 是一个基于文本的图表生成工具,使用类似 Markdown 的简洁语法来描述图表结构。它就像是图表界的 Markdown——用纯文本编写,自动渲染为可视化图表。
核心优势:
流程图使用 graph 或 flowchart 关键字定义,基本语法如下:
graph TD
A[开始] --> B{是否通过?}
B -->|是| C[执行操作]
B -->|否| D[返回重试]
C --> E[结束]
D --> A
方向控制:
TD / TB - 从上到下LR - 从左到右RL - 从右到左BT - 从下到上节点形状:[]矩形、()圆角、{}菱形、(())圆形、[()]圆柱形等。
时序图用于展示对象之间的交互顺序,使用 sequenceDiagram 关键字:
sequenceDiagram
participant 客户端
participant 服务器
participant 数据库
客户端->>服务器: 发送请求
服务器->>数据库: 查询数据
数据库-->>服务器: 返回结果
服务器-->>客户端: 响应数据
箭头类型:
->> 实线箭头(同步调用)-->> 虚线箭头(返回/异步)-x 实线带叉(失败)-) 异步箭头可使用 Note、loop、alt、opt 等高级特性丰富表达。
甘特图用于项目管理,使用 gantt 关键字:
gantt
title 项目开发计划
dateFormat YYYY-MM-DD
section 设计阶段
需求分析 :done, a1, 2024-01-01, 2024-01-07
UI设计 :active, a2, 2024-01-08, 2024-01-14
section 开发阶段
前端开发 :b1, 2024-01-15, 2024-02-05
后端开发 :b2, 2024-01-15, 2024-02-10
测试部署 :crit, c1, 2024-02-11, 2024-02-18
状态标记:done已完成、active进行中、crit关键任务、milestone里程碑。
日期格式通过 dateFormat 指定,支持多种日期格式。
支持两种导出格式:
导出技巧:
常见错误及修复:
A["节点: 包含特殊字符"]-->,时序图用 ->>subgraph 必须有对应的 end本工具会实时检测语法错误并在预览区显示详细错误信息,帮助快速定位问题。
Mermaid 的应用场景非常广泛:
通过CSV或手动输入源、目标、数值,生成展示流向和占比的桑基图。
使用Web Speech Recognition API将语音转为文本,支持自动标点,可事后编辑复制。
在Canvas上手写数字,通过预训练的简单模型或k-NN演示实时预测数字标签。
手动记录不同时间点的温度读数,自动生成时间-温度折线图。
浏览所有HTML实体符号,点击复制&code;或数字编码。
粘贴技术文档,提取所有首字母大写的短语并生成带定义的简易术语表。
设定轮换间隔,到点发声提醒切换角色,确保结对编程公平有效。
录制麦克风音频并直接编码为MP3文件下载,无需上传服务器。
将文本中特定词或短语替换为相应Emoji,类似用表情符号“压缩”长文本。
将A-Z、0-9映射为指定的Emoji表情,生成不易阅读的表情密文,增加聊天趣味。
利用浏览器内置语音合成,输入文本选择不同语言和嗓音播报,支持语速、语调调节。
监听copy/cut/paste事件,显示传输的数据类型与内容片段,洞察页面剪贴板交互。
设定移位量对英文文本进行凯撒加密解密,保留大小写和标点,学习密码学入门经典。
设置capture_links清单字段,让浏览器在点击链接时自动打开PWA而不是新标签页。
分析视频音频轨道,标记并批量切除所有静音片段,导出处理后的视频流。
随麦克风输入或音频播放,以复古指针样式显示实时音量电平。
利用关键词进行维吉尼亚密码加密与解密,多表替换增加安全性,古典密码进阶学习。
上传绿幕视频和新背景图,实时抠像合成预览并可选录制成WebM。
在图片上叠加随机噪点或胶片颗粒效果,调节密度和透明度,模拟复古胶片风格。
上传录音,自动检测并裁剪掉头尾的静音片段,保留有声音的部分。
浏览器录语音并压缩为MP3格式,无需上传,保护隐私,可用于语言笔记。
粘贴HTML代码,提取纯文本内容并保留段落结构。
录制麦克风音频片段并循环播放,支持多轨叠加,模拟Loop效果器。
将图片减少到指定的颜色数量(如8色、16色),生成类似老式游戏画面。
显示含有不同升降号数目的调号,快速点击对应的大调和小调名称。
手动或借助浏览器扩展统计在各网站的耗时,设定红线上瘾提醒。
将文本中的Emoji表情符号替换为对应的简短英文描述(如😀→:grinning:),便于分析或存储。
分析输入文本的字符或单词频率,计算香农熵,评估文本的随机性和信息密度。
输入设计稿尺寸与视口宽度,计算出对应的vw、vh值,加速移动端适配开发。
预设全身热身动作序列,每个动作固定时间并语音切换,防止运动伤害。