Regex railroad diagrams
Draw any JavaScript regular expression as a railroad diagram, explain it as a tree, link diagram and source by hover, and export SVG or PNG.
Added
How to use it
Type a pattern — bare, or as /pattern/flags — and the diagram redraws as you type. Read it
left to right: every path from the left dot to the right dot is a string the expression can
match.
-
Rounded boxes are literal text; square boxes are character classes, shorthand escapes (
\d,\w,\s), Unicode properties, and.; green boxes are anchors (^,$,\b); purple boxes are back-references. -
A path that branches is an alternation (
a|b). A path above an item that skips it means the item is optional; a path below that loops back means repetition, labelled with the count (2–5×,3+ times) andlazyfor*?,+?, and friends. -
Dashed boxes are capture groups (
group #1,<name> #2); orange dashed boxes are lookarounds, labelled "followed by", "not followed by", "preceded by", "not preceded by". Non-capturing groups draw no box.
Hover any box, any character of the source strip under the diagram, or any line of the explanation, and the three highlight together. Download SVG and Download PNG export a light-themed copy of the diagram for documentation.
⛶ Full screen (or F) gives the diagram the whole screen, scaled to fit — the browser’s full
screen where it is allowed, otherwise a full-window layer (iPhone); ◫ Panels hides the explanation
column. Escape leaves.
The parser follows ECMAScript syntax: named groups, lookbehind, \p{…} with the u flag,
\k<name>, \u{…}, and {n,m} quantifiers. Anything it accepts is also checked with the
browser’s own RegExp; if the engine rejects a pattern (for example a Unicode property
without the u flag), the error appears under the input. Flags change the wording: m makes
^/$ line anchors, s lets . match newlines, i notes case-insensitivity.
To test what a pattern matches against real text, use the regular expression tester.
Sharing a diagram
Share link copies a URL that opens this page with your expression already drawn. You can also
write one by hand: /tools/railroad/?re=<pattern>&flags=<flags>, with the pattern
URL-encoded — for example
?re=^(?<year>\d{4})-(?<month>\d{2})$.
Feedback is a gift. Something to improve, a feature to add, or a bug? Tell me.
Runs entirely in your browser; nothing you type leaves this page.