Regex Railroad Diagram Visualizer
Paste a regular expression and see it drawn as a clear railroad/syntax diagram, with a plain-English breakdown and live match testing. Finally make any regex readable. Runs entirely in your browser.
How to Use
- Type or paste a regular expression in the box (no need for the surrounding slashes).
- Add flags (g, i, m, s, u, y) in the small box after it if you like.
- Read the railroad diagram: follow the line left to right — boxes are things to match, branches are choices, and dashed loops mean repeat or optional.
- Read the plain-English breakdown underneath for a step-by-step explanation.
- Drop a test string in to watch what the pattern actually matches, highlighted live.
Plain-English breakdown
Test it against a string
How to read the diagram
A regular expression is a tiny program for matching text, but it is written as a dense string of symbols that is famously hard to read. A railroad diagram turns that string into something you can literally follow with your finger. You start at the solid circle on the left and travel along the line to the open circle on the right; every box you pass through is something the text must match, in order.
Where the track splits into branches, you take exactly one — that is an alternation (a|b|c). Where a dashed line loops back underneath a box, that part may repeat, and the label tells you how many times (0+, 1+, {2,5}). Where a dashed line arcs over the top, that part is optional and can be skipped. Dashed boxes group pieces together, just like parentheses in the pattern. Once you see it drawn this way, a regex stops being a wall of punctuation and becomes a map.
The building blocks
About this visualizer
This tool parses your regular expression into a syntax tree and lays it out as a railroad diagram in SVG, entirely in your browser — there is no upload and nothing is stored. Alongside the diagram it produces a step-by-step plain-English breakdown and a live tester that uses your browser’s own JavaScript RegExp engine, so what you see matched is exactly what your code would match. It understands the full ECMAScript syntax: literals, character classes, capturing / non-capturing / named groups, alternation, every quantifier, anchors, escapes, back-references, and look-ahead / look-behind.
It is the companion to the Regex Tester: the tester shows you what a pattern matches, while this shows you how the pattern is built. To learn the language itself from the ground up, read Regular Expressions Explained.
About the Regex Railroad Diagram Visualizer
Use the Regex Railroad Diagram Visualizer — a free, easy tool for web development and data tasks. Nothing is uploaded, and you do not need an account. Paste a regular expression and see it drawn as a clear railroad/syntax diagram, with a plain-English breakdown and live match testing. Finally make any regex readable. Runs entirely in your browser.
How it works
Type in what you have, and the answer shows up right away. Change anything and it updates by itself. Everything runs in your browser, so it is fast and nothing you type is sent away.
Want the deeper story? The Knowledge Base explains the ideas behind the tools in more detail.
Frequently Asked Questions
What is a railroad diagram?
A railroad (or "syntax") diagram draws a pattern as a set of train tracks you follow from a start to an end. Anything you pass through, you must match; where the track splits, you pick one branch; where it loops back, you can repeat. They are the clearest way to understand how a regular expression is structured, and are widely used in formal language documentation.
Which regex flavor does it understand?
It parses JavaScript / ECMAScript regular expressions — literals, character classes, groups (capturing, non-capturing, named), alternation, all the quantifiers (*, +, ?, {m,n}), anchors, escapes like \d and \w, the dot, back-references, and look-ahead / look-behind. The live tester uses your browser's own RegExp engine, so it matches exactly what your JavaScript would.
Is anything sent to a server?
No. The pattern is parsed, drawn, and tested entirely in your browser with JavaScript and SVG. Nothing you type — the regex or the test string — ever leaves your device.
What do the dashed loops mean?
A dashed line looping back underneath a box means that part can repeat (the label says how many times — 0+, 1+, {2,5}, and so on). A dashed line arcing over the top means that part is optional and can be skipped entirely. Together they show exactly how quantifiers control repetition.
How is this different from a regex tester?
A tester shows you what a pattern matches; this shows you how the pattern is built. Seeing the structure as a diagram makes it far easier to spot mistakes, understand someone else's regex, or learn how the pieces fit together. The two work well side by side — there is a live tester built in here too.
How do I use the Regex Railroad Diagram Visualizer?
Just type your numbers. The answer shows up right away — there is no button to press. Change anything and it updates by itself.
Do I need to install or sign up for anything?
Not at all — it runs in the browser with nothing to install and no account. After it loads once, it even works without an internet connection.
Is my information private?
Yes. Everything happens in your browser. Nothing you type is sent to a server or saved anywhere.
Common Use Cases
Understand a regex you inherited
Paste a cryptic pattern from a codebase and instantly see its structure laid out as a diagram you can actually follow.
Debug a pattern that won't match
The diagram makes a misplaced quantifier or a wrong group boundary obvious in a way a wall of symbols never will.
Learn regular expressions
Watch the diagram change as you add a +, a group, or an alternation — the best way to build an intuition for how regex works.
Explain a regex to a teammate
Show the diagram and the plain-English breakdown instead of trying to describe the symbols out loud.
Sanity-check before shipping
Confirm a validation pattern does exactly what you intend, then test it against real strings right here.
Last updated: