正则铁路图（regex railroad diagram）

把一段正则表达式渲染成可视化流程图——字符是站点、分组是子图、量词是循环回路、| 是分叉，整条匹配过程像一条铁路一样从左走到右。这种可视化最早由 Tab Atkins 推广，比传统的"测试器"更适合 理解结构 而不仅是验证匹配。

实时渲染：输入即出图，支持 g/i/m/s/u/y 多种 FLAGS 切换
缩放平移：拖拽画布平移，Ctrl/⌘ + 滚轮或按钮缩放，复杂正则也能看清
一键导出：导出 SVG 矢量图（嵌文档）与 PNG 位图（便分享）
隐私安全：纯浏览器本地解析渲染，正则内容不上传服务器

它解决什么问题

场景	传统测试器	铁路图
验证某串能否匹配	强项	不擅长（需配合测试输入）
看清楚结构和分支	字符串很难脑内编译	强项，一眼看出嵌套层次
团队评审 / 文档	只能贴正则字符串	导出 SVG/PNG 直接嵌入
理解量词与可选	需要逐字符推理	循环回路、旁路一目了然

使用场景

代码评审：把复杂正则的铁路图导出后贴进 MR/PR 评论，帮助团队成员快速理解匹配逻辑。
技术文档：将铁路图以 SVG 形式嵌入 Wiki、Markdown、接口文档，让正则规则的说明更直观。
学习调试：初学者通过可视化图解理解 * + ? {n,m} | () [] ^ $ 等语法元素的含义。

常见问题（FAQ）

正则铁路图怎么看？各种线条代表什么？

从左到右的主线表示顺序匹配；圆角站点表示要匹配的字符或字符集；向上回到起点的环线表示重复量词（* + {n,}）；绕过节点的旁路表示可选（?）；上下分叉的多条支线表示选择（|）；带标签的子图表示分组与断言。

支持哪些正则语法？

支持 JavaScript 正则主要构造：字符与转义（\d \w \s .）、字符集（[A-Za-z0-9]）、量词（* + ? {n} {n,} {n,m} 及非贪婪 ?）、分组与捕获（() (?:) (?<name>)）、断言（^ $ \b (?=) (?!) (?<=) (?<!)）以及选择分支 |。

导出的图片可以商用吗？数据安全吗？

所有解析与渲染都在浏览器本地完成，正则内容不会上传服务器。导出的 SVG / PNG 图片可自由用于个人或商业文档。

五岁小站

正则铁路图