Visualize regular expressions as railroad diagrams showing groups, quantifiers, and alternatives.
A railroad diagram renders a regular expression as a track of boxes and forks read left to right: literals are labeled boxes, `|` alternatives are parallel tracks that split and rejoin, `?` adds a bypass, and `*` or `+` draw a loop back to the previous node. Each group becomes a labeled sub-diagram, so the pattern's nesting is visible at a glance. Paste a pattern and the tool lays out its structure. The common surprise: this is not a regex tester. It shows what the pattern says, not whether a string matches - and it exposes precedence, so `^a|b$` visibly splits into two anchored branches.
A concrete input and expected output from the current implementation.
Input
(cat|dog)s?
Expected output
A diagram that opens group 1 and immediately forks: one track reads c-a-t and the other d-o-g, and the two rejoin at the group's end. After the group, the single track passes through a box labeled 's' while a straight bypass track skips it, both meeting before the end of the line.
The `|` inside the parentheses draws one track per alternative, and `?` draws a zero-or-one bypass around the 's'. Reading the tracks end to end yields the four accepted strings: cat, cats, dog, dogs.
The diagram mirrors regex operator precedence, so it doubles as a precedence checker. Alternation is lowest: `a|b*` forks at the top into `a` and `b*`, with the `*` binding only to `b`. Quantifiers attach to the single preceding atom or group: `?` is a two-track fork with an empty branch, `*` and `+` are loops returning to the start of the previous box, and `{n,m}` loops with the count labeled. Groups render as numbered sub-diagrams.
Every path from the left end to the right end is one way the pattern can match: a box is text to consume, a fork is a choice of branches, a loop means repeat, and an empty branch means zero repetitions. Anchors such as `^` and `$` sit at the track's ends. Classes like `[a-z0-9]` and shorthands like `\d` render as single boxes, since the diagram shows structure, not the characters a class expands to.
No. This tool visualizes structure; it does not evaluate input, so it will not tell you whether a given string matches. Use a regex tester or a short script in your target language for the match check, then come back to the diagram to understand why the pattern behaves that way.
Alternation has the lowest precedence of any regex operator, so `a|bc` means 'a' or 'bc': the pipe splits the whole expression, not just the `b`. To make the fork narrower, group it: `(a|b)c` draws the two branches inside a group followed by `c`, and matches 'ac' or 'bc'.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Format, validate, and beautify JSON with syntax highlighting and error detection.
Encode text or files to Base64 and decode Base64 strings back to their original form.
Format and indent SQL queries for better readability across all major dialects.
Convert HTML markup into clean Markdown syntax with support for tables and lists.
Write Markdown and see the rendered HTML output in real time with live preview.
Visualize unified diffs and patch files with color-coded additions and deletions.