Regex Visualize
Render a regex pattern as an SVG diagram. Each part of the pattern becomes a labeled box; groups nest, alternations stack vertically, repetitions show their quantifier underneath. Chains after regex-tester for the "what does this thing actually do?" hand-off.
About Regex Visualize
See your regex as a railroad-style SVG diagram. Each part of the pattern becomes a labeled box: literal characters, character classes, groups, alternations stacked vertically, repetitions with their quantifier underneath. Useful for code review, learning, or sharing a regex on a slide or in a doc where the symbols alone would be unreadable. The SVG is standalone — save it, embed it, paste it into Figma.
- Category
- inspect
- Input
- Accepts: text/plain.
- Output
- Outputs: image/svg+xml.
- Cost
- Free, runs in your browser
- Memory
- low
Common uses
- Document a regex in a README or design doc — embed the SVG.
- Code-review a regex pull request — see the structure at a glance.
- Teach regex visually — show what `(?:foo|bar)+` actually means.
- Compare two regexes side by side by rendering both.
- Spot accidental greediness or missing anchors visually before testing.
Frequently asked questions
Does the SVG render in every browser?
Yes — the output is standalone SVG with no external dependencies. Save it as a file, embed it with `<img src="…">`, or paste the markup directly into your HTML.
What about complex patterns?
Deep nesting (groups inside repetitions inside alternations) is rendered correctly but the diagram gets wide. For very complex regex, also try `regex-explain` for the per-part English breakdown.
Which regex flavour is parsed?
JavaScript syntax. Most patterns from other flavours render correctly — PCRE-only constructs like `\K` and atomic groups are not supported.
Keywords
- regex
- regexp
- visualize
- diagram
- railroad
- svg
- pattern