正则表达式图示：用 PlantUML 和 Mermaid 画正则的铁路图

简介

正则表达式写出来容易，读起来难。一串 [a-z0-9-]+\. 到底在匹配什么？哪些括号是分组、哪些是量词的作用范围？与其逐字符地推理，不如把它画成”铁路图”（railroad diagram）——每个方框是一个匹配单元，圆角框是可选段，箭头串起整个匹配流程。

PlantUML 内置了 @startregex 引擎，可以直接吃正则并生成铁路图；Mermaid 没有正则图类型，但用流程图的节点与连线完全能手工拼出同样的结构。

PlantUML 版

PlantUML 的正则图语法非常直接：把正则原文放在 @startregex 和 @endregex 之间即可，引擎会自己拆解出字面量、分组、字符类和量词。

1
2
3

@startregex
^(https?://)?([a-z0-9-]+\.)+[a-z]{2,}(/[\w\-./?%&=]*)?$
@endregex

渲染结果是一张标准铁路图：^ 和 $ 是两端锚点，中间可以清楚看到可选的 http / s 分支、可重复的域名段，以及以 / 开头的可选路径段。注意 PlantUML 会自动把 https? 里的 s 画成可选项分支，把 + 画成回环箭头——这些结构不需要你手写。

如果正则里含有 {}、< 等字符，PlantUML 会按需转义；万一渲染报错，最省事的办法是先用更简单的正则定位问题，再逐段加回来。

Mermaid 版

Mermaid 里没有正则引擎，得自己把正则拆成节点。思路是：每个方框放一个”匹配单元”，圆角框 ([...]) 表示可选段，菱形 {...} 表示分支决策，箭头就是匹配的先后顺序。

1
2
3
4
5
6
7

flowchart LR
  START(["^"]) --> SCHEME{"scheme?"}
  SCHEME -->|yes| PROTO["https?://"]
  SCHEME -->|no| HOST
  PROTO --> HOST["([a-z0-9-]+\.)+"]
  HOST --> TLD["[a-z]{2,}"]
  TLD --> PATH["(/[\w\-./?%&=]*)?$"]

这里 START 与 PATH 里的 ^ / $ 表示锚点，SCHEME 是判断 https?:// 是否存在，HOST 用 ([a-z0-9-]+\.)+ 表达”域名段至少一次”，PATH 收尾。因为 Mermaid 不做正则解析，[a-z0-9-]+\. 这类字符类要放进方括号里当作普通文本，必要时用引号包起来防止被当成 Mermaid 语法。

对比 / Side-by-side

小结

@startregex 是”把正则交给引擎”，几秒钟就能得到一张准确的铁路图，适合评审和调试；Mermaid 流程图是”把正则翻译成图”，虽然多花功夫，却能塞进大量中文注释、颜色和业务语义。日常做法是：先用 PlantUML 快速验证正则结构，确认无误后再决定是否需要一张更漂亮的 Mermaid 版分享给团队。