mermaid
sequenceDiagram
participant C as Client
participant S as Server
Note over C,S: Connection setup
C->>S: SYN (seq=x)
S->>C: SYN-ACK (seq=y, ack=x+1)
C->>S: ACK (ack=y+1)
Note over C,S: Data transfer
C->>S: HTTP request
S-->>C: HTTP response
Note over C,S: Teardown
C->>S: FIN
S->>C: ACK
S->>C: FIN
C->>S: ACKAbout this template
A classic networking diagram for courses and interviews. It shows SYN, SYN-ACK and ACK, a data exchange and the four-step FIN/ACK teardown.
How to customise it
- Add sequence numbers to messages
- Add a TLS handshake after the TCP handshake
- Show a lost packet with -x
This template is a Mermaid sequence diagram. See the sequence diagram page for the full syntax reference and more examples.
Frequently asked questions
How do I use this tcp three-way handshake template?
Click "Use this template" to open it in the MermaidViewer editor. Edit the Mermaid code on the left and the diagram updates instantly. No account is needed.
Can I export the template as an image?
Yes. In the editor use Export to download PNG, SVG or PDF, or copy the image to your clipboard. You can also copy the code as a Markdown block for GitHub, GitLab or Notion.
Can AI customise this template for me?
Yes. Open the AI assistant (Ctrl/Cmd+K) and describe the change, for example "Add sequence numbers to messages". The updated diagram streams into the editor.