正则铁路图（regex railroad diagram） 把一段正则表达式渲染成可视化流程图——字符是站点、分组是子图、量词是循环回路、| 是分叉，整条匹配过程像一条铁路一样从左走到右。这种可视化最早由 Tab Atkins 推广，比传统的”测试器”更适合理解结构而不仅是验证匹配。
| 场景 | 传统测试器 | 铁路图 |
|---|---|---|
| 验证某串能否匹配 | ✅ 强项 | 不擅长（需要配合测试输入） |
| 看清楚结构和分支 | ❌ 字符串很难脑内编译 | ✅ 强项，一眼看出嵌套层次 |
| 团队评审/讲解 | 配文字注释 | 直接贴 SVG，省一半口舌 |
| 调试”为什么不匹配” | 看错误位置 | 看哪一段轨道走错 |
| 形状 | 含义 |
|---|---|
| 实心圆角矩形 | 字面字符 / 元字符（\d \w \s 等）/ 字符类 […] / 锚点 ^$\b |
| 空心圆角矩形 | 回引 \1 \k<name>，“必须等于之前那段捕获” |
| 上方斜体小字 | 分组标题（绿色 = 捕获 / 黑色 = 非捕获 / 粉色 = 前瞻/后瞻）或量词说明 |
| 上下叉道 | | 分支，至少走一条 |
| 返回弧线 | * + 循环（弧线下方有量词注释） |
| 跳过箭头 | ? 或 {0,n} 可选段 |
工具会把常见的字符类 idiom 简写以减少视觉噪音：
[a-zA-Z0-9_] 自动识别为 \w[0-9] 显示为简洁的 [0-9] 加 “数字” 提示\d \w \s \b 等元字符按原样标注，便于直接对照字符串中的不可见字符（空格、Tab、换行）会被替换为 ␣ \t \n，避免节点空白。
| 项目 | 状态 |
|---|---|
| ECMAScript 全套语法 | ✅ 支持 |
(?<name>…) 命名捕获 / \k<name> 命名回引 | ✅ 支持 |
(?=…)(?!…)(?<=…)(?<!…) 零宽断言 | ✅ 支持，单独绘制为标题分组 |
*? +? ?? {n,m}? 懒惰量词 | ✅ 支持，注释里显式标 “懒惰” |
Unicode 属性 \p{…}（u 标志位） | ⚠️ 只画一个节点，不展开为完整字符集 |
PCRE 条件分支 (?(cond)yes|no) | ❌ ECMAScript 无此语法 |
.NET 平衡组 (?<-name>) | ❌ 不支持 |
正则与铁路图都基于 regexp-tree 解析、railroad-diagrams 渲染，全程在浏览器本地完成，可断网使用。
正则字符串是线性的，但语义是树状的——分组嵌套、分支选择、量词作用域全都靠括号和优先级隐式表达。铁路图把树展平为一条可视轨道：分支在叉道、循环在回环、可选在跳过——视觉直观对应执行路径。复杂正则的可读性差距能拉开 5-10 倍。
本工具按 ECMAScript 正则（即 JavaScript RegExp）解析，覆盖了 Python re / Go regexp / Java Pattern 的绝大多数共同语法。不支持 PCRE 专属的 (?(condition)…) 条件分支、Perl 的 (*VERB) 控制动词、.NET 的 balancing groups。常用的命名捕获 (?<name>…) 、零宽断言 (?=…)(?!…)(?<=…)(?<!…) 、命名回引 \k<name> 都没问题。
(?<=…) 后瞻能画吗？能。前瞻 (?=…) (?!…) 和后瞻 (?<=…) (?<!…) 都会被画成单独的标题分组，标题用粉色区分（"前瞻 / 负向前瞻 / 后瞻 / 负向后瞻"），框内是断言内容。注意零宽断言不消耗字符——图上不会显式标，但理解时要记得。
*? +? ?? 怎么显示？量词节点上方会标 "0 次或多次 · 懒惰：尽量少匹配" 这样的注释。贪婪是默认（不会特别标），懒惰会单独写出来——多数性能问题来自意外的贪婪回溯，看图能帮你确认是不是写对了。
能。"⤓ SVG" 导出的文件自带亮色样式（不依赖站点 CSS），贴进 Notion / Confluence / 博客 / PR Markdown 都能正常显示。"⎘ SVG" 把源码复制到剪贴板，方便插进 markdown 的 <svg>...</svg> 块。要 PNG 用 "⤓ PNG"，输出 2× 高清版本（白底）。
不会。所有解析都在浏览器本地用 regexp-tree 完成——没有任何网络请求，可以断网使用。即便是企业内部、含敏感业务规则的正则也能放心贴进来。
99% 的情况是括号没配平或者字符类没闭合——错误信息里的 column 数字是粘贴文本里第几个字符出错，工具会自动选中这一位帮你定位。常见踩坑：忘了把 ( [ 转义成 \( \[、嵌套量词 *+（两个连续）、命名捕获写成 (<name>…) 漏了 ?。
/.../ 包裹）；标志位用上方的复选框勾选(…) / 非捕获 (?:…) / 命名捕获 (?<name>…) / 前瞻 (?=…)(?!…) / 后瞻 (?<=…)(?<!…) / 字符类 […] / 量词 *+?{n,m}（含懒惰版 *?）/ 回引 \1 \k<name>\d \w \s）·空心方框=回引（\1 \k<name>）·斜体小字=分组标题或量词说明|·循环是返回箭头 * +·跳过是直通箭头 ?(?(condition)yes|no) 条件分支（PCRE 专属）不支持——ECMAScript 没有此语法\p{Unicode 属性} 在 u 标志开启时支持，但不会在图上展开成完整字符集合（信息量太大）