Regex Railroad Diagram Visualizer

Read (\d{3})[-.\s]?(\d{4}).

The parser splits it into three items in a row:
1. (\d{3}) — capturing group #1 around \d (one digit 0–9) repeated exactly 3 times: 3 characters.
2. [-.\s]? — one character from “-”, “.” or whitespace, optional: 0 or 1 character. On the diagram it is a box with a dashed bypass arc over the top.
3. (\d{4}) — capturing group #2, exactly 4 digits: 4 characters.
Shortest match: 3 + 0 + 4 = 7 characters. Longest: 3 + 1 + 4 = 8 characters. Tested on “555-1234, 5551234, 555.1234 and 555--1234” it matches the first three; 555--1234 fails because the bypass allows one separator, not two.

The common mistake: forgetting that | splits the whole pattern. ^cat|dog$ is meant to accept a line that is exactly cat or dog, but alternation has the lowest precedence, so it reads as ^cat or dog$. The diagram makes this obvious: two branches, with the start anchor inside the top one and the end anchor inside the bottom one. With the gm flags on the lines cat, catapult, hotdog and dog it makes 4 matches (cat, the cat in catapult, the dog in hotdog, dog). ^(?:cat|dog)$ puts both anchors outside the branch and makes the intended 2.

Syntax diagrams became famous with Kathleen Jensen and Niklaus Wirth’s Pascal User Manual and Report (1974), which drew the whole grammar of Pascal as tracks of boxes rather than as text rules. Programmers nicknamed them railroad diagrams because they look like a model railway’s points and sidings. They are still the standard picture of a grammar: json.org draws all of JSON this way, and SQLite’s documentation draws every SQL statement as one.

A regular expression is a grammar too, and a small one: just sequence, choice and repetition — exactly the three things a railroad shows, which is why Stephen Kleene’s 1950s regular expressions and Wirth’s diagrams fit so well together. Reading a regex correctly is mostly a matter of precedence. A quantifier binds to the single item before it, items in a row bind next, and | binds loosest of all — so ab+ repeats only the b, and ^cat|dog$ is two separate patterns. A diagram draws that precedence instead of leaving you to remember it.

This tool parses a JavaScript regular expression into a syntax tree and draws it as a railroad diagram in SVG. Alongside the picture it gives a plain-English breakdown, the number of capture groups and repeats, and the shortest and longest text the pattern can match — and Show Work lists the parse token by token, with each token’s position in the pattern, so you can see exactly how the string was read.

The test box highlights what the pattern matches, using your browser’s own RegExp engine in a background worker that is stopped after 2 seconds, so a catastrophic pattern cannot freeze the page. Everything runs in your browser; nothing you type is uploaded. To learn the language from the ground up, read Regular Expressions Explained.

It is the companion to the Regex Tester: this page shows how a pattern is built, the tester shows what it matches, with every match’s index and groups, replace and split.

Related tools: Regex Tester, JSON Formatter, and Cron Expression Builder.