UD5 Toolkit
ASCII Text to SVG Converter – Monospaced Diagram Art
Paste ASCII art or text‑based diagrams and convert them into a crisp SVG image. Preserves spacing and can be styled with CSS for documentation.
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.
Fishbone Diagram Tool – Online Root Cause Visualization
Build a fishbone diagram to find root causes. Pre-defined categories (6M's). Export.
SIPOC Diagram Builder – Online Supplier Input Process Output Chart
Create a printable SIPOC diagram for your process improvement project. Fill in boxes, export as image.
Sun Path Diagram – Online Any Latitude for Architects
Select a latitude to see a 2D sun path chart for solstices and equinoxes. Passive design tool.
JSON to PlantUML Diagram – Online Visualize Data Structure
Paste a JSON object and generate PlantUML code for a class or object diagram. Preview rendered image.
Knot Tying Guide - Online Step-by-Step Animated Diagrams
Learn to tie essential knots with step-by-step animated diagrams. Includes bowline, square knot, clove hitch, and more. Pure CSS/JS animation.
Video to GIF Converter - Online Local Extract Animated Clip
Convert a short video clip to GIF directly in the browser. Trim, resize, and adjust frame rate. No upload required, uses built‑in video decoder. Perfect for memes.
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.
Mermaid Diagram Renderer - Online Markdown to Chart
Write Mermaid syntax inside Markdown blocks and instantly see rendered flowcharts, sequence diagrams, and Gantt charts. Copy SVG.
Video to GIF Maker - Online Animated Clip Creator
Trim a video clip and convert it into an animated GIF. Adjust frame rate and size. All local. No watermark.
GIF Loop Counter - Online Change Play Count
Change how many times an animated GIF loops. Set to infinite or a specific number. Download the modified GIF.
Multi Dice Roller - Online 3D Animated Dice
Roll virtual dice with animated 3D spins. Choose any number and type. See total and individual results. Fun for games.
Text to ASCII Drawing - Online Simple Diagrams
Create simple ASCII diagrams (arrows, boxes, trees) using a visual editor. Copy the plain text art. For comments and docs.
Animated GIF to WebP Converter - Online Smaller Size
Convert animated GIFs to animated WebP format for smaller file size. Choose quality level. All processing in browser.
Animated Gradient CSS Generator - Online Moving Background
Create a looping animated gradient background with multiple color stops. Copy the complete CSS keyframes. Eye‑catching.
Video to Animated WebP - Online Free Converter
Select a short video and convert it to an animated WebP image for faster web loading. Adjust quality and size. Local only.
TCP/UDP Port List - Online Common Service Reference
Searchable table of well‑known TCP and UDP ports with their services. Check 80, 443, 3306, and many more.
GIF Playback Speed Changer - Online Slow Down or Speed Up
Load an animated GIF and adjust its frame delay to make it slower or faster. Download the modified GIF. All local.
Gradient Border CSS Generator - Online Animated & Static
Design borders with linear or conic gradients. Supports border‑image and background‑clip methods. Copy optimized CSS.
CSS Progress Bar Generator - Online Animated & Styled
Create a custom HTML/CSS progress bar with percentage, colors, and animation. Copy the code. Modern UI element.
Image Sequence to GIF - Online Animated GIF Maker
Combine multiple static images into a single animated GIF. Adjust frame delay and order. No upload, in‑browser encoding.
Lighting Diagram Creator - Online Studio Setup Planner
Drag and drop light sources, camera, and subject to plan a photo shoot. Export diagram as image. Simple and visual.
Regex Visualizer - Online Railroad Diagram Generator
Enter a regular expression and see a visual railroad diagram explaining the pattern. Learn and debug regex.
GIF Caption Adder - Online Add Text to Animated GIFs
Upload an animated GIF and overlay text on top or bottom. Preserves animation. Instant download without upload. Pure browser canvas.
Rock Cycle Interactive Diagram - Online Geology Model
Click through the rock cycle to see how each rock type transforms into another. Animated arrows and descriptions.
Electron Configuration Writer - Online Orbital Diagram Tool
Get the full electron configuration and orbital box diagram for any element. Learn the Aufbau principle. Fast and local.
Mermaid Diagram Renderer - Online Flowchart & UML Editor
Write Mermaid markdown and instantly see the rendered flowchart, sequence diagram, or Gantt chart. Copy SVG output. Browser-side rendering.
Video to GIF Converter - Online Create Animated Images
Trim a video clip and convert it into an animated GIF. Adjust frame rate and size. Processing stays on your computer for privacy.