OSI and TCP/IP Layers Diagram

Network engineers describe almost everything by layer: a layer-2 loop, a layer-4 load balancer, a layer-7 firewall. This layer diagram puts the seven-layer OSI model next to the four-layer TCP/IP model with real protocols, and a second diagram shows how one HTTP request is wrapped in headers on its way to the wire.

1. The Diagram

OSI 7 Layers vs TCP/IP 4 Layers OSI model TCP/IP model Example protocols 7 Application PDU: data HTTP, DNS, SMTP, SSH 6 Presentation PDU: data TLS, JSON, UTF-8, JPEG 5 Session PDU: data sockets, RPC, TLS session 4 Transport PDU: segment / datagram TCP, UDP, QUIC 3 Network PDU: packet IPv4, IPv6, ICMP, IPsec 2 Data Link PDU: frame Ethernet, 802.11, ARP, VLAN 1 Physical PDU: bits copper, fiber, radio Application HTTP, DNS, TLS Transport TCP / UDP Internet IP Link Ethernet, Wi-Fi Upper layers are end-to-end; layers 1-3 are handled hop by hop by switches and routers.
  1. Read bottom-up for sending order. Physical (1) moves bits over a medium; Data Link (2) frames them for one hop using MAC addresses; Network (3) routes packets end to end with IP addresses.
  2. Transport (4). TCP adds ports, ordering and retransmission; UDP adds only ports. This is where a stream of data becomes segments.
  3. Upper three. Session, Presentation and Application are separate in OSI but collapse into one Application layer in TCP/IP. TLS straddles them, which is why people argue about its layer.
  4. Middle column. The TCP/IP model is what the internet actually implements; the green boxes show how its four layers line up with OSI's seven.

2. How to Read It

How to Read a Layer Diagram 4 Transport PDU: segment OSI layer + PDU name yellow = first end-to-end layer Application TCP/IP layer height = OSI layers covered HTTP, DNS example protocols IP 20 B payload header block + payload (encapsulation view)
ElementMeaning
Box with layer numberOne OSI layer and the name of its protocol data unit (PDU)
Green tall boxA TCP/IP layer; its height shows which OSI layers it covers
Yellow outlineTransport layer, the first end-to-end layer (TCP or UDP)
Header blocks (encapsulation view)Bytes added by each layer, drawn left of the payload they wrap

A layer diagram is not UML and not a topology: stacked boxes mean "uses the service of the layer below", not a physical connection. Keep one column per model and align rows so the mapping is visual.

3. Variant: Encapsulation

Encapsulation of One HTTP Request HTTP data GET / (data) TCP segment GET / (data) TCP 20 B IP packet GET / (data) TCP 20 B IP 20 B Ethernet frame GET / (data) TCP 20 B IP 20 B Eth 14 B FCS 4 B Each layer adds its header in front; the receiver strips them in reverse order. Typical Ethernet MTU 1500 B = IP + TCP headers (40 B) + up to 1460 B of data (MSS).

The same layers drawn as bytes on the wire. The HTTP request is wrapped by a 20-byte TCP header, then a 20-byte IPv4 header, then a 14-byte Ethernet header and a 4-byte frame check sequence. A router removes and rebuilds only the Ethernet part at each hop; the IP and TCP headers travel end to end.

4. Pros, Cons, and When to Use

Pros

Cons

When to use

When not to use

5. As Diagrams-as-Code

Mermaid block-beta, which suits stacked layer diagrams:

block-beta
  columns 3
  osi7["7 Application"]  tcpA["Application"]:1  p7["HTTP, DNS, SMTP"]
  osi6["6 Presentation"] space                 p6["TLS, JSON, JPEG"]
  osi5["5 Session"]      space                 p5["sockets, RPC"]
  osi4["4 Transport"]    tcpT["Transport"]      p4["TCP, UDP, QUIC"]
  osi3["3 Network"]      tcpI["Internet"]       p3["IPv4, IPv6, ICMP"]
  osi2["2 Data Link"]    tcpL["Link"]           p2["Ethernet, 802.11"]
  osi1["1 Physical"]     space                 p1["copper, fiber, radio"]

Mermaid cannot span a block across rows yet, so the TCP/IP column is labelled on its top row; draw the spans by hand or in D2 if they matter.