# Regex Railroad Diagram Visualizer Render a regular expression as an SVG railroad (syntax) diagram showing literals, groups, alternations, and repetition, with capture-group numbering and flag explanations > Canonical page: https://elysiatools.com/en/tools/regex-railroad-diagram-visualizer - **Category:** Development - **Keywords:** regex, regular expression, railroad diagram, syntax diagram, ast, visualize, railroad, regexper, debuggex, pattern ## Overview Parses a JavaScript/PCRE-flavored regex with the `ret` library into an AST, then maps each node to a railroad-diagram primitive (rounded boxes for literals, labeled groups for captures, choice branches for alternations, loop-back arrows for quantifiers) rendered as SVG via `railroad-diagrams`. Also lists every capture group (with name) and explains each flag. Useful for teaching regex, documenting patterns, and spotting nested-quantifier backtracking risks. ## Inputs - **Regular Expression** (text): e.g. ^(https?)://(\[^/:\]+)(:\d+)?(/.*)?$ · (\w+@\[\w.-\]+) · \b\d{3}-\d{4}\b - **Flags** (text): e.g. gi · gim · (leave empty for none) ## When to use - When documenting complex regular expressions in technical specifications or codebase readmes. - When debugging nested quantifiers, alternations, or capture groups to prevent performance issues like catastrophic backtracking. - When teaching or learning regular expression syntax and wanting to visualize how the engine parses a pattern. ## How it works - Enter your JavaScript or PCRE-compatible regular expression pattern and optional flags into the input fields. - The tool parses the pattern into an Abstract Syntax Tree (AST) using the ret library. - Each AST node is mapped to a visual railroad primitive, such as rounded boxes for literals, choice branches for alternations, and loop-back arrows for quantifiers. - The visualizer outputs a self-contained SVG diagram along with a detailed list of numbered capture groups and flag explanations. ## Use cases - Visualizing complex URL routing patterns to verify capture groups and optional parameters. - Documenting email validation patterns in team wikis using clear, graphical syntax diagrams. - Auditing legacy regex patterns for nested loops that could cause performance bottlenecks. ## Frequently asked questions ### What regex flavors are supported? The visualizer supports JavaScript and PCRE-flavored regular expressions. ### Can it identify named capture groups? Yes, it lists and labels all capture groups, including named groups and their corresponding indices. ### Does the tool support advanced PCRE features like recursion? No, advanced features like recursive patterns, branch resets, and conditional groups are not supported and will return a parsing error. ### How do I read the generated railroad diagram? Read the diagram from left to right, following the paths through literals, branches, and loop-back arrows for repetitions. ### Can I export the diagram? Yes, the diagram is rendered as a standard SVG element that you can copy or save directly from your browser. ## Related tools - [Regex Cheat Sheet](https://elysiatools.com/en/tools/regex-cheat-sheet): A searchable, localized cheat sheet for regular expression syntax — character classes, anchors, quantifiers, groups & references, lookarounds, escape sequences, and flags — with a built-in quick tester - [Regex Debugger](https://elysiatools.com/en/tools/regex-debugger): Step through how a regular expression matches a string position by position: visualize match attempts, partial successes, backtracks, and captures — a learning tool for understanding regex behavior, not just the final result - [Regex Replace Previewer](https://elysiatools.com/en/tools/regex-replace-previewer): Preview regex replacements in real-time with detailed diff highlights and statistics - [Microscope Scale Bar Calibrator](https://elysiatools.com/en/tools/microscope-scale-bar-calibrator): Calculate microscope object scale, field of view, diffraction limits, Nyquist sampling, and download a transparent SVG scale bar. - [Self-Closing HTML Tags Reference](https://elysiatools.com/en/tools/self-closing-html-tags): Complete reference guide for HTML void elements (self-closing tags), SVG elements, and MathML elements - [Regex Tester](https://elysiatools.com/en/tools/regex-tester): Test regular expressions against text - [Kepler Orbit Solver](https://elysiatools.com/en/tools/kepler-orbit-solver): Numerically solve Kepler’s equation E − e·sin(E) = M for eccentric anomaly E, true anomaly ν, orbital radius and relative speed, with Newton/bisection/fixed-point methods, convergence history and an SVG orbit diagram - [ReDoS (Regular Expression Denial of Service) Scanner](https://elysiatools.com/en/tools/redos-regex-scanner): Scan one or more regex patterns for catastrophic backtracking risk, simulate evil inputs, and suggest safer rewrites ## Samples - [Regex Replace Samples](https://elysiatools.com/en/samples/regex-replace): Collection of common and useful regex replacement patterns for text transformation and data cleaning - [Common Regex Patterns](https://elysiatools.com/en/samples/regex-samples): Commonly used regular expression patterns for validation and matching - [Regex Pattern Alternatives](https://elysiatools.com/en/samples/regex-alternatives): Multiple ways to write the same regex pattern with different trade-offs in readability, performance, and accuracy - [Regex Named Capture Groups](https://elysiatools.com/en/samples/regex-named-groups): Collection of regex patterns using named capture groups for extracting structured data from text. Named groups make patterns more readable and maintainable by assigning meaningful names to captured portions. ## Related content - [Regex Testing, Visualization, and Pattern Debugging Tools](https://elysiatools.com/en/hubs/regex-utility): Compare regex testers, explainers, cheat sheets, visualizers, linters, performance scanners, and replacement preview tools in one hub for safer pattern design and debugging workflows. - [SVG, Favicon, and Icon Asset Workflow Tools](https://elysiatools.com/en/hubs/svg-favicon-icon-workflows): Build favicon packs, optimize SVG assets, convert icons across ICO, PNG, JPG, WebP, and SVG, and prepare web-ready image assets in one hub.