Railroad visualizer
See a regex as a railroad diagram
Follow the track from left to right: every path you can take spells a string the pattern matches.
Valid pattern · 3 capture groups · 10 quantifiers · no flags
- literal text
- character set
- class
- anchor or lookaround
- capture group
Reading a railroad diagram
Start at the double bar on the left and move right. Rounded boxes are literal text, square boxes stand for one character from a set, and tags mark positions such as the start or end of the text. Where the track splits, the pattern offers alternatives; a track that bends back underneath a box is a loop, labelled with how many times it may repeat. A track that arches over a box means the box is optional.
Capture groups are framed in their group colour and labelled with their number and name; lookarounds are framed with a dashed line because they check text without consuming it. Hover a box to see the source it came from.
Export saves the diagram as a stand-alone SVG with its colours embedded (light or dark, matching the current theme), or as a PNG at twice the screen resolution for slides and documents. Very long patterns produce wide diagrams; the stage scrolls sideways.
Questions
Why are character classes shown as one box?
A class like [a-z0-9_] always matches exactly one character, so it is one stop on the track. Its contents are listed inside the box.
Which fonts does the exported file use?
The SVG asks for Source Code Pro and falls back to your system’s monospace font. Box widths assume a monospace font, so the text fits either way.
Is the pattern uploaded to draw the diagram?
No. The diagram is laid out and drawn by your browser.