TLS Handshake Tech Infographic to Create Topology Online

Tech architecture infographic titled "TLS Handshake" using the PROTOCOL HANDSHAKE archetype. Show a technically accurate numbered exchange between a Client Browser and an Application Server, with supporting infrastructure boxes around the main flow for API, Database, Cache, Queue, and Generic Cloud Network as contextual system components. Main composition: two large primary boxes facing each other, connected by directional arrows for each TLS handshake message, plus secondary boxes rendered smaller and clearly marked as contextual backend components not participating directly in the TLS negotiation. Render labeled boxes for every component with icon + canonical English name + one-line role description in English: "Browser — User agent initiating HTTPS connection", "Application Server — Endpoint presenting certificate and negotiating TLS", "API Service — Backend business logic over HTTPS", "Database — Persistent application data storage", "Cache — Low-latency temporary data store", "Queue — Asynchronous job buffering", "Generic Cloud Network — Internet and routing layer". Use arrows with short English labels showing exactly what crosses. Main handshake flow should be TLS 1.3 first, technically accurate: 1) Browser -> Application Server: "TCP SYN / SYN-ACK / ACK" as connection setup context, 2) Browser -> Application Server: "ClientHello + SNI + ALPN + cipher suites + key share", 3) Application Server -> Browser: "ServerHello + key share", 4) Application Server -> Browser: "EncryptedExtensions", 5) Application Server -> Browser: "Certificate + CertificateVerify", 6) Application Server -> Browser: "Finished", 7) Browser -> Application Server: "Finished", then application data lane after handshake: "HTTPS request" and return lane: "HTTP 200 JSON response". Optionally annotate "Handshake keys derived" and "Encrypted application data" after Finished messages. Add a small side note box: "TLS Session — Negotiates encryption, authenticity, and integrity for HTTPS; not an audited security blueprint". Show supporting backend request flow after TLS establishment: Application Server -> API Service arrow labeled "REST call", API Service -> Cache arrow labeled "GET key / SET key", API Service -> Database arrow labeled "SELECT / INSERT row", API Service -> Queue arrow labeled "Publish job", but visually subordinate these arrows so the TLS handshake remains the central story. Add a numbered legend 1-7 in English walking through the lifecycle: 1. Client opens a TCP connection to the server. 2. ClientHello proposes TLS version, cipher suites, SNI, ALPN, and key share. 3. ServerHello selects parameters and returns its key share. 4. EncryptedExtensions sends negotiated connection options. 5. Certificate and CertificateVerify prove server identity and possession of the private key. 6. Server Finished confirms handshake integrity under derived keys. 7. Client Finished completes the handshake; HTTPS application data can now flow. Visual style: retro 1980s computing, blueprint cyan palette, glowing cyan lines on dark navy background, CRT terminal accents, grid paper / technical drafting vibe, subtle scanline texture, precise vector boxes and arrows, editorial developer-blog illustration, isometric or flat tech-diagram style, vector-clean infographic layout. Audience fit: mid-level developer, clear labels, concise but accurate terminology, educational not marketing. Include section headers such as "Handshake Sequence", "Application Data", and "Context Components" in English. No real cloud-vendor logos; use generic cloud icons only. All text MUST be written in English (array). Every heading, label, caption, legend and metric name in the image must be in English — not English. Spell each English word correctly using English characters and diacritics. Numbers stay as digits, no real cloud-vendor logos (AWS / GCP / Azure) — use generic cloud icons, no watermarks No real cloud-vendor logos (AWS, GCP, Azure) beyond generic cloud icons. Common protocol names (HTTPS, TCP, JWT, OAuth, REST, GraphQL) stay in canonical English form. No security-claim overstatements (do not present diagrams as audited reference architectures).