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.
How it works
The Regex Railroad Diagram Visualizer turns a regular expression into a visual railroad (syntax) diagram, where each token is represented as a labeled box connected by lines that show the flow of possible matches. This makes it far easier to understand complex patterns than reading raw regex syntax.
Type or paste your regex into the input field. The diagram updates live, highlighting how alternation (|), groups, quantifiers, and character classes branch or loop. Capture groups are color-coded so you can trace exactly what each group captures.
Use the g, i, m, and s flag toggles to adjust matching behavior. Paste a test string into the match input to see which parts of the string light up as matches in real time.
This tool is ideal for debugging regex written by others, learning regex fundamentals, or documenting patterns for team code reviews.
Worked example
Visualize an email validation pattern
- Paste the regex: ^[\w.+-]+@[\w-]+\.[a-z]{2,}$
- The railroad diagram shows: start anchor, character class, literal @, domain segment, literal dot, TLD character class, end anchor.
- Toggle the i flag to make the TLD match case-insensitively.
- Type test@example.com into the match field and confirm it highlights as a match.
A clear visual breakdown of each segment, confirming the pattern accepts valid email formats.
Common mistakes to avoid
- Forgetting to escape backslashes when pasting from code — in a raw input field, \d needs to be typed as \d, not \\d.
- Enabling the g flag during match testing and expecting only the first match to highlight — g finds all matches.
- Interpreting a complex diagram as a sign the regex is wrong; sometimes a correct regex has many branches by design.
Key terms
- Railroad diagram
- A visual representation of a grammar or pattern where valid inputs follow the lines from left to right, branching at alternations and looping at quantifiers.
- Capture group
- A portion of a regex wrapped in parentheses; the matched text is saved and can be referenced later.
- Flag
- A modifier appended to a regex (g=global, i=case-insensitive, m=multiline, s=dot-all) that changes how matching is performed.
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.