See what a regular expression really does: every branch, optional part and loop drawn as a railroad diagram, with each piece explained in plain English.
1 A regular expression 2 processed on your device 3 A railroad diagram
Regex Railroad Diagram
Pattern
//
Railroad diagram
Read left to right. Branches are alternatives (|), a track that jumps over a box makes it optional, and a track that loops back repeats it.
In words
Structure
SVG file
SVG (with its own styles)
01
What it does
Draws a regular expression as a railroad diagram with a plain-English explanation, and exports the SVG.
Parser for JavaScript regex syntax, including named groups
Branches, optional parts and repeats drawn as tracks
Lookarounds, backreferences and Unicode classes
Plain-English explanation of each part
02
Private by design
Everything happens in your browser. Nothing you type, paste or upload is sent anywhere, and it keeps working offline once the page has loaded.
03
What you get
An SVG diagram and an explanation, with a Copy and a Download button on every result.
Regex
Visualiser
SVG
Why it matters
Regular expressions are dense: a single line can hold alternatives, nested groups and greedy loops, and reading someone else's pattern is hard. A railroad diagram turns the pattern into a map you follow from left to right.
This visualiser parses the expression itself, rather than guessing, so the diagram matches how JavaScript reads it. Use it to review a pattern in a pull request, explain one in documentation, or find why a pattern matches more than you meant.
How it works
InputA JavaScript regular expression
In your browserParsed into a syntax tree
OutputAn SVG diagram and a plain-English outline
Where it fits in a designer's workflow
Plan
Design
Build
Test
Launch
Understanding or reviewing a pattern someone else wrote.
By the numbers
Counted from this tool's own parser: every group, alternative, repeat and character class becomes one step in the diagram and the plain-English outline, which is why a 40-character pattern can hide a lot of logic. Source: MDN: regular expressions.Show the numbers as a table
Pattern
Characters
Steps
Email
40
16
UK postcode
38
18
Hex colour
22
10
ISO date
47
28
Web address
49
25
Password rule
38
21
How to use it
Paste a regular expression (without slashes) and choose flags.
Follow the diagram from left to right.
Read the explanation of each part.
Download the SVG for docs or a review.
FAQ
Which regex flavour is this?
JavaScript (ECMAScript 2024), including named groups, lookbehind and the u and v flags. Most PCRE patterns look the same.
Does it test matches?
No, it explains the structure. Use the Regex Tester to run a pattern against text.
Why is a loop drawn under the track?
That's the repeat: you can go round as many times as the quantifier allows. A bypass above means the part is optional.
Can I use the SVG in docs?
Yes. It's a self-contained SVG that works in GitHub READMEs and documentation sites.
I build fast, accessible websites and web apps that pass these checks from day one. Tell me about your project and I'll reply personally with honest next steps.
