Skip to content
yutils
Regex Tester
Usage / FAQ

When to use

  • Learning regex — see how alternation, quantifiers, and groups flow visually
  • Validating complex patterns — spot missing branches in email / phone / URL regexes at a glance
  • Code review and documentation — embed an SVG diagram in your README or ADR to share pattern intent
  • Debugging — trace exactly which branch a failing match gets stuck on
  • Team sharing — attach a diagram alongside the regex itself so reviewers move faster

FAQ

Q.Which regex syntax is supported?
A.JavaScript RegExp flavor — sequence, alternation `|`, groups `()` `(?:)` `(?<name>)`, character classes `[...]`, quantifiers `* + ? {n,m}`, anchors `^ $ \b`, escape classes `\d \w \s`, plus `\xHH \uHHHH \u{...}`, `\p{...}`, and `\1` back-references all render as boxes in the diagram.
Q.Are lookaheads and lookbehinds rendered?
A.`(?=...)` `(?!...)` `(?<=...)` `(?<!...)` show up as group boxes labeled "Lookahead" / "Neg Lookbehind". Their zero-width assertion behavior isn't visualized though — pair this tool with the regex tester to confirm actual match behavior.
Q.Can I download as PNG?
A.SVG only for now. SVG is vector — drop it into a README, blog, or slide without quality loss, and one-line conversion to PNG via the browser or ImageMagick is trivial. PNG export will land in-tool if there's demand.
Fun facts

  • Regular expressions are called "regular" because Noam Chomsky placed them at **Type-3** of his formal-language hierarchy in 1956 — the simplest class, recognizable by finite-state automata. That finite-state nature is exactly why a railroad diagram can capture any regex using just branches and loops, with no recursion needed.

    Wikipedia — Chomsky hierarchy

  • The modern shape of railroad / syntax diagrams was popularized by Niklaus Wirth in the 1973 Pascal User Manual, used as a visual alternative to EBNF. The conventions you see today — left-to-right flow, branches splaying vertically, loops as back-paths — were locked in then, and SQL, JSON, and regex grammar docs still use the same notation.

    Wikipedia — Syntax diagram

  • Kleene's mathematical notation first arrived in software in 1968, when Ken Thompson wired it into the QED editor. From QED it moved to ed and then to grep — whose name is literally `g/re/p`: "globally search for a regular expression and print". Every railroad diagram you draw here traces back to that lineage.

    Wikipedia — Regular expression

Related guides

Related tools

See all in this category →