Regex Railroad Diagram Visualizer
Visualize any regex as a railroad/flow diagram with live match highlighting, capture groups, and g/i/m/s flag toggles. Runs entirely in your browser.
How to use this tool
- Type or paste a regular expression in the pattern field.
- Toggle the g / i / m / s flag buttons as needed.
- Read the railroad diagram to understand the pattern's structure left to right.
- Edit the test string to see matches highlighted and capture groups listed live.
regex-railroad turns any regular expression into a left-to-right railroad / flow diagram so you can actually see its structure — literals, character classes, escapes like \d, the . wildcard, anchors, capturing and non-capturing groups, lookaround, alternation and quantifiers — instead of squinting at a wall of symbols. This goes well beyond a match tester: it is a visual explainer for developers learning regex, reviewing a teammate's pattern, or debugging why something matches.
A live test area highlights every match, lists the captured groups per match, and lets you toggle the g, i, m and s flags. Everything runs locally, and the pattern, flags and test string are stored in the URL so you can share a reproducible link.
Frequently asked questions
- Which regex flavor does it use?
- JavaScript's native RegExp engine (ECMAScript), so behavior matches what you get in Node and the browser. Patterns are compiled with new RegExp() inside a try/catch, so an invalid pattern shows a friendly error rather than breaking the page.
- Does it handle complex patterns?
- The diagram tokenizer understands the common constructs — groups (including non-capturing, named and lookaround), alternation, character classes, escapes and all quantifiers. Extremely exotic syntax degrades gracefully: the matcher still works even if a construct can't be drawn.
- Is my pattern or test data uploaded?
- No. Tokenizing, diagram rendering and matching all happen in your browser. The only data that leaves the page is whatever you choose to put in a shared URL.