Regex to NFA Visualizer

The Regex to NFA Visualizer converts regular expressions into Non-deterministic Finite Automaton (NFA) state diagrams using Thompson's construction algorithm. It parses the regex pattern, builds the NFA data structure, and renders an interactive diagram on an HTML Canvas — all in your browser.

Thompson's construction is a classic algorithm from compiler theory that transforms a regular expression into an equivalent NFA. Each regex operator (concatenation, alternation, Kleene star) maps to a specific NFA fragment pattern. The resulting NFA can then be converted to a DFA (Deterministic Finite Automaton) for efficient matching, though this tool focuses on the NFA construction step.

The tool supports standard regex syntax including alternation (|), concatenation, Kleene star (*), plus (+), optional (?), character classes ([abc]), dot (.), escaped characters, and grouping with parentheses. The diagram shows states as circles (double circles for accept states), transitions as labeled arrows, and epsilon transitions in a muted color.

All processing runs entirely in your browser. No data is sent to any server. For hands-on regex testing, use our Regex Tester tool. For a quick-reference guide, see our Regex Cheat Sheet. If you're interested in other algorithm visualizations, check our Graph Visualizer or Binary Tree Visualizer.

This tool is ideal for computer science students studying automata theory, educators preparing course materials, and developers who want to understand how regex engines work internally.

1. Type a regular expression into the Regular Expression input field (e.g., (a|b)*abb).
2. The NFA diagram renders automatically as you type.
3. View the state count and transition count displayed below the input.
4. Scroll the canvas to explore large diagrams.
5. Click Download PNG to save the diagram as an image file.
6. Click Copy Image to copy the diagram to your clipboard.
7. Use the Supported Syntax reference at the bottom for available operators.