Regex Visualizer
Visualize regular expressions as interactive railroad diagrams — understand complex patterns with a clear SVG flowchart, live match testing, and flag explanations.
Last updated: March 25, 2026
Used 28K+ timesWhat users say
“The railroad diagram makes complex patterns instantly readable. I use the SVG export in pull request descriptions to explain regex validation logic to reviewers.”
Find this tool useful? Support the project to keep it free!
Buy me a coffeeWhat is Regex Visualizer?
A regular expression (regex) is a compact pattern language for matching text — but regex syntax is famously dense and hard to read at a glance. A single expression like `^(?:https?:\/\/)?(?:www\.)?([\w-]+)\.[a-z]{2,}(?:\/.*)?$` can take minutes to parse manually. A railroad diagram (also called a syntax diagram) translates this into a visual flowchart where each path through the diagram represents a valid match, making even complex patterns immediately understandable.
Railroad diagrams were originally used in the 1960s–70s to document programming language grammars (the Pascal language reference was famous for its railroad diagrams). Applied to regex, each component becomes a box you follow left-to-right: literals appear as rounded boxes, character classes as bracketed nodes, groups as nested paths, quantifiers as loops, and alternation (`|`) as branching parallel paths. The visual structure instantly communicates grouping priority, quantifier scope, and optional vs required components — information that's buried in symbols in the raw regex string.
How to Use Regex Visualizer
Type or paste a regex pattern into the input field (without surrounding / slashes)
Optionally toggle flags using the flag buttons: g (global), i (case insensitive), m (multiline), s (dotAll), u (unicode)
The railroad diagram renders live — follow the arrows from left to right to understand the pattern's structure
Paste a test string in the "Test Input" panel to see highlighted matches and capture group values
Hover over any diagram node to see a plain-English tooltip explaining what that component matches
Common Use Cases
- Debugging a complex regex that matches fewer (or more) strings than expected by seeing the diagram's logical structure
- Writing documentation for a regex-heavy codebase by exporting the railroad diagram as an SVG image
- Learning regex by writing patterns and seeing how each added character changes the diagram
- Explaining a regex in a code review — share the diagram URL instead of annotating the raw pattern
- Understanding a legacy codebase's validation regex patterns without decoding them manually
- Teaching regular expressions in a blog post, workshop, or video tutorial with visual aids
- Verifying that alternation branches (a|b) have the correct scope — are they inside or outside a group?
- Checking quantifier scope: does * apply to the whole group or just the last character?
Example Input and Output
Visualizing a URL validation regex in railroad diagram form:
Pattern: ^(https?)://([\w-]+\.)+[a-z]{2,6}(/[\w.-]*)*/?$
Flags: i (case-insensitive)Railroad diagram (left-to-right flow):
START ──► ^ (line start)
──► Capture Group 1:
├── "https"
└── "http"
──► "://"
──► Capture Group 2 (one or more):
└── [word chars or hyphen] + "."
──► [a-z] (2 to 6 times)
──► Capture Group 3 (zero or more):
└── "/" + [word chars, dots, hyphens]*
──► "/" (optional)
──► $ (line end) ──► END
Test: "https://www.example.co.uk/path/file.pdf" → ✅ MatchClient-Side Processing
All regex parsing and SVG diagram generation runs in your browser. Patterns — which may contain proprietary business logic or sensitive validation rules — are never sent to any server.
Catastrophic Backtracking
Some regex patterns cause exponential execution time (ReDoS — Regular Expression Denial of Service). The visual diagram helps identify dangerous patterns: nested quantifiers inside groups ((a+)+ or (a|a)+) create exponential backtrack trees. In production code, test suspicious regexes (especially from user input) against long adversarial strings. Use atomic groups or possessive quantifiers (supported in Python/Java, not JavaScript) to prevent backtracking where needed.
JS vs PCRE Regex Differences
This visualizer uses JavaScript's RegExp engine. PCRE (PHP, Nginx, Python, Perl) and Java/Ruby regex engines have additional features: (1) Possessive quantifiers (++, *+) — JS has no equivalent. (2) Recursive patterns (?R) — not in JS. (3) Branch reset groups (?|...) — not in JS. (4) (?(condition)yes|no) conditional patterns — not in JS. For cross-engine regex development, test patterns in each target language runtime separately.
Frequently Asked Questions
What regex syntax is supported by this visualizer?
What are the regex flags and what do they do?
How do I match a literal period or parenthesis in a regex?
What is the difference between greedy and lazy quantifiers?
How does alternation (|) priority work?
Can I share my regex with the railroad diagram?
How This Tool Works
The regex string is parsed using a JavaScript RegExp AST parser (based on the regexpp or regjsparser library). The AST nodes (Literal, CharacterClass, Quantifier, Group, Alternative, Assertion, etc.) are recursively mapped to railroad diagram components. Each node type produces a different SVG element: literals render as rounded rectangles; character classes as brackets; quantifiers as loop arrows; groups as nested bounding boxes; alternation as parallel branch paths connected by junction points. The SVG is rendered inline and scaled with the viewport.
Technical Stack