Regex Visualizer - Online Railroad Diagram Generator
Enter a regular expression and see a visual railroad diagram explaining the pattern. Learn and debug regex.
UD5 Toolkit
Online DFA Diagram Generator — Visualize regex as deterministic finite automaton
* (Kleene star, zero or more), + (one or more), ? (zero or one), | (alternation/OR), () (grouping), . (any single character), [abc] and [a-z] (character classes), and \ (escape for special characters like \. \* \(). Concatenation is implicit — ab means a followed by b.
|), concatenation, and Kleene star (*) combine smaller NFAs into larger ones using epsilon transitions. The resulting NFA has exactly one start state and one accept state.
Enter a regular expression and see a visual railroad diagram explaining the pattern. Learn and debug regex.
Click through the TCP connection states (LISTEN, SYN_SENT, ESTABLISHED…) and see the animated transitions. Networking education.
Paste your Accept‑Language header and see which languages your site should serve based on quality values. Internationalization helper.
Practice positive/negative lookahead and lookbehind. See matches highlighted live. Master advanced regex.
Draw walls on a grid and watch A*, Dijkstra, or BFS find the shortest path. Interactive animation. Learn graph traversal.
Add, remove, push, pop items and watch the data structure change visually. Supports arrays, stacks, and queues. For CS students.
Create seamless CSS background patterns like stripes, polka dots, checkerboard. Adjust size and colors. Copy the tiny CSS.
Start from a base color and use `oklch(from color l c h)` to create lighter or darker variants. Copy the code.
See the complete recursion tree for small Fibonacci or factorial calculations. Understand overlapping subproblems. Educational.
Create a DMARC policy record with percentage, reporting addresses, and alignment mode. Validate and copy the final DNS TXT.
Create simple 2‑ or 3‑set Venn diagrams by entering comma‑separated lists. Shareable via URL fragment. No account.
Stack multiple background images and blend them with colors. Create unique textures. Copy the CSS code instantly.
Plot different Big‑O complexities on a chart. See how O(log n) stays flat while O(2^n) explodes. Educational reference.
Build a simple decision tree by adding yes/no nodes. Flowchart style. Export as text outline.
Highlight elements with aria‑describedby and see the linked description text. Verify a11y annotations.
Drag a slider to compare your original image with a compressed version (e.g., WebP). See the quality difference and file size savings.
Watch classic sorting algorithms step through a randomized bar chart. Adjust speed and array size. Great for learning algorithm efficiency.
Enter a number and see an animated factor tree breaking it down to primes. Perfect for teaching factorization.
Convert normal text to Unicode mathematical bold, italic, script, fraktur, and double‑struck. Copy rich text for anywhere.
Drag colored beads onto a virtual thread to design a repeating pattern. See total length. Save locally.
Paste HTML and see the order in which elements would receive focus via Tab key. Highlight issues. Local accessibility testing.
Select emojis and arrange them into a seamless tiling background. Copy the CSS data‑URI or download as image.
Generate a .gitattributes file with proper line‑ending handling, binary detection, and linguist overrides. Clean repo setup.
Simulate forced‑colors mode and see how your site looks. Adjust CSS system colors. Make your design accessible.
Check and beautify your TOML config files. Highlights errors and aligns tables and arrays. Safe local parsing.
Enter a URL and see a visual map of the tab order. Detect broken tabindex values. Improve keyboard navigation.
Build a vertical timeline by entering events with dates and descriptions. Export as image or HTML. Perfect for project milestones.
Enter a URL and a user‑agent to see if it is allowed or blocked by the robots.txt file. Quick bot validation.
Enter a URL and extract tab‐index order violations and focusable elements. Quick accessibility audit. Client‑side fetch.
Paste HTML and extract all unique data‑* attributes into a clean list. Understand the data model of a page.