Merge pull request #7 from mdn/http-mermaid

feat: check in HTTP sequence diagrams

Author: bsmth

images/diagrams/http/README.md

@@ -0,0 +1,22 @@
+# Mermaid sequence diagrams
+
+This directory includes SVG diagrams which are generated from [Mermaid](https://mermaid.js.org/) syntax.
+For example, the source `.mmd` file is a sibling of the generated SVG:
+
+```plain
+├── content-negotiation.mmd
+└── content-negotiation.svg
+```
+
+## Converting to SVG
+
+For any `.mmd` file, you may visit <https://www.mermaidchart.com/> and export as SVG.
+Alternatively, see the [CLI](https://github.com/mermaid-js/mermaid-cli) and other tools under <https://github.com/mermaid-js>.
+
+## Discussions, issues and pull requests
+
+For information about Mermaid diagrams and context of their inclusion in MDN repos, see:
+
+- [Using SVG format instead of .png images](https://github.com/orgs/mdn/discussions/631) GitHub discussion
+- [feat: Add SVG diagrams for HTTP sequences](https://github.com/mdn/content/pull/31812) `mdn/content` pull request
+- [Support Mermaid in MDN Markdown](https://github.com/orgs/mdn/discussions/358)

images/diagrams/http/compression/compression-nodes.mmd

@@ -0,0 +1,26 @@
+%%{init: { "sequence": { "wrap": true, "width": 175, "noteAlign": "center" }} }%%
+
+sequenceDiagram
+    participant Client
+    participant Node1 as Node
+    participant Node2 as Node
+    participant Server
+
+    Note over Client: Request message
+    Client->>Node1: GET /doc HTTP/1.1
+
+    Note over Node1: Shows support for compression while forwarding message.
+    Node1->>Node2: GET /doc HTTP/1.1<br/>TE: gzip, br
+
+    Note over Node2: Forwards message
+    Node2->>Server: GET /doc HTTP/1.1
+
+    Note over Server: Returns resource in an uncompressed body.
+    Server->>Node2: HTTP/1.1 200 OK
+
+
+    Note over Node2: Compresses body and forwards message.
+    Node2->>Node1: HTTP/1.1 200 OK<br/>Transfer-Encoding: br
+
+    Note over Node1: Uncompresses resource and returns message to Client.
+    Node1->>Client: HTTP/1.1 200 OK

images/diagrams/http/compression/compression-nodes.svg

@@ -0,0 +1,10 @@
+%%{init: { "sequence": { "wrap": true, "width":380, "noteAlign": "center", "messageAlign": "left" }} }%%
+
+sequenceDiagram
+    participant Client
+    participant Server
+
+    Note over Client: The client signifies its ability to understand two compression algorithms.
+    Client->>Server: GET /doc HTTP/1.1<br/>Accept-Encoding: br, gzip
+    Note over Server: The resource is sent compressed. The Vary header indicates that content negotiation has been used to select the algorithm.
+    Server->>Client: HTTP/1.1 200 OK<br/>Content-Encoding: br<br/>Vary: Accept-Encoding