What is a regex railroad diagram?

A railroad diagram (syntax diagram) is a visual representation of a regular expression as a directed graph. Each token in the pattern becomes a labeled node. Reading the diagram left to right shows exactly what the engine matches at each step.

Can I export the railroad diagram as SVG?

Yes. Click the SVG button in the toolbar to download the current diagram as a standalone SVG file suitable for documentation, pull request comments, or presentations.

Tools/RegEx Railroad Diagram Generator

RegEx Railroad Diagram Generator

Client-Side · SVG Engine

Presets:

Regular Expression Pattern

Flags:

Test Input String● Full Match

100%

Client-Side Engine · Interactive Railroad Tracer · ReDoS Analyzer

ECMAScript RegExp · 100% In-Browser

How the Railroad Diagram Works

A railroad diagram (also called a syntax diagram or flowchart diagram) represents a regular expression as a series of connected nodes — one per token — laid out left to right. Reading the diagram from left to right describes exactly which characters or constructs the engine matches at each step.

Client-Side Lexer

The pattern is tokenized entirely in your browser using a hand-written regex lexer. It identifies anchors, character classes, quantifiers, capture groups, lookaheads, lookbehinds, named groups, alternations, and backreferences — no server or third-party library involved.

SVG Flow Generator

Each token is rendered as a labeled node in an SVG canvas. Nodes are color-coded by category, connected by directional lines, and wrapped into rows automatically. The diagram can be exported as a standalone SVG file for documentation and code review.

Token Categories & Color Reference

Category	Example Tokens	Description
Anchors & Boundaries	`^ $ \b \B`	Zero-width assertions — match a position, not a character
Character Classes	`\d \w \s [a-z] .`	Sets or ranges of characters the engine can match
Literals	`"hello" \n \t`	Exact character sequences or escape sequences
Quantifiers (dashed border)	`* + ? {2,4} *?`	How many times the preceding element can repeat
Capture Groups	`( ) (?:) (?<name>)`	Capture, non-capture, and named groups with numeric badge
Lookahead/Lookbehind	`(?=) (?<=)`	Positive lookahead and lookbehind zero-width assertions
Negative Assertions	`(?!) (?<!)`	Negative lookahead and lookbehind assertions
Alternation	`\|`	OR branch — matches either left or right sub-expression
Backreferences	`\1 \2`	References to a previously captured group

When to Use a Railroad Diagram for Regex Debugging

Code Review

Export the diagram as SVG and embed it in pull request comments to explain complex patterns to reviewers who may not be regex experts.

Debugging Failures

When a pattern fails to match, walking each node left to right reveals which token is the boundary that the input stops satisfying.

Learning Regex

New team members can read the diagram like a flowchart instead of parsing dense regex syntax — lowering the learning curve significantly.

Client-Side Processing — Your Patterns Stay Private

The lexer, layout engine, and SVG renderer all run inside your browser's JavaScript sandbox. No pattern or test string is transmitted to any server, analytics endpoint, or third-party service.

This matters when working with sensitive data: authentication token patterns, PII extraction regexes, internal log format matchers, or proprietary parsing rules — all remain on your device.