Regex Visualizer — Railroad Diagram Generator for Regular Expressions
Free online regex visualizer that renders any JavaScript regular expression as an interactive railroad diagram, with a plain-English breakdown, live match tester, and ReDoS warnings — all in your browser.
Updated
What is the Regex Visualizer — Railroad Diagram Generator for Regular Expressions?
Regular expressions are easy to write and hard to read back six months later. This regex visualizer turns any JavaScript pattern into a clear railroad diagram — the same style used in language specs — so you can trace exactly what a pattern matches, one branch at a time, instead of mentally parsing backslashes and parentheses.
Paste a pattern and instantly get:
- A railroad diagram covering the full JavaScript regex grammar — groups, alternation, quantifiers (
*,+,?,{n,m}, lazy variants), character classes, anchors, lookahead/lookbehind, named groups, and backreferences - A plain-English breakdown listing every token in order, so you can see what each fragment does without guessing
- A live match tester — paste sample text and watch matches highlight instantly, with numbered and named capture groups broken out per match
- Catastrophic backtracking detection that flags risky nested-quantifier shapes like
(a+)+before they hang a browser tab - SVG export to drop the diagram straight into documentation, a PR description, or a wiki page
- Full flag support (
g,i,m,s,u,y,d) with clear validation errors for typos and invalid syntax
Unlike diagram-only tools that choke on modern syntax, this one understands named capture groups (?<name>…), lookbehind (?<=…) / (?<!…), and unicode property escapes \p{L}. And unlike testers that only show you matches, pairing the diagram with the explanation list and the tester means you can see why a pattern behaves the way it does, not just whether it matched.
Everything runs client-side in your browser — patterns and test text are never uploaded anywhere, which matters when you're debugging a regex pulled from production logs or a real API key format.
How it works
- Type or paste a pattern into the Pattern field — just the regex body, no surrounding slashes (write
\d{4}-\d{2}-\d{2}, not/\d{4}-\d{2}-\d{2}/). - Toggle flags —
g(global),i(case-insensitive),m(multiline),s(dotAll),u(unicode),y(sticky),d(indices). Invalid or duplicate flags are rejected with a clear message. - Read the railroad diagram — the pattern is parsed into a syntax tree and laid out left to right:
- A straight pill is a literal, character class, anchor, or shorthand like
\d - A fork with multiple lanes is an alternation (
|) - A curved bypass line above an element means it's optional
- A loop below an element shows how many times it can repeat, with the count labeled (
0+,1+,2–4, …) - A boxed section marks a capturing, named, or non-capturing group; a dashed box marks a lookahead or lookbehind
- Hover any shape for a tooltip explaining exactly what it matches
- Scan the breakdown list below the diagram for a plain-English, line-by-line explanation of every token in source order.
- Watch for the backtracking warning — nested unbounded quantifiers like
(a+)+are flagged automatically, since they're the classic cause of a regex engine hanging. - Paste test text to see live matches highlighted inline, with each match's position and its numbered/named capture groups listed below.
- Export or share — copy the full
/pattern/flagsstring with one click, or download the diagram as a standalone SVG file.
Not sure where to start? Use the Quick start dropdown to load a ready-made pattern — email, URL, UUID, ISO date, named groups, or a lookahead example — and see the diagram build immediately.
Parsing, layout, and matching all happen locally in your browser using JavaScript's native regex engine — nothing you type is sent anywhere.
Examples
Visualize an email pattern
Render a common email-matching regex as a railroad diagram to see how the local part, domain, and TLD connect
Break down named capture groups
Visualize an ISO date pattern with named groups to see each labeled group and its quantifier
Spot a catastrophic backtracking risk
Enter a pattern with nested unbounded quantifiers to see the diagram plus an automatic warning
Frequently asked questions
What is a regex railroad diagram?
What is a regex railroad diagram?
A railroad diagram (or syntax diagram) shows a pattern as a track you read left to right. Straight sections are literal matches, forks are alternation (|), loops below an element show it repeating, and a curved bypass above an element shows it's optional. It's the same visual style used in formal language specifications, adapted here for JavaScript regex.
Which regex flavor does this tool support?
Which regex flavor does this tool support?
JavaScript (ECMAScript) syntax — the same regex your browser, Node.js, and most frontend frameworks evaluate. That includes named capture groups (?<name>…), lookahead (?=…) / (?!…), lookbehind (?<=…) / (?<!…), unicode property escapes \p{L} (with the u flag), and all standard quantifiers, character classes, and anchors.
Does it handle named groups and lookbehind, unlike other regex diagram tools?
Does it handle named groups and lookbehind, unlike other regex diagram tools?
Yes. Named capture groups are labeled with their name in the diagram, and lookahead/lookbehind assertions are drawn as dashed boxes so you can tell at a glance that they don't consume characters. Backreferences (\1, \k<name>) are validated against the groups that actually exist in the pattern.
Why is my pattern showing an error instead of a diagram?
Why is my pattern showing an error instead of a diagram?
The parser reports the specific problem — an unterminated group, a quantifier with no token to repeat (a**), a character class range out of order ([z-a]), or a backreference to a group that doesn't exist. Fix the message shown and the diagram renders immediately; there's no silent failure.
What does the catastrophic backtracking warning mean?
What does the catastrophic backtracking warning mean?
It flags patterns where an unbounded quantifier is nested inside another, like (a+)+ or (.*)+. These shapes can force the regex engine to try an exponential number of paths on certain inputs, freezing the page or script that runs them. The warning appears next to the diagram so you can simplify the pattern before shipping it.
Can I test my regex against real text here too?
Can I test my regex against real text here too?
Yes. Paste text into the Test string box and every match highlights inline instantly, with each match's position and its numbered and named capture group values listed below — no need to switch to a separate regex tester.
Can I export or share the diagram?
Can I export or share the diagram?
Click "Export SVG" to download the diagram as a standalone, scalable SVG file you can drop into documentation, a pull request, or a wiki page. Use the copy button next to the flags to grab the pattern as a /pattern/flags string.
Is my regex pattern uploaded anywhere?
Is my regex pattern uploaded anywhere?
No. Parsing, diagram layout, and match testing all run locally in your browser using JavaScript's built-in regex engine. Nothing you type — pattern or test text — is sent to a server, which matters when you're debugging something pulled from production logs or real credentials.
Why do I need the u flag for \p{L}?
Why do I need the u flag for \p{L}?
Unicode property escapes like \p{L} (any letter) or \p{N} (any number) are only meaningful in JavaScript's unicode mode. Without the u flag, the engine doesn't recognize the syntax at all, so the tool requires the flag before treating it as valid — matching real JavaScript behavior rather than silently guessing.
I don't know where to start — are there example patterns?
I don't know where to start — are there example patterns?
Use the Quick start dropdown above the pattern field to load ready-made examples: email, URL, IPv4 address, hex color, UUID, ISO date, 24-hour time, slug, named capture groups, and a lookahead example. Each one populates the pattern and flags so you can see the diagram build immediately.
Related tools
More utilities you might find handy.