UD5 Toolkit
Regex State Machine Visualizer - Online DFA Diagram
Enter a simple regular expression and see its equivalent Deterministic Finite Automaton diagram. Learn how regex engines work.
TCP State Machine Visualizer - Online Animated Diagram
TCP State Machine Visualizer – Online Animated Diagram
Interactive step-by-step animation of TCP connection states. Explore the three-way handshake, data transfer phase, and four-way termination. Perfect for learning TCP protocol behavior.
Speed:
Step: 0 / 12
🖥️ Client State Machine
🖥️ Server State Machine
Event Log
Initial state. Click Next to start handshake.
Frequently Asked Questions
The TCP state machine defines all possible states of a TCP connection during its lifecycle. It covers connection establishment (three-way handshake), data transfer, and connection termination (four-way handshake). Each state represents a specific stage of the protocol, helping developers debug and understand TCP behavior.
The three-way handshake involves: CLOSED → SYN_SENT (client), LISTEN → SYN_RCVD (server), and finally ESTABLISHED on both sides. This exchange synchronizes sequence numbers and establishes a reliable connection.
When a host wants to close, it sends a FIN and moves to FIN_WAIT_1. The peer acknowledges and enters CLOSE_WAIT. After the peer also sends FIN, it goes to LAST_ACK. Finally, the initiator receives the FIN, sends ACK, and enters TIME_WAIT for 2MSL before returning to CLOSED.
TIME_WAIT ensures that any delayed segments are discarded and the remote peer has received the final ACK. It lasts 2 * MSL (Maximum Segment Lifetime), typically 60 seconds. This prevents old duplicates from being accepted in new connections.
The client application performs an active open (e.g., calling
connect()). The TCP stack sends a SYN packet and moves to the SYN_SENT state, waiting for a SYN+ACK reply.The LISTEN state indicates the server is passively waiting for incoming connection requests. It is entered after a passive open (e.g.,
listen()). Only in this state can a server accept new SYN packets.Active close is initiated by one host (e.g., client) sending the first FIN. Passive close occurs when a host receives a FIN and responds gracefully. The states differ: active closer goes through FIN_WAIT_1 → FIN_WAIT_2 → TIME_WAIT, while passive closer goes through CLOSE_WAIT → LAST_ACK.
Data Structure Visualizer - Online Array, Stack, Queue
Add, remove, push, pop items and watch the data structure change visually. Supports arrays, stacks, and queues. For CS students.
Sorting Algorithms Visualizer - Online Bubble, Quick & Merge
Watch classic sorting algorithms step through a randomized bar chart. Adjust speed and array size. Great for learning algorithm efficiency.
Regex Visualizer - Online Railroad Diagram Generator
Enter a regular expression and see a visual railroad diagram explaining the pattern. Learn and debug regex.
Big‑O Complexity Visualizer - Online Compare O(1) to O(n!)
Plot different Big‑O complexities on a chart. See how O(log n) stays flat while O(2^n) explodes. Educational reference.
Venn Diagram Builder - Online 2‑ & 3‑Set Overlap Visualizer
Create simple 2‑ or 3‑set Venn diagrams by entering comma‑separated lists. Shareable via URL fragment. No account.
Image Compression Visualizer - Online Before/After Slider
Drag a slider to compare your original image with a compressed version (e.g., WebP). See the quality difference and file size savings.
Timeline Creator - Online Generate Visual History Chart
Build a vertical timeline by entering events with dates and descriptions. Export as image or HTML. Perfect for project milestones.
Pathfinding Visualizer - Online A*, Dijkstra & BFS Grid
Draw walls on a grid and watch A*, Dijkstra, or BFS find the shortest path. Interactive animation. Learn graph traversal.
Decision Tree Builder - Online Visual Yes/No Path
Build a simple decision tree by adding yes/no nodes. Flowchart style. Export as text outline.
Text to Binary Grid - Online Visual Representation
Enter text and see each character's 8‑bit binary laid out in a black‑and‑white grid. Beautiful data art. Local.
Recursion Tree Visualizer - Online See Fibonacci Calls
See the complete recursion tree for small Fibonacci or factorial calculations. Understand overlapping subproblems. Educational.
Accept‑Language Header Visualizer - Online Locale Match
Paste your Accept‑Language header and see which languages your site should serve based on quality values. Internationalization helper.
Tab Order Visualizer - Online See Focus Navigation Path
Enter a URL and see a visual map of the tab order. Detect broken tabindex values. Improve keyboard navigation.
Tab Focus Order Checker - Online Visualize Tab Navigation Flow
Paste HTML and see the order in which elements would receive focus via Tab key. Highlight issues. Local accessibility testing.
Prime Factor Tree Generator - Online Visual Factorization
Enter a number and see an animated factor tree breaking it down to primes. Perfect for teaching factorization.
Relative Color Syntax Visualizer - Online Adjust Lightness/Chroma
Start from a base color and use `oklch(from color l c h)` to create lighter or darker variants. Copy the code.
Screen Reader Text Visualizer - Online View Hidden A11y Content
Paste a website's HTML and see which text is only visible to screen readers (e.g., .sr‑only). Preview the accessible layer.
CSS Countdown Number Animation - Online Flip Clock Effect
Create a pure CSS countdown timer with a flipping number effect. Adjust duration and style. No JavaScript needed for display.
View Timeline Playground - Online Element‑In‑View Animations
Animate elements as they enter and exit the viewport using view() timeline. Parallax and reveal effects without JS.
Scroll Timeline Playground - Online Scroll‑Driven Animation
Create an animation that advances with scroll using animation‑timeline: scroll(). See the visual timeline editor. Modern CSS.
PGP Message Viewer - Online Decode & Inspect
Paste an ASCII‑armored PGP message and view its packet structure. See the encrypted/plaintext blocks without decrypting.
aria‑describedby Visualizer - Online Check Descriptions
Highlight elements with aria‑describedby and see the linked description text. Verify a11y annotations.
Audio to GIF Waveform - Online Animated Sound Visualizer
Upload an audio clip and generate an animated GIF of its waveform dancing. Shareable sound snippet. Canvas magic.
UI Animation Timing Demo - Online Easing Presets
Compare all CSS easing presets side by side on a bouncing ball. See which curve fits your UI animation.
Background‑Blend‑Mode Explorer - Online Layer Patterns
Stack multiple background images and blend them with colors. Create unique textures. Copy the CSS code instantly.
WebRTC Text Chat (P2P) - Online No‑Server Messenger
Establish a peer‑to‑peer text chat between two browser tabs or devices using WebRTC data channels. All signaling via copy‑paste. No server.
Adaptive Bitrate Streaming Simulator - Online HLS/DASH Demo
Simulate adaptive bitrate logic by switching between different quality video segments. See how ABR algorithms work.
Simple Page Speed Tester - Online Core Web Vitals Emulator
Enter a URL and get a quick simulation of First Contentful Paint, LCP, and CLS using browser metrics. Lightweight alternative.
Navigation Timing API Viewer - Online Page Load Breakdown
See your current page load broken down into DNS, TLS, request, and DOM phases. Understand where time is spent.