Regex Railroad Diagrams
The diagram shows your pattern as connected tracks. Branches show alternatives, bypasses show optional parts, and loops show repetition. Select a label or optional bypass to highlight its explanation. Hover over an item to highlight its text in the pattern.
- Free
- Unavailable
- Pro
- Included
- Self-hosted
- Advanced regex bundle
Open and explore a diagram
- Select Diagram in the right sidebar rail.
- Minimize Quick Reference to make more room.
- Drag the sidebar's left edge to increase its width.
- Drag the divider above Match Information downward to give the diagram more height.
- Use Zoom in, Zoom out, or the mouse wheel to change the scale.
- Drag the diagram to pan.
- Select Fullscreen to open the diagram beside its explanation.
- Zoom into a group, then select a label to see the linked highlights.
The diagram adjusts its zoom when you first open it. Select Fit diagram to return to an overview. Zoom ranges from 1% to 200%. Select the zoom percentage to return to 100%.
Click a selected item in either pane again, or click an empty diagram area, to clear the selection. You can also select a token in Explanation to reveal the corresponding part of the diagram.
If the pattern has errors, select explanation panel in the error message to open Explanation.
Edit in fullscreen
The pattern field stays editable in fullscreen. The diagram and explanation update as you edit. Drag the divider below the pattern field to change its height. On wide screens, drag the divider beside Explanation to change its width. These sizes stay in sync with the main editor. On narrow screens, the explanation sits below the diagram.
Read special constructs
Repetition counts appear on the tracks and use the same wording as Explanation.
The ? and {0,1} quantifiers use a bypass without a count label.
Repetition arrows mark the preferred path. Double arrows mark possessive repetition, which prevents backtracking into the repeated part.
Lookahead sits above the matching track, and lookbehind sits below it. Both check text without consuming characters. Each assertion connects to the matching track at a diamond. Its label identifies whether the check is positive or negative.
DEFINE bodies appear in separate dashed boxes because they define subroutines instead of matching text.
Subroutine calls and recursion appear as labeled calls.
Save the diagram
Select Save diagram, then choose Save as SVG or Save as PNG.
The file contains the whole diagram, including DEFINE bodies, with the current colors.
Keyboard controls
With the diagram focused, use the arrow keys to pan, + and − to zoom, and 0 to fit. Press Escape to clear a selection while the diagram has focus. In fullscreen, press Escape again to close the view.