Chris Collins

Tools · dev

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) and lazy for *?, +?, 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})$.

Runs entirely in your browser; nothing you type leaves this page.