Regex Railroad Visualizer

Turn any JavaScript regular expression into a readable railroad (syntax) diagram. The visualizer parses your regex into an AST and maps every construct — sequences, alternations (|), groups (capturing and non-capturing), quantifiers (?, *, +, {n,m}), character classes ([a-z]), anchors, lookaheads, and backreferences — onto an SVG railroad diagram using the battle-tested tabatkins/railroad-diagrams library. Also includes a live match tester, an AST explorer panel, and SVG export. Runs 100% client-side.

Railroad SVG Diagram Live Match Tester AST Explorer Quantifier Annotations SVG & PNG Export

Regular Expression

/ /

Quick Examples

Live Match Tester

Enter a test string to see matches.

AST Explorer

Enter a regular expression and click Visualize to generate the railroad diagram.

Railroad Diagram

Legend

Terminal (literal)

Non-terminal / group

Named / capturing group

Loop = repeating quantifier

Branch = alternation (|)

Skip path = optional (?)

Export

Help & Related Tools

Everything you need to know

FAQ Frequently Asked Questions

What regex syntax does the visualizer support?

The tool supports standard JavaScript regex syntax: literals, sequences, alternation (|), capturing and non-capturing groups, named groups (?<name>), quantifiers (?, *, +, {n}, {n,m}), character classes ([a-z], [^…]), dot (.), anchors (^, $, ), escape sequences (d, w, s,
, ), lookahead (?=…) and lookbehind (?<=…), and backreferences (1).

How do I read a railroad diagram?

Follow the line from left to right. When the line splits into branches, you can take any one branch (alternation). A loop-back arrow means the element can repeat. Boxes with rounded corners are terminals (literal characters); rectangular boxes are groups or non-terminals.

Can I test my regex against sample text on this page?

Yes. The Live Match Tester panel lets you type any test string and instantly highlights all matches. Each match is shown with its index, matched text, and any captured groups.

How do I export the diagram?

Click "Download SVG" to save a vector file that scales to any size. Click "Download PNG" to save a raster image at 2x resolution. Both export buttons appear below the diagram after visualization.

Are there any limitations?

Very complex regexes with deeply nested groups may produce wide diagrams. Unicode property escapes (p{…}) are displayed as-is but not further decomposed. Atomic groups and possessive quantifiers (PCRE-only) are shown as non-capturing groups.