🍱 Update Drawio diagrams SVGs, single file per diagram, sans-serif font (#13706)

--------- Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
6 days ago · 214e0740c8
56 changed files with 5707 additions and 2368 deletions
--- a/docs/de/docs/deployment/concepts.md
+++ b/docs/de/docs/deployment/concepts.md
@ -216,7 +216,7 @@ Dieser Manager-Prozess wäre wahrscheinlich derjenige, welcher der IP am **Port*

 Diese Workerprozesse würden Ihre Anwendung ausführen, sie würden die Hauptberechnungen durchführen, um einen **Request** entgegenzunehmen und eine **Response** zurückzugeben, und sie würden alles, was Sie in Variablen einfügen, in den RAM laden.

-<img src="/img/deployment/concepts/process-ram.svg">
+<img src="/img/deployment/concepts/process-ram.drawio.svg">

 Und natürlich würden auf derselben Maschine neben Ihrer Anwendung wahrscheinlich auch **andere Prozesse** laufen.

--- a/docs/de/docs/deployment/https.md
+++ b/docs/de/docs/deployment/https.md
@ -85,7 +85,7 @@ Zuerst würde der Browser mithilfe der **DNS-Server** herausfinden, welches die

 Die DNS-Server geben dem Browser eine bestimmte **IP-Adresse** zurück. Das wäre die von Ihrem Server verwendete öffentliche IP-Adresse, die Sie in den DNS-Servern konfiguriert haben.

-<img src="/img/deployment/https/https01.svg">
+<img src="/img/deployment/https/https01.drawio.svg">

 ### TLS-Handshake-Start

@ -93,7 +93,7 @@ Der Browser kommuniziert dann mit dieser IP-Adresse über **Port 443** (den HTTP

 Der erste Teil der Kommunikation besteht lediglich darin, die Verbindung zwischen dem Client und dem Server herzustellen und die zu verwendenden kryptografischen Schlüssel usw. zu vereinbaren.

-<img src="/img/deployment/https/https02.svg">
+<img src="/img/deployment/https/https02.drawio.svg">

 Diese Interaktion zwischen dem Client und dem Server zum Aufbau der TLS-Verbindung wird als **<abbr title="TLS-Handschlag">TLS-Handshake</abbr>** bezeichnet.

@ -111,7 +111,7 @@ Mithilfe der oben beschriebenen **SNI-Erweiterung** würde der TLS-Terminierungs

 In diesem Fall würde er das Zertifikat für `someapp.example.com` verwenden.

-<img src="/img/deployment/https/https03.svg">
+<img src="/img/deployment/https/https03.drawio.svg">

 Der Client **vertraut** bereits der Entität, die das TLS-Zertifikat generiert hat (in diesem Fall Let's Encrypt, aber wir werden später mehr darüber erfahren), sodass er **verifizieren** kann, dass das Zertifikat gültig ist.

@ -133,19 +133,19 @@ Da Client und Server (sprich, der Browser und der TLS-Terminierungsproxy) nun ü

 Der Client sendet also einen **HTTPS-Request**. Das ist einfach ein HTTP-Request über eine verschlüsselte TLS-Verbindung.

-<img src="/img/deployment/https/https04.svg">
+<img src="/img/deployment/https/https04.drawio.svg">

 ### Den Request entschlüsseln

 Der TLS-Terminierungsproxy würde die vereinbarte Verschlüsselung zum **Entschlüsseln des Requests** verwenden und den **einfachen (entschlüsselten) HTTP-Request** an den Prozess weiterleiten, der die Anwendung ausführt (z. B. einen Prozess, bei dem Uvicorn die FastAPI-Anwendung ausführt).

-<img src="/img/deployment/https/https05.svg">
+<img src="/img/deployment/https/https05.drawio.svg">

 ### HTTP-Response

 Die Anwendung würde den Request verarbeiten und eine **einfache (unverschlüsselte) HTTP-Response** an den TLS-Terminierungsproxy senden.

-<img src="/img/deployment/https/https06.svg">
+<img src="/img/deployment/https/https06.drawio.svg">

 ### HTTPS-Response

@ -153,7 +153,7 @@ Der TLS-Terminierungsproxy würde dann die Response mithilfe der zuvor vereinbar

 Als Nächstes überprüft der Browser, ob die Response gültig und mit dem richtigen kryptografischen Schlüssel usw. verschlüsselt ist. Anschließend **entschlüsselt er die Response** und verarbeitet sie.

-<img src="/img/deployment/https/https07.svg">
+<img src="/img/deployment/https/https07.drawio.svg">

 Der Client (Browser) weiß, dass die Response vom richtigen Server kommt, da dieser die Kryptografie verwendet, die zuvor mit dem **HTTPS-Zertifikat** vereinbart wurde.

@ -163,7 +163,7 @@ Auf demselben Server (oder denselben Servern) könnten sich **mehrere Anwendunge

 Nur ein Prozess kann diese spezifische IP und den Port verarbeiten (in unserem Beispiel der TLS-Terminierungsproxy), aber die anderen Anwendungen/Prozesse können auch auf dem/den Server(n) ausgeführt werden, solange sie nicht versuchen, dieselbe **Kombination aus öffentlicher IP und Port** zu verwenden.

-<img src="/img/deployment/https/https08.svg">
+<img src="/img/deployment/https/https08.drawio.svg">

 Auf diese Weise könnte der TLS-Terminierungsproxy HTTPS und Zertifikate für **mehrere Domains**, für mehrere Anwendungen, verarbeiten und die Requests dann jeweils an die richtige Anwendung weiterleiten.

@ -173,7 +173,7 @@ Irgendwann in der Zukunft würde jedes Zertifikat **ablaufen** (etwa 3 Monate na

 Und dann gäbe es ein anderes Programm (in manchen Fällen ist es ein anderes Programm, in manchen Fällen ist es derselbe TLS-Terminierungsproxy), das mit Let's Encrypt kommuniziert und das/die Zertifikat(e) erneuert.

-<img src="/img/deployment/https/https.svg">
+<img src="/img/deployment/https/https.drawio.svg">

 Die **TLS-Zertifikate** sind **einem Domainnamen zugeordnet**, nicht einer IP-Adresse.

--- a/docs/de/docs/tutorial/bigger-applications.md
+++ b/docs/de/docs/tutorial/bigger-applications.md
@ -52,7 +52,7 @@ from app.routers import items
 * Es gibt auch ein Unterverzeichnis `app/internal/` mit einer weiteren Datei `__init__.py`, es handelt sich also um ein weiteres „Python-Subpackage“: `app.internal`.
 * Und die Datei `app/internal/admin.py` ist ein weiteres Submodul: `app.internal.admin`.

-<img src="/img/tutorial/bigger-applications/package.svg">
+<img src="/img/tutorial/bigger-applications/package.drawio.svg">

 Die gleiche Dateistruktur mit Kommentaren:

@ -270,7 +270,7 @@ Aber diese Datei existiert nicht, unsere Abhängigkeiten befinden sich in einer

 Erinnern Sie sich, wie unsere Anwendungs-/Dateistruktur aussieht:

-<img src="/img/tutorial/bigger-applications/package.svg">
+<img src="/img/tutorial/bigger-applications/package.drawio.svg">

 ---

--- a/docs/em/docs/deployment/concepts.md
+++ b/docs/em/docs/deployment/concepts.md
@ -216,7 +216,7 @@

 👈 👨‍🏭 🛠️ 🔜 🕐 🏃‍♂ 👆 🈸, 👫 🔜 🎭 👑 📊 📨 **📨** &amp; 📨 **📨**, &amp; 👫 🔜 📐 🕳 👆 🚮 🔢 💾.

-<img src="/img/deployment/concepts/process-ram.svg">
+<img src="/img/deployment/concepts/process-ram.drawio.svg">

 &amp; ↗️, 🎏 🎰 🔜 🎲 ✔️ **🎏 🛠️** 🏃 👍, ↖️ ⚪️➡️ 👆 🈸.

--- a/docs/em/docs/deployment/https.md
+++ b/docs/em/docs/deployment/https.md
@ -85,7 +85,7 @@

 🏓 💽 🔜 💬 🖥 ⚙️ 🎯 **📢 📢**. 👈 🔜 📢 📢 📢 ⚙️ 👆 💽, 👈 👆 🔗 🏓 💽.

-<img src="/img/deployment/https/https01.svg">
+<img src="/img/deployment/https/https01.drawio.svg">

 ### 🤝 🤝 ▶️

@ -93,7 +93,7 @@

 🥇 🍕 📻 🛠️ 🔗 🖖 👩‍💻 &amp; 💽 &amp; 💭 🔐 🔑 👫 🔜 ⚙️, ♒️.

-<img src="/img/deployment/https/https02.svg">
+<img src="/img/deployment/https/https02.drawio.svg">

 👉 🔗 🖖 👩‍💻 &amp; 💽 🛠️ 🤝 🔗 🤙 **🤝 🤝**.

@ -111,7 +111,7 @@

 👉 💼, ⚫️ 🔜 ⚙️ 📄 `someapp.example.com`.

-<img src="/img/deployment/https/https03.svg">
+<img src="/img/deployment/https/https03.drawio.svg">

 👩‍💻 ⏪ **💙** 👨‍💼 👈 🏗 👈 🤝 📄 (👉 💼 ➡️ 🗜, ✋️ 👥 🔜 👀 🔃 👈 ⏪), ⚫️ 💪 **✔** 👈 📄 ☑.

@ -133,19 +133,19 @@

 , 👩‍💻 📨 **🇺🇸🔍 📨**. 👉 🇺🇸🔍 📨 🔘 🗜 🤝 🔗.

-<img src="/img/deployment/https/https04.svg">
+<img src="/img/deployment/https/https04.drawio.svg">

 ### 🗜 📨

 🤝 ❎ 🗳 🔜 ⚙️ 🔐 ✔ **🗜 📨**, &amp; 🔜 📶 **✅ (🗜) 🇺🇸🔍 📨** 🛠️ 🏃 🈸 (🖼 🛠️ ⏮️ Uvicorn 🏃‍♂ FastAPI 🈸).

-<img src="/img/deployment/https/https05.svg">
+<img src="/img/deployment/https/https05.drawio.svg">

 ### 🇺🇸🔍 📨

 🈸 🔜 🛠️ 📨 &amp; 📨 **✅ (💽) 🇺🇸🔍 📨** 🤝 ❎ 🗳.

-<img src="/img/deployment/https/https06.svg">
+<img src="/img/deployment/https/https06.drawio.svg">

 ### 🇺🇸🔍 📨

@ -153,7 +153,7 @@

 ⏭, 🖥 🔜 ✔ 👈 📨 ☑ &amp; 🗜 ⏮️ ▶️️ 🔐 🔑, ♒️. ⚫️ 🔜 ⤴️ **🗜 📨** &amp; 🛠️ ⚫️.

-<img src="/img/deployment/https/https07.svg">
+<img src="/img/deployment/https/https07.drawio.svg">

 👩‍💻 (🖥) 🔜 💭 👈 📨 👟 ⚪️➡️ ☑ 💽 ↩️ ⚫️ ⚙️ ⚛ 👫 ✔ ⚙️ **🇺🇸🔍 📄** ⏭.

@ -163,7 +163,7 @@

 🕴 1️⃣ 🛠️ 💪 🚚 🎯 📢 &amp; ⛴ (🤝 ❎ 🗳 👆 🖼) ✋️ 🎏 🈸/🛠️ 💪 🏃 🔛 💽(Ⓜ) 💁‍♂️, 📏 👫 🚫 🔄 ⚙️ 🎏 **🌀 📢 📢 &amp; ⛴**.

-<img src="/img/deployment/https/https08.svg">
+<img src="/img/deployment/https/https08.drawio.svg">

 👈 🌌, 🤝 ❎ 🗳 💪 🍵 🇺🇸🔍 &amp; 📄 **💗 🆔**, 💗 🈸, &amp; ⤴️ 📶 📨 ▶️️ 🈸 🔠 💼.

@ -173,7 +173,7 @@

 &amp; ⤴️, 📤 🔜 ➕1️⃣ 📋 (💼 ⚫️ ➕1️⃣ 📋, 💼 ⚫️ 💪 🎏 🤝 ❎ 🗳) 👈 🔜 💬 ➡️ 🗜, &amp; ♻ 📄(Ⓜ).

-<img src="/img/deployment/https/https.svg">
+<img src="/img/deployment/https/https.drawio.svg">

 **🤝 📄** **🔗 ⏮️ 🆔 📛**, 🚫 ⏮️ 📢 📢.

--- a/docs/em/docs/tutorial/bigger-applications.md
+++ b/docs/em/docs/tutorial/bigger-applications.md
@ -52,7 +52,7 @@ from app.routers import items
 * 📤 📁 `app/internal/` ⏮️ ➕1️⃣ 📁 `__init__.py`, ⚫️ ➕1️⃣ "🐍 📦": `app.internal`.
 *  &amp; 📁 `app/internal/admin.py` ➕1️⃣ 🔁: `app.internal.admin`.

-<img src="/img/tutorial/bigger-applications/package.svg">
+<img src="/img/tutorial/bigger-applications/package.drawio.svg">

 🎏 📁 📊 ⏮️ 🏤:

@ -244,7 +244,7 @@ from .dependencies import get_token_header

 💭 ❔ 👆 📱/📁 📊 👀 💖:

-<img src="/img/tutorial/bigger-applications/package.svg">
+<img src="/img/tutorial/bigger-applications/package.drawio.svg">

 ---

--- a/docs/en/docs/deployment/concepts.md
+++ b/docs/en/docs/deployment/concepts.md
@ -216,7 +216,7 @@ This Manager Process would probably be the one listening on the **port** in the

 Those worker processes would be the ones running your application, they would perform the main computations to receive a **request** and return a **response**, and they would load anything you put in variables in RAM.

-<img src="/img/deployment/concepts/process-ram.svg">
+<img src="/img/deployment/concepts/process-ram.drawio.svg">

 And of course, the same machine would probably have **other processes** running as well, apart from your application.

--- a/docs/en/docs/deployment/https.md
+++ b/docs/en/docs/deployment/https.md
@ -85,7 +85,7 @@ First, the browser would check with the **DNS servers** what is the **IP for the

 The DNS servers would tell the browser to use some specific **IP address**. That would be the public IP address used by your server, that you configured in the DNS servers.

-<img src="/img/deployment/https/https01.svg">
+<img src="/img/deployment/https/https01.drawio.svg">

 ### TLS Handshake Start

@ -93,7 +93,7 @@ The browser would then communicate with that IP address on **port 443** (the HTT

 The first part of the communication is just to establish the connection between the client and the server and to decide the cryptographic keys they will use, etc.

-<img src="/img/deployment/https/https02.svg">
+<img src="/img/deployment/https/https02.drawio.svg">

 This interaction between the client and the server to establish the TLS connection is called the **TLS handshake**.

@ -111,7 +111,7 @@ Using the **SNI extension** discussed above, the TLS Termination Proxy would che

 In this case, it would use the certificate for `someapp.example.com`.

-<img src="/img/deployment/https/https03.svg">
+<img src="/img/deployment/https/https03.drawio.svg">

 The client already **trusts** the entity that generated that TLS certificate (in this case Let's Encrypt, but we'll see about that later), so it can **verify** that the certificate is valid.

@ -133,19 +133,19 @@ Now that the client and server (specifically the browser and the TLS Termination

 So, the client sends an **HTTPS request**. This is just an HTTP request through an encrypted TLS connection.

-<img src="/img/deployment/https/https04.svg">
+<img src="/img/deployment/https/https04.drawio.svg">

 ### Decrypt the Request

 The TLS Termination Proxy would use the encryption agreed to **decrypt the request**, and would transmit the **plain (decrypted) HTTP request** to the process running the application (for example a process with Uvicorn running the FastAPI application).

-<img src="/img/deployment/https/https05.svg">
+<img src="/img/deployment/https/https05.drawio.svg">

 ### HTTP Response

 The application would process the request and send a **plain (unencrypted) HTTP response** to the TLS Termination Proxy.

-<img src="/img/deployment/https/https06.svg">
+<img src="/img/deployment/https/https06.drawio.svg">

 ### HTTPS Response

@ -153,7 +153,7 @@ The TLS Termination Proxy would then **encrypt the response** using the cryptogr

 Next, the browser would verify that the response is valid and encrypted with the right cryptographic key, etc. It would then **decrypt the response** and process it.

-<img src="/img/deployment/https/https07.svg">
+<img src="/img/deployment/https/https07.drawio.svg">

 The client (browser) will know that the response comes from the correct server because it is using the cryptography they agreed using the **HTTPS certificate** before.

@ -163,7 +163,7 @@ In the same server (or servers), there could be **multiple applications**, for e

 Only one process can be handling the specific IP and port (the TLS Termination Proxy in our example) but the other applications/processes can be running on the server(s) too, as long as they don't try to use the same **combination of public IP and port**.

-<img src="/img/deployment/https/https08.svg">
+<img src="/img/deployment/https/https08.drawio.svg">

 That way, the TLS Termination Proxy could handle HTTPS and certificates for **multiple domains**, for multiple applications, and then transmit the requests to the right application in each case.

@ -173,7 +173,7 @@ At some point in the future, each certificate would **expire** (about 3 months a

 And then, there would be another program (in some cases it's another program, in some cases it could be the same TLS Termination Proxy) that would talk to Let's Encrypt, and renew the certificate(s).

-<img src="/img/deployment/https/https.svg">
+<img src="/img/deployment/https/https.drawio.svg">

 The **TLS certificates** are **associated with a domain name**, not with an IP address.

--- a/docs/en/docs/img/deployment/concepts/process-ram.drawio
+++ b/docs/en/docs/img/deployment/concepts/process-ram.drawio
@ -1,106 +0,0 @@
-<mxfile host="65bd71144e">
-    <diagram id="BkDNbdtn8_9fWQybnc8v" name="Page-1">
-        <mxGraphModel dx="741" dy="1167" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1920" pageHeight="1200" math="0" shadow="0">
-            <root>
-                <mxCell id="0"/>
-                <mxCell id="1" parent="0"/>
-                <mxCell id="2" value="" style="rounded=0;whiteSpace=wrap;html=1;fontStyle=1;strokeWidth=4;" parent="1" vertex="1">
-                    <mxGeometry x="420" y="280" width="920" height="670" as="geometry"/>
-                </mxCell>
-                <mxCell id="3" value="&lt;font face=&quot;Roboto&quot;&gt;&lt;span style=&quot;font-size: 24px&quot;&gt;Server&lt;/span&gt;&lt;/font&gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;strokeWidth=3;fontFamily=Roboto Mono, mono;FType=g;" parent="1" vertex="1">
-                    <mxGeometry x="755" y="290" width="300" height="80" as="geometry"/>
-                </mxCell>
-                <mxCell id="6" value="" style="rounded=0;whiteSpace=wrap;html=1;fontStyle=1;strokeWidth=4;fillColor=#dae8fc;strokeColor=#6c8ebf;" parent="1" vertex="1">
-                    <mxGeometry x="1110" y="410" width="190" height="500" as="geometry"/>
-                </mxCell>
-                <mxCell id="7" value="&lt;font style=&quot;font-size: 24px&quot; face=&quot;Roboto&quot;&gt;RAM&lt;br&gt;&lt;/font&gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;strokeWidth=3;fontFamily=Roboto Mono, mono;FType=g;" parent="1" vertex="1">
-                    <mxGeometry x="1166.92" y="420" width="76.16" height="30" as="geometry"/>
-                </mxCell>
-                <mxCell id="9" value="" style="rounded=0;whiteSpace=wrap;html=1;fontStyle=1;strokeWidth=4;fillColor=#dae8fc;strokeColor=#6c8ebf;" parent="1" vertex="1">
-                    <mxGeometry x="470" y="410" width="250" height="500" as="geometry"/>
-                </mxCell>
-                <mxCell id="10" value="&lt;font style=&quot;font-size: 24px&quot; face=&quot;Roboto&quot;&gt;CPU&lt;br&gt;&lt;/font&gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;strokeWidth=3;fontFamily=Roboto Mono, mono;FType=g;" parent="1" vertex="1">
-                    <mxGeometry x="554.61" y="420" width="80.77" height="30" as="geometry"/>
-                </mxCell>
-                <mxCell id="14" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeWidth=3;exitX=0.092;exitY=1.01;exitDx=0;exitDy=0;dashed=1;exitPerimeter=0;" parent="1" source="11" target="12" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <Array as="points">
-                            <mxPoint x="800" y="521"/>
-                            <mxPoint x="800" y="560"/>
-                        </Array>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="15" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeWidth=3;dashed=1;" parent="1" source="11" target="13" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <mxPoint x="820" y="525" as="sourcePoint"/>
-                        <Array as="points">
-                            <mxPoint x="800" y="680"/>
-                        </Array>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="19" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeWidth=3;endArrow=none;endFill=0;" parent="1" source="11" target="17" edge="1">
-                    <mxGeometry relative="1" as="geometry"/>
-                </mxCell>
-                <mxCell id="20" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;endArrow=none;endFill=0;strokeWidth=3;" parent="1" source="11" target="18" edge="1">
-                    <mxGeometry relative="1" as="geometry"/>
-                </mxCell>
-                <mxCell id="11" value="&lt;font face=&quot;roboto&quot;&gt;&lt;span style=&quot;font-size: 24px&quot;&gt;Process&amp;nbsp;&lt;/span&gt;&lt;/font&gt;&lt;span style=&quot;font-family: &amp;#34;roboto&amp;#34; ; font-size: 24px&quot;&gt;Manager&lt;/span&gt;" style="shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fixedSize=1;strokeWidth=3;fillColor=#d5e8d4;strokeColor=#82b366;" parent="1" vertex="1">
-                    <mxGeometry x="780" y="420" width="250" height="100" as="geometry"/>
-                </mxCell>
-                <mxCell id="25" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;endArrow=none;endFill=0;strokeWidth=3;" parent="1" source="12" target="23" edge="1">
-                    <mxGeometry relative="1" as="geometry"/>
-                </mxCell>
-                <mxCell id="12" value="&lt;font face=&quot;roboto&quot;&gt;&lt;span style=&quot;font-size: 24px&quot;&gt;Worker Process&lt;/span&gt;&lt;/font&gt;" style="shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fixedSize=1;strokeWidth=3;fillColor=#fff2cc;strokeColor=#d6b656;" parent="1" vertex="1">
-                    <mxGeometry x="840" y="540" width="240" height="100" as="geometry"/>
-                </mxCell>
-                <mxCell id="26" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;endArrow=none;endFill=0;strokeWidth=3;" parent="1" source="13" target="24" edge="1">
-                    <mxGeometry relative="1" as="geometry"/>
-                </mxCell>
-                <mxCell id="29" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;endArrow=none;endFill=0;strokeWidth=3;" parent="1" source="13" target="22" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <Array as="points">
-                            <mxPoint x="775" y="710"/>
-                            <mxPoint x="775" y="688"/>
-                        </Array>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="13" value="&lt;font face=&quot;roboto&quot;&gt;&lt;span style=&quot;font-size: 24px&quot;&gt;Worker Process&lt;/span&gt;&lt;/font&gt;" style="shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fixedSize=1;strokeWidth=3;fillColor=#e1d5e7;strokeColor=#9673a6;" parent="1" vertex="1">
-                    <mxGeometry x="840" y="660" width="240" height="100" as="geometry"/>
-                </mxCell>
-                <mxCell id="28" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;endArrow=none;endFill=0;strokeWidth=3;" parent="1" source="16" target="27" edge="1">
-                    <mxGeometry relative="1" as="geometry"/>
-                </mxCell>
-                <mxCell id="31" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;endArrow=none;endFill=0;strokeWidth=3;" parent="1" source="16" target="30" edge="1">
-                    <mxGeometry relative="1" as="geometry"/>
-                </mxCell>
-                <mxCell id="16" value="&lt;font face=&quot;roboto&quot;&gt;&lt;span style=&quot;font-size: 24px&quot;&gt;Another Process&lt;/span&gt;&lt;/font&gt;" style="shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fixedSize=1;strokeWidth=3;" parent="1" vertex="1">
-                    <mxGeometry x="780" y="790" width="250" height="100" as="geometry"/>
-                </mxCell>
-                <mxCell id="17" value="" style="rounded=0;whiteSpace=wrap;html=1;strokeWidth=3;fillColor=#d5e8d4;strokeColor=#82b366;dashed=1;" parent="1" vertex="1">
-                    <mxGeometry x="480" y="458" width="230" height="40" as="geometry"/>
-                </mxCell>
-                <mxCell id="18" value="" style="rounded=0;whiteSpace=wrap;html=1;strokeWidth=3;fillColor=#d5e8d4;strokeColor=#82b366;" parent="1" vertex="1">
-                    <mxGeometry x="1130" y="460" width="150" height="20" as="geometry"/>
-                </mxCell>
-                <mxCell id="21" value="" style="rounded=0;whiteSpace=wrap;html=1;strokeWidth=3;fillColor=#fff2cc;strokeColor=#d6b656;dashed=1;" parent="1" vertex="1">
-                    <mxGeometry x="480" y="508" width="230" height="100" as="geometry"/>
-                </mxCell>
-                <mxCell id="22" value="" style="rounded=0;whiteSpace=wrap;html=1;strokeWidth=3;fillColor=#e1d5e7;strokeColor=#9673a6;dashed=1;" parent="1" vertex="1">
-                    <mxGeometry x="480" y="618" width="230" height="140" as="geometry"/>
-                </mxCell>
-                <mxCell id="23" value="&lt;font face=&quot;Roboto&quot; data-font-src=&quot;https://fonts.googleapis.com/css?family=Roboto&quot; style=&quot;font-size: 24px&quot;&gt;1 GB&lt;/font&gt;" style="rounded=0;whiteSpace=wrap;html=1;strokeWidth=3;fillColor=#fff2cc;strokeColor=#d6b656;" parent="1" vertex="1">
-                    <mxGeometry x="1130" y="490" width="150" height="150" as="geometry"/>
-                </mxCell>
-                <mxCell id="24" value="&lt;font face=&quot;Roboto&quot; data-font-src=&quot;https://fonts.googleapis.com/css?family=Roboto&quot; style=&quot;font-size: 24px&quot;&gt;1 GB&lt;/font&gt;" style="rounded=0;whiteSpace=wrap;html=1;strokeWidth=3;fillColor=#e1d5e7;strokeColor=#9673a6;" parent="1" vertex="1">
-                    <mxGeometry x="1130" y="650" width="150" height="150" as="geometry"/>
-                </mxCell>
-                <mxCell id="27" value="" style="rounded=0;whiteSpace=wrap;html=1;strokeWidth=3;dashed=1;" parent="1" vertex="1">
-                    <mxGeometry x="480" y="768" width="230" height="50" as="geometry"/>
-                </mxCell>
-                <mxCell id="30" value="" style="rounded=0;whiteSpace=wrap;html=1;strokeWidth=3;" parent="1" vertex="1">
-                    <mxGeometry x="1130" y="810" width="150" height="50" as="geometry"/>
-                </mxCell>
-            </root>
-        </mxGraphModel>
-    </diagram>
-</mxfile>
--- a/docs/en/docs/img/deployment/concepts/process-ram.drawio.svg
+++ b/docs/en/docs/img/deployment/concepts/process-ram.drawio.svg
@ -0,0 +1,297 @@
+<svg host="65bd71144e" xmlns="http://www.w3.org/2000/svg" style="background: transparent; background-color: transparent;" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="924px" height="674px" viewBox="-0.5 -0.5 924 674" content="&lt;mxfile&gt;&lt;diagram id=&quot;BkDNbdtn8_9fWQybnc8v&quot; name=&quot;Page-1&quot;&gt;7VvRkqI4FP0aH8eCAAEfHae792G7qmusqdl9jBCFHSRMiK3u128iQQzElm5B6C2fJJdAwj0nh3tvcGTN1rsnitLwmQQ4HgEj2I2sbyMAgON6/EdY9rnFhC7ILSsaBdJWGubRv1gaDWndRAHOlI6MkJhFqWr0SZJgnyk2RCnZqt2WJFZHTdEK1wxzH8V1688oYKG0ToBRnvgDR6uwGBoY8swaFb2lIQtRQLYnJuthZM0oISw/Wu9mOBbuKxyTX/d45uxxZhQnrMkF0vGvKN7Ih5PzYvviaSnZJAEW/Y2R9XUbRgzPU+SLs1sOMLeFbB3zlskPlyRhc3mtaGeMkl9HL9myxyNaR7FA/ztZEEb4eM8k4T8z4aLjUYaS7EuGabTkl9UfTD7rK6YM705M8kGfMFljRve8izxrF06XvAOebG9LEI8Yhif4QVcakSTO6njv0rX8QHpX72lL42kYM+GjFCWKy+HvjcD/4Kov2YH+U94B2Onu4IniPD9ayd+46C/4nINT9iu8XHFq7T5zTLk3i7vxB8pvqA7CzfmEC3OFLhwMpnIi58CMxIRyS0ISLOYaxXHFhOJolfCmzyHm07C+Cmgjvuym8sQ6CgIxjJaEKk1V3lnneNcFzVzHUWk2qdPMMjQ081pgGbz9ej4BcgSsAGFv6ddQ52eg7+HFslcFME1TlQDbrGNjTjTYOEYL4LhnJUCu3GYS0Nn6/z59vrD4F1QjB2rHzywHNyIhhOMJUHkI6jx04diEdSZaLRBxcleJt+IE97JIcEHoSCSKwQarErOXH3eV6JyEjmOPoXlRJDxj7LrdiIRp12DCAc+DZJNQFpIVSVD8UForDi37/ElIKpH9BzO2l0kd2nCHanA/xQDvIvaXuOHY4KqZt/8WvceGKZvfdnLAQ2MvGwHKwsNUim4vHB7uBkGTQ4e20c3IhvpFjlgkpoiu8DEPzG3CjW9ygOIYsehVTTd1WB4unVKK9icdUhIlLDu584swlNTyDFXfHDnCY9P+0KjwKJ9ByarjozQjmjMMoil8uTk3rE64UQcTVMF31FvkE5VXlShfSzLotUyayTBIg5NgKkpK5RuJWx4jMe9+NMZtm0dN3xfHktZNEbnk/+7f6RcR8fpCpJjN+VDyw0HgxZD0/CVXl7teKPFxxrUHorUI4pJFlqqxplqgejNWvXo2zyhBK6Vq1mj0ykrJQpSKwxDvEF8AvEt6EqxI6zF+AQ1SsmiHi9K5XrmqKZmDvcDWpWQeWFgQ9hoNu14lJdOEwtqUzGwjJQO9BCgDUzZQVzbQeszSWNl0+xYDq6b/JPSX0AWj1Ktr6ur9K8RyuQS+tmgTwAV0+lUIz67EtbZGIezOFALeFaLIYBSFsHuLRnvJDz4BIsOoQbiuuknmmpV96gv9oedV2HBlOvkJtmf/dy8UbPKg09W9UCbQtdCwXigQ3vSF4t3lq9j9UuSrt/KGZd4R0SFSbDX0kAToPnYYmGZPE8LCTy7ag8n6Xc2XNN1l/abuc40KHO/aJW+jBNPpHsU7tsir9RjHqyNjaZCx2wDGGyAwfX5PYlXA0EQqpm6ZgDYCFV2NuVMwGpQhBrpKHKPhKmknhNTVyDpFpkE8P1BkoNkUmTYE7I1vgT8eb3z0syDuKOOp8T7FzZfykHRVE35odfVovIok9p0kw68S1EgCnZuSpPsYdaCK7cKGit2Gm4v7dvkqHQ6FPd1H8frvXd/tWt4s/9yU12nLP4lZD/8B&lt;/diagram&gt;&lt;/mxfile&gt;">
+    <defs/>
+    <g>
+        <g>
+            <rect x="2" y="2" width="920" height="670" fill="#ffffff" stroke="#000000" stroke-width="4" pointer-events="all" style="fill: light-dark(#ffffff, var(--ge-dark-color, #121212)); stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+        </g>
+        <g>
+            <rect x="337" y="12" width="300" height="80" fill="none" stroke="none" pointer-events="all"/>
+        </g>
+        <g>
+            <g transform="translate(-0.5 -0.5)">
+                <switch>
+                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                        <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 298px; height: 1px; padding-top: 52px; margin-left: 338px;">
+                            <div style="box-sizing: border-box; font-size: 0; text-align: center; color: #000000; ">
+                                <div style="display: inline-block; font-size: 12px; font-family: &quot;Roboto&quot;, &quot;sans-serif&quot;; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
+                                    <span style="font-size: 24px;">
+                                        <font face="Roboto, sans-serif">
+                                            Server
+                                        </font>
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
+                    </foreignObject>
+                    <text x="487" y="56" fill="light-dark(#000000, #ffffff)" font-family="&quot;Roboto&quot;, &quot;sans-serif&quot;" font-size="12px" text-anchor="middle">
+                        Server
+                    </text>
+                </switch>
+            </g>
+        </g>
+        <g>
+            <rect x="692" y="132" width="190" height="500" fill="#dae8fc" stroke="#6c8ebf" stroke-width="4" pointer-events="all" style="fill: light-dark(rgb(218, 232, 252), rgb(29, 41, 59)); stroke: light-dark(rgb(108, 142, 191), rgb(92, 121, 163));"/>
+        </g>
+        <g>
+            <rect x="748.92" y="142" width="76.16" height="30" fill="none" stroke="none" pointer-events="all"/>
+        </g>
+        <g>
+            <g transform="translate(-0.5 -0.5)">
+                <switch>
+                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                        <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 74px; height: 1px; padding-top: 157px; margin-left: 750px;">
+                            <div style="box-sizing: border-box; font-size: 0; text-align: center; color: #000000; ">
+                                <div style="display: inline-block; font-size: 12px; font-family: &quot;Roboto Mono&quot;, &quot;mono&quot;, &quot;sans-serif&quot;; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
+                                    <font style="font-size: 24px">
+                                        <font face="Roboto, sans-serif">
+                                            RAM
+                                        </font>
+                                        <br/>
+                                    </font>
+                                </div>
+                            </div>
+                        </div>
+                    </foreignObject>
+                    <text x="787" y="161" fill="light-dark(#000000, #ffffff)" font-family="&quot;Roboto Mono&quot;, &quot;mono&quot;, &quot;sans-serif&quot;" font-size="12px" text-anchor="middle">
+                        RAM
+                    </text>
+                </switch>
+            </g>
+        </g>
+        <g>
+            <rect x="52" y="132" width="250" height="500" fill="#dae8fc" stroke="#6c8ebf" stroke-width="4" pointer-events="all" style="fill: light-dark(rgb(218, 232, 252), rgb(29, 41, 59)); stroke: light-dark(rgb(108, 142, 191), rgb(92, 121, 163));"/>
+        </g>
+        <g>
+            <rect x="136.61" y="142" width="80.77" height="30" fill="none" stroke="none" pointer-events="all"/>
+        </g>
+        <g>
+            <g transform="translate(-0.5 -0.5)">
+                <switch>
+                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                        <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 79px; height: 1px; padding-top: 157px; margin-left: 138px;">
+                            <div style="box-sizing: border-box; font-size: 0; text-align: center; color: #000000; ">
+                                <div style="display: inline-block; font-size: 12px; font-family: &quot;Roboto Mono&quot;, &quot;mono&quot;, &quot;sans-serif&quot;; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
+                                    <font style="font-size: 24px">
+                                        <font face="Roboto, sans-serif">
+                                            CPU
+                                        </font>
+                                        <br/>
+                                    </font>
+                                </div>
+                            </div>
+                        </div>
+                    </foreignObject>
+                    <text x="177" y="161" fill="light-dark(#000000, #ffffff)" font-family="&quot;Roboto Mono&quot;, &quot;mono&quot;, &quot;sans-serif&quot;" font-size="12px" text-anchor="middle">
+                        CPU
+                    </text>
+                </switch>
+            </g>
+        </g>
+        <g>
+            <path d="M 385 243 L 382 243 L 382 282 L 423.9 282" fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" stroke-dasharray="9 9" pointer-events="stroke" style="stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+            <path d="M 430.65 282 L 421.65 286.5 L 423.9 282 L 421.65 277.5 Z" fill="#000000" stroke="#000000" stroke-width="3" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(rgb(0, 0, 0), rgb(255, 255, 255)); stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+        </g>
+        <g>
+            <path d="M 382 242 L 382 402 L 423.9 402" fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" stroke-dasharray="9 9" pointer-events="stroke" style="stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+            <path d="M 430.65 402 L 421.65 406.5 L 423.9 402 L 421.65 397.5 Z" fill="#000000" stroke="#000000" stroke-width="3" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(rgb(0, 0, 0), rgb(255, 255, 255)); stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+        </g>
+        <g>
+            <path d="M 362 192 L 327 192 L 327 200 L 292 200" fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke" style="stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+        </g>
+        <g>
+            <path d="M 612 192 L 712 192" fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke" style="stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+        </g>
+        <g>
+            <path d="M 382 142 L 592 142 L 612 192 L 592 242 L 382 242 L 362 192 Z" fill="#d5e8d4" stroke="#82b366" stroke-width="3" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(rgb(213, 232, 212), rgb(31, 47, 30)); stroke: light-dark(rgb(130, 179, 102), rgb(68, 110, 44));"/>
+        </g>
+        <g>
+            <g transform="translate(-0.5 -0.5)">
+                <switch>
+                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                        <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 248px; height: 1px; padding-top: 192px; margin-left: 363px;">
+                            <div style="box-sizing: border-box; font-size: 0; text-align: center; color: #000000; ">
+                                <div style="display: inline-block; font-size: 12px; font-family: &quot;Roboto Mono&quot;, &quot;mono&quot;, &quot;sans-serif&quot;; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
+                                    <font face="Roboto, sans-serif">
+                                        <font style="">
+                                            <span style="font-size: 24px;">
+                                                Process
+                                            </span>
+                                        </font>
+                                        <span style="font-size: 24px;">
+                                            Manager
+                                        </span>
+                                    </font>
+                                </div>
+                            </div>
+                        </div>
+                    </foreignObject>
+                    <text x="487" y="196" fill="light-dark(#000000, #ffffff)" font-family="&quot;Roboto Mono&quot;, &quot;mono&quot;, &quot;sans-serif&quot;" font-size="12px" text-anchor="middle">
+                        Process Manager
+                    </text>
+                </switch>
+            </g>
+        </g>
+        <g>
+            <path d="M 662 312 L 687 312 L 687 287 L 712 287" fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke" style="stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+        </g>
+        <g>
+            <path d="M 442 262 L 642 262 L 662 312 L 642 362 L 442 362 L 422 312 Z" fill="#fff2cc" stroke="#d6b656" stroke-width="3" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(rgb(255, 242, 204), rgb(40, 29, 0)); stroke: light-dark(rgb(214, 182, 86), rgb(109, 81, 0));"/>
+        </g>
+        <g>
+            <g transform="translate(-0.5 -0.5)">
+                <switch>
+                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                        <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 238px; height: 1px; padding-top: 312px; margin-left: 423px;">
+                            <div style="box-sizing: border-box; font-size: 0; text-align: center; color: #000000; ">
+                                <div style="display: inline-block; font-size: 12px; font-family: &quot;Roboto Mono&quot;, &quot;mono&quot;, &quot;sans-serif&quot;; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
+                                    <span style="font-size: 24px;">
+                                        <font face="Roboto, sans-serif">
+                                            Worker Process
+                                        </font>
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
+                    </foreignObject>
+                    <text x="542" y="316" fill="light-dark(#000000, #ffffff)" font-family="&quot;Roboto Mono&quot;, &quot;mono&quot;, &quot;sans-serif&quot;" font-size="12px" text-anchor="middle">
+                        Worker Process
+                    </text>
+                </switch>
+            </g>
+        </g>
+        <g>
+            <path d="M 662 432 L 687 432 L 687 447 L 712 447" fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke" style="stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+        </g>
+        <g>
+            <path d="M 422 432 L 357 432 L 357 410 L 292 410" fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke" style="stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+        </g>
+        <g>
+            <path d="M 442 382 L 642 382 L 662 432 L 642 482 L 442 482 L 422 432 Z" fill="#e1d5e7" stroke="#9673a6" stroke-width="3" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(rgb(225, 213, 231), rgb(57, 47, 63)); stroke: light-dark(rgb(150, 115, 166), rgb(149, 119, 163));"/>
+        </g>
+        <g>
+            <g transform="translate(-0.5 -0.5)">
+                <switch>
+                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                        <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 238px; height: 1px; padding-top: 432px; margin-left: 423px;">
+                            <div style="box-sizing: border-box; font-size: 0; text-align: center; color: #000000; ">
+                                <div style="display: inline-block; font-size: 12px; font-family: &quot;Roboto Mono&quot;, &quot;mono&quot;, &quot;sans-serif&quot;; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
+                                    <span style="font-size: 24px;">
+                                        <font face="Roboto, sans-serif">
+                                            Worker Process
+                                        </font>
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
+                    </foreignObject>
+                    <text x="542" y="436" fill="light-dark(#000000, #ffffff)" font-family="&quot;Roboto Mono&quot;, &quot;mono&quot;, &quot;sans-serif&quot;" font-size="12px" text-anchor="middle">
+                        Worker Process
+                    </text>
+                </switch>
+            </g>
+        </g>
+        <g>
+            <path d="M 362 562 L 327 562 L 327 515 L 292 515" fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke" style="stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+        </g>
+        <g>
+            <path d="M 612 562 L 662 562 L 662 557 L 712 557" fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke" style="stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+        </g>
+        <g>
+            <path d="M 382 512 L 592 512 L 612 562 L 592 612 L 382 612 L 362 562 Z" fill="#ffffff" stroke="#000000" stroke-width="3" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(#ffffff, var(--ge-dark-color, #121212)); stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+        </g>
+        <g>
+            <g transform="translate(-0.5 -0.5)">
+                <switch>
+                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                        <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 248px; height: 1px; padding-top: 562px; margin-left: 363px;">
+                            <div style="box-sizing: border-box; font-size: 0; text-align: center; color: #000000; ">
+                                <div style="display: inline-block; font-size: 12px; font-family: &quot;Roboto Mono&quot;, &quot;mono&quot;, &quot;sans-serif&quot;; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
+                                    <span style="font-size: 24px;">
+                                        <font face="Roboto, sans-serif">
+                                            Another Process
+                                        </font>
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
+                    </foreignObject>
+                    <text x="487" y="566" fill="light-dark(#000000, #ffffff)" font-family="&quot;Roboto Mono&quot;, &quot;mono&quot;, &quot;sans-serif&quot;" font-size="12px" text-anchor="middle">
+                        Another Process
+                    </text>
+                </switch>
+            </g>
+        </g>
+        <g>
+            <rect x="62" y="180" width="230" height="40" fill="#d5e8d4" stroke="#82b366" stroke-width="3" stroke-dasharray="9 9" pointer-events="all" style="fill: light-dark(rgb(213, 232, 212), rgb(31, 47, 30)); stroke: light-dark(rgb(130, 179, 102), rgb(68, 110, 44));"/>
+        </g>
+        <g>
+            <rect x="712" y="182" width="150" height="20" fill="#d5e8d4" stroke="#82b366" stroke-width="3" pointer-events="all" style="fill: light-dark(rgb(213, 232, 212), rgb(31, 47, 30)); stroke: light-dark(rgb(130, 179, 102), rgb(68, 110, 44));"/>
+        </g>
+        <g>
+            <rect x="62" y="230" width="230" height="100" fill="#fff2cc" stroke="#d6b656" stroke-width="3" stroke-dasharray="9 9" pointer-events="all" style="fill: light-dark(rgb(255, 242, 204), rgb(40, 29, 0)); stroke: light-dark(rgb(214, 182, 86), rgb(109, 81, 0));"/>
+        </g>
+        <g>
+            <rect x="62" y="340" width="230" height="140" fill="#e1d5e7" stroke="#9673a6" stroke-width="3" stroke-dasharray="9 9" pointer-events="all" style="fill: light-dark(rgb(225, 213, 231), rgb(57, 47, 63)); stroke: light-dark(rgb(150, 115, 166), rgb(149, 119, 163));"/>
+        </g>
+        <g>
+            <rect x="712" y="212" width="150" height="150" fill="#fff2cc" stroke="#d6b656" stroke-width="3" pointer-events="all" style="fill: light-dark(rgb(255, 242, 204), rgb(40, 29, 0)); stroke: light-dark(rgb(214, 182, 86), rgb(109, 81, 0));"/>
+        </g>
+        <g>
+            <g transform="translate(-0.5 -0.5)">
+                <switch>
+                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                        <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 148px; height: 1px; padding-top: 287px; margin-left: 713px;">
+                            <div style="box-sizing: border-box; font-size: 0; text-align: center; color: #000000; ">
+                                <div style="display: inline-block; font-size: 12px; font-family: &quot;Roboto Mono&quot;, &quot;mono&quot;, &quot;sans-serif&quot;; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
+                                    <font style="font-size: 24px" face="Roboto, sans-serif">
+                                        1 GB
+                                    </font>
+                                </div>
+                            </div>
+                        </div>
+                    </foreignObject>
+                    <text x="787" y="291" fill="light-dark(#000000, #ffffff)" font-family="&quot;Roboto Mono&quot;, &quot;mono&quot;, &quot;sans-serif&quot;" font-size="12px" text-anchor="middle">
+                        1 GB
+                    </text>
+                </switch>
+            </g>
+        </g>
+        <g>
+            <rect x="712" y="372" width="150" height="150" fill="#e1d5e7" stroke="#9673a6" stroke-width="3" pointer-events="all" style="fill: light-dark(rgb(225, 213, 231), rgb(57, 47, 63)); stroke: light-dark(rgb(150, 115, 166), rgb(149, 119, 163));"/>
+        </g>
+        <g>
+            <g transform="translate(-0.5 -0.5)">
+                <switch>
+                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                        <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 148px; height: 1px; padding-top: 447px; margin-left: 713px;">
+                            <div style="box-sizing: border-box; font-size: 0; text-align: center; color: #000000; ">
+                                <div style="display: inline-block; font-size: 12px; font-family: &quot;Roboto Mono&quot;, &quot;mono&quot;, &quot;sans-serif&quot;; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
+                                    <font style="font-size: 24px" face="Roboto, sans-serif">
+                                        1 GB
+                                    </font>
+                                </div>
+                            </div>
+                        </div>
+                    </foreignObject>
+                    <text x="787" y="451" fill="light-dark(#000000, #ffffff)" font-family="&quot;Roboto Mono&quot;, &quot;mono&quot;, &quot;sans-serif&quot;" font-size="12px" text-anchor="middle">
+                        1 GB
+                    </text>
+                </switch>
+            </g>
+        </g>
+        <g>
+            <rect x="62" y="490" width="230" height="50" fill="#ffffff" stroke="#000000" stroke-width="3" stroke-dasharray="9 9" pointer-events="all" style="fill: light-dark(#ffffff, var(--ge-dark-color, #121212)); stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+        </g>
+        <g>
+            <rect x="712" y="532" width="150" height="50" fill="#ffffff" stroke="#000000" stroke-width="3" pointer-events="all" style="fill: light-dark(#ffffff, var(--ge-dark-color, #121212)); stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+        </g>
+    </g>
+    <switch>
+        <g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/>
+        <a transform="translate(0,-5)" xlink:href="https://www.drawio.com/doc/faq/svg-export-text-problems" target="_blank">
+            <text text-anchor="middle" font-size="10px" x="50%" y="100%">
+                Text is not SVG - cannot display
+            </text>
+        </a>
+    </switch>
+</svg>
--- a/docs/en/docs/img/deployment/concepts/process-ram.svg
+++ b/docs/en/docs/img/deployment/concepts/process-ram.svg
--- a/docs/en/docs/img/deployment/https/https.drawio
+++ b/docs/en/docs/img/deployment/https/https.drawio
@ -1,277 +0,0 @@
-<mxfile host="65bd71144e">
-    <diagram id="jyERGzDynktFHFRGN0ph" name="Page-1">
-        <mxGraphModel dx="3321" dy="2867" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1920" pageHeight="1200" math="0" shadow="0">
-            <root>
-                <mxCell id="0"/>
-                <mxCell id="1" parent="0"/>
-                <mxCell id="2" value="" style="rounded=0;whiteSpace=wrap;html=1;fontStyle=1;strokeWidth=4;" vertex="1" parent="1">
-                    <mxGeometry x="450" y="-50" width="820" height="970" as="geometry"/>
-                </mxCell>
-                <mxCell id="3" value="&lt;font face=&quot;Roboto&quot;&gt;&lt;span style=&quot;font-size: 24px&quot;&gt;Server(s)&lt;/span&gt;&lt;/font&gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;strokeWidth=3;fontFamily=Roboto Mono, mono;FType=g;" vertex="1" parent="1">
-                    <mxGeometry x="710" y="-50" width="300" height="80" as="geometry"/>
-                </mxCell>
-                <mxCell id="8" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeWidth=3;exitX=0.092;exitY=1.01;exitDx=0;exitDy=0;dashed=1;exitPerimeter=0;" edge="1" parent="1" target="14">
-                    <mxGeometry relative="1" as="geometry">
-                        <Array as="points">
-                            <mxPoint x="800" y="521"/>
-                            <mxPoint x="800" y="560"/>
-                        </Array>
-                        <mxPoint x="803" y="521" as="sourcePoint"/>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="9" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeWidth=3;dashed=1;" edge="1" parent="1" target="17">
-                    <mxGeometry relative="1" as="geometry">
-                        <mxPoint x="800" y="520" as="sourcePoint"/>
-                        <Array as="points">
-                            <mxPoint x="800" y="680"/>
-                        </Array>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="33" value="" style="group" vertex="1" connectable="0" parent="1">
-                    <mxGeometry x="-140" y="-75" width="500" height="350" as="geometry"/>
-                </mxCell>
-                <mxCell id="29" value="&lt;font face=&quot;Roboto&quot; data-font-src=&quot;https://fonts.googleapis.com/css?family=Roboto&quot; style=&quot;font-size: 24px&quot;&gt;https://someapp.example.com&lt;/font&gt;" style="rounded=0;whiteSpace=wrap;html=1;fontStyle=1;strokeWidth=4;" vertex="1" parent="33">
-                    <mxGeometry x="60" y="27" width="380" height="250" as="geometry"/>
-                </mxCell>
-                <mxCell id="32" value="" style="pointerEvents=1;shadow=0;dashed=0;html=1;fillColor=#505050;labelPosition=center;verticalLabelPosition=bottom;verticalAlign=top;outlineConnect=0;align=center;shape=mxgraph.office.devices.laptop;strokeColor=none;" vertex="1" parent="33">
-                    <mxGeometry width="500" height="350" as="geometry"/>
-                </mxCell>
-                <mxCell id="90" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;dashed=1;startArrow=none;startFill=0;endArrow=classic;endFill=1;strokeWidth=3;" edge="1" parent="1" source="101" target="32">
-                    <mxGeometry relative="1" as="geometry">
-                        <mxPoint x="390" y="-190" as="sourcePoint"/>
-                        <Array as="points">
-                            <mxPoint x="390" y="-132"/>
-                            <mxPoint x="280" y="-132"/>
-                        </Array>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="34" value="&lt;font face=&quot;Roboto&quot; data-font-src=&quot;https://fonts.googleapis.com/css?family=Roboto&quot; style=&quot;font-size: 24px&quot;&gt;DNS Servers&lt;/font&gt;" style="ellipse;shape=cloud;whiteSpace=wrap;html=1;strokeColor=#000000;strokeWidth=3;" vertex="1" parent="1">
-                    <mxGeometry x="-60" y="-540" width="330" height="260" as="geometry"/>
-                </mxCell>
-                <mxCell id="6" value="" style="rounded=0;whiteSpace=wrap;html=1;fontStyle=1;strokeWidth=4;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
-                    <mxGeometry x="495" y="320" width="355" height="440" as="geometry"/>
-                </mxCell>
-                <mxCell id="7" value="&lt;font style=&quot;font-size: 24px&quot; face=&quot;Roboto&quot;&gt;TLS Termination Proxy&lt;br&gt;&lt;/font&gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;strokeWidth=3;fontFamily=Roboto Mono, mono;FType=g;" vertex="1" parent="1">
-                    <mxGeometry x="525" y="330" width="280" height="40" as="geometry"/>
-                </mxCell>
-                <mxCell id="56" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeWidth=3;" edge="1" parent="1" source="55" target="49">
-                    <mxGeometry relative="1" as="geometry"/>
-                </mxCell>
-                <mxCell id="58" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeWidth=3;dashed=1;startArrow=none;" edge="1" parent="1" source="102" target="57">
-                    <mxGeometry relative="1" as="geometry">
-                        <mxPoint x="410" y="400" as="targetPoint"/>
-                        <mxPoint x="585" y="1050" as="sourcePoint"/>
-                        <Array as="points"/>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="55" value="&lt;font face=&quot;Roboto&quot; data-font-src=&quot;https://fonts.googleapis.com/css?family=Roboto&quot; style=&quot;font-size: 24px ; font-weight: normal&quot;&gt;Cert Renovation Program&lt;/font&gt;" style="rounded=0;whiteSpace=wrap;html=1;fontStyle=1;strokeWidth=4;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
-                    <mxGeometry x="515" y="780" width="300" height="100" as="geometry"/>
-                </mxCell>
-                <mxCell id="59" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;dashed=1;strokeWidth=3;startArrow=none;" edge="1" parent="1" source="103" target="55">
-                    <mxGeometry relative="1" as="geometry">
-                        <mxPoint x="875" y="1030" as="sourcePoint"/>
-                        <Array as="points">
-                            <mxPoint x="790" y="930"/>
-                            <mxPoint x="790" y="930"/>
-                        </Array>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="57" value="&lt;font face=&quot;Roboto&quot; data-font-src=&quot;https://fonts.googleapis.com/css?family=Roboto&quot; style=&quot;font-size: 24px&quot;&gt;Let's Encrypt&lt;/font&gt;" style="ellipse;shape=cloud;whiteSpace=wrap;html=1;strokeColor=#000000;strokeWidth=3;" vertex="1" parent="1">
-                    <mxGeometry x="500" y="1150" width="330" height="260" as="geometry"/>
-                </mxCell>
-                <mxCell id="73" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;startArrow=none;startFill=0;endArrow=classic;endFill=1;strokeWidth=3;" edge="1" parent="1" source="85" target="6">
-                    <mxGeometry relative="1" as="geometry">
-                        <Array as="points"/>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="82" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;startArrow=none;startFill=0;endArrow=classic;endFill=1;strokeWidth=3;" edge="1" parent="1" source="62" target="78">
-                    <mxGeometry relative="1" as="geometry">
-                        <Array as="points">
-                            <mxPoint x="920" y="770"/>
-                            <mxPoint x="920" y="770"/>
-                        </Array>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="62" value="&lt;font face=&quot;Roboto&quot; data-font-src=&quot;https://fonts.googleapis.com/css?family=Roboto&quot; style=&quot;font-size: 24px&quot;&gt;FastAPI&lt;/font&gt;&lt;font face=&quot;Roboto&quot; data-font-src=&quot;https://fonts.googleapis.com/css?family=Roboto&quot; style=&quot;font-size: 24px ; font-weight: normal&quot;&gt; app for: someapp.example.com&lt;/font&gt;" style="rounded=0;whiteSpace=wrap;html=1;fontStyle=1;strokeWidth=4;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
-                    <mxGeometry x="890" y="650" width="300" height="100" as="geometry"/>
-                </mxCell>
-                <mxCell id="65" value="&lt;font face=&quot;Roboto&quot; data-font-src=&quot;https://fonts.googleapis.com/css?family=Roboto&quot; style=&quot;font-size: 24px ; font-weight: normal&quot;&gt;Another app&lt;/font&gt;&lt;font face=&quot;Roboto&quot; data-font-src=&quot;https://fonts.googleapis.com/css?family=Roboto&quot; style=&quot;font-size: 24px ; font-weight: normal&quot;&gt;: another.example.com&lt;/font&gt;" style="rounded=0;whiteSpace=wrap;html=1;fontStyle=1;strokeWidth=4;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
-                    <mxGeometry x="890" y="50" width="300" height="100" as="geometry"/>
-                </mxCell>
-                <mxCell id="66" value="&lt;font face=&quot;Roboto&quot; data-font-src=&quot;https://fonts.googleapis.com/css?family=Roboto&quot; style=&quot;font-size: 24px ; font-weight: normal&quot;&gt;One more app&lt;/font&gt;&lt;font face=&quot;Roboto&quot; data-font-src=&quot;https://fonts.googleapis.com/css?family=Roboto&quot; style=&quot;font-size: 24px ; font-weight: normal&quot;&gt;: onemore.example.com&lt;/font&gt;" style="rounded=0;whiteSpace=wrap;html=1;fontStyle=1;strokeWidth=4;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
-                    <mxGeometry x="890" y="180" width="300" height="100" as="geometry"/>
-                </mxCell>
-                <mxCell id="78" value="&lt;font face=&quot;Roboto&quot;&gt;&lt;span style=&quot;font-size: 24px ; font-weight: 400&quot;&gt;A Database&lt;/span&gt;&lt;/font&gt;" style="rounded=0;whiteSpace=wrap;html=1;fontStyle=1;strokeWidth=4;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
-                    <mxGeometry x="890" y="780" width="300" height="100" as="geometry"/>
-                </mxCell>
-                <mxCell id="80" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;dashed=1;strokeWidth=3;endArrow=none;" edge="1" parent="1" source="57" target="103">
-                    <mxGeometry relative="1" as="geometry">
-                        <mxPoint x="480" y="1090" as="sourcePoint"/>
-                        <mxPoint x="875" y="1110" as="targetPoint"/>
-                        <Array as="points">
-                            <mxPoint x="915" y="1250"/>
-                        </Array>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="81" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeWidth=3;dashed=1;endArrow=none;" edge="1" parent="1" source="55" target="102">
-                    <mxGeometry relative="1" as="geometry">
-                        <mxPoint x="525" y="970" as="targetPoint"/>
-                        <mxPoint x="550" y="880" as="sourcePoint"/>
-                        <Array as="points">
-                            <mxPoint x="525" y="930"/>
-                            <mxPoint x="525" y="930"/>
-                        </Array>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="85" value="&lt;span style=&quot;font-family: &amp;#34;roboto&amp;#34; ; font-size: 24px&quot;&gt;Plain response from: someapp.example.com&lt;/span&gt;" style="shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fixedSize=1;strokeColor=#9673a6;strokeWidth=3;fillColor=#e1d5e7;" vertex="1" parent="1">
-                    <mxGeometry x="890" y="500" width="310" height="80" as="geometry"/>
-                </mxCell>
-                <mxCell id="86" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;startArrow=none;startFill=0;endArrow=none;endFill=1;strokeWidth=3;" edge="1" parent="1" source="62" target="85">
-                    <mxGeometry relative="1" as="geometry">
-                        <mxPoint x="1030.0000000000005" y="649.9999999999995" as="sourcePoint"/>
-                        <mxPoint x="850" y="540.0000000000005" as="targetPoint"/>
-                        <Array as="points">
-                            <mxPoint x="1030" y="540"/>
-                        </Array>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="87" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;startArrow=none;startFill=0;endArrow=classic;endFill=1;strokeWidth=3;" edge="1" parent="1" source="84" target="62">
-                    <mxGeometry relative="1" as="geometry">
-                        <Array as="points">
-                            <mxPoint x="1240" y="390"/>
-                            <mxPoint x="1240" y="700"/>
-                        </Array>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="88" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;startArrow=none;startFill=0;endArrow=classic;endFill=1;strokeWidth=3;dashed=1;" edge="1" parent="1" source="100" target="34">
-                    <mxGeometry relative="1" as="geometry">
-                        <mxPoint x="65.05882352941171" y="-220" as="sourcePoint"/>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="89" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;startArrow=none;startFill=0;endArrow=none;endFill=1;strokeWidth=3;dashed=1;" edge="1" parent="1" source="32" target="100">
-                    <mxGeometry relative="1" as="geometry">
-                        <mxPoint x="110" y="-75" as="sourcePoint"/>
-                        <mxPoint x="-4.941176470588289" y="-139.99999999999955" as="targetPoint"/>
-                        <Array as="points">
-                            <mxPoint x="-5" y="-80"/>
-                            <mxPoint x="-5" y="-80"/>
-                        </Array>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="91" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;dashed=1;startArrow=none;startFill=0;endArrow=none;endFill=1;strokeWidth=3;" edge="1" parent="1" source="34" target="101">
-                    <mxGeometry relative="1" as="geometry">
-                        <mxPoint x="105" y="-280" as="sourcePoint"/>
-                        <mxPoint x="390" y="-260" as="targetPoint"/>
-                        <Array as="points">
-                            <mxPoint x="390" y="-430"/>
-                        </Array>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="109" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;dashed=1;startArrow=none;startFill=0;endArrow=classic;endFill=1;strokeWidth=3;" edge="1" parent="1" source="97" target="32">
-                    <mxGeometry relative="1" as="geometry">
-                        <Array as="points">
-                            <mxPoint x="340" y="480"/>
-                            <mxPoint x="340" y="480"/>
-                        </Array>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="36" value="&lt;font face=&quot;Roboto&quot; data-font-src=&quot;https://fonts.googleapis.com/css?family=Roboto&quot; style=&quot;font-size: 24px&quot;&gt;Port 443 (HTTPS)&lt;/font&gt;" style="ellipse;whiteSpace=wrap;html=1;strokeColor=#000000;strokeWidth=3;" vertex="1" parent="1">
-                    <mxGeometry x="330" y="680" width="170" height="120" as="geometry"/>
-                </mxCell>
-                <mxCell id="92" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;dashed=1;startArrow=none;startFill=0;endArrow=classic;endFill=1;strokeWidth=3;" edge="1" parent="1" source="96" target="36">
-                    <mxGeometry relative="1" as="geometry">
-                        <mxPoint x="50" y="500" as="sourcePoint"/>
-                        <Array as="points">
-                            <mxPoint x="50" y="740"/>
-                        </Array>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="93" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;dashed=1;startArrow=none;startFill=0;endArrow=none;endFill=1;strokeWidth=3;" edge="1" parent="1" source="32" target="96">
-                    <mxGeometry relative="1" as="geometry">
-                        <mxPoint x="300" y="350" as="sourcePoint"/>
-                        <mxPoint x="55" y="330" as="targetPoint"/>
-                        <Array as="points">
-                            <mxPoint x="160" y="340"/>
-                            <mxPoint x="160" y="340"/>
-                        </Array>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="96" value="&lt;span style=&quot;font-family: &amp;#34;roboto&amp;#34; ; font-size: 24px&quot;&gt;Encrypted request for: someapp.example.com&lt;/span&gt;" style="shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fixedSize=1;strokeColor=#82b366;strokeWidth=3;fillColor=#d5e8d4;" vertex="1" parent="1">
-                    <mxGeometry x="-10" y="400" width="310" height="80" as="geometry"/>
-                </mxCell>
-                <mxCell id="100" value="&lt;span style=&quot;font-family: &amp;#34;roboto&amp;#34; ; font-size: 24px&quot;&gt;Who is: someapp.example.com&lt;/span&gt;" style="shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fixedSize=1;strokeWidth=3;" vertex="1" parent="1">
-                    <mxGeometry x="-110" y="-210" width="310" height="80" as="geometry"/>
-                </mxCell>
-                <mxCell id="101" value="&lt;span style=&quot;font-family: &amp;#34;roboto&amp;#34; ; font-size: 24px&quot;&gt;IP:&lt;/span&gt;&lt;br style=&quot;font-family: &amp;#34;roboto&amp;#34;&quot;&gt;&lt;span style=&quot;font-family: &amp;#34;roboto&amp;#34; ; font-size: 24px&quot;&gt;123.124.125.126&lt;/span&gt;" style="shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fixedSize=1;strokeWidth=3;" vertex="1" parent="1">
-                    <mxGeometry x="270" y="-290" width="240" height="80" as="geometry"/>
-                </mxCell>
-                <mxCell id="102" value="&lt;span style=&quot;font-family: &amp;#34;roboto&amp;#34; ; font-size: 24px&quot;&gt;Renew HTTPS cert for: someapp.example.com&lt;/span&gt;" style="shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fixedSize=1;strokeWidth=3;" vertex="1" parent="1">
-                    <mxGeometry x="430" y="960" width="310" height="80" as="geometry"/>
-                </mxCell>
-                <mxCell id="103" value="&lt;span style=&quot;font-family: &amp;#34;roboto&amp;#34; ; font-size: 24px&quot;&gt;New HTTPS cert for: someapp.example.com&lt;/span&gt;" style="shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fixedSize=1;strokeWidth=3;" vertex="1" parent="1">
-                    <mxGeometry x="750" y="1070" width="310" height="80" as="geometry"/>
-                </mxCell>
-                <mxCell id="106" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;dashed=1;startArrow=none;startFill=0;endArrow=none;endFill=0;strokeWidth=3;" edge="1" parent="1" source="104" target="36">
-                    <mxGeometry relative="1" as="geometry">
-                        <Array as="points">
-                            <mxPoint x="-40" y="770"/>
-                        </Array>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="104" value="&lt;span style=&quot;font-family: &amp;#34;roboto&amp;#34; ; font-size: 24px&quot;&gt;TLS Handshake&lt;/span&gt;" style="shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fixedSize=1;strokeWidth=3;" vertex="1" parent="1">
-                    <mxGeometry x="-110" y="300" width="230" height="80" as="geometry"/>
-                </mxCell>
-                <mxCell id="107" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;dashed=1;startArrow=none;startFill=0;endArrow=none;endFill=1;strokeWidth=3;" edge="1" parent="1" source="32" target="104">
-                    <mxGeometry relative="1" as="geometry">
-                        <mxPoint x="-40" y="275" as="sourcePoint"/>
-                        <mxPoint x="341.38784067832285" y="770" as="targetPoint"/>
-                        <Array as="points">
-                            <mxPoint x="-40" y="290"/>
-                            <mxPoint x="-40" y="290"/>
-                        </Array>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="97" value="&lt;span style=&quot;font-family: &amp;#34;roboto&amp;#34; ; font-size: 24px&quot;&gt;Encrypted response from: someapp.example.com&lt;/span&gt;" style="shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fixedSize=1;strokeColor=#9673a6;strokeWidth=3;fillColor=#e1d5e7;" vertex="1" parent="1">
-                    <mxGeometry x="90" y="500" width="310" height="80" as="geometry"/>
-                </mxCell>
-                <mxCell id="110" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;dashed=1;startArrow=none;startFill=0;endArrow=none;endFill=1;strokeWidth=3;" edge="1" parent="1" source="36" target="97">
-                    <mxGeometry relative="1" as="geometry">
-                        <mxPoint x="415" y="680" as="sourcePoint"/>
-                        <mxPoint x="110" y="275" as="targetPoint"/>
-                        <Array as="points">
-                            <mxPoint x="245" y="710"/>
-                        </Array>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="49" value="" style="rounded=0;whiteSpace=wrap;html=1;fontStyle=1;strokeWidth=4;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="1">
-                    <mxGeometry x="510" y="400" width="310" height="320" as="geometry"/>
-                </mxCell>
-                <mxCell id="50" value="&lt;font style=&quot;font-size: 24px&quot; face=&quot;Roboto&quot;&gt;HTTPS certificates&lt;br&gt;&lt;/font&gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;strokeWidth=3;fontFamily=Roboto Mono, mono;FType=g;" vertex="1" parent="1">
-                    <mxGeometry x="550.9" y="410" width="228.21" height="40" as="geometry"/>
-                </mxCell>
-                <mxCell id="51" value="&lt;font face=&quot;Roboto&quot; data-font-src=&quot;https://fonts.googleapis.com/css?family=Roboto&quot;&gt;&lt;span style=&quot;font-size: 24px&quot;&gt;someapp.example.com&lt;/span&gt;&lt;br&gt;&lt;/font&gt;" style="rounded=0;whiteSpace=wrap;html=1;strokeColor=#000000;strokeWidth=3;" vertex="1" parent="1">
-                    <mxGeometry x="530" y="465" width="270" height="70" as="geometry"/>
-                </mxCell>
-                <mxCell id="52" value="&lt;font face=&quot;Roboto&quot; data-font-src=&quot;https://fonts.googleapis.com/css?family=Roboto&quot;&gt;&lt;span style=&quot;font-size: 24px&quot;&gt;another.example.net&lt;/span&gt;&lt;br&gt;&lt;/font&gt;" style="rounded=0;whiteSpace=wrap;html=1;strokeColor=#666666;strokeWidth=3;fillColor=#f5f5f5;fontColor=#333333;" vertex="1" parent="1">
-                    <mxGeometry x="530" y="545" width="270" height="70" as="geometry"/>
-                </mxCell>
-                <mxCell id="53" value="&lt;font face=&quot;Roboto&quot; data-font-src=&quot;https://fonts.googleapis.com/css?family=Roboto&quot;&gt;&lt;span style=&quot;font-size: 24px&quot;&gt;onemore.example.org&lt;/span&gt;&lt;br&gt;&lt;/font&gt;" style="rounded=0;whiteSpace=wrap;html=1;strokeColor=#666666;strokeWidth=3;fillColor=#f5f5f5;fontColor=#333333;" vertex="1" parent="1">
-                    <mxGeometry x="530" y="625" width="270" height="70" as="geometry"/>
-                </mxCell>
-                <mxCell id="42" value="&lt;font face=&quot;Roboto&quot; data-font-src=&quot;https://fonts.googleapis.com/css?family=Roboto&quot;&gt;&lt;span style=&quot;font-size: 24px&quot;&gt;IP:&lt;/span&gt;&lt;br&gt;&lt;span style=&quot;font-size: 24px&quot;&gt;123.124.125.126&lt;/span&gt;&lt;br&gt;&lt;/font&gt;" style="rounded=0;whiteSpace=wrap;html=1;strokeColor=#000000;strokeWidth=3;" vertex="1" parent="1">
-                    <mxGeometry x="290" y="600" width="220" height="70" as="geometry"/>
-                </mxCell>
-                <mxCell id="84" value="&lt;span style=&quot;font-family: &amp;#34;roboto&amp;#34; ; font-size: 24px&quot;&gt;Decrypted request for: someapp.example.com&lt;/span&gt;" style="shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fixedSize=1;strokeColor=#82b366;strokeWidth=3;fillColor=#d5e8d4;" vertex="1" parent="1">
-                    <mxGeometry x="885" y="350" width="310" height="80" as="geometry"/>
-                </mxCell>
-                <mxCell id="111" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;startArrow=none;startFill=0;endArrow=none;endFill=1;strokeWidth=3;" edge="1" parent="1" source="6" target="84">
-                    <mxGeometry relative="1" as="geometry">
-                        <mxPoint x="850" y="390" as="sourcePoint"/>
-                        <mxPoint x="1190" y="700" as="targetPoint"/>
-                        <Array as="points"/>
-                    </mxGeometry>
-                </mxCell>
-            </root>
-        </mxGraphModel>
-    </diagram>
-</mxfile>
--- a/docs/en/docs/img/deployment/https/https.drawio.svg
+++ b/docs/en/docs/img/deployment/https/https.drawio.svg
--- a/docs/en/docs/img/deployment/https/https.svg
+++ b/docs/en/docs/img/deployment/https/https.svg
--- a/docs/en/docs/img/deployment/https/https01.drawio
+++ b/docs/en/docs/img/deployment/https/https01.drawio
@ -1,78 +0,0 @@
-<mxfile host="65bd71144e">
-    <diagram id="jyERGzDynktFHFRGN0ph" name="Page-1">
-        <mxGraphModel dx="2738" dy="2173" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1920" pageHeight="1200" math="0" shadow="0">
-            <root>
-                <mxCell id="0"/>
-                <mxCell id="1" parent="0"/>
-                <mxCell id="8" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeWidth=3;exitX=0.092;exitY=1.01;exitDx=0;exitDy=0;dashed=1;exitPerimeter=0;" parent="1" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <Array as="points">
-                            <mxPoint x="800" y="521"/>
-                            <mxPoint x="800" y="560"/>
-                        </Array>
-                        <mxPoint x="803" y="521" as="sourcePoint"/>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="9" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeWidth=3;dashed=1;" parent="1" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <mxPoint x="800" y="520" as="sourcePoint"/>
-                        <Array as="points">
-                            <mxPoint x="800" y="680"/>
-                        </Array>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="33" value="" style="group" parent="1" vertex="1" connectable="0">
-                    <mxGeometry x="-140" y="-75" width="500" height="350" as="geometry"/>
-                </mxCell>
-                <mxCell id="29" value="&lt;font face=&quot;Roboto&quot; data-font-src=&quot;https://fonts.googleapis.com/css?family=Roboto&quot; style=&quot;font-size: 24px&quot;&gt;https://someapp.example.com&lt;/font&gt;" style="rounded=0;whiteSpace=wrap;html=1;fontStyle=1;strokeWidth=4;" parent="33" vertex="1">
-                    <mxGeometry x="60" y="27" width="380" height="250" as="geometry"/>
-                </mxCell>
-                <mxCell id="32" value="" style="pointerEvents=1;shadow=0;dashed=0;html=1;fillColor=#505050;labelPosition=center;verticalLabelPosition=bottom;verticalAlign=top;outlineConnect=0;align=center;shape=mxgraph.office.devices.laptop;strokeColor=none;" parent="33" vertex="1">
-                    <mxGeometry width="500" height="350" as="geometry"/>
-                </mxCell>
-                <mxCell id="90" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;dashed=1;startArrow=none;startFill=0;endArrow=classic;endFill=1;strokeWidth=3;" parent="1" source="101" target="32" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <mxPoint x="390" y="-190" as="sourcePoint"/>
-                        <Array as="points">
-                            <mxPoint x="390" y="-132"/>
-                            <mxPoint x="280" y="-132"/>
-                        </Array>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="34" value="&lt;font face=&quot;Roboto&quot; data-font-src=&quot;https://fonts.googleapis.com/css?family=Roboto&quot; style=&quot;font-size: 24px&quot;&gt;DNS Servers&lt;/font&gt;" style="ellipse;shape=cloud;whiteSpace=wrap;html=1;strokeColor=#000000;strokeWidth=3;" parent="1" vertex="1">
-                    <mxGeometry x="-60" y="-540" width="330" height="260" as="geometry"/>
-                </mxCell>
-                <mxCell id="88" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;startArrow=none;startFill=0;endArrow=classic;endFill=1;strokeWidth=3;dashed=1;" parent="1" source="100" target="34" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <mxPoint x="65.05882352941171" y="-220" as="sourcePoint"/>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="89" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;startArrow=none;startFill=0;endArrow=none;endFill=1;strokeWidth=3;dashed=1;" parent="1" source="32" target="100" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <mxPoint x="110" y="-75" as="sourcePoint"/>
-                        <mxPoint x="-4.941176470588289" y="-139.99999999999955" as="targetPoint"/>
-                        <Array as="points">
-                            <mxPoint x="-10" y="-120"/>
-                            <mxPoint x="-10" y="-120"/>
-                        </Array>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="91" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;dashed=1;startArrow=none;startFill=0;endArrow=none;endFill=1;strokeWidth=3;" parent="1" source="34" target="101" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <mxPoint x="105" y="-280" as="sourcePoint"/>
-                        <mxPoint x="390" y="-260" as="targetPoint"/>
-                        <Array as="points">
-                            <mxPoint x="390" y="-430"/>
-                        </Array>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="100" value="&lt;span style=&quot;font-family: &amp;#34;roboto&amp;#34; ; font-size: 24px&quot;&gt;Who is: someapp.example.com&lt;/span&gt;" style="shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fixedSize=1;strokeWidth=3;" parent="1" vertex="1">
-                    <mxGeometry x="-110" y="-210" width="310" height="80" as="geometry"/>
-                </mxCell>
-                <mxCell id="101" value="&lt;span style=&quot;font-family: &amp;#34;roboto&amp;#34; ; font-size: 24px&quot;&gt;IP:&lt;/span&gt;&lt;br style=&quot;font-family: &amp;#34;roboto&amp;#34;&quot;&gt;&lt;span style=&quot;font-family: &amp;#34;roboto&amp;#34; ; font-size: 24px&quot;&gt;123.124.125.126&lt;/span&gt;" style="shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fixedSize=1;strokeWidth=3;" parent="1" vertex="1">
-                    <mxGeometry x="270" y="-290" width="240" height="80" as="geometry"/>
-                </mxCell>
-            </root>
-        </mxGraphModel>
-    </diagram>
-</mxfile>
--- a/docs/en/docs/img/deployment/https/https01.drawio.svg
+++ b/docs/en/docs/img/deployment/https/https01.drawio.svg
@ -0,0 +1,131 @@
+<svg host="65bd71144e" xmlns="http://www.w3.org/2000/svg" style="background: transparent; background-color: transparent;" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="652px" height="817px" viewBox="-0.5 -0.5 652 817" content="&lt;mxfile&gt;&lt;diagram id=&quot;jyERGzDynktFHFRGN0ph&quot; name=&quot;Page-1&quot;&gt;1VnbkuI2EP0aHnH5jv04MDO7W7VJTYWHTR41trC1EZYjCzD5+kiW5DuDGWBmA0WBWq1Wq/uodSxmzmpbfqEgT38jMcQz24zLmfM4s+2FufD5l5AcpcT1XFdKEopiKbMawRr9C5XQVNIdimHRUWSEYIbyrjAiWQYj1pEBSsmhq7YhuDtrDhI4EKwjgIfSHyhmqZKGttl0fIUoSfXUtql6tkBrK0GRgpgcWiLnaeasKCFM/tqWK4hF+HRg5LjnE721ZxRmbMoAx5Yj9gDv1OqUY+yol5sTlDFIn/bcpoicNXOWtd8mb8SgSGGsGinbYqW0QRivCCa0suN4pnhzOQavEL+QAjFEMt4XQWGfd+whZYjH+XtP4ZUwRrYthQeMEtHBSM6lZMcwyuCqTreYBCiV2jh3ORcr2paJwKVBNhsUQSOGe/5VGBjk0lrBKPkbar8zkvFBy2FcVaiFR7BsiVScv0CyhYweuYrqnVuuSrrC/XzhyfahAZGnkZK28MMjp8CrgJvUxpvU8h8qu+OZDgZ5hTFHtWoSylKSkAzgp0a6pGSXxXVmG53vRESqyvFPyNhRbVGwY6SLABlLvUkcLoElYn8Kg4YZ2qr9l9A2TEs1H0s1YdU49kGm1V4gRTwKIreVwskUiXW+mSAKMWBo393dY7Guhj5QCo4thWp7FC3LL0LQ5D0wu2n31AzPU/V9s5dn6cGp0c7obLW7BdnRCKpRPfjUMZmEqPDXQFQHGB8FgglZNifF/Vo0+cEb6HhPUs3PyGonhwUDlD2Ic7qpv5XsGQm3ZWnIYq0RYVAUKJJCpTKOlJPgkLnRJENTCkATqCuw/TEocsLeEWGF94HRcCK1xFNVyQ7eHnA18Bx3hIn4mAkeQSpPNkDlyP9nJ/jR8g/CiQGZ2SuRQpAV84IfCZumvwNjLRTG5kUFxAeuYLt52R7hJ+L78fc171tDyo/3QrvBVyA9kTrDfYIxZ6CwRTUiTHZ8ectDihhc59L/A2cfYzWtxZTM6nUZhi8gIn4vlZ4mJi0i4jgjRMT2b0FEPomJ3KmoTDt+uhXGHKkw7sdUGN8zTC8IOKe0Q9eyFlYXCvbEY+sdGzwIRzb4Lw8EpXF7FOgjpQ2CGhn3RoFlnXgUOZP2gaG5a1Qw8t1FBSud5OaUCI2w9fJ688jVX32czfvrsfrPvRcOuJ5H6bL8uWi/hlhNhP40tLtjaP8gbm6ZXq/KBdOq3HnaNDgRbwTowUSuc1t81qVmhG8VOcgmc6eKNPXo0/XETdr5kRLhciGnK/j6QJ4bsATbHEMjItuT1KwWy7WcYGyap6XcZCJumpZ561JBSet7Bvs8k9ugEuoLywt3yyUXSf3iVd+MtgmcNULg+rh/D3+rt+1NmXo3cVcj8NtLpXACBlL8SkenuKNXlu0Ylu3yj8c//hn/zj1v/D/Ray/64A2H4LXdO4HXHiOhn/WUmTKWy9r2LCBwQXnrIaFLE85lmVvSrGOYZfdGNap/XeAGwwoVjD1ivuOumzebf0zkWdj88+Q8/Qc=&lt;/diagram&gt;&lt;/mxfile&gt;">
+    <defs/>
+    <g>
+        <g>
+            <rect x="0" y="466" width="500" height="350" fill="none" stroke="none" pointer-events="all"/>
+            <path d="M 289.06 793.99 C 293.87 793.99 297.23 791.75 296.28 790.03 L 286.73 773.39 C 285.53 770.86 283.81 770.35 280.97 770.35 L 219.03 770.35 C 216.02 770.35 214.47 770.96 213.01 773.49 L 204.15 789.93 C 202.43 792.57 207.59 793.99 211.29 793.99 Z M 433.76 739.91 L 433.76 496.43 L 65.98 496.43 L 65.98 739.91 Z M 25.89 816 C 16.09 815.9 7.31 812.04 3.61 806.06 C 0 800.17 1.46 794.29 4.56 790.23 L 40.18 747.52 L 40.18 495.12 C 40.18 482.43 49.81 466 65.81 466 L 433.84 466 C 446.32 466 459.57 477.77 459.57 496.74 L 459.57 747.52 L 495.53 790.64 C 498.54 794.7 500 800.07 496.39 805.86 C 491.66 813.16 482.71 815.49 474.28 816 Z" fill="#505050" stroke="none" pointer-events="all" style="fill: light-dark(rgb(80, 80, 80), rgb(168, 168, 168));"/>
+        </g>
+        <g>
+            <path d="M 530 331 L 530 409 L 420 409 L 420 455.9" fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" stroke-dasharray="9 9" pointer-events="stroke" style="stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+            <path d="M 420 462.65 L 415.5 453.65 L 420 455.9 L 424.5 453.65 Z" fill="#000000" stroke="#000000" stroke-width="3" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(rgb(0, 0, 0), rgb(255, 255, 255)); stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+        </g>
+        <g>
+            <path d="M 162.5 66 C 96.5 66 80 131 132.8 144 C 80 172.6 139.4 235 182.3 209 C 212 261 311 261 344 209 C 410 209 410 157 368.75 131 C 410 79 344 27 286.25 53 C 245 14 179 14 162.5 66 Z" fill="#ffffff" stroke="#000000" stroke-width="3" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(#ffffff, var(--ge-dark-color, #121212)); stroke: light-dark(rgb(0, 0, 0), rgb(237, 237, 237));"/>
+        </g>
+        <g>
+            <g transform="translate(-0.5 -0.5)">
+                <switch>
+                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                        <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 328px; height: 1px; padding-top: 131px; margin-left: 81px;">
+                            <div style="box-sizing: border-box; font-size: 0; text-align: center; color: #000000; ">
+                                <div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
+                                    <font style="font-size: 24px" face="Roboto, sans-serif">
+                                        DNS Servers
+                                    </font>
+                                </div>
+                            </div>
+                        </div>
+                    </foreignObject>
+                    <text x="245" y="135" fill="light-dark(#000000, #ffffff)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle">
+                        DNS Servers
+                    </text>
+                </switch>
+            </g>
+        </g>
+        <g>
+            <path d="M 185.2 331 L 185.2 296.2 L 245.2 296.2 L 245.06 271.1" fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" stroke-dasharray="9 9" pointer-events="stroke" style="stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+            <path d="M 245.02 264.35 L 249.57 273.33 L 245.06 271.1 L 240.57 273.38 Z" fill="#000000" stroke="#000000" stroke-width="3" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(rgb(0, 0, 0), rgb(255, 255, 255)); stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+        </g>
+        <g>
+            <path d="M 130 466 L 130 421 L 130 411" fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" stroke-dasharray="9 9" pointer-events="stroke" style="stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+        </g>
+        <g>
+            <path d="M 408.04 111 L 530 111 L 530 251" fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" stroke-dasharray="9 9" pointer-events="stroke" style="stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+        </g>
+        <g>
+            <path d="M 50 331 L 320 331 L 340 371 L 320 411 L 50 411 L 30 371 Z" fill="#ffffff" stroke="#000000" stroke-width="3" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(#ffffff, var(--ge-dark-color, #121212)); stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+        </g>
+        <g>
+            <g transform="translate(-0.5 -0.5)">
+                <switch>
+                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                        <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 308px; height: 1px; padding-top: 371px; margin-left: 31px;">
+                            <div style="box-sizing: border-box; font-size: 0; text-align: center; color: #000000; ">
+                                <div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
+                                    <span style="font-size: 24px;">
+                                        <font face="Roboto, sans-serif">
+                                            Who is: someapp.example.com
+                                        </font>
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
+                    </foreignObject>
+                    <text x="185" y="375" fill="light-dark(#000000, #ffffff)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle">
+                        Who is: someapp.example.com
+                    </text>
+                </switch>
+            </g>
+        </g>
+        <g>
+            <path d="M 430 251 L 630 251 L 650 291 L 630 331 L 430 331 L 410 291 Z" fill="#ffffff" stroke="#000000" stroke-width="3" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(#ffffff, var(--ge-dark-color, #121212)); stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+        </g>
+        <g>
+            <g transform="translate(-0.5 -0.5)">
+                <switch>
+                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                        <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 238px; height: 1px; padding-top: 291px; margin-left: 411px;">
+                            <div style="box-sizing: border-box; font-size: 0; text-align: center; color: #000000; ">
+                                <div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
+                                    <font face="Roboto, sans-serif">
+                                        <span style="font-size: 24px;">
+                                            IP:
+                                        </span>
+                                        <br style=""/>
+                                        <span style="font-size: 24px;">
+                                            123.124.125.126
+                                        </span>
+                                    </font>
+                                </div>
+                            </div>
+                        </div>
+                    </foreignObject>
+                    <text x="530" y="295" fill="light-dark(#000000, #ffffff)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle">
+                        IP:...
+                    </text>
+                </switch>
+            </g>
+        </g>
+        <g>
+            <rect x="60" y="493" width="380" height="250" fill="#ffffff" stroke="#000000" stroke-width="4" pointer-events="all" style="fill: light-dark(#ffffff, var(--ge-dark-color, #121212)); stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+        </g>
+        <g>
+            <g transform="translate(-0.5 -0.5)">
+                <switch>
+                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                        <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 378px; height: 1px; padding-top: 618px; margin-left: 61px;">
+                            <div style="box-sizing: border-box; font-size: 0; text-align: center; color: #000000; ">
+                                <div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; font-weight: bold; white-space: normal; word-wrap: normal; ">
+                                    <font style="font-size: 24px" face="Roboto, sans-serif">
+                                        https://someapp.example.com
+                                    </font>
+                                </div>
+                            </div>
+                        </div>
+                    </foreignObject>
+                    <text x="250" y="622" fill="light-dark(#000000, #ffffff)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle" font-weight="bold">
+                        https://someapp.example.com
+                    </text>
+                </switch>
+            </g>
+        </g>
+    </g>
+    <switch>
+        <g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/>
+        <a transform="translate(0,-5)" xlink:href="https://www.drawio.com/doc/faq/svg-export-text-problems" target="_blank">
+            <text text-anchor="middle" font-size="10px" x="50%" y="100%">
+                Text is not SVG - cannot display
+            </text>
+        </a>
+    </switch>
+</svg>
--- a/docs/en/docs/img/deployment/https/https01.svg
+++ b/docs/en/docs/img/deployment/https/https01.svg
--- a/docs/en/docs/img/deployment/https/https02.drawio
+++ b/docs/en/docs/img/deployment/https/https02.drawio
@ -1,110 +0,0 @@
-<mxfile host="65bd71144e">
-    <diagram id="jyERGzDynktFHFRGN0ph" name="Page-1">
-        <mxGraphModel dx="2481" dy="1867" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1920" pageHeight="1200" math="0" shadow="0">
-            <root>
-                <mxCell id="0"/>
-                <mxCell id="1" parent="0"/>
-                <mxCell id="2" value="" style="rounded=0;whiteSpace=wrap;html=1;fontStyle=1;strokeWidth=4;" parent="1" vertex="1">
-                    <mxGeometry x="450" y="-50" width="820" height="970" as="geometry"/>
-                </mxCell>
-                <mxCell id="3" value="&lt;font face=&quot;Roboto&quot;&gt;&lt;span style=&quot;font-size: 24px&quot;&gt;Server(s)&lt;/span&gt;&lt;/font&gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;strokeWidth=3;fontFamily=Roboto Mono, mono;FType=g;" parent="1" vertex="1">
-                    <mxGeometry x="710" y="-50" width="300" height="80" as="geometry"/>
-                </mxCell>
-                <mxCell id="8" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeWidth=3;exitX=0.092;exitY=1.01;exitDx=0;exitDy=0;dashed=1;exitPerimeter=0;" parent="1" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <Array as="points">
-                            <mxPoint x="800" y="521"/>
-                            <mxPoint x="800" y="560"/>
-                        </Array>
-                        <mxPoint x="803" y="521" as="sourcePoint"/>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="9" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeWidth=3;dashed=1;" parent="1" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <mxPoint x="800" y="520" as="sourcePoint"/>
-                        <Array as="points">
-                            <mxPoint x="800" y="680"/>
-                        </Array>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="33" value="" style="group" parent="1" vertex="1" connectable="0">
-                    <mxGeometry x="-140" y="-75" width="500" height="350" as="geometry"/>
-                </mxCell>
-                <mxCell id="29" value="&lt;font face=&quot;Roboto&quot; data-font-src=&quot;https://fonts.googleapis.com/css?family=Roboto&quot; style=&quot;font-size: 24px&quot;&gt;https://someapp.example.com&lt;/font&gt;" style="rounded=0;whiteSpace=wrap;html=1;fontStyle=1;strokeWidth=4;" parent="33" vertex="1">
-                    <mxGeometry x="60" y="27" width="380" height="250" as="geometry"/>
-                </mxCell>
-                <mxCell id="32" value="" style="pointerEvents=1;shadow=0;dashed=0;html=1;fillColor=#505050;labelPosition=center;verticalLabelPosition=bottom;verticalAlign=top;outlineConnect=0;align=center;shape=mxgraph.office.devices.laptop;strokeColor=none;" parent="33" vertex="1">
-                    <mxGeometry width="500" height="350" as="geometry"/>
-                </mxCell>
-                <mxCell id="90" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;dashed=1;startArrow=none;startFill=0;endArrow=classic;endFill=1;strokeWidth=3;" parent="1" source="101" target="32" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <mxPoint x="390" y="-190" as="sourcePoint"/>
-                        <Array as="points">
-                            <mxPoint x="390" y="-132"/>
-                            <mxPoint x="280" y="-132"/>
-                        </Array>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="34" value="&lt;font face=&quot;Roboto&quot; data-font-src=&quot;https://fonts.googleapis.com/css?family=Roboto&quot; style=&quot;font-size: 24px&quot;&gt;DNS Servers&lt;/font&gt;" style="ellipse;shape=cloud;whiteSpace=wrap;html=1;strokeColor=#000000;strokeWidth=3;" parent="1" vertex="1">
-                    <mxGeometry x="-60" y="-540" width="330" height="260" as="geometry"/>
-                </mxCell>
-                <mxCell id="88" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;startArrow=none;startFill=0;endArrow=classic;endFill=1;strokeWidth=3;dashed=1;" parent="1" source="100" target="34" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <mxPoint x="65.05882352941171" y="-220" as="sourcePoint"/>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="89" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;startArrow=none;startFill=0;endArrow=none;endFill=1;strokeWidth=3;dashed=1;" parent="1" source="32" target="100" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <mxPoint x="110" y="-75" as="sourcePoint"/>
-                        <mxPoint x="-4.941176470588289" y="-139.99999999999955" as="targetPoint"/>
-                        <Array as="points">
-                            <mxPoint x="-5" y="-90"/>
-                            <mxPoint x="-5" y="-90"/>
-                        </Array>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="91" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;dashed=1;startArrow=none;startFill=0;endArrow=none;endFill=1;strokeWidth=3;" parent="1" source="34" target="101" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <mxPoint x="105" y="-280" as="sourcePoint"/>
-                        <mxPoint x="390" y="-260" as="targetPoint"/>
-                        <Array as="points">
-                            <mxPoint x="390" y="-430"/>
-                        </Array>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="36" value="&lt;font face=&quot;Roboto&quot; data-font-src=&quot;https://fonts.googleapis.com/css?family=Roboto&quot; style=&quot;font-size: 24px&quot;&gt;Port 443 (HTTPS)&lt;/font&gt;" style="ellipse;whiteSpace=wrap;html=1;strokeColor=#000000;strokeWidth=3;" parent="1" vertex="1">
-                    <mxGeometry x="330" y="680" width="170" height="120" as="geometry"/>
-                </mxCell>
-                <mxCell id="42" value="&lt;font face=&quot;Roboto&quot; data-font-src=&quot;https://fonts.googleapis.com/css?family=Roboto&quot;&gt;&lt;span style=&quot;font-size: 24px&quot;&gt;IP:&lt;/span&gt;&lt;br&gt;&lt;span style=&quot;font-size: 24px&quot;&gt;123.124.125.126&lt;/span&gt;&lt;br&gt;&lt;/font&gt;" style="rounded=0;whiteSpace=wrap;html=1;strokeColor=#000000;strokeWidth=3;" parent="1" vertex="1">
-                    <mxGeometry x="290" y="600" width="220" height="70" as="geometry"/>
-                </mxCell>
-                <mxCell id="100" value="&lt;span style=&quot;font-family: &amp;#34;roboto&amp;#34; ; font-size: 24px&quot;&gt;Who is: someapp.example.com&lt;/span&gt;" style="shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fixedSize=1;strokeWidth=3;" parent="1" vertex="1">
-                    <mxGeometry x="-110" y="-210" width="310" height="80" as="geometry"/>
-                </mxCell>
-                <mxCell id="101" value="&lt;span style=&quot;font-family: &amp;#34;roboto&amp;#34; ; font-size: 24px&quot;&gt;IP:&lt;/span&gt;&lt;br style=&quot;font-family: &amp;#34;roboto&amp;#34;&quot;&gt;&lt;span style=&quot;font-family: &amp;#34;roboto&amp;#34; ; font-size: 24px&quot;&gt;123.124.125.126&lt;/span&gt;" style="shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fixedSize=1;strokeWidth=3;" parent="1" vertex="1">
-                    <mxGeometry x="270" y="-290" width="240" height="80" as="geometry"/>
-                </mxCell>
-                <mxCell id="106" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;dashed=1;startArrow=none;startFill=0;endArrow=none;endFill=0;strokeWidth=3;" parent="1" source="104" target="36" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <Array as="points">
-                            <mxPoint x="-40" y="770"/>
-                        </Array>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="104" value="&lt;span style=&quot;font-family: &amp;#34;roboto&amp;#34; ; font-size: 24px&quot;&gt;TLS Handshake&lt;/span&gt;" style="shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fixedSize=1;strokeWidth=3;" parent="1" vertex="1">
-                    <mxGeometry x="-110" y="300" width="230" height="80" as="geometry"/>
-                </mxCell>
-                <mxCell id="107" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;dashed=1;startArrow=none;startFill=0;endArrow=none;endFill=1;strokeWidth=3;" parent="1" source="32" target="104" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <mxPoint x="-40" y="275" as="sourcePoint"/>
-                        <mxPoint x="341.38784067832285" y="770" as="targetPoint"/>
-                        <Array as="points">
-                            <mxPoint x="-40" y="290"/>
-                            <mxPoint x="-40" y="290"/>
-                        </Array>
-                    </mxGeometry>
-                </mxCell>
-            </root>
-        </mxGraphModel>
-    </diagram>
-</mxfile>
--- a/docs/en/docs/img/deployment/https/https02.drawio.svg
+++ b/docs/en/docs/img/deployment/https/https02.drawio.svg
@ -0,0 +1,245 @@
+<svg host="65bd71144e" xmlns="http://www.w3.org/2000/svg" style="background: transparent; background-color: transparent;" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1413px" height="1464px" viewBox="-0.5 -0.5 1413 1464" content="&lt;mxfile&gt;&lt;diagram id=&quot;jyERGzDynktFHFRGN0ph&quot; name=&quot;Page-1&quot;&gt;7Vpbj6s2EP41kU4fgriFkMfd7OZspT1V1Kx02kcvOMQ9BlNwdpP++tpgEzDOnVxO1axWgfH4wsznmc9Des44Xn3NQLr4RkKIe7YZrnrOU8+2B57psC8uWZcSZ+CPSkmUobCUWRvBDP0DhdAU0iUKYd5QpIRgitKmMCBJAgPakIEsI59NtTnBzVlTEMGWYBYA3JZ+RyFdCOnINjcNLxBFCzm1bYqWGEhtIcgXICSfNZHz3HPGGSG0vIpXY4i5+aRhyn6TLa3VyjKY0EM6OHbZ4wPgpXg6sTC6lo+bEpRQmD1/sDG55aye81it22Q3IcgXMBQ3CxpjoTRHGI8JJlkxjjMw+R+TY/AO8ZTkiCKSsLYA8vFZwwfMKGJ2flUU3gmlJK4pPGAU8QZKUiYlS4pRAseVu/kkQKhUg7Mlp/yJ4lXEcWmQ+RwF0AjhB/vKDQzScrScZuQHlOtOSMI6PbbtKkzNVwRXNZGw81dIYkizNVMRrX3LFU4XuO8PB+X95wZEA4mURQ0/zHICvAK4UTX4xrXsQnhX7+kDHJ2RZRJWjvxcIApnKQh46yczmeJcktCZ6GtVZpP7we3GZu5AMZm8r5nMtzUmGw07MJmjMZmHKX/YFCQN23l/L/mWLazSz4uI9cAUbDddFZaQ7ewqEt9Y6vMQVFp5o/c7YZgnPXvMZwFJ3s9hhubtcWYwY9b8kv8iB2TPVI7ZnIeJyzVLseJ65g/a9K92G9R3tBC19pm6R2MUhnwaLaCakGtiyBH2mYAYYQ4AaRTzG0mEbWJ+5TxO3tbF3o66gd3Q2g87R7dT/Q5Q57ecA0OWfsQtyeiCRCQB+HkjVcy40XklPKQV/vwLUroWuRQsKdF5u255uEL0Dz6gYY5scf8n1zZMS9w+rcSExc1azQZSbcqgy6zAwVEobHUQf86d7skgBhR9NNOwztZF14csA+uaQpHH8trIUy7YeN03m14fiBkmh+p7puLncgXbejva2arl5mSZBVD0UuBT2eQgRI3uA1ENYFwLBAd42TzI7ueiyfN3oOMUp5q38GrDhzkFGX3ghHqTDgrZBPFll6EhCaVGgEGeo6AUChU9UraCo/SNEJmS+4MsgpIq2ddBkTNSMoQ1ugyM2hOJR9wWlaoctKXD2cBz3K206HQ2cyCVavGfp99mrK1kQflWDqTuE4zZURHWzgQBJstwP+dtcqIe5wD8cxyGjzgxeCoNcTU8xNHwENvrgojciIlcKKgcln6aEcbURBj3OhHGGxjmwPfZ4c8euZY1tJpQsA9MWydscFmN2XVUvD8gCI3uUSBTSh0EFTIujQJLPYnImsEet7cG6rtGASPPHRawkk7eZImRMap9Bso85dOfnc76g+a0I3P3qneqn8+hZEi+LdLPIVUHwv4wpLs6pF+Jl1um4uvWYfpQqLcoUysbdgTm1kSu0y0+He+OqNaUIZs1ui47t5pfXt7eprPtVaetjOu+GFZFnpRDWp1gWUMNwbLU9HsKwXJ1NdmGe0NAQb/0ThY0XLaglL/teOCTlcbPjYiQCEOQotwISMzEQc5UJnO1fnapYmRn1dFfp4XCltJlKX7POp/Wsh3Dsl32P2D/3p4FbKm0tte1b3McVXa/8gaxlRDnme0NYusK8F3U3yuWdc8V+O8LXpFG5V5k6TRmGzA14ArEKYblPjyrMi+PqAs2ZMTfhj2mtXqqkFYlVns/guZoBeVL1SPJwjEvu1TiWr29rZ9dLQ1yuqihV6yl08x5oyinmeKCqzozCP4n0FtFrwq8I03Ycy8GXu+nP4UcmZCaVRfNMUQy4Ru/Iuorr/CHw24Jf/Xs95zx3l55zfUFJCHb3T/g//mtAKiOGOlKs91EiKEGJj95yDincKEt0V2pUKvGBPvUEp3jWobjD33X9Ia+w5DSLIgMVUrdVUlOXf++mtxu/bNjoK0rP9+q6NE8Zh/D7s855F3lt1V99UWh67cJuq+JYPYJP0djt5sfNZag2Pw41Hn+Fw==&lt;/diagram&gt;&lt;/mxfile&gt;">
+    <defs/>
+    <g>
+        <g>
+            <rect x="0" y="466" width="500" height="350" fill="none" stroke="none" pointer-events="all"/>
+            <path d="M 289.06 793.99 C 293.87 793.99 297.23 791.75 296.28 790.03 L 286.73 773.39 C 285.53 770.86 283.81 770.35 280.97 770.35 L 219.03 770.35 C 216.02 770.35 214.47 770.96 213.01 773.49 L 204.15 789.93 C 202.43 792.57 207.59 793.99 211.29 793.99 Z M 433.76 739.91 L 433.76 496.43 L 65.98 496.43 L 65.98 739.91 Z M 25.89 816 C 16.09 815.9 7.31 812.04 3.61 806.06 C 0 800.17 1.46 794.29 4.56 790.23 L 40.18 747.52 L 40.18 495.12 C 40.18 482.43 49.81 466 65.81 466 L 433.84 466 C 446.32 466 459.57 477.77 459.57 496.74 L 459.57 747.52 L 495.53 790.64 C 498.54 794.7 500 800.07 496.39 805.86 C 491.66 813.16 482.71 815.49 474.28 816 Z" fill="#505050" stroke="none" pointer-events="all" style="fill: light-dark(rgb(80, 80, 80), rgb(168, 168, 168));"/>
+        </g>
+        <g>
+            <rect x="590" y="491" width="820" height="970" fill="#ffffff" stroke="#000000" stroke-width="4" pointer-events="all" style="fill: light-dark(#ffffff, var(--ge-dark-color, #121212)); stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+        </g>
+        <g>
+            <rect x="850" y="491" width="300" height="80" fill="none" stroke="none" pointer-events="all"/>
+        </g>
+        <g>
+            <g transform="translate(-0.5 -0.5)">
+                <switch>
+                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                        <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 298px; height: 1px; padding-top: 531px; margin-left: 851px;">
+                            <div style="box-sizing: border-box; font-size: 0; text-align: center; color: #000000; ">
+                                <div style="display: inline-block; font-size: 12px; font-family: &quot;Roboto Mono&quot;, &quot;mono&quot;; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
+                                    <span style="font-size: 24px;">
+                                        <font face="Roboto, sans-serif">
+                                            Server(s)
+                                        </font>
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
+                    </foreignObject>
+                    <text x="1000" y="535" fill="light-dark(#000000, #ffffff)" font-family="&quot;Roboto Mono&quot;, &quot;mono&quot;" font-size="12px" text-anchor="middle">
+                        Server(s)
+                    </text>
+                </switch>
+            </g>
+        </g>
+        <g>
+            <path d="M 529.86 331 L 529.86 408.86 L 419.86 408.86 L 419.86 455.9" fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" stroke-dasharray="9 9" pointer-events="stroke" style="stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+            <path d="M 419.86 462.65 L 415.36 453.65 L 419.86 455.9 L 424.36 453.65 Z" fill="#000000" stroke="#000000" stroke-width="3" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(rgb(0, 0, 0), rgb(255, 255, 255)); stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+        </g>
+        <g>
+            <path d="M 162.5 66 C 96.5 66 80 131 132.8 144 C 80 172.6 139.4 235 182.3 209 C 212 261 311 261 344 209 C 410 209 410 157 368.75 131 C 410 79 344 27 286.25 53 C 245 14 179 14 162.5 66 Z" fill="#ffffff" stroke="#000000" stroke-width="3" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(#ffffff, var(--ge-dark-color, #121212)); stroke: light-dark(rgb(0, 0, 0), rgb(237, 237, 237));"/>
+        </g>
+        <g>
+            <g transform="translate(-0.5 -0.5)">
+                <switch>
+                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                        <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 328px; height: 1px; padding-top: 131px; margin-left: 81px;">
+                            <div style="box-sizing: border-box; font-size: 0; text-align: center; color: #000000; ">
+                                <div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
+                                    <font style="font-size: 24px" face="Roboto, sans-serif">
+                                        DNS Servers
+                                    </font>
+                                </div>
+                            </div>
+                        </div>
+                    </foreignObject>
+                    <text x="245" y="135" fill="light-dark(#000000, #ffffff)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle">
+                        DNS Servers
+                    </text>
+                </switch>
+            </g>
+        </g>
+        <g>
+            <path d="M 185 331 L 185 296 L 245 296 L 245 271.1" fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" stroke-dasharray="9 9" pointer-events="stroke" style="stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+            <path d="M 245 264.35 L 249.5 273.35 L 245 271.1 L 240.5 273.35 Z" fill="#000000" stroke="#000000" stroke-width="3" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(rgb(0, 0, 0), rgb(255, 255, 255)); stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+        </g>
+        <g>
+            <path d="M 135 466 L 135 450.86 L 135 411" fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" stroke-dasharray="9 9" pointer-events="stroke" style="stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+        </g>
+        <g>
+            <path d="M 408.01 110.86 L 529.86 110.86 L 529.86 251" fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" stroke-dasharray="9 9" pointer-events="stroke" style="stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+        </g>
+        <g>
+            <ellipse cx="555" cy="1281" rx="85" ry="60.00000000000001" fill="#ffffff" stroke="#000000" stroke-width="3" pointer-events="all" style="fill: light-dark(#ffffff, var(--ge-dark-color, #121212)); stroke: light-dark(rgb(0, 0, 0), rgb(237, 237, 237));"/>
+        </g>
+        <g>
+            <g transform="translate(-0.5 -0.5)">
+                <switch>
+                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                        <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 168px; height: 1px; padding-top: 1281px; margin-left: 471px;">
+                            <div style="box-sizing: border-box; font-size: 0; text-align: center; color: #000000; ">
+                                <div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
+                                    <font style="font-size: 24px" face="Roboto, sans-serif">
+                                        Port 443 (HTTPS)
+                                    </font>
+                                </div>
+                            </div>
+                        </div>
+                    </foreignObject>
+                    <text x="555" y="1285" fill="light-dark(#000000, #ffffff)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle">
+                        Port 443 (HTTPS)
+                    </text>
+                </switch>
+            </g>
+        </g>
+        <g>
+            <rect x="430" y="1141" width="220" height="70" fill="#ffffff" stroke="#000000" stroke-width="3" pointer-events="all" style="fill: light-dark(#ffffff, var(--ge-dark-color, #121212)); stroke: light-dark(rgb(0, 0, 0), rgb(237, 237, 237));"/>
+        </g>
+        <g>
+            <g transform="translate(-0.5 -0.5)">
+                <switch>
+                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                        <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 218px; height: 1px; padding-top: 1176px; margin-left: 431px;">
+                            <div style="box-sizing: border-box; font-size: 0; text-align: center; color: #000000; ">
+                                <div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
+                                    <font data-font-src="https://fonts.googleapis.com/css?family=Roboto">
+                                        <font face="Roboto, sans-serif">
+                                            <span style="font-size: 24px;">
+                                                IP:
+                                            </span>
+                                            <br/>
+                                            <span style="font-size: 24px;">
+                                                123.124.125.126
+                                            </span>
+                                        </font>
+                                        <br/>
+                                    </font>
+                                </div>
+                            </div>
+                        </div>
+                    </foreignObject>
+                    <text x="540" y="1180" fill="light-dark(#000000, #ffffff)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle">
+                        IP:...
+                    </text>
+                </switch>
+            </g>
+        </g>
+        <g>
+            <path d="M 50 331 L 320 331 L 340 371 L 320 411 L 50 411 L 30 371 Z" fill="#ffffff" stroke="#000000" stroke-width="3" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(#ffffff, var(--ge-dark-color, #121212)); stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+        </g>
+        <g>
+            <g transform="translate(-0.5 -0.5)">
+                <switch>
+                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                        <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 308px; height: 1px; padding-top: 371px; margin-left: 31px;">
+                            <div style="box-sizing: border-box; font-size: 0; text-align: center; color: #000000; ">
+                                <div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
+                                    <span style="font-size: 24px;">
+                                        <font face="Roboto, sans-serif">
+                                            Who is: someapp.example.com
+                                        </font>
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
+                    </foreignObject>
+                    <text x="185" y="375" fill="light-dark(#000000, #ffffff)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle">
+                        Who is: someapp.example.com
+                    </text>
+                </switch>
+            </g>
+        </g>
+        <g>
+            <path d="M 430 251 L 630 251 L 650 291 L 630 331 L 430 331 L 410 291 Z" fill="#ffffff" stroke="#000000" stroke-width="3" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(#ffffff, var(--ge-dark-color, #121212)); stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+        </g>
+        <g>
+            <g transform="translate(-0.5 -0.5)">
+                <switch>
+                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                        <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 238px; height: 1px; padding-top: 291px; margin-left: 411px;">
+                            <div style="box-sizing: border-box; font-size: 0; text-align: center; color: #000000; ">
+                                <div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
+                                    <font face="Roboto, sans-serif">
+                                        <span style="font-size: 24px;">
+                                            IP:
+                                        </span>
+                                        <br style=""/>
+                                        <span style="font-size: 24px;">
+                                            123.124.125.126
+                                        </span>
+                                    </font>
+                                </div>
+                            </div>
+                        </div>
+                    </foreignObject>
+                    <text x="530" y="295" fill="light-dark(#000000, #ffffff)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle">
+                        IP:...
+                    </text>
+                </switch>
+            </g>
+        </g>
+        <g>
+            <path d="M 100.14 921 L 100.14 1310.86 L 481.27 1310.86" fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" stroke-dasharray="9 9" pointer-events="stroke" style="stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+        </g>
+        <g>
+            <path d="M 50 841 L 240 841 L 260 881 L 240 921 L 50 921 L 30 881 Z" fill="#ffffff" stroke="#000000" stroke-width="3" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(#ffffff, var(--ge-dark-color, #121212)); stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+        </g>
+        <g>
+            <g transform="translate(-0.5 -0.5)">
+                <switch>
+                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                        <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 228px; height: 1px; padding-top: 881px; margin-left: 31px;">
+                            <div style="box-sizing: border-box; font-size: 0; text-align: center; color: #000000; ">
+                                <div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
+                                    <span style="font-size: 24px;">
+                                        <font face="Roboto, sans-serif">
+                                            TLS Handshake
+                                        </font>
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
+                    </foreignObject>
+                    <text x="145" y="885" fill="light-dark(#000000, #ffffff)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle">
+                        TLS Handshake
+                    </text>
+                </switch>
+            </g>
+        </g>
+        <g>
+            <path d="M 100.14 816 L 100.14 830.86 L 100.14 841" fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" stroke-dasharray="9 9" pointer-events="stroke" style="stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+        </g>
+        <g>
+            <rect x="60" y="493" width="380" height="250" fill="#ffffff" stroke="#000000" stroke-width="4" pointer-events="all" style="fill: light-dark(#ffffff, var(--ge-dark-color, #121212)); stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+        </g>
+        <g>
+            <g transform="translate(-0.5 -0.5)">
+                <switch>
+                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                        <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 378px; height: 1px; padding-top: 618px; margin-left: 61px;">
+                            <div style="box-sizing: border-box; font-size: 0; text-align: center; color: #000000; ">
+                                <div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; font-weight: bold; white-space: normal; word-wrap: normal; ">
+                                    <font style="font-size: 24px" face="Roboto, sans-serif">
+                                        https://someapp.example.com
+                                    </font>
+                                </div>
+                            </div>
+                        </div>
+                    </foreignObject>
+                    <text x="250" y="622" fill="light-dark(#000000, #ffffff)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle" font-weight="bold">
+                        https://someapp.example.com
+                    </text>
+                </switch>
+            </g>
+        </g>
+    </g>
+    <switch>
+        <g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/>
+        <a transform="translate(0,-5)" xlink:href="https://www.drawio.com/doc/faq/svg-export-text-problems" target="_blank">
+            <text text-anchor="middle" font-size="10px" x="50%" y="100%">
+                Text is not SVG - cannot display
+            </text>
+        </a>
+    </switch>
+</svg>
--- a/docs/en/docs/img/deployment/https/https02.svg
+++ b/docs/en/docs/img/deployment/https/https02.svg
--- a/docs/en/docs/img/deployment/https/https03.drawio
+++ b/docs/en/docs/img/deployment/https/https03.drawio
@ -1,131 +0,0 @@
-<mxfile host="65bd71144e">
-    <diagram id="jyERGzDynktFHFRGN0ph" name="Page-1">
-        <mxGraphModel dx="2481" dy="1867" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1920" pageHeight="1200" math="0" shadow="0">
-            <root>
-                <mxCell id="0"/>
-                <mxCell id="1" parent="0"/>
-                <mxCell id="2" value="" style="rounded=0;whiteSpace=wrap;html=1;fontStyle=1;strokeWidth=4;" parent="1" vertex="1">
-                    <mxGeometry x="450" y="-50" width="820" height="970" as="geometry"/>
-                </mxCell>
-                <mxCell id="3" value="&lt;font face=&quot;Roboto&quot;&gt;&lt;span style=&quot;font-size: 24px&quot;&gt;Server(s)&lt;/span&gt;&lt;/font&gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;strokeWidth=3;fontFamily=Roboto Mono, mono;FType=g;" parent="1" vertex="1">
-                    <mxGeometry x="710" y="-50" width="300" height="80" as="geometry"/>
-                </mxCell>
-                <mxCell id="8" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeWidth=3;exitX=0.092;exitY=1.01;exitDx=0;exitDy=0;dashed=1;exitPerimeter=0;" parent="1" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <Array as="points">
-                            <mxPoint x="800" y="521"/>
-                            <mxPoint x="800" y="560"/>
-                        </Array>
-                        <mxPoint x="803" y="521" as="sourcePoint"/>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="9" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeWidth=3;dashed=1;" parent="1" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <mxPoint x="800" y="520" as="sourcePoint"/>
-                        <Array as="points">
-                            <mxPoint x="800" y="680"/>
-                        </Array>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="33" value="" style="group" parent="1" vertex="1" connectable="0">
-                    <mxGeometry x="-140" y="-75" width="500" height="350" as="geometry"/>
-                </mxCell>
-                <mxCell id="29" value="&lt;font face=&quot;Roboto&quot; data-font-src=&quot;https://fonts.googleapis.com/css?family=Roboto&quot; style=&quot;font-size: 24px&quot;&gt;https://someapp.example.com&lt;/font&gt;" style="rounded=0;whiteSpace=wrap;html=1;fontStyle=1;strokeWidth=4;" parent="33" vertex="1">
-                    <mxGeometry x="60" y="27" width="380" height="250" as="geometry"/>
-                </mxCell>
-                <mxCell id="32" value="" style="pointerEvents=1;shadow=0;dashed=0;html=1;fillColor=#505050;labelPosition=center;verticalLabelPosition=bottom;verticalAlign=top;outlineConnect=0;align=center;shape=mxgraph.office.devices.laptop;strokeColor=none;" parent="33" vertex="1">
-                    <mxGeometry width="500" height="350" as="geometry"/>
-                </mxCell>
-                <mxCell id="90" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;dashed=1;startArrow=none;startFill=0;endArrow=classic;endFill=1;strokeWidth=3;" parent="1" source="101" target="32" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <mxPoint x="390" y="-190" as="sourcePoint"/>
-                        <Array as="points">
-                            <mxPoint x="390" y="-132"/>
-                            <mxPoint x="280" y="-132"/>
-                        </Array>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="34" value="&lt;font face=&quot;Roboto&quot; data-font-src=&quot;https://fonts.googleapis.com/css?family=Roboto&quot; style=&quot;font-size: 24px&quot;&gt;DNS Servers&lt;/font&gt;" style="ellipse;shape=cloud;whiteSpace=wrap;html=1;strokeColor=#000000;strokeWidth=3;" parent="1" vertex="1">
-                    <mxGeometry x="-60" y="-540" width="330" height="260" as="geometry"/>
-                </mxCell>
-                <mxCell id="6" value="" style="rounded=0;whiteSpace=wrap;html=1;fontStyle=1;strokeWidth=4;fillColor=#dae8fc;strokeColor=#6c8ebf;" parent="1" vertex="1">
-                    <mxGeometry x="495" y="320" width="355" height="440" as="geometry"/>
-                </mxCell>
-                <mxCell id="7" value="&lt;font style=&quot;font-size: 24px&quot; face=&quot;Roboto&quot;&gt;TLS Termination Proxy&lt;br&gt;&lt;/font&gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;strokeWidth=3;fontFamily=Roboto Mono, mono;FType=g;" parent="1" vertex="1">
-                    <mxGeometry x="525" y="330" width="280" height="40" as="geometry"/>
-                </mxCell>
-                <mxCell id="88" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;startArrow=none;startFill=0;endArrow=classic;endFill=1;strokeWidth=3;dashed=1;" parent="1" source="100" target="34" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <mxPoint x="65.05882352941171" y="-220" as="sourcePoint"/>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="89" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;startArrow=none;startFill=0;endArrow=none;endFill=1;strokeWidth=3;dashed=1;" parent="1" source="32" target="100" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <mxPoint x="110" y="-75" as="sourcePoint"/>
-                        <mxPoint x="-4.941176470588289" y="-139.99999999999955" as="targetPoint"/>
-                        <Array as="points">
-                            <mxPoint x="-5" y="-90"/>
-                            <mxPoint x="-5" y="-90"/>
-                        </Array>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="91" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;dashed=1;startArrow=none;startFill=0;endArrow=none;endFill=1;strokeWidth=3;" parent="1" source="34" target="101" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <mxPoint x="105" y="-280" as="sourcePoint"/>
-                        <mxPoint x="390" y="-260" as="targetPoint"/>
-                        <Array as="points">
-                            <mxPoint x="390" y="-430"/>
-                        </Array>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="36" value="&lt;font face=&quot;Roboto&quot; data-font-src=&quot;https://fonts.googleapis.com/css?family=Roboto&quot; style=&quot;font-size: 24px&quot;&gt;Port 443 (HTTPS)&lt;/font&gt;" style="ellipse;whiteSpace=wrap;html=1;strokeColor=#000000;strokeWidth=3;" parent="1" vertex="1">
-                    <mxGeometry x="330" y="680" width="170" height="120" as="geometry"/>
-                </mxCell>
-                <mxCell id="100" value="&lt;span style=&quot;font-family: &amp;#34;roboto&amp;#34; ; font-size: 24px&quot;&gt;Who is: someapp.example.com&lt;/span&gt;" style="shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fixedSize=1;strokeWidth=3;" parent="1" vertex="1">
-                    <mxGeometry x="-110" y="-210" width="310" height="80" as="geometry"/>
-                </mxCell>
-                <mxCell id="101" value="&lt;span style=&quot;font-family: &amp;#34;roboto&amp;#34; ; font-size: 24px&quot;&gt;IP:&lt;/span&gt;&lt;br style=&quot;font-family: &amp;#34;roboto&amp;#34;&quot;&gt;&lt;span style=&quot;font-family: &amp;#34;roboto&amp;#34; ; font-size: 24px&quot;&gt;123.124.125.126&lt;/span&gt;" style="shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fixedSize=1;strokeWidth=3;" parent="1" vertex="1">
-                    <mxGeometry x="270" y="-290" width="240" height="80" as="geometry"/>
-                </mxCell>
-                <mxCell id="106" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;dashed=1;startArrow=none;startFill=0;endArrow=none;endFill=0;strokeWidth=3;" parent="1" source="104" target="36" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <Array as="points">
-                            <mxPoint x="-40" y="770"/>
-                        </Array>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="104" value="&lt;span style=&quot;font-family: &amp;#34;roboto&amp;#34; ; font-size: 24px&quot;&gt;TLS Handshake&lt;/span&gt;" style="shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fixedSize=1;strokeWidth=3;" parent="1" vertex="1">
-                    <mxGeometry x="-110" y="300" width="230" height="80" as="geometry"/>
-                </mxCell>
-                <mxCell id="107" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;dashed=1;startArrow=none;startFill=0;endArrow=none;endFill=1;strokeWidth=3;" parent="1" source="32" target="104" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <mxPoint x="-40" y="275" as="sourcePoint"/>
-                        <mxPoint x="341.38784067832285" y="770" as="targetPoint"/>
-                        <Array as="points">
-                            <mxPoint x="-40" y="290"/>
-                            <mxPoint x="-40" y="290"/>
-                        </Array>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="49" value="" style="rounded=0;whiteSpace=wrap;html=1;fontStyle=1;strokeWidth=4;fillColor=#fff2cc;strokeColor=#d6b656;" parent="1" vertex="1">
-                    <mxGeometry x="510" y="400" width="310" height="320" as="geometry"/>
-                </mxCell>
-                <mxCell id="50" value="&lt;font style=&quot;font-size: 24px&quot; face=&quot;Roboto&quot;&gt;HTTPS certificates&lt;br&gt;&lt;/font&gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;strokeWidth=3;fontFamily=Roboto Mono, mono;FType=g;" parent="1" vertex="1">
-                    <mxGeometry x="550.9" y="410" width="228.21" height="40" as="geometry"/>
-                </mxCell>
-                <mxCell id="51" value="&lt;font face=&quot;Roboto&quot; data-font-src=&quot;https://fonts.googleapis.com/css?family=Roboto&quot;&gt;&lt;span style=&quot;font-size: 24px&quot;&gt;someapp.example.com&lt;/span&gt;&lt;br&gt;&lt;/font&gt;" style="rounded=0;whiteSpace=wrap;html=1;strokeColor=#000000;strokeWidth=3;" parent="1" vertex="1">
-                    <mxGeometry x="530" y="465" width="270" height="70" as="geometry"/>
-                </mxCell>
-                <mxCell id="52" value="&lt;font face=&quot;Roboto&quot; data-font-src=&quot;https://fonts.googleapis.com/css?family=Roboto&quot;&gt;&lt;span style=&quot;font-size: 24px&quot;&gt;another.example.net&lt;/span&gt;&lt;br&gt;&lt;/font&gt;" style="rounded=0;whiteSpace=wrap;html=1;strokeColor=#666666;strokeWidth=3;fillColor=#f5f5f5;fontColor=#333333;" parent="1" vertex="1">
-                    <mxGeometry x="530" y="545" width="270" height="70" as="geometry"/>
-                </mxCell>
-                <mxCell id="53" value="&lt;font face=&quot;Roboto&quot; data-font-src=&quot;https://fonts.googleapis.com/css?family=Roboto&quot;&gt;&lt;span style=&quot;font-size: 24px&quot;&gt;onemore.example.org&lt;/span&gt;&lt;br&gt;&lt;/font&gt;" style="rounded=0;whiteSpace=wrap;html=1;strokeColor=#666666;strokeWidth=3;fillColor=#f5f5f5;fontColor=#333333;" parent="1" vertex="1">
-                    <mxGeometry x="530" y="625" width="270" height="70" as="geometry"/>
-                </mxCell>
-                <mxCell id="42" value="&lt;font face=&quot;Roboto&quot; data-font-src=&quot;https://fonts.googleapis.com/css?family=Roboto&quot;&gt;&lt;span style=&quot;font-size: 24px&quot;&gt;IP:&lt;/span&gt;&lt;br&gt;&lt;span style=&quot;font-size: 24px&quot;&gt;123.124.125.126&lt;/span&gt;&lt;br&gt;&lt;/font&gt;" style="rounded=0;whiteSpace=wrap;html=1;strokeColor=#000000;strokeWidth=3;" parent="1" vertex="1">
-                    <mxGeometry x="290" y="600" width="220" height="70" as="geometry"/>
-                </mxCell>
-            </root>
-        </mxGraphModel>
-    </diagram>
-</mxfile>
--- a/docs/en/docs/img/deployment/https/https03.drawio.svg
+++ b/docs/en/docs/img/deployment/https/https03.drawio.svg
--- a/docs/en/docs/img/deployment/https/https03.svg
+++ b/docs/en/docs/img/deployment/https/https03.svg
--- a/docs/en/docs/img/deployment/https/https04.drawio
+++ b/docs/en/docs/img/deployment/https/https04.drawio
@ -1,152 +0,0 @@
-<mxfile host="65bd71144e">
-    <diagram id="jyERGzDynktFHFRGN0ph" name="Page-1">
-        <mxGraphModel dx="2312" dy="1667" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1920" pageHeight="1200" math="0" shadow="0">
-            <root>
-                <mxCell id="0"/>
-                <mxCell id="1" parent="0"/>
-                <mxCell id="2" value="" style="rounded=0;whiteSpace=wrap;html=1;fontStyle=1;strokeWidth=4;" parent="1" vertex="1">
-                    <mxGeometry x="450" y="-50" width="820" height="970" as="geometry"/>
-                </mxCell>
-                <mxCell id="3" value="&lt;font face=&quot;Roboto&quot;&gt;&lt;span style=&quot;font-size: 24px&quot;&gt;Server(s)&lt;/span&gt;&lt;/font&gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;strokeWidth=3;fontFamily=Roboto Mono, mono;FType=g;" parent="1" vertex="1">
-                    <mxGeometry x="710" y="-50" width="300" height="80" as="geometry"/>
-                </mxCell>
-                <mxCell id="8" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeWidth=3;exitX=0.092;exitY=1.01;exitDx=0;exitDy=0;dashed=1;exitPerimeter=0;" parent="1" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <Array as="points">
-                            <mxPoint x="800" y="521"/>
-                            <mxPoint x="800" y="560"/>
-                        </Array>
-                        <mxPoint x="803" y="521" as="sourcePoint"/>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="9" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeWidth=3;dashed=1;" parent="1" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <mxPoint x="800" y="520" as="sourcePoint"/>
-                        <Array as="points">
-                            <mxPoint x="800" y="680"/>
-                        </Array>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="33" value="" style="group" parent="1" vertex="1" connectable="0">
-                    <mxGeometry x="-140" y="-75" width="500" height="350" as="geometry"/>
-                </mxCell>
-                <mxCell id="29" value="&lt;font face=&quot;Roboto&quot; data-font-src=&quot;https://fonts.googleapis.com/css?family=Roboto&quot; style=&quot;font-size: 24px&quot;&gt;https://someapp.example.com&lt;/font&gt;" style="rounded=0;whiteSpace=wrap;html=1;fontStyle=1;strokeWidth=4;" parent="33" vertex="1">
-                    <mxGeometry x="60" y="27" width="380" height="250" as="geometry"/>
-                </mxCell>
-                <mxCell id="32" value="" style="pointerEvents=1;shadow=0;dashed=0;html=1;fillColor=#505050;labelPosition=center;verticalLabelPosition=bottom;verticalAlign=top;outlineConnect=0;align=center;shape=mxgraph.office.devices.laptop;strokeColor=none;" parent="33" vertex="1">
-                    <mxGeometry width="500" height="350" as="geometry"/>
-                </mxCell>
-                <mxCell id="90" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;dashed=1;startArrow=none;startFill=0;endArrow=classic;endFill=1;strokeWidth=3;" parent="1" source="101" target="32" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <mxPoint x="390" y="-190" as="sourcePoint"/>
-                        <Array as="points">
-                            <mxPoint x="390" y="-132"/>
-                            <mxPoint x="280" y="-132"/>
-                        </Array>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="34" value="&lt;font face=&quot;Roboto&quot; data-font-src=&quot;https://fonts.googleapis.com/css?family=Roboto&quot; style=&quot;font-size: 24px&quot;&gt;DNS Servers&lt;/font&gt;" style="ellipse;shape=cloud;whiteSpace=wrap;html=1;strokeColor=#000000;strokeWidth=3;" parent="1" vertex="1">
-                    <mxGeometry x="-60" y="-540" width="330" height="260" as="geometry"/>
-                </mxCell>
-                <mxCell id="6" value="" style="rounded=0;whiteSpace=wrap;html=1;fontStyle=1;strokeWidth=4;fillColor=#dae8fc;strokeColor=#6c8ebf;" parent="1" vertex="1">
-                    <mxGeometry x="495" y="320" width="355" height="440" as="geometry"/>
-                </mxCell>
-                <mxCell id="7" value="&lt;font style=&quot;font-size: 24px&quot; face=&quot;Roboto&quot;&gt;TLS Termination Proxy&lt;br&gt;&lt;/font&gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;strokeWidth=3;fontFamily=Roboto Mono, mono;FType=g;" parent="1" vertex="1">
-                    <mxGeometry x="525" y="330" width="280" height="40" as="geometry"/>
-                </mxCell>
-                <mxCell id="88" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;startArrow=none;startFill=0;endArrow=classic;endFill=1;strokeWidth=3;dashed=1;" parent="1" source="100" target="34" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <mxPoint x="65.05882352941171" y="-220" as="sourcePoint"/>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="89" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;startArrow=none;startFill=0;endArrow=none;endFill=1;strokeWidth=3;dashed=1;" parent="1" source="32" target="100" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <mxPoint x="110" y="-75" as="sourcePoint"/>
-                        <mxPoint x="-4.941176470588289" y="-139.99999999999955" as="targetPoint"/>
-                        <Array as="points">
-                            <mxPoint x="-5" y="-90"/>
-                            <mxPoint x="-5" y="-90"/>
-                        </Array>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="91" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;dashed=1;startArrow=none;startFill=0;endArrow=none;endFill=1;strokeWidth=3;" parent="1" source="34" target="101" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <mxPoint x="105" y="-280" as="sourcePoint"/>
-                        <mxPoint x="390" y="-260" as="targetPoint"/>
-                        <Array as="points">
-                            <mxPoint x="390" y="-430"/>
-                        </Array>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="36" value="&lt;font face=&quot;Roboto&quot; data-font-src=&quot;https://fonts.googleapis.com/css?family=Roboto&quot; style=&quot;font-size: 24px&quot;&gt;Port 443 (HTTPS)&lt;/font&gt;" style="ellipse;whiteSpace=wrap;html=1;strokeColor=#000000;strokeWidth=3;" parent="1" vertex="1">
-                    <mxGeometry x="330" y="680" width="170" height="120" as="geometry"/>
-                </mxCell>
-                <mxCell id="92" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;dashed=1;startArrow=none;startFill=0;endArrow=classic;endFill=1;strokeWidth=3;" parent="1" source="96" target="36" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <mxPoint x="50" y="500" as="sourcePoint"/>
-                        <Array as="points">
-                            <mxPoint x="50" y="740"/>
-                        </Array>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="93" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;dashed=1;startArrow=none;startFill=0;endArrow=none;endFill=1;strokeWidth=3;" parent="1" source="32" target="96" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <mxPoint x="300" y="350" as="sourcePoint"/>
-                        <mxPoint x="55" y="330" as="targetPoint"/>
-                        <Array as="points">
-                            <mxPoint x="160" y="340"/>
-                            <mxPoint x="160" y="340"/>
-                        </Array>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="96" value="&lt;span style=&quot;font-family: &amp;#34;roboto&amp;#34; ; font-size: 24px&quot;&gt;Encrypted request for: someapp.example.com&lt;/span&gt;" style="shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fixedSize=1;strokeColor=#82b366;strokeWidth=3;fillColor=#d5e8d4;" parent="1" vertex="1">
-                    <mxGeometry x="-10" y="400" width="310" height="80" as="geometry"/>
-                </mxCell>
-                <mxCell id="100" value="&lt;span style=&quot;font-family: &amp;#34;roboto&amp;#34; ; font-size: 24px&quot;&gt;Who is: someapp.example.com&lt;/span&gt;" style="shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fixedSize=1;strokeWidth=3;" parent="1" vertex="1">
-                    <mxGeometry x="-110" y="-210" width="310" height="80" as="geometry"/>
-                </mxCell>
-                <mxCell id="101" value="&lt;span style=&quot;font-family: &amp;#34;roboto&amp;#34; ; font-size: 24px&quot;&gt;IP:&lt;/span&gt;&lt;br style=&quot;font-family: &amp;#34;roboto&amp;#34;&quot;&gt;&lt;span style=&quot;font-family: &amp;#34;roboto&amp;#34; ; font-size: 24px&quot;&gt;123.124.125.126&lt;/span&gt;" style="shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fixedSize=1;strokeWidth=3;" parent="1" vertex="1">
-                    <mxGeometry x="270" y="-290" width="240" height="80" as="geometry"/>
-                </mxCell>
-                <mxCell id="106" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;dashed=1;startArrow=none;startFill=0;endArrow=none;endFill=0;strokeWidth=3;" parent="1" source="104" target="36" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <Array as="points">
-                            <mxPoint x="-40" y="770"/>
-                        </Array>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="104" value="&lt;span style=&quot;font-family: &amp;#34;roboto&amp;#34; ; font-size: 24px&quot;&gt;TLS Handshake&lt;/span&gt;" style="shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fixedSize=1;strokeWidth=3;" parent="1" vertex="1">
-                    <mxGeometry x="-110" y="300" width="230" height="80" as="geometry"/>
-                </mxCell>
-                <mxCell id="107" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;dashed=1;startArrow=none;startFill=0;endArrow=none;endFill=1;strokeWidth=3;" parent="1" source="32" target="104" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <mxPoint x="-40" y="275" as="sourcePoint"/>
-                        <mxPoint x="341.38784067832285" y="770" as="targetPoint"/>
-                        <Array as="points">
-                            <mxPoint x="-40" y="290"/>
-                            <mxPoint x="-40" y="290"/>
-                        </Array>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="49" value="" style="rounded=0;whiteSpace=wrap;html=1;fontStyle=1;strokeWidth=4;fillColor=#fff2cc;strokeColor=#d6b656;" parent="1" vertex="1">
-                    <mxGeometry x="510" y="400" width="310" height="320" as="geometry"/>
-                </mxCell>
-                <mxCell id="50" value="&lt;font style=&quot;font-size: 24px&quot; face=&quot;Roboto&quot;&gt;HTTPS certificates&lt;br&gt;&lt;/font&gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;strokeWidth=3;fontFamily=Roboto Mono, mono;FType=g;" parent="1" vertex="1">
-                    <mxGeometry x="550.9" y="410" width="228.21" height="40" as="geometry"/>
-                </mxCell>
-                <mxCell id="51" value="&lt;font face=&quot;Roboto&quot; data-font-src=&quot;https://fonts.googleapis.com/css?family=Roboto&quot;&gt;&lt;span style=&quot;font-size: 24px&quot;&gt;someapp.example.com&lt;/span&gt;&lt;br&gt;&lt;/font&gt;" style="rounded=0;whiteSpace=wrap;html=1;strokeColor=#000000;strokeWidth=3;" parent="1" vertex="1">
-                    <mxGeometry x="530" y="465" width="270" height="70" as="geometry"/>
-                </mxCell>
-                <mxCell id="52" value="&lt;font face=&quot;Roboto&quot; data-font-src=&quot;https://fonts.googleapis.com/css?family=Roboto&quot;&gt;&lt;span style=&quot;font-size: 24px&quot;&gt;another.example.net&lt;/span&gt;&lt;br&gt;&lt;/font&gt;" style="rounded=0;whiteSpace=wrap;html=1;strokeColor=#666666;strokeWidth=3;fillColor=#f5f5f5;fontColor=#333333;" parent="1" vertex="1">
-                    <mxGeometry x="530" y="545" width="270" height="70" as="geometry"/>
-                </mxCell>
-                <mxCell id="53" value="&lt;font face=&quot;Roboto&quot; data-font-src=&quot;https://fonts.googleapis.com/css?family=Roboto&quot;&gt;&lt;span style=&quot;font-size: 24px&quot;&gt;onemore.example.org&lt;/span&gt;&lt;br&gt;&lt;/font&gt;" style="rounded=0;whiteSpace=wrap;html=1;strokeColor=#666666;strokeWidth=3;fillColor=#f5f5f5;fontColor=#333333;" parent="1" vertex="1">
-                    <mxGeometry x="530" y="625" width="270" height="70" as="geometry"/>
-                </mxCell>
-                <mxCell id="42" value="&lt;font face=&quot;Roboto&quot; data-font-src=&quot;https://fonts.googleapis.com/css?family=Roboto&quot;&gt;&lt;span style=&quot;font-size: 24px&quot;&gt;IP:&lt;/span&gt;&lt;br&gt;&lt;span style=&quot;font-size: 24px&quot;&gt;123.124.125.126&lt;/span&gt;&lt;br&gt;&lt;/font&gt;" style="rounded=0;whiteSpace=wrap;html=1;strokeColor=#000000;strokeWidth=3;" parent="1" vertex="1">
-                    <mxGeometry x="290" y="600" width="220" height="70" as="geometry"/>
-                </mxCell>
-            </root>
-        </mxGraphModel>
-    </diagram>
-</mxfile>
--- a/docs/en/docs/img/deployment/https/https04.drawio.svg
+++ b/docs/en/docs/img/deployment/https/https04.drawio.svg
@ -0,0 +1,419 @@
+<svg host="65bd71144e" xmlns="http://www.w3.org/2000/svg" style="background: transparent; background-color: transparent;" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1413px" height="1464px" viewBox="-0.5 -0.5 1413 1464" content="&lt;mxfile&gt;&lt;diagram id=&quot;jyERGzDynktFHFRGN0ph&quot; name=&quot;Page-1&quot;&gt;7Vxfc6M2EP80nrk+2AMSYHhMcvFdZ66dTJOZax8VkG16gDiQE7ufvhIIDELYxJYdu40zic1qkcTuT/tPckbwLl5/yVC6/I0EOBoBI1iP4OcRALZjQPbGKZuSAm3XKymLLAxKmrklPIb/YEE0BHUVBjhvMVJCIhqmbaJPkgT7tEVDWUZe22xzErVHTdECdwiPPoq61O9hQJeC6gFj2/AVh4tlNTQwREuMKm5ByJcoIK8NErwfwbuMEFp+itd3OOLiqwRT3jfraa1nluGEDrkBgvKOFxStxNOJidFN9bgpCROKs/sX1ieXnDmCt/W8DXYRoHyJA3GxpHEkmOZhFN2RiGRFP9A2+A+jR+gZRw8kD2lIEtbmY94/a3jBGQ2ZnL9JDM+EUhI3GG6icMEbKEkZlaxoFCb4rlY3HwQJlrpzNuWUP1G8XnBcTsh8Hvp4EuAX9pZPIpSWveU0Iz9wNe+EJOym265chaj5jPC6QRJy/oJJjGm2YSyidWxaQukC9+OpXV6/bkFkV0hZNvDDJCfAK4C7qDvfqpZ9ENpVa3qAojOySoJaka/LkOLHFPm89ZWJTFIuSeijuNesxVatB0uPzCxbEll13RCZCxQi86YaRAYVInMiyh82RUlLds7PFV+yhVTGeWGxbhgDsNJ1IYmqnX1aiPeo4ucmqJTylu8PwjBPRuCOj4KSfJzjLJx3+3nEGZPmp/yXqkP2TGWf7XEYuZxzRZZUz/RB2/pVLoPmihakzjqT12gcBgEfRgmoNuTaGIJCPjMUhxEHQCUU4zeSCNnE/BO8nT1tirW90AO7qbkfdlC1Ul0NqHM7ysEBcz/ikmR0SRYkQdH9liqJccvzjXCTVujzb0zpRvhStKJEpe2m5PE6pH/yDieGB8T1X5x7Ypji8vNaDFhcbGRvULE9MOgyKXBwFAy9CuLPuVM9GY4QDV/ablgl6+LWmyxDmwZD4cfyRs8PnLDVumu0tW6LEWZD+R1D0nM5g767oXK0ero5WWU+FndJ8KllMghR3mUgqgWMc4FggJaNQXI/Fk2OuwMdhyjVeA+ttnSYU5TRGx5Qb91BQZuFfNqlaUiCisOPUJ6HfkkULGqk9IKj1I0gGVXsj7IFrkIlcB4UQU/yEKZ3Ghh1BxKP2GeVah/Uc8PRwINWb1h0eDQzMJTqxD+ff39kbWUUlPfGQPI6iSKWKuJGTuBHZBXsj3nbMdGIxwD89TYMvyFjcOQwxFLEIVARhwBHQyDiKPR82oxBShgDhN25r5K747v4ea4px/DslpQhUAjZtrtCtiwNQp7uW0wHLgxdCcbTN77AnnAWhwkq0nFgPGRkvdmTcDxnihRk56r8SEGaqLSBhErYRWVt6luo1JGCvFMOcqJwYljg2Y4tDEVsYZ0ntnDsiWG7LjM6wLNMc2q2nQAYGLAe4NqrOuwuk395QBAc+lFQBZNNENTIODUKTLkGUVUL96i909HYmhQwcqxpAatKydv40Jt4jZctjVM+/dGB7Lhtz8aesXvWO9mPz54qg/y+SD8mnRoI+2FIt1RIP1NGbhqSrjtltKFQ7yRLnThYE5g7A1lQLz6hKvh+ryTrgSGbNVoWZH8/fX16enjsrzf35lqXlVvV8ZRUnmnGV+ZUEV+Zsvs9JMDyrs7aaC7eeI4ivnLOY2+kPaV6y01z5UYaZmpp9mCq3anrwpRWD6aI1bwzAQpKpd7Ofu1Q/2X35HyavZcp1ZWgtTsW28N/PJT7nd3FbLTeJ362SSmDOofLzxXOi+64s7opoBhjlKYTvEZxGuGJT+Ijd2Sr0uSSdbngpyBu08Y+mqDWW2tgQPktXOPqMI3S4brgGTqOugYiFeZs7AaatvjHUp5jGYrym6lwxDr2Wuts7pKh933JC05hfuVI010c7yTI9fmw8yBHlUHqUbg2BP76UDD0wGBbqFUMccJZmQBOTGCxX5v9Onvmty/BuE70gqkMXq8L3rqWqx+8ztXHim/MDNvVXUW540TZx5vLZNIhwelUb6xVP/sle7xy0+krSgK2un/gD//WyjKaFkK1+avHQqg2Jq/cZGhOL+uldOr8UrYJ4NCtAGiZE+hOXctwpi5kSGnnm1P50Kyu0r88/321/938R9tAa8A212lPNsznc+ArTzYEzrNjO3pMiH1oagV11Djt/tTqMo42FIVsxuPz0wLz0EcU9x8h+jjVoAWRtjFpbz9aiqSNGaZJ1bfuow323rQtQBSNSyBmfgtYS0rTMgufCbXnkwUhi4gl5GFeZuIzP2css7ks2pNlU7pWg4a6wqFr5E229sz7RLa0T2Q53S/tANU+kY4voNjgA6xKsKKE0CXOarAmmF4HWJ3ipbbIUohg8x8hqwa9fJ0G3LZ1TnD3f73q/w1u5v5jkuEa3CRbfID7eHA74Izgti7Mcl9dSfqyas7/xcgGSGeYHFV9SfXdWh3rA6hS8Pc639RecG8JhE9bNNCg5LH8bSDL7ZYAVMfIwQHfOWeX2/9cUNZltv8BAt7/Cw==&lt;/diagram&gt;&lt;/mxfile&gt;">
+    <defs/>
+    <g>
+        <g>
+            <rect x="0" y="466" width="500" height="350" fill="none" stroke="none" pointer-events="all"/>
+            <path d="M 289.06 793.99 C 293.87 793.99 297.23 791.75 296.28 790.03 L 286.73 773.39 C 285.53 770.86 283.81 770.35 280.97 770.35 L 219.03 770.35 C 216.02 770.35 214.47 770.96 213.01 773.49 L 204.15 789.93 C 202.43 792.57 207.59 793.99 211.29 793.99 Z M 433.76 739.91 L 433.76 496.43 L 65.98 496.43 L 65.98 739.91 Z M 25.89 816 C 16.09 815.9 7.31 812.04 3.61 806.06 C 0 800.17 1.46 794.29 4.56 790.23 L 40.18 747.52 L 40.18 495.12 C 40.18 482.43 49.81 466 65.81 466 L 433.84 466 C 446.32 466 459.57 477.77 459.57 496.74 L 459.57 747.52 L 495.53 790.64 C 498.54 794.7 500 800.07 496.39 805.86 C 491.66 813.16 482.71 815.49 474.28 816 Z" fill="#505050" stroke="none" pointer-events="all" style="fill: light-dark(rgb(80, 80, 80), rgb(168, 168, 168));"/>
+        </g>
+        <g>
+            <rect x="590" y="491" width="820" height="970" fill="#ffffff" stroke="#000000" stroke-width="4" pointer-events="all" style="fill: light-dark(#ffffff, var(--ge-dark-color, #121212)); stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+        </g>
+        <g>
+            <rect x="850" y="491" width="300" height="80" fill="none" stroke="none" pointer-events="all"/>
+        </g>
+        <g>
+            <g transform="translate(-0.5 -0.5)">
+                <switch>
+                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                        <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 298px; height: 1px; padding-top: 531px; margin-left: 851px;">
+                            <div style="box-sizing: border-box; font-size: 0; text-align: center; color: #000000; ">
+                                <div style="display: inline-block; font-size: 12px; font-family: &quot;Roboto Mono&quot;, &quot;mono&quot;; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
+                                    <span style="font-size: 24px;">
+                                        <font face="Roboto, sans-serif">
+                                            Server(s)
+                                        </font>
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
+                    </foreignObject>
+                    <text x="1000" y="535" fill="light-dark(#000000, #ffffff)" font-family="&quot;Roboto Mono&quot;, &quot;mono&quot;" font-size="12px" text-anchor="middle">
+                        Server(s)
+                    </text>
+                </switch>
+            </g>
+        </g>
+        <g>
+            <path d="M 529.86 331 L 529.86 408.86 L 419.86 408.86 L 419.86 455.9" fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" stroke-dasharray="9 9" pointer-events="stroke" style="stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+            <path d="M 419.86 462.65 L 415.36 453.65 L 419.86 455.9 L 424.36 453.65 Z" fill="#000000" stroke="#000000" stroke-width="3" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(rgb(0, 0, 0), rgb(255, 255, 255)); stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+        </g>
+        <g>
+            <path d="M 162.5 66 C 96.5 66 80 131 132.8 144 C 80 172.6 139.4 235 182.3 209 C 212 261 311 261 344 209 C 410 209 410 157 368.75 131 C 410 79 344 27 286.25 53 C 245 14 179 14 162.5 66 Z" fill="#ffffff" stroke="#000000" stroke-width="3" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(#ffffff, var(--ge-dark-color, #121212)); stroke: light-dark(rgb(0, 0, 0), rgb(237, 237, 237));"/>
+        </g>
+        <g>
+            <g transform="translate(-0.5 -0.5)">
+                <switch>
+                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                        <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 328px; height: 1px; padding-top: 131px; margin-left: 81px;">
+                            <div style="box-sizing: border-box; font-size: 0; text-align: center; color: #000000; ">
+                                <div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
+                                    <font style="font-size: 24px" face="Roboto, sans-serif">
+                                        DNS Servers
+                                    </font>
+                                </div>
+                            </div>
+                        </div>
+                    </foreignObject>
+                    <text x="245" y="135" fill="light-dark(#000000, #ffffff)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle">
+                        DNS Servers
+                    </text>
+                </switch>
+            </g>
+        </g>
+        <g>
+            <rect x="635" y="861" width="355" height="440" fill="#dae8fc" stroke="#6c8ebf" stroke-width="4" pointer-events="all" style="fill: light-dark(rgb(218, 232, 252), rgb(29, 41, 59)); stroke: light-dark(rgb(108, 142, 191), rgb(92, 121, 163));"/>
+        </g>
+        <g>
+            <rect x="665" y="871" width="280" height="40" fill="none" stroke="none" pointer-events="all"/>
+        </g>
+        <g>
+            <g transform="translate(-0.5 -0.5)">
+                <switch>
+                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                        <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 278px; height: 1px; padding-top: 891px; margin-left: 666px;">
+                            <div style="box-sizing: border-box; font-size: 0; text-align: center; color: #000000; ">
+                                <div style="display: inline-block; font-size: 12px; font-family: &quot;Roboto Mono&quot;, &quot;mono&quot;; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
+                                    <font style="font-size: 24px">
+                                        <font face="Roboto, sans-serif">
+                                            TLS Termination Proxy
+                                        </font>
+                                        <br/>
+                                    </font>
+                                </div>
+                            </div>
+                        </div>
+                    </foreignObject>
+                    <text x="805" y="895" fill="light-dark(#000000, #ffffff)" font-family="&quot;Roboto Mono&quot;, &quot;mono&quot;" font-size="12px" text-anchor="middle">
+                        TLS Termination Proxy
+                    </text>
+                </switch>
+            </g>
+        </g>
+        <g>
+            <path d="M 185 331 L 185 296 L 245 296 L 245 271.1" fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" stroke-dasharray="9 9" pointer-events="stroke" style="stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+            <path d="M 245 264.35 L 249.5 273.35 L 245 271.1 L 240.5 273.35 Z" fill="#000000" stroke="#000000" stroke-width="3" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(rgb(0, 0, 0), rgb(255, 255, 255)); stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+        </g>
+        <g>
+            <path d="M 135 466 L 135 450.86 L 135 411" fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" stroke-dasharray="9 9" pointer-events="stroke" style="stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+        </g>
+        <g>
+            <path d="M 408.01 110.86 L 529.86 110.86 L 529.86 251" fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" stroke-dasharray="9 9" pointer-events="stroke" style="stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+        </g>
+        <g>
+            <ellipse cx="555" cy="1281" rx="85" ry="60.00000000000001" fill="#ffffff" stroke="#000000" stroke-width="3" pointer-events="all" style="fill: light-dark(#ffffff, var(--ge-dark-color, #121212)); stroke: light-dark(rgb(0, 0, 0), rgb(237, 237, 237));"/>
+        </g>
+        <g>
+            <g transform="translate(-0.5 -0.5)">
+                <switch>
+                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                        <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 168px; height: 1px; padding-top: 1281px; margin-left: 471px;">
+                            <div style="box-sizing: border-box; font-size: 0; text-align: center; color: #000000; ">
+                                <div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
+                                    <font style="font-size: 24px" face="Roboto, sans-serif">
+                                        Port 443 (HTTPS)
+                                    </font>
+                                </div>
+                            </div>
+                        </div>
+                    </foreignObject>
+                    <text x="555" y="1285" fill="light-dark(#000000, #ffffff)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle">
+                        Port 443 (HTTPS)
+                    </text>
+                </switch>
+            </g>
+        </g>
+        <g>
+            <path d="M 190.14 1021 L 190.14 1280.86 L 459.9 1280.86" fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" stroke-dasharray="9 9" pointer-events="stroke" style="stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+            <path d="M 466.65 1280.86 L 457.65 1285.36 L 459.9 1280.86 L 457.65 1276.36 Z" fill="#000000" stroke="#000000" stroke-width="3" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(rgb(0, 0, 0), rgb(255, 255, 255)); stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+        </g>
+        <g>
+            <path d="M 300.14 816 L 300.14 880.86 L 300.14 941" fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" stroke-dasharray="9 9" pointer-events="stroke" style="stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+        </g>
+        <g>
+            <path d="M 150 941 L 420 941 L 440 981 L 420 1021 L 150 1021 L 130 981 Z" fill="#d5e8d4" stroke="#82b366" stroke-width="3" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(rgb(213, 232, 212), rgb(31, 47, 30)); stroke: light-dark(rgb(130, 179, 102), rgb(68, 110, 44));"/>
+        </g>
+        <g>
+            <g transform="translate(-0.5 -0.5)">
+                <switch>
+                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                        <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 308px; height: 1px; padding-top: 981px; margin-left: 131px;">
+                            <div style="box-sizing: border-box; font-size: 0; text-align: center; color: #000000; ">
+                                <div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
+                                    <span style="font-size: 24px;">
+                                        <font face="Roboto, sans-serif">
+                                            Encrypted request for: someapp.example.com
+                                        </font>
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
+                    </foreignObject>
+                    <text x="285" y="985" fill="light-dark(#000000, #ffffff)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle">
+                        Encrypted request for: someapp.example.com
+                    </text>
+                </switch>
+            </g>
+        </g>
+        <g>
+            <path d="M 50 331 L 320 331 L 340 371 L 320 411 L 50 411 L 30 371 Z" fill="#ffffff" stroke="#000000" stroke-width="3" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(#ffffff, var(--ge-dark-color, #121212)); stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+        </g>
+        <g>
+            <g transform="translate(-0.5 -0.5)">
+                <switch>
+                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                        <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 308px; height: 1px; padding-top: 371px; margin-left: 31px;">
+                            <div style="box-sizing: border-box; font-size: 0; text-align: center; color: #000000; ">
+                                <div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
+                                    <span style="font-size: 24px;">
+                                        <font face="Roboto, sans-serif">
+                                            Who is: someapp.example.com
+                                        </font>
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
+                    </foreignObject>
+                    <text x="185" y="375" fill="light-dark(#000000, #ffffff)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle">
+                        Who is: someapp.example.com
+                    </text>
+                </switch>
+            </g>
+        </g>
+        <g>
+            <path d="M 430 251 L 630 251 L 650 291 L 630 331 L 430 331 L 410 291 Z" fill="#ffffff" stroke="#000000" stroke-width="3" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(#ffffff, var(--ge-dark-color, #121212)); stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+        </g>
+        <g>
+            <g transform="translate(-0.5 -0.5)">
+                <switch>
+                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                        <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 238px; height: 1px; padding-top: 291px; margin-left: 411px;">
+                            <div style="box-sizing: border-box; font-size: 0; text-align: center; color: #000000; ">
+                                <div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
+                                    <font face="Roboto, sans-serif">
+                                        <span style="font-size: 24px;">
+                                            IP:
+                                        </span>
+                                        <br style=""/>
+                                        <span style="font-size: 24px;">
+                                            123.124.125.126
+                                        </span>
+                                    </font>
+                                </div>
+                            </div>
+                        </div>
+                    </foreignObject>
+                    <text x="530" y="295" fill="light-dark(#000000, #ffffff)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle">
+                        IP:...
+                    </text>
+                </switch>
+            </g>
+        </g>
+        <g>
+            <path d="M 100.14 921 L 100.14 1310.86 L 481.27 1310.86" fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" stroke-dasharray="9 9" pointer-events="stroke" style="stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+        </g>
+        <g>
+            <path d="M 50 841 L 240 841 L 260 881 L 240 921 L 50 921 L 30 881 Z" fill="#ffffff" stroke="#000000" stroke-width="3" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(#ffffff, var(--ge-dark-color, #121212)); stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+        </g>
+        <g>
+            <g transform="translate(-0.5 -0.5)">
+                <switch>
+                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                        <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 228px; height: 1px; padding-top: 881px; margin-left: 31px;">
+                            <div style="box-sizing: border-box; font-size: 0; text-align: center; color: #000000; ">
+                                <div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
+                                    <span style="font-size: 24px;">
+                                        <font face="Roboto, sans-serif">
+                                            TLS Handshake
+                                        </font>
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
+                    </foreignObject>
+                    <text x="145" y="885" fill="light-dark(#000000, #ffffff)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle">
+                        TLS Handshake
+                    </text>
+                </switch>
+            </g>
+        </g>
+        <g>
+            <path d="M 100.14 816 L 100.14 830.86 L 100.14 841" fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" stroke-dasharray="9 9" pointer-events="stroke" style="stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+        </g>
+        <g>
+            <rect x="650" y="941" width="310" height="320" fill="#fff2cc" stroke="#d6b656" stroke-width="4" pointer-events="all" style="fill: light-dark(rgb(255, 242, 204), rgb(40, 29, 0)); stroke: light-dark(rgb(214, 182, 86), rgb(109, 81, 0));"/>
+        </g>
+        <g>
+            <rect x="690.9" y="951" width="228.21" height="40" fill="none" stroke="none" pointer-events="all"/>
+        </g>
+        <g>
+            <g transform="translate(-0.5 -0.5)">
+                <switch>
+                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                        <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 226px; height: 1px; padding-top: 971px; margin-left: 692px;">
+                            <div style="box-sizing: border-box; font-size: 0; text-align: center; color: #000000; ">
+                                <div style="display: inline-block; font-size: 12px; font-family: &quot;Roboto Mono&quot;, &quot;mono&quot;; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
+                                    <font style="font-size: 24px">
+                                        <font face="Roboto, sans-serif">
+                                            HTTPS certificates
+                                        </font>
+                                        <br/>
+                                    </font>
+                                </div>
+                            </div>
+                        </div>
+                    </foreignObject>
+                    <text x="805" y="975" fill="light-dark(#000000, #ffffff)" font-family="&quot;Roboto Mono&quot;, &quot;mono&quot;" font-size="12px" text-anchor="middle">
+                        HTTPS certificates
+                    </text>
+                </switch>
+            </g>
+        </g>
+        <g>
+            <rect x="670" y="1006" width="270" height="70" fill="#ffffff" stroke="#000000" stroke-width="3" pointer-events="all" style="fill: light-dark(#ffffff, var(--ge-dark-color, #121212)); stroke: light-dark(rgb(0, 0, 0), rgb(237, 237, 237));"/>
+        </g>
+        <g>
+            <g transform="translate(-0.5 -0.5)">
+                <switch>
+                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                        <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 268px; height: 1px; padding-top: 1041px; margin-left: 671px;">
+                            <div style="box-sizing: border-box; font-size: 0; text-align: center; color: #000000; ">
+                                <div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
+                                    <font data-font-src="https://fonts.googleapis.com/css?family=Roboto">
+                                        <span style="font-size: 24px;">
+                                            <font face="Roboto, sans-serif">
+                                                someapp.example.com
+                                            </font>
+                                        </span>
+                                        <br/>
+                                    </font>
+                                </div>
+                            </div>
+                        </div>
+                    </foreignObject>
+                    <text x="805" y="1045" fill="light-dark(#000000, #ffffff)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle">
+                        someapp.example.com
+                    </text>
+                </switch>
+            </g>
+        </g>
+        <g>
+            <rect x="670" y="1086" width="270" height="70" fill="#f5f5f5" stroke="#666666" stroke-width="3" pointer-events="all" style="fill: light-dark(rgb(245, 245, 245), rgb(26, 26, 26)); stroke: light-dark(rgb(102, 102, 102), rgb(149, 149, 149));"/>
+        </g>
+        <g>
+            <g transform="translate(-0.5 -0.5)">
+                <switch>
+                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                        <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 268px; height: 1px; padding-top: 1121px; margin-left: 671px;">
+                            <div style="box-sizing: border-box; font-size: 0; text-align: center; color: #333333; ">
+                                <div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: light-dark(#333333, #c1c1c1); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
+                                    <font data-font-src="https://fonts.googleapis.com/css?family=Roboto">
+                                        <span style="font-size: 24px;">
+                                            <font face="Roboto, sans-serif">
+                                                another.example.net
+                                            </font>
+                                        </span>
+                                        <br/>
+                                    </font>
+                                </div>
+                            </div>
+                        </div>
+                    </foreignObject>
+                    <text x="805" y="1125" fill="#333333" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle">
+                        another.example.net
+                    </text>
+                </switch>
+            </g>
+        </g>
+        <g>
+            <rect x="670" y="1166" width="270" height="70" fill="#f5f5f5" stroke="#666666" stroke-width="3" pointer-events="all" style="fill: light-dark(rgb(245, 245, 245), rgb(26, 26, 26)); stroke: light-dark(rgb(102, 102, 102), rgb(149, 149, 149));"/>
+        </g>
+        <g>
+            <g transform="translate(-0.5 -0.5)">
+                <switch>
+                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                        <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 268px; height: 1px; padding-top: 1201px; margin-left: 671px;">
+                            <div style="box-sizing: border-box; font-size: 0; text-align: center; color: #333333; ">
+                                <div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: light-dark(#333333, #c1c1c1); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
+                                    <font data-font-src="https://fonts.googleapis.com/css?family=Roboto">
+                                        <span style="font-size: 24px;">
+                                            <font face="Roboto, sans-serif">
+                                                onemore.example.org
+                                            </font>
+                                        </span>
+                                        <br/>
+                                    </font>
+                                </div>
+                            </div>
+                        </div>
+                    </foreignObject>
+                    <text x="805" y="1205" fill="#333333" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle">
+                        onemore.example.org
+                    </text>
+                </switch>
+            </g>
+        </g>
+        <g>
+            <rect x="430" y="1141" width="220" height="70" fill="#ffffff" stroke="#000000" stroke-width="3" pointer-events="all" style="fill: light-dark(#ffffff, var(--ge-dark-color, #121212)); stroke: light-dark(rgb(0, 0, 0), rgb(237, 237, 237));"/>
+        </g>
+        <g>
+            <g transform="translate(-0.5 -0.5)">
+                <switch>
+                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                        <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 218px; height: 1px; padding-top: 1176px; margin-left: 431px;">
+                            <div style="box-sizing: border-box; font-size: 0; text-align: center; color: #000000; ">
+                                <div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
+                                    <font data-font-src="https://fonts.googleapis.com/css?family=Roboto">
+                                        <font face="Roboto, sans-serif">
+                                            <span style="font-size: 24px;">
+                                                IP:
+                                            </span>
+                                            <br/>
+                                            <span style="font-size: 24px;">
+                                                123.124.125.126
+                                            </span>
+                                        </font>
+                                        <br/>
+                                    </font>
+                                </div>
+                            </div>
+                        </div>
+                    </foreignObject>
+                    <text x="540" y="1180" fill="light-dark(#000000, #ffffff)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle">
+                        IP:...
+                    </text>
+                </switch>
+            </g>
+        </g>
+        <g>
+            <rect x="60" y="493" width="380" height="250" fill="#ffffff" stroke="#000000" stroke-width="4" pointer-events="all" style="fill: light-dark(#ffffff, var(--ge-dark-color, #121212)); stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+        </g>
+        <g>
+            <g transform="translate(-0.5 -0.5)">
+                <switch>
+                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                        <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 378px; height: 1px; padding-top: 618px; margin-left: 61px;">
+                            <div style="box-sizing: border-box; font-size: 0; text-align: center; color: #000000; ">
+                                <div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; font-weight: bold; white-space: normal; word-wrap: normal; ">
+                                    <font style="font-size: 24px" face="Roboto, sans-serif">
+                                        https://someapp.example.com
+                                    </font>
+                                </div>
+                            </div>
+                        </div>
+                    </foreignObject>
+                    <text x="250" y="622" fill="light-dark(#000000, #ffffff)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle" font-weight="bold">
+                        https://someapp.example.com
+                    </text>
+                </switch>
+            </g>
+        </g>
+    </g>
+    <switch>
+        <g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/>
+        <a transform="translate(0,-5)" xlink:href="https://www.drawio.com/doc/faq/svg-export-text-problems" target="_blank">
+            <text text-anchor="middle" font-size="10px" x="50%" y="100%">
+                Text is not SVG - cannot display
+            </text>
+        </a>
+    </switch>
+</svg>
--- a/docs/en/docs/img/deployment/https/https04.svg
+++ b/docs/en/docs/img/deployment/https/https04.svg
--- a/docs/en/docs/img/deployment/https/https05.drawio
+++ b/docs/en/docs/img/deployment/https/https05.drawio
@ -1,166 +0,0 @@
-<mxfile host="65bd71144e">
-    <diagram id="jyERGzDynktFHFRGN0ph" name="Page-1">
-        <mxGraphModel dx="5190" dy="5090" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1920" pageHeight="1200" math="0" shadow="0">
-            <root>
-                <mxCell id="0"/>
-                <mxCell id="1" parent="0"/>
-                <mxCell id="2" value="" style="rounded=0;whiteSpace=wrap;html=1;fontStyle=1;strokeWidth=4;" parent="1" vertex="1">
-                    <mxGeometry x="450" y="-50" width="820" height="970" as="geometry"/>
-                </mxCell>
-                <mxCell id="3" value="&lt;font face=&quot;Roboto&quot;&gt;&lt;span style=&quot;font-size: 24px&quot;&gt;Server(s)&lt;/span&gt;&lt;/font&gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;strokeWidth=3;fontFamily=Roboto Mono, mono;FType=g;" parent="1" vertex="1">
-                    <mxGeometry x="710" y="-50" width="300" height="80" as="geometry"/>
-                </mxCell>
-                <mxCell id="8" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeWidth=3;exitX=0.092;exitY=1.01;exitDx=0;exitDy=0;dashed=1;exitPerimeter=0;" parent="1" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <Array as="points">
-                            <mxPoint x="800" y="521"/>
-                            <mxPoint x="800" y="560"/>
-                        </Array>
-                        <mxPoint x="803" y="521" as="sourcePoint"/>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="9" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeWidth=3;dashed=1;" parent="1" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <mxPoint x="800" y="520" as="sourcePoint"/>
-                        <Array as="points">
-                            <mxPoint x="800" y="680"/>
-                        </Array>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="33" value="" style="group" parent="1" vertex="1" connectable="0">
-                    <mxGeometry x="-140" y="-75" width="500" height="350" as="geometry"/>
-                </mxCell>
-                <mxCell id="29" value="&lt;font face=&quot;Roboto&quot; data-font-src=&quot;https://fonts.googleapis.com/css?family=Roboto&quot; style=&quot;font-size: 24px&quot;&gt;https://someapp.example.com&lt;/font&gt;" style="rounded=0;whiteSpace=wrap;html=1;fontStyle=1;strokeWidth=4;" parent="33" vertex="1">
-                    <mxGeometry x="60" y="27" width="380" height="250" as="geometry"/>
-                </mxCell>
-                <mxCell id="32" value="" style="pointerEvents=1;shadow=0;dashed=0;html=1;fillColor=#505050;labelPosition=center;verticalLabelPosition=bottom;verticalAlign=top;outlineConnect=0;align=center;shape=mxgraph.office.devices.laptop;strokeColor=none;" parent="33" vertex="1">
-                    <mxGeometry width="500" height="350" as="geometry"/>
-                </mxCell>
-                <mxCell id="90" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;dashed=1;startArrow=none;startFill=0;endArrow=classic;endFill=1;strokeWidth=3;" parent="1" source="101" target="32" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <mxPoint x="390" y="-190" as="sourcePoint"/>
-                        <Array as="points">
-                            <mxPoint x="390" y="-132"/>
-                            <mxPoint x="280" y="-132"/>
-                        </Array>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="34" value="&lt;font face=&quot;Roboto&quot; data-font-src=&quot;https://fonts.googleapis.com/css?family=Roboto&quot; style=&quot;font-size: 24px&quot;&gt;DNS Servers&lt;/font&gt;" style="ellipse;shape=cloud;whiteSpace=wrap;html=1;strokeColor=#000000;strokeWidth=3;" parent="1" vertex="1">
-                    <mxGeometry x="-60" y="-540" width="330" height="260" as="geometry"/>
-                </mxCell>
-                <mxCell id="6" value="" style="rounded=0;whiteSpace=wrap;html=1;fontStyle=1;strokeWidth=4;fillColor=#dae8fc;strokeColor=#6c8ebf;" parent="1" vertex="1">
-                    <mxGeometry x="495" y="320" width="355" height="440" as="geometry"/>
-                </mxCell>
-                <mxCell id="7" value="&lt;font style=&quot;font-size: 24px&quot; face=&quot;Roboto&quot;&gt;TLS Termination Proxy&lt;br&gt;&lt;/font&gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;strokeWidth=3;fontFamily=Roboto Mono, mono;FType=g;" parent="1" vertex="1">
-                    <mxGeometry x="525" y="330" width="280" height="40" as="geometry"/>
-                </mxCell>
-                <mxCell id="62" value="&lt;font face=&quot;Roboto&quot; data-font-src=&quot;https://fonts.googleapis.com/css?family=Roboto&quot; style=&quot;font-size: 24px&quot;&gt;FastAPI&lt;/font&gt;&lt;font face=&quot;Roboto&quot; data-font-src=&quot;https://fonts.googleapis.com/css?family=Roboto&quot; style=&quot;font-size: 24px ; font-weight: normal&quot;&gt; app for: someapp.example.com&lt;/font&gt;" style="rounded=0;whiteSpace=wrap;html=1;fontStyle=1;strokeWidth=4;fillColor=#dae8fc;strokeColor=#6c8ebf;" parent="1" vertex="1">
-                    <mxGeometry x="895" y="640" width="300" height="100" as="geometry"/>
-                </mxCell>
-                <mxCell id="87" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;startArrow=none;startFill=0;endArrow=classic;endFill=1;strokeWidth=3;" parent="1" source="6" target="62" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <Array as="points">
-                            <mxPoint x="1240" y="390"/>
-                            <mxPoint x="1240" y="700"/>
-                        </Array>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="84" value="&lt;span style=&quot;font-family: &amp;#34;roboto&amp;#34; ; font-size: 24px&quot;&gt;Decrypted request for: someapp.example.com&lt;/span&gt;" style="shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fixedSize=1;strokeColor=#82b366;strokeWidth=3;fillColor=#d5e8d4;" parent="1" vertex="1">
-                    <mxGeometry x="890" y="350" width="310" height="80" as="geometry"/>
-                </mxCell>
-                <mxCell id="88" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;startArrow=none;startFill=0;endArrow=classic;endFill=1;strokeWidth=3;dashed=1;" parent="1" source="100" target="34" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <mxPoint x="65.05882352941171" y="-220" as="sourcePoint"/>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="89" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;startArrow=none;startFill=0;endArrow=none;endFill=1;strokeWidth=3;dashed=1;" parent="1" source="32" target="100" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <mxPoint x="110" y="-75" as="sourcePoint"/>
-                        <mxPoint x="-4.941176470588289" y="-139.99999999999955" as="targetPoint"/>
-                        <Array as="points">
-                            <mxPoint x="-5" y="-80"/>
-                            <mxPoint x="-5" y="-80"/>
-                        </Array>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="91" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;dashed=1;startArrow=none;startFill=0;endArrow=none;endFill=1;strokeWidth=3;" parent="1" source="34" target="101" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <mxPoint x="105" y="-280" as="sourcePoint"/>
-                        <mxPoint x="390" y="-260" as="targetPoint"/>
-                        <Array as="points">
-                            <mxPoint x="390" y="-430"/>
-                        </Array>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="36" value="&lt;font face=&quot;Roboto&quot; data-font-src=&quot;https://fonts.googleapis.com/css?family=Roboto&quot; style=&quot;font-size: 24px&quot;&gt;Port 443 (HTTPS)&lt;/font&gt;" style="ellipse;whiteSpace=wrap;html=1;strokeColor=#000000;strokeWidth=3;" parent="1" vertex="1">
-                    <mxGeometry x="330" y="680" width="170" height="120" as="geometry"/>
-                </mxCell>
-                <mxCell id="92" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;dashed=1;startArrow=none;startFill=0;endArrow=classic;endFill=1;strokeWidth=3;" parent="1" source="96" target="36" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <mxPoint x="50" y="500" as="sourcePoint"/>
-                        <Array as="points">
-                            <mxPoint x="50" y="740"/>
-                        </Array>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="93" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;dashed=1;startArrow=none;startFill=0;endArrow=none;endFill=1;strokeWidth=3;" parent="1" source="32" target="96" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <mxPoint x="300" y="350" as="sourcePoint"/>
-                        <mxPoint x="55" y="330" as="targetPoint"/>
-                        <Array as="points">
-                            <mxPoint x="160" y="340"/>
-                            <mxPoint x="160" y="340"/>
-                        </Array>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="96" value="&lt;span style=&quot;font-family: &amp;#34;roboto&amp;#34; ; font-size: 24px&quot;&gt;Encrypted request for: someapp.example.com&lt;/span&gt;" style="shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fixedSize=1;strokeColor=#82b366;strokeWidth=3;fillColor=#d5e8d4;" parent="1" vertex="1">
-                    <mxGeometry x="-10" y="400" width="310" height="80" as="geometry"/>
-                </mxCell>
-                <mxCell id="100" value="&lt;span style=&quot;font-family: &amp;#34;roboto&amp;#34; ; font-size: 24px&quot;&gt;Who is: someapp.example.com&lt;/span&gt;" style="shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fixedSize=1;strokeWidth=3;" parent="1" vertex="1">
-                    <mxGeometry x="-110" y="-210" width="310" height="80" as="geometry"/>
-                </mxCell>
-                <mxCell id="101" value="&lt;span style=&quot;font-family: &amp;#34;roboto&amp;#34; ; font-size: 24px&quot;&gt;IP:&lt;/span&gt;&lt;br style=&quot;font-family: &amp;#34;roboto&amp;#34;&quot;&gt;&lt;span style=&quot;font-family: &amp;#34;roboto&amp;#34; ; font-size: 24px&quot;&gt;123.124.125.126&lt;/span&gt;" style="shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fixedSize=1;strokeWidth=3;" parent="1" vertex="1">
-                    <mxGeometry x="270" y="-290" width="240" height="80" as="geometry"/>
-                </mxCell>
-                <mxCell id="106" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;dashed=1;startArrow=none;startFill=0;endArrow=none;endFill=0;strokeWidth=3;" parent="1" source="104" target="36" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <Array as="points">
-                            <mxPoint x="-40" y="770"/>
-                        </Array>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="104" value="&lt;span style=&quot;font-family: &amp;#34;roboto&amp;#34; ; font-size: 24px&quot;&gt;TLS Handshake&lt;/span&gt;" style="shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fixedSize=1;strokeWidth=3;" parent="1" vertex="1">
-                    <mxGeometry x="-110" y="300" width="230" height="80" as="geometry"/>
-                </mxCell>
-                <mxCell id="107" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;dashed=1;startArrow=none;startFill=0;endArrow=none;endFill=1;strokeWidth=3;" parent="1" source="32" target="104" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <mxPoint x="-40" y="275" as="sourcePoint"/>
-                        <mxPoint x="341.38784067832285" y="770" as="targetPoint"/>
-                        <Array as="points">
-                            <mxPoint x="-40" y="290"/>
-                            <mxPoint x="-40" y="290"/>
-                        </Array>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="49" value="" style="rounded=0;whiteSpace=wrap;html=1;fontStyle=1;strokeWidth=4;fillColor=#fff2cc;strokeColor=#d6b656;" parent="1" vertex="1">
-                    <mxGeometry x="510" y="400" width="310" height="320" as="geometry"/>
-                </mxCell>
-                <mxCell id="50" value="&lt;font style=&quot;font-size: 24px&quot; face=&quot;Roboto&quot;&gt;HTTPS certificates&lt;br&gt;&lt;/font&gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;strokeWidth=3;fontFamily=Roboto Mono, mono;FType=g;" parent="1" vertex="1">
-                    <mxGeometry x="550.9" y="410" width="228.21" height="40" as="geometry"/>
-                </mxCell>
-                <mxCell id="51" value="&lt;font face=&quot;Roboto&quot; data-font-src=&quot;https://fonts.googleapis.com/css?family=Roboto&quot;&gt;&lt;span style=&quot;font-size: 24px&quot;&gt;someapp.example.com&lt;/span&gt;&lt;br&gt;&lt;/font&gt;" style="rounded=0;whiteSpace=wrap;html=1;strokeColor=#000000;strokeWidth=3;" parent="1" vertex="1">
-                    <mxGeometry x="530" y="465" width="270" height="70" as="geometry"/>
-                </mxCell>
-                <mxCell id="52" value="&lt;font face=&quot;Roboto&quot; data-font-src=&quot;https://fonts.googleapis.com/css?family=Roboto&quot;&gt;&lt;span style=&quot;font-size: 24px&quot;&gt;another.example.net&lt;/span&gt;&lt;br&gt;&lt;/font&gt;" style="rounded=0;whiteSpace=wrap;html=1;strokeColor=#666666;strokeWidth=3;fillColor=#f5f5f5;fontColor=#333333;" parent="1" vertex="1">
-                    <mxGeometry x="530" y="545" width="270" height="70" as="geometry"/>
-                </mxCell>
-                <mxCell id="53" value="&lt;font face=&quot;Roboto&quot; data-font-src=&quot;https://fonts.googleapis.com/css?family=Roboto&quot;&gt;&lt;span style=&quot;font-size: 24px&quot;&gt;onemore.example.org&lt;/span&gt;&lt;br&gt;&lt;/font&gt;" style="rounded=0;whiteSpace=wrap;html=1;strokeColor=#666666;strokeWidth=3;fillColor=#f5f5f5;fontColor=#333333;" parent="1" vertex="1">
-                    <mxGeometry x="530" y="625" width="270" height="70" as="geometry"/>
-                </mxCell>
-                <mxCell id="42" value="&lt;font face=&quot;Roboto&quot; data-font-src=&quot;https://fonts.googleapis.com/css?family=Roboto&quot;&gt;&lt;span style=&quot;font-size: 24px&quot;&gt;IP:&lt;/span&gt;&lt;br&gt;&lt;span style=&quot;font-size: 24px&quot;&gt;123.124.125.126&lt;/span&gt;&lt;br&gt;&lt;/font&gt;" style="rounded=0;whiteSpace=wrap;html=1;strokeColor=#000000;strokeWidth=3;" parent="1" vertex="1">
-                    <mxGeometry x="290" y="600" width="220" height="70" as="geometry"/>
-                </mxCell>
-            </root>
-        </mxGraphModel>
-    </diagram>
-</mxfile>
--- a/docs/en/docs/img/deployment/https/https05.drawio.svg
+++ b/docs/en/docs/img/deployment/https/https05.drawio.svg
--- a/docs/en/docs/img/deployment/https/https05.svg
+++ b/docs/en/docs/img/deployment/https/https05.svg
--- a/docs/en/docs/img/deployment/https/https06.drawio
+++ b/docs/en/docs/img/deployment/https/https06.drawio
@ -1,183 +0,0 @@
-<mxfile host="65bd71144e">
-    <diagram id="jyERGzDynktFHFRGN0ph" name="Page-1">
-        <mxGraphModel dx="3321" dy="2867" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1920" pageHeight="1200" math="0" shadow="0">
-            <root>
-                <mxCell id="0"/>
-                <mxCell id="1" parent="0"/>
-                <mxCell id="2" value="" style="rounded=0;whiteSpace=wrap;html=1;fontStyle=1;strokeWidth=4;" parent="1" vertex="1">
-                    <mxGeometry x="450" y="-50" width="820" height="970" as="geometry"/>
-                </mxCell>
-                <mxCell id="3" value="&lt;font face=&quot;Roboto&quot;&gt;&lt;span style=&quot;font-size: 24px&quot;&gt;Server(s)&lt;/span&gt;&lt;/font&gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;strokeWidth=3;fontFamily=Roboto Mono, mono;FType=g;" parent="1" vertex="1">
-                    <mxGeometry x="710" y="-50" width="300" height="80" as="geometry"/>
-                </mxCell>
-                <mxCell id="8" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeWidth=3;exitX=0.092;exitY=1.01;exitDx=0;exitDy=0;dashed=1;exitPerimeter=0;" parent="1" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <Array as="points">
-                            <mxPoint x="800" y="521"/>
-                            <mxPoint x="800" y="560"/>
-                        </Array>
-                        <mxPoint x="803" y="521" as="sourcePoint"/>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="9" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeWidth=3;dashed=1;" parent="1" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <mxPoint x="800" y="520" as="sourcePoint"/>
-                        <Array as="points">
-                            <mxPoint x="800" y="680"/>
-                        </Array>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="33" value="" style="group" parent="1" vertex="1" connectable="0">
-                    <mxGeometry x="-140" y="-75" width="500" height="350" as="geometry"/>
-                </mxCell>
-                <mxCell id="29" value="&lt;font face=&quot;Roboto&quot; data-font-src=&quot;https://fonts.googleapis.com/css?family=Roboto&quot; style=&quot;font-size: 24px&quot;&gt;https://someapp.example.com&lt;/font&gt;" style="rounded=0;whiteSpace=wrap;html=1;fontStyle=1;strokeWidth=4;" parent="33" vertex="1">
-                    <mxGeometry x="60" y="27" width="380" height="250" as="geometry"/>
-                </mxCell>
-                <mxCell id="32" value="" style="pointerEvents=1;shadow=0;dashed=0;html=1;fillColor=#505050;labelPosition=center;verticalLabelPosition=bottom;verticalAlign=top;outlineConnect=0;align=center;shape=mxgraph.office.devices.laptop;strokeColor=none;" parent="33" vertex="1">
-                    <mxGeometry width="500" height="350" as="geometry"/>
-                </mxCell>
-                <mxCell id="90" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;dashed=1;startArrow=none;startFill=0;endArrow=classic;endFill=1;strokeWidth=3;" parent="1" source="101" target="32" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <mxPoint x="390" y="-190" as="sourcePoint"/>
-                        <Array as="points">
-                            <mxPoint x="390" y="-132"/>
-                            <mxPoint x="280" y="-132"/>
-                        </Array>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="34" value="&lt;font face=&quot;Roboto&quot; data-font-src=&quot;https://fonts.googleapis.com/css?family=Roboto&quot; style=&quot;font-size: 24px&quot;&gt;DNS Servers&lt;/font&gt;" style="ellipse;shape=cloud;whiteSpace=wrap;html=1;strokeColor=#000000;strokeWidth=3;" parent="1" vertex="1">
-                    <mxGeometry x="-60" y="-540" width="330" height="260" as="geometry"/>
-                </mxCell>
-                <mxCell id="6" value="" style="rounded=0;whiteSpace=wrap;html=1;fontStyle=1;strokeWidth=4;fillColor=#dae8fc;strokeColor=#6c8ebf;" parent="1" vertex="1">
-                    <mxGeometry x="495" y="320" width="355" height="440" as="geometry"/>
-                </mxCell>
-                <mxCell id="7" value="&lt;font style=&quot;font-size: 24px&quot; face=&quot;Roboto&quot;&gt;TLS Termination Proxy&lt;br&gt;&lt;/font&gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;strokeWidth=3;fontFamily=Roboto Mono, mono;FType=g;" parent="1" vertex="1">
-                    <mxGeometry x="525" y="330" width="280" height="40" as="geometry"/>
-                </mxCell>
-                <mxCell id="73" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;startArrow=none;startFill=0;endArrow=classic;endFill=1;strokeWidth=3;" parent="1" source="85" target="6" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <Array as="points"/>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="62" value="&lt;font face=&quot;Roboto&quot; data-font-src=&quot;https://fonts.googleapis.com/css?family=Roboto&quot; style=&quot;font-size: 24px&quot;&gt;FastAPI&lt;/font&gt;&lt;font face=&quot;Roboto&quot; data-font-src=&quot;https://fonts.googleapis.com/css?family=Roboto&quot; style=&quot;font-size: 24px ; font-weight: normal&quot;&gt; app for: someapp.example.com&lt;/font&gt;" style="rounded=0;whiteSpace=wrap;html=1;fontStyle=1;strokeWidth=4;fillColor=#dae8fc;strokeColor=#6c8ebf;" parent="1" vertex="1">
-                    <mxGeometry x="895" y="650" width="300" height="100" as="geometry"/>
-                </mxCell>
-                <mxCell id="85" value="&lt;span style=&quot;font-family: &amp;#34;roboto&amp;#34; ; font-size: 24px&quot;&gt;Plain response from: someapp.example.com&lt;/span&gt;" style="shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fixedSize=1;strokeColor=#9673a6;strokeWidth=3;fillColor=#e1d5e7;" parent="1" vertex="1">
-                    <mxGeometry x="890" y="500" width="310" height="80" as="geometry"/>
-                </mxCell>
-                <mxCell id="86" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;startArrow=none;startFill=0;endArrow=none;endFill=1;strokeWidth=3;" parent="1" source="62" target="85" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <mxPoint x="1030.0000000000005" y="649.9999999999995" as="sourcePoint"/>
-                        <mxPoint x="850" y="540.0000000000005" as="targetPoint"/>
-                        <Array as="points">
-                            <mxPoint x="1030" y="540"/>
-                        </Array>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="87" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;startArrow=none;startFill=0;endArrow=classic;endFill=1;strokeWidth=3;" parent="1" source="6" target="62" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <Array as="points">
-                            <mxPoint x="1240" y="390"/>
-                            <mxPoint x="1240" y="700"/>
-                        </Array>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="84" value="&lt;span style=&quot;font-family: &amp;#34;roboto&amp;#34; ; font-size: 24px&quot;&gt;Decrypted request for: someapp.example.com&lt;/span&gt;" style="shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fixedSize=1;strokeColor=#82b366;strokeWidth=3;fillColor=#d5e8d4;" parent="1" vertex="1">
-                    <mxGeometry x="890" y="350" width="310" height="80" as="geometry"/>
-                </mxCell>
-                <mxCell id="88" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;startArrow=none;startFill=0;endArrow=classic;endFill=1;strokeWidth=3;dashed=1;" parent="1" source="100" target="34" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <mxPoint x="65.05882352941171" y="-220" as="sourcePoint"/>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="89" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;startArrow=none;startFill=0;endArrow=none;endFill=1;strokeWidth=3;dashed=1;" parent="1" source="32" target="100" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <mxPoint x="110" y="-75" as="sourcePoint"/>
-                        <mxPoint x="-4.941176470588289" y="-139.99999999999955" as="targetPoint"/>
-                        <Array as="points">
-                            <mxPoint x="-5" y="-90"/>
-                            <mxPoint x="-5" y="-90"/>
-                        </Array>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="91" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;dashed=1;startArrow=none;startFill=0;endArrow=none;endFill=1;strokeWidth=3;" parent="1" source="34" target="101" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <mxPoint x="105" y="-280" as="sourcePoint"/>
-                        <mxPoint x="390" y="-260" as="targetPoint"/>
-                        <Array as="points">
-                            <mxPoint x="390" y="-430"/>
-                        </Array>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="36" value="&lt;font face=&quot;Roboto&quot; data-font-src=&quot;https://fonts.googleapis.com/css?family=Roboto&quot; style=&quot;font-size: 24px&quot;&gt;Port 443 (HTTPS)&lt;/font&gt;" style="ellipse;whiteSpace=wrap;html=1;strokeColor=#000000;strokeWidth=3;" parent="1" vertex="1">
-                    <mxGeometry x="330" y="680" width="170" height="120" as="geometry"/>
-                </mxCell>
-                <mxCell id="92" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;dashed=1;startArrow=none;startFill=0;endArrow=classic;endFill=1;strokeWidth=3;" parent="1" source="96" target="36" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <mxPoint x="50" y="500" as="sourcePoint"/>
-                        <Array as="points">
-                            <mxPoint x="50" y="740"/>
-                        </Array>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="93" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;dashed=1;startArrow=none;startFill=0;endArrow=none;endFill=1;strokeWidth=3;" parent="1" source="32" target="96" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <mxPoint x="300" y="350" as="sourcePoint"/>
-                        <mxPoint x="55" y="330" as="targetPoint"/>
-                        <Array as="points">
-                            <mxPoint x="160" y="340"/>
-                            <mxPoint x="160" y="340"/>
-                        </Array>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="96" value="&lt;span style=&quot;font-family: &amp;#34;roboto&amp;#34; ; font-size: 24px&quot;&gt;Encrypted request for: someapp.example.com&lt;/span&gt;" style="shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fixedSize=1;strokeColor=#82b366;strokeWidth=3;fillColor=#d5e8d4;" parent="1" vertex="1">
-                    <mxGeometry x="-10" y="400" width="310" height="80" as="geometry"/>
-                </mxCell>
-                <mxCell id="100" value="&lt;span style=&quot;font-family: &amp;#34;roboto&amp;#34; ; font-size: 24px&quot;&gt;Who is: someapp.example.com&lt;/span&gt;" style="shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fixedSize=1;strokeWidth=3;" parent="1" vertex="1">
-                    <mxGeometry x="-110" y="-210" width="310" height="80" as="geometry"/>
-                </mxCell>
-                <mxCell id="101" value="&lt;span style=&quot;font-family: &amp;#34;roboto&amp;#34; ; font-size: 24px&quot;&gt;IP:&lt;/span&gt;&lt;br style=&quot;font-family: &amp;#34;roboto&amp;#34;&quot;&gt;&lt;span style=&quot;font-family: &amp;#34;roboto&amp;#34; ; font-size: 24px&quot;&gt;123.124.125.126&lt;/span&gt;" style="shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fixedSize=1;strokeWidth=3;" parent="1" vertex="1">
-                    <mxGeometry x="270" y="-290" width="240" height="80" as="geometry"/>
-                </mxCell>
-                <mxCell id="106" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;dashed=1;startArrow=none;startFill=0;endArrow=none;endFill=0;strokeWidth=3;" parent="1" source="104" target="36" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <Array as="points">
-                            <mxPoint x="-40" y="770"/>
-                        </Array>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="104" value="&lt;span style=&quot;font-family: &amp;#34;roboto&amp;#34; ; font-size: 24px&quot;&gt;TLS Handshake&lt;/span&gt;" style="shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fixedSize=1;strokeWidth=3;" parent="1" vertex="1">
-                    <mxGeometry x="-110" y="300" width="230" height="80" as="geometry"/>
-                </mxCell>
-                <mxCell id="107" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;dashed=1;startArrow=none;startFill=0;endArrow=none;endFill=1;strokeWidth=3;" parent="1" source="32" target="104" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <mxPoint x="-40" y="275" as="sourcePoint"/>
-                        <mxPoint x="341.38784067832285" y="770" as="targetPoint"/>
-                        <Array as="points">
-                            <mxPoint x="-40" y="290"/>
-                            <mxPoint x="-40" y="290"/>
-                        </Array>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="49" value="" style="rounded=0;whiteSpace=wrap;html=1;fontStyle=1;strokeWidth=4;fillColor=#fff2cc;strokeColor=#d6b656;" parent="1" vertex="1">
-                    <mxGeometry x="510" y="400" width="310" height="320" as="geometry"/>
-                </mxCell>
-                <mxCell id="50" value="&lt;font style=&quot;font-size: 24px&quot; face=&quot;Roboto&quot;&gt;HTTPS certificates&lt;br&gt;&lt;/font&gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;strokeWidth=3;fontFamily=Roboto Mono, mono;FType=g;" parent="1" vertex="1">
-                    <mxGeometry x="550.9" y="410" width="228.21" height="40" as="geometry"/>
-                </mxCell>
-                <mxCell id="51" value="&lt;font face=&quot;Roboto&quot; data-font-src=&quot;https://fonts.googleapis.com/css?family=Roboto&quot;&gt;&lt;span style=&quot;font-size: 24px&quot;&gt;someapp.example.com&lt;/span&gt;&lt;br&gt;&lt;/font&gt;" style="rounded=0;whiteSpace=wrap;html=1;strokeColor=#000000;strokeWidth=3;" parent="1" vertex="1">
-                    <mxGeometry x="530" y="465" width="270" height="70" as="geometry"/>
-                </mxCell>
-                <mxCell id="52" value="&lt;font face=&quot;Roboto&quot; data-font-src=&quot;https://fonts.googleapis.com/css?family=Roboto&quot;&gt;&lt;span style=&quot;font-size: 24px&quot;&gt;another.example.net&lt;/span&gt;&lt;br&gt;&lt;/font&gt;" style="rounded=0;whiteSpace=wrap;html=1;strokeColor=#666666;strokeWidth=3;fillColor=#f5f5f5;fontColor=#333333;" parent="1" vertex="1">
-                    <mxGeometry x="530" y="545" width="270" height="70" as="geometry"/>
-                </mxCell>
-                <mxCell id="53" value="&lt;font face=&quot;Roboto&quot; data-font-src=&quot;https://fonts.googleapis.com/css?family=Roboto&quot;&gt;&lt;span style=&quot;font-size: 24px&quot;&gt;onemore.example.org&lt;/span&gt;&lt;br&gt;&lt;/font&gt;" style="rounded=0;whiteSpace=wrap;html=1;strokeColor=#666666;strokeWidth=3;fillColor=#f5f5f5;fontColor=#333333;" parent="1" vertex="1">
-                    <mxGeometry x="530" y="625" width="270" height="70" as="geometry"/>
-                </mxCell>
-                <mxCell id="42" value="&lt;font face=&quot;Roboto&quot; data-font-src=&quot;https://fonts.googleapis.com/css?family=Roboto&quot;&gt;&lt;span style=&quot;font-size: 24px&quot;&gt;IP:&lt;/span&gt;&lt;br&gt;&lt;span style=&quot;font-size: 24px&quot;&gt;123.124.125.126&lt;/span&gt;&lt;br&gt;&lt;/font&gt;" style="rounded=0;whiteSpace=wrap;html=1;strokeColor=#000000;strokeWidth=3;" parent="1" vertex="1">
-                    <mxGeometry x="290" y="600" width="220" height="70" as="geometry"/>
-                </mxCell>
-            </root>
-        </mxGraphModel>
-    </diagram>
-</mxfile>
--- a/docs/en/docs/img/deployment/https/https06.drawio.svg
+++ b/docs/en/docs/img/deployment/https/https06.drawio.svg
--- a/docs/en/docs/img/deployment/https/https06.svg
+++ b/docs/en/docs/img/deployment/https/https06.svg
--- a/docs/en/docs/img/deployment/https/https07.drawio
+++ b/docs/en/docs/img/deployment/https/https07.drawio
@ -1,203 +0,0 @@
-<mxfile host="65bd71144e">
-    <diagram id="jyERGzDynktFHFRGN0ph" name="Page-1">
-        <mxGraphModel dx="3321" dy="2867" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1920" pageHeight="1200" math="0" shadow="0">
-            <root>
-                <mxCell id="0"/>
-                <mxCell id="1" parent="0"/>
-                <mxCell id="2" value="" style="rounded=0;whiteSpace=wrap;html=1;fontStyle=1;strokeWidth=4;" parent="1" vertex="1">
-                    <mxGeometry x="450" y="-50" width="820" height="970" as="geometry"/>
-                </mxCell>
-                <mxCell id="3" value="&lt;font face=&quot;Roboto&quot;&gt;&lt;span style=&quot;font-size: 24px&quot;&gt;Server(s)&lt;/span&gt;&lt;/font&gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;strokeWidth=3;fontFamily=Roboto Mono, mono;FType=g;" parent="1" vertex="1">
-                    <mxGeometry x="710" y="-50" width="300" height="80" as="geometry"/>
-                </mxCell>
-                <mxCell id="8" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeWidth=3;exitX=0.092;exitY=1.01;exitDx=0;exitDy=0;dashed=1;exitPerimeter=0;" parent="1" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <Array as="points">
-                            <mxPoint x="800" y="521"/>
-                            <mxPoint x="800" y="560"/>
-                        </Array>
-                        <mxPoint x="803" y="521" as="sourcePoint"/>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="9" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeWidth=3;dashed=1;" parent="1" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <mxPoint x="800" y="520" as="sourcePoint"/>
-                        <Array as="points">
-                            <mxPoint x="800" y="680"/>
-                        </Array>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="33" value="" style="group" parent="1" vertex="1" connectable="0">
-                    <mxGeometry x="-140" y="-75" width="500" height="350" as="geometry"/>
-                </mxCell>
-                <mxCell id="29" value="&lt;font face=&quot;Roboto&quot; data-font-src=&quot;https://fonts.googleapis.com/css?family=Roboto&quot; style=&quot;font-size: 24px&quot;&gt;https://someapp.example.com&lt;/font&gt;" style="rounded=0;whiteSpace=wrap;html=1;fontStyle=1;strokeWidth=4;" parent="33" vertex="1">
-                    <mxGeometry x="60" y="27" width="380" height="250" as="geometry"/>
-                </mxCell>
-                <mxCell id="32" value="" style="pointerEvents=1;shadow=0;dashed=0;html=1;fillColor=#505050;labelPosition=center;verticalLabelPosition=bottom;verticalAlign=top;outlineConnect=0;align=center;shape=mxgraph.office.devices.laptop;strokeColor=none;" parent="33" vertex="1">
-                    <mxGeometry width="500" height="350" as="geometry"/>
-                </mxCell>
-                <mxCell id="90" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;dashed=1;startArrow=none;startFill=0;endArrow=classic;endFill=1;strokeWidth=3;" parent="1" source="101" target="32" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <mxPoint x="390" y="-190" as="sourcePoint"/>
-                        <Array as="points">
-                            <mxPoint x="390" y="-132"/>
-                            <mxPoint x="280" y="-132"/>
-                        </Array>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="34" value="&lt;font face=&quot;Roboto&quot; data-font-src=&quot;https://fonts.googleapis.com/css?family=Roboto&quot; style=&quot;font-size: 24px&quot;&gt;DNS Servers&lt;/font&gt;" style="ellipse;shape=cloud;whiteSpace=wrap;html=1;strokeColor=#000000;strokeWidth=3;" parent="1" vertex="1">
-                    <mxGeometry x="-60" y="-540" width="330" height="260" as="geometry"/>
-                </mxCell>
-                <mxCell id="6" value="" style="rounded=0;whiteSpace=wrap;html=1;fontStyle=1;strokeWidth=4;fillColor=#dae8fc;strokeColor=#6c8ebf;" parent="1" vertex="1">
-                    <mxGeometry x="495" y="320" width="355" height="440" as="geometry"/>
-                </mxCell>
-                <mxCell id="7" value="&lt;font style=&quot;font-size: 24px&quot; face=&quot;Roboto&quot;&gt;TLS Termination Proxy&lt;br&gt;&lt;/font&gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;strokeWidth=3;fontFamily=Roboto Mono, mono;FType=g;" parent="1" vertex="1">
-                    <mxGeometry x="525" y="330" width="280" height="40" as="geometry"/>
-                </mxCell>
-                <mxCell id="73" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;startArrow=none;startFill=0;endArrow=classic;endFill=1;strokeWidth=3;" parent="1" source="85" target="6" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <Array as="points"/>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="62" value="&lt;font face=&quot;Roboto&quot; data-font-src=&quot;https://fonts.googleapis.com/css?family=Roboto&quot; style=&quot;font-size: 24px&quot;&gt;FastAPI&lt;/font&gt;&lt;font face=&quot;Roboto&quot; data-font-src=&quot;https://fonts.googleapis.com/css?family=Roboto&quot; style=&quot;font-size: 24px ; font-weight: normal&quot;&gt; app for: someapp.example.com&lt;/font&gt;" style="rounded=0;whiteSpace=wrap;html=1;fontStyle=1;strokeWidth=4;fillColor=#dae8fc;strokeColor=#6c8ebf;" parent="1" vertex="1">
-                    <mxGeometry x="895" y="650" width="300" height="100" as="geometry"/>
-                </mxCell>
-                <mxCell id="85" value="&lt;span style=&quot;font-family: &amp;#34;roboto&amp;#34; ; font-size: 24px&quot;&gt;Plain response from: someapp.example.com&lt;/span&gt;" style="shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fixedSize=1;strokeColor=#9673a6;strokeWidth=3;fillColor=#e1d5e7;" parent="1" vertex="1">
-                    <mxGeometry x="890" y="500" width="310" height="80" as="geometry"/>
-                </mxCell>
-                <mxCell id="86" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;startArrow=none;startFill=0;endArrow=none;endFill=1;strokeWidth=3;" parent="1" source="62" target="85" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <mxPoint x="1030.0000000000005" y="649.9999999999995" as="sourcePoint"/>
-                        <mxPoint x="850" y="540.0000000000005" as="targetPoint"/>
-                        <Array as="points">
-                            <mxPoint x="1030" y="540"/>
-                        </Array>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="87" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;startArrow=none;startFill=0;endArrow=classic;endFill=1;strokeWidth=3;" parent="1" source="6" target="62" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <Array as="points">
-                            <mxPoint x="1240" y="390"/>
-                            <mxPoint x="1240" y="700"/>
-                        </Array>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="84" value="&lt;span style=&quot;font-family: &amp;#34;roboto&amp;#34; ; font-size: 24px&quot;&gt;Decrypted request for: someapp.example.com&lt;/span&gt;" style="shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fixedSize=1;strokeColor=#82b366;strokeWidth=3;fillColor=#d5e8d4;" parent="1" vertex="1">
-                    <mxGeometry x="890" y="350" width="310" height="80" as="geometry"/>
-                </mxCell>
-                <mxCell id="88" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;startArrow=none;startFill=0;endArrow=classic;endFill=1;strokeWidth=3;dashed=1;" parent="1" source="100" target="34" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <mxPoint x="65.05882352941171" y="-220" as="sourcePoint"/>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="89" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;startArrow=none;startFill=0;endArrow=none;endFill=1;strokeWidth=3;dashed=1;" parent="1" source="32" target="100" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <mxPoint x="110" y="-75" as="sourcePoint"/>
-                        <mxPoint x="-4.941176470588289" y="-139.99999999999955" as="targetPoint"/>
-                        <Array as="points">
-                            <mxPoint x="-5" y="-90"/>
-                            <mxPoint x="-5" y="-90"/>
-                        </Array>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="91" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;dashed=1;startArrow=none;startFill=0;endArrow=none;endFill=1;strokeWidth=3;" parent="1" source="34" target="101" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <mxPoint x="105" y="-280" as="sourcePoint"/>
-                        <mxPoint x="390" y="-260" as="targetPoint"/>
-                        <Array as="points">
-                            <mxPoint x="390" y="-430"/>
-                        </Array>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="109" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;dashed=1;startArrow=none;startFill=0;endArrow=classic;endFill=1;strokeWidth=3;" parent="1" source="97" target="32" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <Array as="points">
-                            <mxPoint x="340" y="480"/>
-                            <mxPoint x="340" y="480"/>
-                        </Array>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="36" value="&lt;font face=&quot;Roboto&quot; data-font-src=&quot;https://fonts.googleapis.com/css?family=Roboto&quot; style=&quot;font-size: 24px&quot;&gt;Port 443 (HTTPS)&lt;/font&gt;" style="ellipse;whiteSpace=wrap;html=1;strokeColor=#000000;strokeWidth=3;" parent="1" vertex="1">
-                    <mxGeometry x="330" y="680" width="170" height="120" as="geometry"/>
-                </mxCell>
-                <mxCell id="92" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;dashed=1;startArrow=none;startFill=0;endArrow=classic;endFill=1;strokeWidth=3;" parent="1" source="96" target="36" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <mxPoint x="50" y="500" as="sourcePoint"/>
-                        <Array as="points">
-                            <mxPoint x="50" y="740"/>
-                        </Array>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="93" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;dashed=1;startArrow=none;startFill=0;endArrow=none;endFill=1;strokeWidth=3;" parent="1" source="32" target="96" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <mxPoint x="300" y="350" as="sourcePoint"/>
-                        <mxPoint x="55" y="330" as="targetPoint"/>
-                        <Array as="points">
-                            <mxPoint x="160" y="340"/>
-                            <mxPoint x="160" y="340"/>
-                        </Array>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="96" value="&lt;span style=&quot;font-family: &amp;#34;roboto&amp;#34; ; font-size: 24px&quot;&gt;Encrypted request for: someapp.example.com&lt;/span&gt;" style="shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fixedSize=1;strokeColor=#82b366;strokeWidth=3;fillColor=#d5e8d4;" parent="1" vertex="1">
-                    <mxGeometry x="-10" y="400" width="310" height="80" as="geometry"/>
-                </mxCell>
-                <mxCell id="100" value="&lt;span style=&quot;font-family: &amp;#34;roboto&amp;#34; ; font-size: 24px&quot;&gt;Who is: someapp.example.com&lt;/span&gt;" style="shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fixedSize=1;strokeWidth=3;" parent="1" vertex="1">
-                    <mxGeometry x="-110" y="-210" width="310" height="80" as="geometry"/>
-                </mxCell>
-                <mxCell id="101" value="&lt;span style=&quot;font-family: &amp;#34;roboto&amp;#34; ; font-size: 24px&quot;&gt;IP:&lt;/span&gt;&lt;br style=&quot;font-family: &amp;#34;roboto&amp;#34;&quot;&gt;&lt;span style=&quot;font-family: &amp;#34;roboto&amp;#34; ; font-size: 24px&quot;&gt;123.124.125.126&lt;/span&gt;" style="shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fixedSize=1;strokeWidth=3;" parent="1" vertex="1">
-                    <mxGeometry x="270" y="-290" width="240" height="80" as="geometry"/>
-                </mxCell>
-                <mxCell id="106" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;dashed=1;startArrow=none;startFill=0;endArrow=none;endFill=0;strokeWidth=3;" parent="1" source="104" target="36" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <Array as="points">
-                            <mxPoint x="-40" y="770"/>
-                        </Array>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="104" value="&lt;span style=&quot;font-family: &amp;#34;roboto&amp;#34; ; font-size: 24px&quot;&gt;TLS Handshake&lt;/span&gt;" style="shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fixedSize=1;strokeWidth=3;" parent="1" vertex="1">
-                    <mxGeometry x="-110" y="300" width="230" height="80" as="geometry"/>
-                </mxCell>
-                <mxCell id="107" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;dashed=1;startArrow=none;startFill=0;endArrow=none;endFill=1;strokeWidth=3;" parent="1" source="32" target="104" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <mxPoint x="-40" y="275" as="sourcePoint"/>
-                        <mxPoint x="341.38784067832285" y="770" as="targetPoint"/>
-                        <Array as="points">
-                            <mxPoint x="-40" y="290"/>
-                            <mxPoint x="-40" y="290"/>
-                        </Array>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="97" value="&lt;span style=&quot;font-family: &amp;#34;roboto&amp;#34; ; font-size: 24px&quot;&gt;Encrypted response from: someapp.example.com&lt;/span&gt;" style="shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fixedSize=1;strokeColor=#9673a6;strokeWidth=3;fillColor=#e1d5e7;" parent="1" vertex="1">
-                    <mxGeometry x="90" y="500" width="310" height="80" as="geometry"/>
-                </mxCell>
-                <mxCell id="110" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;dashed=1;startArrow=none;startFill=0;endArrow=none;endFill=1;strokeWidth=3;" parent="1" source="36" target="97" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <mxPoint x="415" y="680" as="sourcePoint"/>
-                        <mxPoint x="110" y="275" as="targetPoint"/>
-                        <Array as="points">
-                            <mxPoint x="245" y="710"/>
-                        </Array>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="49" value="" style="rounded=0;whiteSpace=wrap;html=1;fontStyle=1;strokeWidth=4;fillColor=#fff2cc;strokeColor=#d6b656;" parent="1" vertex="1">
-                    <mxGeometry x="510" y="400" width="310" height="320" as="geometry"/>
-                </mxCell>
-                <mxCell id="50" value="&lt;font style=&quot;font-size: 24px&quot; face=&quot;Roboto&quot;&gt;HTTPS certificates&lt;br&gt;&lt;/font&gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;strokeWidth=3;fontFamily=Roboto Mono, mono;FType=g;" parent="1" vertex="1">
-                    <mxGeometry x="550.9" y="410" width="228.21" height="40" as="geometry"/>
-                </mxCell>
-                <mxCell id="51" value="&lt;font face=&quot;Roboto&quot; data-font-src=&quot;https://fonts.googleapis.com/css?family=Roboto&quot;&gt;&lt;span style=&quot;font-size: 24px&quot;&gt;someapp.example.com&lt;/span&gt;&lt;br&gt;&lt;/font&gt;" style="rounded=0;whiteSpace=wrap;html=1;strokeColor=#000000;strokeWidth=3;" parent="1" vertex="1">
-                    <mxGeometry x="530" y="465" width="270" height="70" as="geometry"/>
-                </mxCell>
-                <mxCell id="52" value="&lt;font face=&quot;Roboto&quot; data-font-src=&quot;https://fonts.googleapis.com/css?family=Roboto&quot;&gt;&lt;span style=&quot;font-size: 24px&quot;&gt;another.example.net&lt;/span&gt;&lt;br&gt;&lt;/font&gt;" style="rounded=0;whiteSpace=wrap;html=1;strokeColor=#666666;strokeWidth=3;fillColor=#f5f5f5;fontColor=#333333;" parent="1" vertex="1">
-                    <mxGeometry x="530" y="545" width="270" height="70" as="geometry"/>
-                </mxCell>
-                <mxCell id="53" value="&lt;font face=&quot;Roboto&quot; data-font-src=&quot;https://fonts.googleapis.com/css?family=Roboto&quot;&gt;&lt;span style=&quot;font-size: 24px&quot;&gt;onemore.example.org&lt;/span&gt;&lt;br&gt;&lt;/font&gt;" style="rounded=0;whiteSpace=wrap;html=1;strokeColor=#666666;strokeWidth=3;fillColor=#f5f5f5;fontColor=#333333;" parent="1" vertex="1">
-                    <mxGeometry x="530" y="625" width="270" height="70" as="geometry"/>
-                </mxCell>
-                <mxCell id="42" value="&lt;font face=&quot;Roboto&quot; data-font-src=&quot;https://fonts.googleapis.com/css?family=Roboto&quot;&gt;&lt;span style=&quot;font-size: 24px&quot;&gt;IP:&lt;/span&gt;&lt;br&gt;&lt;span style=&quot;font-size: 24px&quot;&gt;123.124.125.126&lt;/span&gt;&lt;br&gt;&lt;/font&gt;" style="rounded=0;whiteSpace=wrap;html=1;strokeColor=#000000;strokeWidth=3;" parent="1" vertex="1">
-                    <mxGeometry x="290" y="600" width="220" height="70" as="geometry"/>
-                </mxCell>
-            </root>
-        </mxGraphModel>
-    </diagram>
-</mxfile>
--- a/docs/en/docs/img/deployment/https/https07.drawio.svg
+++ b/docs/en/docs/img/deployment/https/https07.drawio.svg
@ -0,0 +1,540 @@
+<svg host="65bd71144e" xmlns="http://www.w3.org/2000/svg" style="background: transparent; background-color: transparent;" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1413px" height="1464px" viewBox="-0.5 -0.5 1413 1464" content="&lt;mxfile&gt;&lt;diagram id=&quot;jyERGzDynktFHFRGN0ph&quot; name=&quot;Page-1&quot;&gt;7VxZk6M2EP41rto82AWI83HO3a3apFyZqdrkUQOyTRYjFuQZO78+EggMQvgUPjb21MyYppFE96fuVrdgAB7my88pTGa/4wBFA0MLlgPwODAMy9YA/ccoq4ICLNcrKNM0DAqavia8hP8iTtQ4dREGKGswEowjEiZNoo/jGPmkQYNpij+abBMcNXtN4BS1CC8+jNrU72FAZpzqGdr6xBcUTmdl14bGz8xhyc0J2QwG+KNGAk8D8JBiTIpv8+UDipj4SsEU1z13nK1GlqKY7HIBMIor3mG04HfHB0ZW5e0mOIwJSp/eaZtMcvoA3Ffj1uhBALMZCvjBjMwjzjQJo+gBRzjN2wGWxn4oPYJvKBrjLCQhjuk5H7H26Yl3lJKQyvmbwPCGCcHzGsNdFE7ZCYITSsULEoUxeqjUzTqBnKVqnA45YXc0X04ZLkd4Mgl9NArQO/2XjSKYFK1lJMU/UDnuGMf0ovu2XLmo2YjQskbicv6M8ByRdEVZ+NmhbnKlc9wPHas4/liDyCqRMqvhh0qOg5cDd1o1vlYt/cK1K9f0DopO8SIOKkV+zEKCXhLos7MfVGSCcnFMXvi1eiW2cj6YamRmWoLIyuOayFxDIjLPUSAyIBGZHRF2swmMG7Kzfy7YlM2lMsxyi3VHGQwzWeaSKM/Tb1P+Pyr5mQkqpLzm+xNTzOOB8cB6gXE2zFAaTtrtvKCUSvNT9lvZIL2nos1mP5RcjLkkC6qn+iBN/UqnQX1Gc1JrnolzdB4GAetGCqgm5JoYAlw+z3AeRgwApVC033HMZTNn38D98+sqn9tTNbBz9O2wA7KZ6ipAndtSDgqo++GHOCUzPMUxjJ7WVEGMa55vmJm0XJ//IEJW3JfCBcEybdclj5Yh+Ys1ONI8gx//zbhHms4PH5e8w/xgJXqDkm1MoUulwMCRM3QqiN3nRvWkKIIkfG+6YZms80vv0hSuagy5H8tqLY8ZYa11V2tq3eI9PO/Kb2uCnosRdF0NpL1Vw83wIvURv0qATyWTnRDlXQaiGsA4FQh20LK2k9yPRZPtbkDHIUrVzqHVhg4zAlNyxwLqtTvIac8hG3ZhGuKg5PAjmGWhXxA5ixwpneAodMNJWhn7w3SKylDJOA2KgCd4CN3rB0btjvgtdlmlygd1XHA08IDZGRYdHs3sGEq14p/HP17ouSIKyjpjIHGeRBFdKqLamsCP8CLYHvM2Y6IBiwHYZz8M77FisMUwxJTEIUAShxi2gkDElui53xWDsGAMIHInvkzutu+it4miNYZnNaQMDImQLastZNNUIGRn22Q6cGKoWmC8fmMT7BWl8zCG+XLc0MYpXq62LDjeUskSZOOsvC1B6qi0DAGVoI3KytQ3UKkClOA8EeM5wwnXakcTdi/BRHcIcESMb8vyO2pMgNBOAAkcFjYo9RsNzghhGdg7dh/FZM9GU4ynEYJJmI18PKdkP6MszxNxQu0dCsiyKs8wI3fjr1tM0+Xdh5af+OCzmJ2KcTqHUUfqSINJkl+UFswZBQoljdASzpMIFQPclg7aaIt/Bb/uCn7d3jWJo2sqsjhW53y8mOThOIJhnJuvLMExDYhpWynLsx8Mqo05xjLYntEmpyyvf5/UMkOcWiWLjB2AFy5RWR6Shuee7QBoy716E5JIDyzkqAKekGHQJMDT+8oe7hC1X54v5xxKHHnpCeuOvJyNfacFdA1oI632EUyQ6Y282sdqtt+RMminloSqCF0Wyjotmy0EcXQmgt2b2K2AzOMSC65zBUhVHHXakqCznxTW3uo2hHJlmYnqQmXrAkdTjI/uxNPFuNRH5KerhFBAMv38XKCMHB2pXZhTdY03YO/kVKlLdQNFlWDRqQJZNNebUz1TTa4ny7RbIaaZa9fahqpMBPftVG1rpFmuS1VueKauO3oDCENjxwLOIRbH+4WDqf1RUBZX6iCokNF7aCXW5J0Do6ehOcphZJtODqtSyet6iRCk9RNODZuh4XCLd93Mfnw1sTTI50X6MeVFlWuI0rQ1kX6iCrUurBqGLR+2K9RbxcNWXUgRmFsdmUAtPnXtLJsYLqjc7TkSD3wZSwUgBP6mu9mWbeE/vkIty4Gcq0I9prCjJ00T0L+fvry+jl+6N+uJCK8K1ZdVmAZCJqDc21IPxnVHEozrYqx2SDTuXZ1rUm0KJFkD0E+tqjV3xdSTmCtXtO1F6MZRnGryZFt7rwtTSsMdSWDvnQhQQOtY2O8b7FgdBXPVaVBhUw4wNzu7LfzHQ7nb2V1MVuwpvmXFesmKDYVFsXnKUlO19L9k6H2fsd06YXblSFO9s7CVTakerjsNcmTpBrW7VY5G4NdxztABg/UuN0kXPY5KN8BIN0z6a9Ffe8v4ti0wrhO9hiOC12uDt6pGqQevffWx4p4rw2YpQJIb62n1sXdOVaxAOqqzUFdQgix27H6BcUBn9w9082+NVUbdQsh2zquxELJd3VduMhQvL6up1Pf6UrQJxqF1I2DqI+A6rqnZjgvWe4oEW6O8TiSOf1uhaDP/8evN7icWLsYENtebt82NCjc3nnNvY2XUb3a1EXU10nbOacyqqQtbGw+tUYqeumWfFdlRwxTsta7WLpo77BXpd1v9ZDIxfOm2+sB+sy1bjQGwDk05ARW1H0tmAS7pebm8wEd5fPYI2iT0IUHdz6XeHpVTgkhLGzX38JiSZBZ1QaOybdXPy1lb01l9P2ykOMukajYoiLMOnSN72doT188toX5u2u03QRmy+rmKtxpZxg2sUrDCGJMZSiuwxohcB1jt/LPLSmBisR8uqxq9+PQDbss8Jbi739n1/wY3df9znKIK3Did3sB9PLht44TgNi/Mcl9dqe6yanG/YmQj5odsWd5d9sJGFfPDkC3Bz7Xvsznh9gmE+00aKFDyUHzFlOm2UwCyd5MYB7zIlB6uX4db5GXWrxUGT/8B&lt;/diagram&gt;&lt;/mxfile&gt;">
+    <defs/>
+    <g>
+        <g>
+            <rect x="0" y="466" width="500" height="350" fill="none" stroke="none" pointer-events="all"/>
+            <path d="M 289.06 793.99 C 293.87 793.99 297.23 791.75 296.28 790.03 L 286.73 773.39 C 285.53 770.86 283.81 770.35 280.97 770.35 L 219.03 770.35 C 216.02 770.35 214.47 770.96 213.01 773.49 L 204.15 789.93 C 202.43 792.57 207.59 793.99 211.29 793.99 Z M 433.76 739.91 L 433.76 496.43 L 65.98 496.43 L 65.98 739.91 Z M 25.89 816 C 16.09 815.9 7.31 812.04 3.61 806.06 C 0 800.17 1.46 794.29 4.56 790.23 L 40.18 747.52 L 40.18 495.12 C 40.18 482.43 49.81 466 65.81 466 L 433.84 466 C 446.32 466 459.57 477.77 459.57 496.74 L 459.57 747.52 L 495.53 790.64 C 498.54 794.7 500 800.07 496.39 805.86 C 491.66 813.16 482.71 815.49 474.28 816 Z" fill="#505050" stroke="none" pointer-events="all" style="fill: light-dark(rgb(80, 80, 80), rgb(168, 168, 168));"/>
+        </g>
+        <g>
+            <rect x="590" y="491" width="820" height="970" fill="#ffffff" stroke="#000000" stroke-width="4" pointer-events="all" style="fill: light-dark(#ffffff, var(--ge-dark-color, #121212)); stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+        </g>
+        <g>
+            <rect x="850" y="491" width="300" height="80" fill="none" stroke="none" pointer-events="all"/>
+        </g>
+        <g>
+            <g transform="translate(-0.5 -0.5)">
+                <switch>
+                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                        <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 298px; height: 1px; padding-top: 531px; margin-left: 851px;">
+                            <div style="box-sizing: border-box; font-size: 0; text-align: center; color: #000000; ">
+                                <div style="display: inline-block; font-size: 12px; font-family: &quot;Roboto Mono&quot;, &quot;mono&quot;; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
+                                    <span style="font-size: 24px;">
+                                        <font face="Roboto, sans-serif">
+                                            Server(s)
+                                        </font>
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
+                    </foreignObject>
+                    <text x="1000" y="535" fill="light-dark(#000000, #ffffff)" font-family="&quot;Roboto Mono&quot;, &quot;mono&quot;" font-size="12px" text-anchor="middle">
+                        Server(s)
+                    </text>
+                </switch>
+            </g>
+        </g>
+        <g>
+            <path d="M 529.86 331 L 529.86 408.86 L 419.86 408.86 L 419.86 455.9" fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" stroke-dasharray="9 9" pointer-events="stroke" style="stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+            <path d="M 419.86 462.65 L 415.36 453.65 L 419.86 455.9 L 424.36 453.65 Z" fill="#000000" stroke="#000000" stroke-width="3" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(rgb(0, 0, 0), rgb(255, 255, 255)); stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+        </g>
+        <g>
+            <path d="M 162.5 66 C 96.5 66 80 131 132.8 144 C 80 172.6 139.4 235 182.3 209 C 212 261 311 261 344 209 C 410 209 410 157 368.75 131 C 410 79 344 27 286.25 53 C 245 14 179 14 162.5 66 Z" fill="#ffffff" stroke="#000000" stroke-width="3" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(#ffffff, var(--ge-dark-color, #121212)); stroke: light-dark(rgb(0, 0, 0), rgb(237, 237, 237));"/>
+        </g>
+        <g>
+            <g transform="translate(-0.5 -0.5)">
+                <switch>
+                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                        <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 328px; height: 1px; padding-top: 131px; margin-left: 81px;">
+                            <div style="box-sizing: border-box; font-size: 0; text-align: center; color: #000000; ">
+                                <div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
+                                    <font style="font-size: 24px" face="Roboto, sans-serif">
+                                        DNS Servers
+                                    </font>
+                                </div>
+                            </div>
+                        </div>
+                    </foreignObject>
+                    <text x="245" y="135" fill="light-dark(#000000, #ffffff)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle">
+                        DNS Servers
+                    </text>
+                </switch>
+            </g>
+        </g>
+        <g>
+            <rect x="635" y="861" width="355" height="440" fill="#dae8fc" stroke="#6c8ebf" stroke-width="4" pointer-events="all" style="fill: light-dark(rgb(218, 232, 252), rgb(29, 41, 59)); stroke: light-dark(rgb(108, 142, 191), rgb(92, 121, 163));"/>
+        </g>
+        <g>
+            <rect x="665" y="871" width="280" height="40" fill="none" stroke="none" pointer-events="all"/>
+        </g>
+        <g>
+            <g transform="translate(-0.5 -0.5)">
+                <switch>
+                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                        <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 278px; height: 1px; padding-top: 891px; margin-left: 666px;">
+                            <div style="box-sizing: border-box; font-size: 0; text-align: center; color: #000000; ">
+                                <div style="display: inline-block; font-size: 12px; font-family: &quot;Roboto Mono&quot;, &quot;mono&quot;; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
+                                    <font style="font-size: 24px">
+                                        <font face="Roboto, sans-serif">
+                                            TLS Termination Proxy
+                                        </font>
+                                        <br/>
+                                    </font>
+                                </div>
+                            </div>
+                        </div>
+                    </foreignObject>
+                    <text x="805" y="895" fill="light-dark(#000000, #ffffff)" font-family="&quot;Roboto Mono&quot;, &quot;mono&quot;" font-size="12px" text-anchor="middle">
+                        TLS Termination Proxy
+                    </text>
+                </switch>
+            </g>
+        </g>
+        <g>
+            <path d="M 1030 1081 L 1000.1 1081" fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke" style="stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+            <path d="M 993.35 1081 L 1002.35 1076.5 L 1000.1 1081 L 1002.35 1085.5 Z" fill="#000000" stroke="#000000" stroke-width="3" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(rgb(0, 0, 0), rgb(255, 255, 255)); stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+        </g>
+        <g>
+            <rect x="1035" y="1191" width="300" height="100" fill="#dae8fc" stroke="#6c8ebf" stroke-width="4" pointer-events="all" style="fill: light-dark(rgb(218, 232, 252), rgb(29, 41, 59)); stroke: light-dark(rgb(108, 142, 191), rgb(92, 121, 163));"/>
+        </g>
+        <g>
+            <g transform="translate(-0.5 -0.5)">
+                <switch>
+                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                        <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 298px; height: 1px; padding-top: 1241px; margin-left: 1036px;">
+                            <div style="box-sizing: border-box; font-size: 0; text-align: center; color: #000000; ">
+                                <div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; font-weight: bold; white-space: normal; word-wrap: normal; ">
+                                    <font face="Roboto, sans-serif">
+                                        <font style="font-size: 24px;" data-font-src="https://fonts.googleapis.com/css?family=Roboto">
+                                            FastAPI
+                                        </font>
+                                        <font style="font-size: 24px; font-weight: normal;" data-font-src="https://fonts.googleapis.com/css?family=Roboto">
+                                            app for: someapp.example.com
+                                        </font>
+                                    </font>
+                                </div>
+                            </div>
+                        </div>
+                    </foreignObject>
+                    <text x="1185" y="1245" fill="light-dark(#000000, #ffffff)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle" font-weight="bold">
+                        FastAPI app for: someapp.example.com
+                    </text>
+                </switch>
+            </g>
+        </g>
+        <g>
+            <path d="M 1050 1041 L 1320 1041 L 1340 1081 L 1320 1121 L 1050 1121 L 1030 1081 Z" fill="#e1d5e7" stroke="#9673a6" stroke-width="3" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(rgb(225, 213, 231), rgb(57, 47, 63)); stroke: light-dark(rgb(150, 115, 166), rgb(149, 119, 163));"/>
+        </g>
+        <g>
+            <g transform="translate(-0.5 -0.5)">
+                <switch>
+                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                        <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 308px; height: 1px; padding-top: 1081px; margin-left: 1031px;">
+                            <div style="box-sizing: border-box; font-size: 0; text-align: center; color: #000000; ">
+                                <div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
+                                    <span style="font-size: 24px;">
+                                        <font face="Roboto, sans-serif">
+                                            Plain response from: someapp.example.com
+                                        </font>
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
+                    </foreignObject>
+                    <text x="1185" y="1085" fill="light-dark(#000000, #ffffff)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle">
+                        Plain response from: someapp.example.com
+                    </text>
+                </switch>
+            </g>
+        </g>
+        <g>
+            <path d="M 1185 1191 L 1185 1121" fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke" style="stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+        </g>
+        <g>
+            <path d="M 990 930.86 L 1379.86 930.86 L 1379.86 1240.86 L 1345.1 1240.86" fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke" style="stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+            <path d="M 1338.35 1240.86 L 1347.35 1236.36 L 1345.1 1240.86 L 1347.35 1245.36 Z" fill="#000000" stroke="#000000" stroke-width="3" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(rgb(0, 0, 0), rgb(255, 255, 255)); stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+        </g>
+        <g>
+            <path d="M 1050 891 L 1320 891 L 1340 931 L 1320 971 L 1050 971 L 1030 931 Z" fill="#d5e8d4" stroke="#82b366" stroke-width="3" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(rgb(213, 232, 212), rgb(31, 47, 30)); stroke: light-dark(rgb(130, 179, 102), rgb(68, 110, 44));"/>
+        </g>
+        <g>
+            <g transform="translate(-0.5 -0.5)">
+                <switch>
+                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                        <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 308px; height: 1px; padding-top: 931px; margin-left: 1031px;">
+                            <div style="box-sizing: border-box; font-size: 0; text-align: center; color: #000000; ">
+                                <div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
+                                    <span style="font-size: 24px;">
+                                        <font face="Roboto, sans-serif">
+                                            Decrypted request for: someapp.example.com
+                                        </font>
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
+                    </foreignObject>
+                    <text x="1185" y="935" fill="light-dark(#000000, #ffffff)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle">
+                        Decrypted request for: someapp.example.com
+                    </text>
+                </switch>
+            </g>
+        </g>
+        <g>
+            <path d="M 185 331 L 185 296 L 245 296 L 245 271.1" fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" stroke-dasharray="9 9" pointer-events="stroke" style="stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+            <path d="M 245 264.35 L 249.5 273.35 L 245 271.1 L 240.5 273.35 Z" fill="#000000" stroke="#000000" stroke-width="3" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(rgb(0, 0, 0), rgb(255, 255, 255)); stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+        </g>
+        <g>
+            <path d="M 135 466 L 135 450.86 L 135 411" fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" stroke-dasharray="9 9" pointer-events="stroke" style="stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+        </g>
+        <g>
+            <path d="M 408.01 110.86 L 529.86 110.86 L 529.86 251" fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" stroke-dasharray="9 9" pointer-events="stroke" style="stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+        </g>
+        <g>
+            <path d="M 479.86 1041 L 479.86 1020.86 L 479.86 826.1" fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" stroke-dasharray="9 9" pointer-events="stroke" style="stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+            <path d="M 479.86 819.35 L 484.36 828.35 L 479.86 826.1 L 475.36 828.35 Z" fill="#000000" stroke="#000000" stroke-width="3" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(rgb(0, 0, 0), rgb(255, 255, 255)); stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+        </g>
+        <g>
+            <ellipse cx="555" cy="1281" rx="85" ry="60.00000000000001" fill="#ffffff" stroke="#000000" stroke-width="3" pointer-events="all" style="fill: light-dark(#ffffff, var(--ge-dark-color, #121212)); stroke: light-dark(rgb(0, 0, 0), rgb(237, 237, 237));"/>
+        </g>
+        <g>
+            <g transform="translate(-0.5 -0.5)">
+                <switch>
+                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                        <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 168px; height: 1px; padding-top: 1281px; margin-left: 471px;">
+                            <div style="box-sizing: border-box; font-size: 0; text-align: center; color: #000000; ">
+                                <div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
+                                    <font style="font-size: 24px" face="Roboto, sans-serif">
+                                        Port 443 (HTTPS)
+                                    </font>
+                                </div>
+                            </div>
+                        </div>
+                    </foreignObject>
+                    <text x="555" y="1285" fill="light-dark(#000000, #ffffff)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle">
+                        Port 443 (HTTPS)
+                    </text>
+                </switch>
+            </g>
+        </g>
+        <g>
+            <path d="M 190.14 1021 L 190.14 1280.86 L 459.9 1280.86" fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" stroke-dasharray="9 9" pointer-events="stroke" style="stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+            <path d="M 466.65 1280.86 L 457.65 1285.36 L 459.9 1280.86 L 457.65 1276.36 Z" fill="#000000" stroke="#000000" stroke-width="3" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(rgb(0, 0, 0), rgb(255, 255, 255)); stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+        </g>
+        <g>
+            <path d="M 300.14 816 L 300.14 880.86 L 300.14 941" fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" stroke-dasharray="9 9" pointer-events="stroke" style="stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+        </g>
+        <g>
+            <path d="M 150 941 L 420 941 L 440 981 L 420 1021 L 150 1021 L 130 981 Z" fill="#d5e8d4" stroke="#82b366" stroke-width="3" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(rgb(213, 232, 212), rgb(31, 47, 30)); stroke: light-dark(rgb(130, 179, 102), rgb(68, 110, 44));"/>
+        </g>
+        <g>
+            <g transform="translate(-0.5 -0.5)">
+                <switch>
+                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                        <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 308px; height: 1px; padding-top: 981px; margin-left: 131px;">
+                            <div style="box-sizing: border-box; font-size: 0; text-align: center; color: #000000; ">
+                                <div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
+                                    <span style="font-size: 24px;">
+                                        <font face="Roboto, sans-serif">
+                                            Encrypted request for: someapp.example.com
+                                        </font>
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
+                    </foreignObject>
+                    <text x="285" y="985" fill="light-dark(#000000, #ffffff)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle">
+                        Encrypted request for: someapp.example.com
+                    </text>
+                </switch>
+            </g>
+        </g>
+        <g>
+            <path d="M 50 331 L 320 331 L 340 371 L 320 411 L 50 411 L 30 371 Z" fill="#ffffff" stroke="#000000" stroke-width="3" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(#ffffff, var(--ge-dark-color, #121212)); stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+        </g>
+        <g>
+            <g transform="translate(-0.5 -0.5)">
+                <switch>
+                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                        <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 308px; height: 1px; padding-top: 371px; margin-left: 31px;">
+                            <div style="box-sizing: border-box; font-size: 0; text-align: center; color: #000000; ">
+                                <div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
+                                    <span style="font-size: 24px;">
+                                        <font face="Roboto, sans-serif">
+                                            Who is: someapp.example.com
+                                        </font>
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
+                    </foreignObject>
+                    <text x="185" y="375" fill="light-dark(#000000, #ffffff)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle">
+                        Who is: someapp.example.com
+                    </text>
+                </switch>
+            </g>
+        </g>
+        <g>
+            <path d="M 430 251 L 630 251 L 650 291 L 630 331 L 430 331 L 410 291 Z" fill="#ffffff" stroke="#000000" stroke-width="3" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(#ffffff, var(--ge-dark-color, #121212)); stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+        </g>
+        <g>
+            <g transform="translate(-0.5 -0.5)">
+                <switch>
+                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                        <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 238px; height: 1px; padding-top: 291px; margin-left: 411px;">
+                            <div style="box-sizing: border-box; font-size: 0; text-align: center; color: #000000; ">
+                                <div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
+                                    <font face="Roboto, sans-serif">
+                                        <span style="font-size: 24px;">
+                                            IP:
+                                        </span>
+                                        <br style=""/>
+                                        <span style="font-size: 24px;">
+                                            123.124.125.126
+                                        </span>
+                                    </font>
+                                </div>
+                            </div>
+                        </div>
+                    </foreignObject>
+                    <text x="530" y="295" fill="light-dark(#000000, #ffffff)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle">
+                        IP:...
+                    </text>
+                </switch>
+            </g>
+        </g>
+        <g>
+            <path d="M 100.14 921 L 100.14 1310.86 L 481.27 1310.86" fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" stroke-dasharray="9 9" pointer-events="stroke" style="stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+        </g>
+        <g>
+            <path d="M 50 841 L 240 841 L 260 881 L 240 921 L 50 921 L 30 881 Z" fill="#ffffff" stroke="#000000" stroke-width="3" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(#ffffff, var(--ge-dark-color, #121212)); stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+        </g>
+        <g>
+            <g transform="translate(-0.5 -0.5)">
+                <switch>
+                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                        <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 228px; height: 1px; padding-top: 881px; margin-left: 31px;">
+                            <div style="box-sizing: border-box; font-size: 0; text-align: center; color: #000000; ">
+                                <div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
+                                    <span style="font-size: 24px;">
+                                        <font face="Roboto, sans-serif">
+                                            TLS Handshake
+                                        </font>
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
+                    </foreignObject>
+                    <text x="145" y="885" fill="light-dark(#000000, #ffffff)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle">
+                        TLS Handshake
+                    </text>
+                </switch>
+            </g>
+        </g>
+        <g>
+            <path d="M 100.14 816 L 100.14 830.86 L 100.14 841" fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" stroke-dasharray="9 9" pointer-events="stroke" style="stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+        </g>
+        <g>
+            <path d="M 250 1041 L 520 1041 L 540 1081 L 520 1121 L 250 1121 L 230 1081 Z" fill="#e1d5e7" stroke="#9673a6" stroke-width="3" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(rgb(225, 213, 231), rgb(57, 47, 63)); stroke: light-dark(rgb(150, 115, 166), rgb(149, 119, 163));"/>
+        </g>
+        <g>
+            <g transform="translate(-0.5 -0.5)">
+                <switch>
+                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                        <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 308px; height: 1px; padding-top: 1081px; margin-left: 231px;">
+                            <div style="box-sizing: border-box; font-size: 0; text-align: center; color: #000000; ">
+                                <div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
+                                    <span style="font-size: 24px;">
+                                        <font face="Roboto, sans-serif">
+                                            Encrypted response from: someapp.example.com
+                                        </font>
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
+                    </foreignObject>
+                    <text x="385" y="1085" fill="light-dark(#000000, #ffffff)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle">
+                        Encrypted response from: someapp.example.com
+                    </text>
+                </switch>
+            </g>
+        </g>
+        <g>
+            <path d="M 481.51 1250.86 L 385 1250.86 L 385 1121" fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" stroke-dasharray="9 9" pointer-events="stroke" style="stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+        </g>
+        <g>
+            <rect x="650" y="941" width="310" height="320" fill="#fff2cc" stroke="#d6b656" stroke-width="4" pointer-events="all" style="fill: light-dark(rgb(255, 242, 204), rgb(40, 29, 0)); stroke: light-dark(rgb(214, 182, 86), rgb(109, 81, 0));"/>
+        </g>
+        <g>
+            <rect x="690.9" y="951" width="228.21" height="40" fill="none" stroke="none" pointer-events="all"/>
+        </g>
+        <g>
+            <g transform="translate(-0.5 -0.5)">
+                <switch>
+                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                        <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 226px; height: 1px; padding-top: 971px; margin-left: 692px;">
+                            <div style="box-sizing: border-box; font-size: 0; text-align: center; color: #000000; ">
+                                <div style="display: inline-block; font-size: 12px; font-family: &quot;Roboto Mono&quot;, &quot;mono&quot;; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
+                                    <font style="font-size: 24px">
+                                        <font face="Roboto, sans-serif">
+                                            HTTPS certificates
+                                        </font>
+                                        <br/>
+                                    </font>
+                                </div>
+                            </div>
+                        </div>
+                    </foreignObject>
+                    <text x="805" y="975" fill="light-dark(#000000, #ffffff)" font-family="&quot;Roboto Mono&quot;, &quot;mono&quot;" font-size="12px" text-anchor="middle">
+                        HTTPS certificates
+                    </text>
+                </switch>
+            </g>
+        </g>
+        <g>
+            <rect x="670" y="1006" width="270" height="70" fill="#ffffff" stroke="#000000" stroke-width="3" pointer-events="all" style="fill: light-dark(#ffffff, var(--ge-dark-color, #121212)); stroke: light-dark(rgb(0, 0, 0), rgb(237, 237, 237));"/>
+        </g>
+        <g>
+            <g transform="translate(-0.5 -0.5)">
+                <switch>
+                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                        <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 268px; height: 1px; padding-top: 1041px; margin-left: 671px;">
+                            <div style="box-sizing: border-box; font-size: 0; text-align: center; color: #000000; ">
+                                <div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
+                                    <font data-font-src="https://fonts.googleapis.com/css?family=Roboto">
+                                        <span style="font-size: 24px;">
+                                            <font face="Roboto, sans-serif">
+                                                someapp.example.com
+                                            </font>
+                                        </span>
+                                        <br/>
+                                    </font>
+                                </div>
+                            </div>
+                        </div>
+                    </foreignObject>
+                    <text x="805" y="1045" fill="light-dark(#000000, #ffffff)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle">
+                        someapp.example.com
+                    </text>
+                </switch>
+            </g>
+        </g>
+        <g>
+            <rect x="670" y="1086" width="270" height="70" fill="#f5f5f5" stroke="#666666" stroke-width="3" pointer-events="all" style="fill: light-dark(rgb(245, 245, 245), rgb(26, 26, 26)); stroke: light-dark(rgb(102, 102, 102), rgb(149, 149, 149));"/>
+        </g>
+        <g>
+            <g transform="translate(-0.5 -0.5)">
+                <switch>
+                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                        <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 268px; height: 1px; padding-top: 1121px; margin-left: 671px;">
+                            <div style="box-sizing: border-box; font-size: 0; text-align: center; color: #333333; ">
+                                <div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: light-dark(#333333, #c1c1c1); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
+                                    <font data-font-src="https://fonts.googleapis.com/css?family=Roboto">
+                                        <span style="font-size: 24px;">
+                                            <font face="Roboto, sans-serif">
+                                                another.example.net
+                                            </font>
+                                        </span>
+                                        <br/>
+                                    </font>
+                                </div>
+                            </div>
+                        </div>
+                    </foreignObject>
+                    <text x="805" y="1125" fill="#333333" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle">
+                        another.example.net
+                    </text>
+                </switch>
+            </g>
+        </g>
+        <g>
+            <rect x="670" y="1166" width="270" height="70" fill="#f5f5f5" stroke="#666666" stroke-width="3" pointer-events="all" style="fill: light-dark(rgb(245, 245, 245), rgb(26, 26, 26)); stroke: light-dark(rgb(102, 102, 102), rgb(149, 149, 149));"/>
+        </g>
+        <g>
+            <g transform="translate(-0.5 -0.5)">
+                <switch>
+                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                        <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 268px; height: 1px; padding-top: 1201px; margin-left: 671px;">
+                            <div style="box-sizing: border-box; font-size: 0; text-align: center; color: #333333; ">
+                                <div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: light-dark(#333333, #c1c1c1); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
+                                    <font data-font-src="https://fonts.googleapis.com/css?family=Roboto">
+                                        <span style="font-size: 24px;">
+                                            <font face="Roboto, sans-serif">
+                                                onemore.example.org
+                                            </font>
+                                        </span>
+                                        <br/>
+                                    </font>
+                                </div>
+                            </div>
+                        </div>
+                    </foreignObject>
+                    <text x="805" y="1205" fill="#333333" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle">
+                        onemore.example.org
+                    </text>
+                </switch>
+            </g>
+        </g>
+        <g>
+            <rect x="430" y="1141" width="220" height="70" fill="#ffffff" stroke="#000000" stroke-width="3" pointer-events="all" style="fill: light-dark(#ffffff, var(--ge-dark-color, #121212)); stroke: light-dark(rgb(0, 0, 0), rgb(237, 237, 237));"/>
+        </g>
+        <g>
+            <g transform="translate(-0.5 -0.5)">
+                <switch>
+                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                        <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 218px; height: 1px; padding-top: 1176px; margin-left: 431px;">
+                            <div style="box-sizing: border-box; font-size: 0; text-align: center; color: #000000; ">
+                                <div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
+                                    <font data-font-src="https://fonts.googleapis.com/css?family=Roboto">
+                                        <font face="Roboto, sans-serif">
+                                            <span style="font-size: 24px;">
+                                                IP:
+                                            </span>
+                                            <br/>
+                                            <span style="font-size: 24px;">
+                                                123.124.125.126
+                                            </span>
+                                        </font>
+                                        <br/>
+                                    </font>
+                                </div>
+                            </div>
+                        </div>
+                    </foreignObject>
+                    <text x="540" y="1180" fill="light-dark(#000000, #ffffff)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle">
+                        IP:...
+                    </text>
+                </switch>
+            </g>
+        </g>
+        <g>
+            <rect x="60" y="493" width="380" height="250" fill="#ffffff" stroke="#000000" stroke-width="4" pointer-events="all" style="fill: light-dark(#ffffff, var(--ge-dark-color, #121212)); stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+        </g>
+        <g>
+            <g transform="translate(-0.5 -0.5)">
+                <switch>
+                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                        <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 378px; height: 1px; padding-top: 618px; margin-left: 61px;">
+                            <div style="box-sizing: border-box; font-size: 0; text-align: center; color: #000000; ">
+                                <div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; font-weight: bold; white-space: normal; word-wrap: normal; ">
+                                    <font style="font-size: 24px" face="Roboto, sans-serif">
+                                        https://someapp.example.com
+                                    </font>
+                                </div>
+                            </div>
+                        </div>
+                    </foreignObject>
+                    <text x="250" y="622" fill="light-dark(#000000, #ffffff)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle" font-weight="bold">
+                        https://someapp.example.com
+                    </text>
+                </switch>
+            </g>
+        </g>
+    </g>
+    <switch>
+        <g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/>
+        <a transform="translate(0,-5)" xlink:href="https://www.drawio.com/doc/faq/svg-export-text-problems" target="_blank">
+            <text text-anchor="middle" font-size="10px" x="50%" y="100%">
+                Text is not SVG - cannot display
+            </text>
+        </a>
+    </switch>
+</svg>
--- a/docs/en/docs/img/deployment/https/https07.svg
+++ b/docs/en/docs/img/deployment/https/https07.svg
--- a/docs/en/docs/img/deployment/https/https08.drawio
+++ b/docs/en/docs/img/deployment/https/https08.drawio
@ -1,217 +0,0 @@
-<mxfile host="65bd71144e">
-    <diagram id="jyERGzDynktFHFRGN0ph" name="Page-1">
-        <mxGraphModel dx="3321" dy="2867" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1920" pageHeight="1200" math="0" shadow="0">
-            <root>
-                <mxCell id="0"/>
-                <mxCell id="1" parent="0"/>
-                <mxCell id="2" value="" style="rounded=0;whiteSpace=wrap;html=1;fontStyle=1;strokeWidth=4;" parent="1" vertex="1">
-                    <mxGeometry x="450" y="-50" width="820" height="970" as="geometry"/>
-                </mxCell>
-                <mxCell id="3" value="&lt;font face=&quot;Roboto&quot;&gt;&lt;span style=&quot;font-size: 24px&quot;&gt;Server(s)&lt;/span&gt;&lt;/font&gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;strokeWidth=3;fontFamily=Roboto Mono, mono;FType=g;" parent="1" vertex="1">
-                    <mxGeometry x="710" y="-50" width="300" height="80" as="geometry"/>
-                </mxCell>
-                <mxCell id="8" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeWidth=3;exitX=0.092;exitY=1.01;exitDx=0;exitDy=0;dashed=1;exitPerimeter=0;" parent="1" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <Array as="points">
-                            <mxPoint x="800" y="521"/>
-                            <mxPoint x="800" y="560"/>
-                        </Array>
-                        <mxPoint x="803" y="521" as="sourcePoint"/>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="9" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeWidth=3;dashed=1;" parent="1" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <mxPoint x="800" y="520" as="sourcePoint"/>
-                        <Array as="points">
-                            <mxPoint x="800" y="680"/>
-                        </Array>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="33" value="" style="group" parent="1" vertex="1" connectable="0">
-                    <mxGeometry x="-140" y="-75" width="500" height="350" as="geometry"/>
-                </mxCell>
-                <mxCell id="29" value="&lt;font face=&quot;Roboto&quot; data-font-src=&quot;https://fonts.googleapis.com/css?family=Roboto&quot; style=&quot;font-size: 24px&quot;&gt;https://someapp.example.com&lt;/font&gt;" style="rounded=0;whiteSpace=wrap;html=1;fontStyle=1;strokeWidth=4;" parent="33" vertex="1">
-                    <mxGeometry x="60" y="27" width="380" height="250" as="geometry"/>
-                </mxCell>
-                <mxCell id="32" value="" style="pointerEvents=1;shadow=0;dashed=0;html=1;fillColor=#505050;labelPosition=center;verticalLabelPosition=bottom;verticalAlign=top;outlineConnect=0;align=center;shape=mxgraph.office.devices.laptop;strokeColor=none;" parent="33" vertex="1">
-                    <mxGeometry width="500" height="350" as="geometry"/>
-                </mxCell>
-                <mxCell id="90" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;dashed=1;startArrow=none;startFill=0;endArrow=classic;endFill=1;strokeWidth=3;" parent="1" source="101" target="32" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <mxPoint x="390" y="-190" as="sourcePoint"/>
-                        <Array as="points">
-                            <mxPoint x="390" y="-132"/>
-                            <mxPoint x="280" y="-132"/>
-                        </Array>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="34" value="&lt;font face=&quot;Roboto&quot; data-font-src=&quot;https://fonts.googleapis.com/css?family=Roboto&quot; style=&quot;font-size: 24px&quot;&gt;DNS Servers&lt;/font&gt;" style="ellipse;shape=cloud;whiteSpace=wrap;html=1;strokeColor=#000000;strokeWidth=3;" parent="1" vertex="1">
-                    <mxGeometry x="-60" y="-540" width="330" height="260" as="geometry"/>
-                </mxCell>
-                <mxCell id="6" value="" style="rounded=0;whiteSpace=wrap;html=1;fontStyle=1;strokeWidth=4;fillColor=#dae8fc;strokeColor=#6c8ebf;" parent="1" vertex="1">
-                    <mxGeometry x="495" y="320" width="355" height="440" as="geometry"/>
-                </mxCell>
-                <mxCell id="7" value="&lt;font style=&quot;font-size: 24px&quot; face=&quot;Roboto&quot;&gt;TLS Termination Proxy&lt;br&gt;&lt;/font&gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;strokeWidth=3;fontFamily=Roboto Mono, mono;FType=g;" parent="1" vertex="1">
-                    <mxGeometry x="525" y="330" width="280" height="40" as="geometry"/>
-                </mxCell>
-                <mxCell id="73" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;startArrow=none;startFill=0;endArrow=classic;endFill=1;strokeWidth=3;" parent="1" source="85" target="6" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <Array as="points"/>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="82" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;startArrow=none;startFill=0;endArrow=classic;endFill=1;strokeWidth=3;entryX=0.073;entryY=0.01;entryDx=0;entryDy=0;entryPerimeter=0;exitX=0.075;exitY=0.998;exitDx=0;exitDy=0;exitPerimeter=0;" parent="1" source="62" target="78" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <mxPoint x="917" y="754" as="sourcePoint"/>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="62" value="&lt;font face=&quot;Roboto&quot; data-font-src=&quot;https://fonts.googleapis.com/css?family=Roboto&quot; style=&quot;font-size: 24px&quot;&gt;FastAPI&lt;/font&gt;&lt;font face=&quot;Roboto&quot; data-font-src=&quot;https://fonts.googleapis.com/css?family=Roboto&quot; style=&quot;font-size: 24px ; font-weight: normal&quot;&gt; app for: someapp.example.com&lt;/font&gt;" style="rounded=0;whiteSpace=wrap;html=1;fontStyle=1;strokeWidth=4;fillColor=#dae8fc;strokeColor=#6c8ebf;" parent="1" vertex="1">
-                    <mxGeometry x="895" y="650" width="300" height="100" as="geometry"/>
-                </mxCell>
-                <mxCell id="65" value="&lt;font face=&quot;Roboto&quot; data-font-src=&quot;https://fonts.googleapis.com/css?family=Roboto&quot; style=&quot;font-size: 24px ; font-weight: normal&quot;&gt;Another app&lt;/font&gt;&lt;font face=&quot;Roboto&quot; data-font-src=&quot;https://fonts.googleapis.com/css?family=Roboto&quot; style=&quot;font-size: 24px ; font-weight: normal&quot;&gt;: another.example.com&lt;/font&gt;" style="rounded=0;whiteSpace=wrap;html=1;fontStyle=1;strokeWidth=4;fillColor=#dae8fc;strokeColor=#6c8ebf;" parent="1" vertex="1">
-                    <mxGeometry x="895" y="50" width="300" height="100" as="geometry"/>
-                </mxCell>
-                <mxCell id="66" value="&lt;font face=&quot;Roboto&quot; data-font-src=&quot;https://fonts.googleapis.com/css?family=Roboto&quot; style=&quot;font-size: 24px ; font-weight: normal&quot;&gt;One more app&lt;/font&gt;&lt;font face=&quot;Roboto&quot; data-font-src=&quot;https://fonts.googleapis.com/css?family=Roboto&quot; style=&quot;font-size: 24px ; font-weight: normal&quot;&gt;: onemore.example.com&lt;/font&gt;" style="rounded=0;whiteSpace=wrap;html=1;fontStyle=1;strokeWidth=4;fillColor=#dae8fc;strokeColor=#6c8ebf;" parent="1" vertex="1">
-                    <mxGeometry x="895" y="180" width="300" height="100" as="geometry"/>
-                </mxCell>
-                <mxCell id="78" value="&lt;font face=&quot;Roboto&quot;&gt;&lt;span style=&quot;font-size: 24px ; font-weight: 400&quot;&gt;A Database&lt;/span&gt;&lt;/font&gt;" style="rounded=0;whiteSpace=wrap;html=1;fontStyle=1;strokeWidth=4;fillColor=#dae8fc;strokeColor=#6c8ebf;" parent="1" vertex="1">
-                    <mxGeometry x="895" y="780" width="300" height="100" as="geometry"/>
-                </mxCell>
-                <mxCell id="85" value="&lt;span style=&quot;font-family: &amp;#34;roboto&amp;#34; ; font-size: 24px&quot;&gt;Plain response from: someapp.example.com&lt;/span&gt;" style="shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fixedSize=1;strokeColor=#9673a6;strokeWidth=3;fillColor=#e1d5e7;" parent="1" vertex="1">
-                    <mxGeometry x="890" y="500" width="310" height="80" as="geometry"/>
-                </mxCell>
-                <mxCell id="86" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;startArrow=none;startFill=0;endArrow=none;endFill=1;strokeWidth=3;" parent="1" source="62" target="85" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <mxPoint x="1030.0000000000005" y="649.9999999999995" as="sourcePoint"/>
-                        <mxPoint x="850" y="540.0000000000005" as="targetPoint"/>
-                        <Array as="points">
-                            <mxPoint x="1030" y="540"/>
-                        </Array>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="87" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;startArrow=none;startFill=0;endArrow=classic;endFill=1;strokeWidth=3;" parent="1" source="6" target="62" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <Array as="points">
-                            <mxPoint x="1240" y="390"/>
-                            <mxPoint x="1240" y="700"/>
-                        </Array>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="84" value="&lt;span style=&quot;font-family: &amp;#34;roboto&amp;#34; ; font-size: 24px&quot;&gt;Decrypted request for: someapp.example.com&lt;/span&gt;" style="shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fixedSize=1;strokeColor=#82b366;strokeWidth=3;fillColor=#d5e8d4;" parent="1" vertex="1">
-                    <mxGeometry x="890" y="350" width="310" height="80" as="geometry"/>
-                </mxCell>
-                <mxCell id="88" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;startArrow=none;startFill=0;endArrow=classic;endFill=1;strokeWidth=3;dashed=1;" parent="1" source="100" target="34" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <mxPoint x="65.05882352941171" y="-220" as="sourcePoint"/>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="89" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;startArrow=none;startFill=0;endArrow=none;endFill=1;strokeWidth=3;dashed=1;" parent="1" source="32" target="100" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <mxPoint x="110" y="-75" as="sourcePoint"/>
-                        <mxPoint x="-4.941176470588289" y="-139.99999999999955" as="targetPoint"/>
-                        <Array as="points">
-                            <mxPoint x="-5" y="-90"/>
-                            <mxPoint x="-5" y="-90"/>
-                        </Array>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="91" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;dashed=1;startArrow=none;startFill=0;endArrow=none;endFill=1;strokeWidth=3;" parent="1" source="34" target="101" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <mxPoint x="105" y="-280" as="sourcePoint"/>
-                        <mxPoint x="390" y="-260" as="targetPoint"/>
-                        <Array as="points">
-                            <mxPoint x="390" y="-430"/>
-                        </Array>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="109" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;dashed=1;startArrow=none;startFill=0;endArrow=classic;endFill=1;strokeWidth=3;" parent="1" source="97" target="32" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <Array as="points">
-                            <mxPoint x="340" y="480"/>
-                            <mxPoint x="340" y="480"/>
-                        </Array>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="36" value="&lt;font face=&quot;Roboto&quot; data-font-src=&quot;https://fonts.googleapis.com/css?family=Roboto&quot; style=&quot;font-size: 24px&quot;&gt;Port 443 (HTTPS)&lt;/font&gt;" style="ellipse;whiteSpace=wrap;html=1;strokeColor=#000000;strokeWidth=3;" parent="1" vertex="1">
-                    <mxGeometry x="330" y="680" width="170" height="120" as="geometry"/>
-                </mxCell>
-                <mxCell id="92" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;dashed=1;startArrow=none;startFill=0;endArrow=classic;endFill=1;strokeWidth=3;" parent="1" source="96" target="36" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <mxPoint x="50" y="500" as="sourcePoint"/>
-                        <Array as="points">
-                            <mxPoint x="50" y="740"/>
-                        </Array>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="93" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;dashed=1;startArrow=none;startFill=0;endArrow=none;endFill=1;strokeWidth=3;" parent="1" source="32" target="96" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <mxPoint x="300" y="350" as="sourcePoint"/>
-                        <mxPoint x="55" y="330" as="targetPoint"/>
-                        <Array as="points">
-                            <mxPoint x="160" y="340"/>
-                            <mxPoint x="160" y="340"/>
-                        </Array>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="96" value="&lt;span style=&quot;font-family: &amp;#34;roboto&amp;#34; ; font-size: 24px&quot;&gt;Encrypted request for: someapp.example.com&lt;/span&gt;" style="shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fixedSize=1;strokeColor=#82b366;strokeWidth=3;fillColor=#d5e8d4;" parent="1" vertex="1">
-                    <mxGeometry x="-10" y="400" width="310" height="80" as="geometry"/>
-                </mxCell>
-                <mxCell id="100" value="&lt;span style=&quot;font-family: &amp;#34;roboto&amp;#34; ; font-size: 24px&quot;&gt;Who is: someapp.example.com&lt;/span&gt;" style="shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fixedSize=1;strokeWidth=3;" parent="1" vertex="1">
-                    <mxGeometry x="-110" y="-210" width="310" height="80" as="geometry"/>
-                </mxCell>
-                <mxCell id="101" value="&lt;span style=&quot;font-family: &amp;#34;roboto&amp;#34; ; font-size: 24px&quot;&gt;IP:&lt;/span&gt;&lt;br style=&quot;font-family: &amp;#34;roboto&amp;#34;&quot;&gt;&lt;span style=&quot;font-family: &amp;#34;roboto&amp;#34; ; font-size: 24px&quot;&gt;123.124.125.126&lt;/span&gt;" style="shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fixedSize=1;strokeWidth=3;" parent="1" vertex="1">
-                    <mxGeometry x="270" y="-290" width="240" height="80" as="geometry"/>
-                </mxCell>
-                <mxCell id="106" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;dashed=1;startArrow=none;startFill=0;endArrow=none;endFill=0;strokeWidth=3;" parent="1" source="104" target="36" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <Array as="points">
-                            <mxPoint x="-40" y="770"/>
-                        </Array>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="104" value="&lt;span style=&quot;font-family: &amp;#34;roboto&amp;#34; ; font-size: 24px&quot;&gt;TLS Handshake&lt;/span&gt;" style="shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fixedSize=1;strokeWidth=3;" parent="1" vertex="1">
-                    <mxGeometry x="-110" y="300" width="230" height="80" as="geometry"/>
-                </mxCell>
-                <mxCell id="107" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;dashed=1;startArrow=none;startFill=0;endArrow=none;endFill=1;strokeWidth=3;" parent="1" source="32" target="104" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <mxPoint x="-40" y="275" as="sourcePoint"/>
-                        <mxPoint x="341.38784067832285" y="770" as="targetPoint"/>
-                        <Array as="points">
-                            <mxPoint x="-40" y="290"/>
-                            <mxPoint x="-40" y="290"/>
-                        </Array>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="97" value="&lt;span style=&quot;font-family: &amp;#34;roboto&amp;#34; ; font-size: 24px&quot;&gt;Encrypted response from: someapp.example.com&lt;/span&gt;" style="shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fixedSize=1;strokeColor=#9673a6;strokeWidth=3;fillColor=#e1d5e7;" parent="1" vertex="1">
-                    <mxGeometry x="90" y="500" width="310" height="80" as="geometry"/>
-                </mxCell>
-                <mxCell id="110" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;dashed=1;startArrow=none;startFill=0;endArrow=none;endFill=1;strokeWidth=3;" parent="1" source="36" target="97" edge="1">
-                    <mxGeometry relative="1" as="geometry">
-                        <mxPoint x="415" y="680" as="sourcePoint"/>
-                        <mxPoint x="110" y="275" as="targetPoint"/>
-                        <Array as="points">
-                            <mxPoint x="245" y="710"/>
-                        </Array>
-                    </mxGeometry>
-                </mxCell>
-                <mxCell id="49" value="" style="rounded=0;whiteSpace=wrap;html=1;fontStyle=1;strokeWidth=4;fillColor=#fff2cc;strokeColor=#d6b656;" parent="1" vertex="1">
-                    <mxGeometry x="510" y="400" width="310" height="320" as="geometry"/>
-                </mxCell>
-                <mxCell id="50" value="&lt;font style=&quot;font-size: 24px&quot; face=&quot;Roboto&quot;&gt;HTTPS certificates&lt;br&gt;&lt;/font&gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;strokeWidth=3;fontFamily=Roboto Mono, mono;FType=g;" parent="1" vertex="1">
-                    <mxGeometry x="550.9" y="410" width="228.21" height="40" as="geometry"/>
-                </mxCell>
-                <mxCell id="51" value="&lt;font face=&quot;Roboto&quot; data-font-src=&quot;https://fonts.googleapis.com/css?family=Roboto&quot;&gt;&lt;span style=&quot;font-size: 24px&quot;&gt;someapp.example.com&lt;/span&gt;&lt;br&gt;&lt;/font&gt;" style="rounded=0;whiteSpace=wrap;html=1;strokeColor=#000000;strokeWidth=3;" parent="1" vertex="1">
-                    <mxGeometry x="530" y="465" width="270" height="70" as="geometry"/>
-                </mxCell>
-                <mxCell id="52" value="&lt;font face=&quot;Roboto&quot; data-font-src=&quot;https://fonts.googleapis.com/css?family=Roboto&quot;&gt;&lt;span style=&quot;font-size: 24px&quot;&gt;another.example.net&lt;/span&gt;&lt;br&gt;&lt;/font&gt;" style="rounded=0;whiteSpace=wrap;html=1;strokeColor=#666666;strokeWidth=3;fillColor=#f5f5f5;fontColor=#333333;" parent="1" vertex="1">
-                    <mxGeometry x="530" y="545" width="270" height="70" as="geometry"/>
-                </mxCell>
-                <mxCell id="53" value="&lt;font face=&quot;Roboto&quot; data-font-src=&quot;https://fonts.googleapis.com/css?family=Roboto&quot;&gt;&lt;span style=&quot;font-size: 24px&quot;&gt;onemore.example.org&lt;/span&gt;&lt;br&gt;&lt;/font&gt;" style="rounded=0;whiteSpace=wrap;html=1;strokeColor=#666666;strokeWidth=3;fillColor=#f5f5f5;fontColor=#333333;" parent="1" vertex="1">
-                    <mxGeometry x="530" y="625" width="270" height="70" as="geometry"/>
-                </mxCell>
-                <mxCell id="42" value="&lt;font face=&quot;Roboto&quot; data-font-src=&quot;https://fonts.googleapis.com/css?family=Roboto&quot;&gt;&lt;span style=&quot;font-size: 24px&quot;&gt;IP:&lt;/span&gt;&lt;br&gt;&lt;span style=&quot;font-size: 24px&quot;&gt;123.124.125.126&lt;/span&gt;&lt;br&gt;&lt;/font&gt;" style="rounded=0;whiteSpace=wrap;html=1;strokeColor=#000000;strokeWidth=3;" parent="1" vertex="1">
-                    <mxGeometry x="290" y="600" width="220" height="70" as="geometry"/>
-                </mxCell>
-            </root>
-        </mxGraphModel>
-    </diagram>
-</mxfile>
--- a/docs/en/docs/img/deployment/https/https08.drawio.svg
+++ b/docs/en/docs/img/deployment/https/https08.drawio.svg
@ -0,0 +1,625 @@
+<svg host="65bd71144e" xmlns="http://www.w3.org/2000/svg" style="background: transparent; background-color: transparent;" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1412px" height="1464px" viewBox="-0.5 -0.5 1412 1464" content="&lt;mxfile&gt;&lt;diagram id=&quot;jyERGzDynktFHFRGN0ph&quot; name=&quot;Page-1&quot;&gt;7V1bc6s2EP41mWkfzADi+piTS09nTltPk5m2jwrINi1GLsiJ3V9fCQQGIWxsC19y7EwmZhES2v12tbtayB14mK9+SuFi9gsOUXxn6uHqDjzemaZtWID+YZR1QQGmrxeUaRqFBc3YEF6i/xAnls2WUYiyRkOCcUyiRZMY4CRBAWnQYJrij2azCY6boy7gFLUILwGM29Q/opDMONU39c2JryiazsqhTZ2fmcOyNSdkMxjijxoJPN2BhxRjUnybrx5QzNhXMqa47rnjbHVnKUpInwuAWVzxDuMlnx2/MbIup7vAUUJQ+vRO+2ScM+7Al+q+dXoQwmyGQn4wI/OYN5pEcfyAY5zm/QBbZz+UHsM3FI9xFpEIJ/RcgFj/9MQ7SklE+fxNaPCGCcHzWoP7OJqyEwQvKBUvSRwl6KESNxsE8iZV5/SWF2xG89WU4VLDk0kUIC1E7/RPpsVwUfSWkRT/g8r7TnBCL/rS5itnNbsjtKqROJ9/QniOSLqmTfjZkWFxoXPcj1y7OP7YgMgukTKr4YdyjoOXA3dadb4RLf3CpSuXdA9Bp3iZhJUgP2YRQS8LGLCzH5RlgnBxQl74tUbFtlIfLDU8s2yBZeVxjWWeKWGZ7ypgGZCwzIkJm+wCJg3eOf8umcrmXBllucW6pw1Ma7HKOVGep9+m/G9ctmcmqODypt3vmGIe35kPbBSYZKMMpdGk3c8LSik3f8h+LDukcyr6bI5DycU9l2RB9FQepClfqRrUNZqTWnom6ug8CkM2jBRQTcg1MQQ4f57hPIoZAEqm6L/ghPNmzr6BL8+v61y3p2pg5xq7YQdkmuopQJ3XEg4K6fLDD3FKZniKExg/bagCGzdtvmFm0nJ5/o0IWfO1FC4Jlkm7znm0isifrENN901+/BdrrekGP3xc8QHzg7W4GpTNxhS6lAsMHHmDTgGxeW4VT4piSKL35jIs43V+6X2awnWtQb6OZbWex4ywkbqnN6Vu8xGe+7Z3dEHOxR10XQ2ko1W3m+FlGiB+lQCfiie9EOVfBqIawDgVCHpIWe/F92PR5Hhb0HGIUPVzSLUhw4zAlNwzh3qzHOS054jddmEakrBsEcQwy6KgIPImcqR0gqOQDSfppe8P0ykqXSXzNCgCvrBCGP4wMGoPxKfYZZWqNajjgqOBB6xOt+hwb6anK9Xyfx5/faHnCi8o6/SBRD2JYxoqolpMEMR4Ge72eZs+0R3zAdhnPwzvETE4ohtiSfwQIPFDTEeBI+JI5DxsxCAEjCFE3iSQ8d0JPPQ2URRj+HaDy8CUMNm220y2LAVMdncp04GKoSrAeP3GFOwVpfMogXk4burjFK/WOwKOt1QSgmzVylsIUkelbQqoBG1UVqa+gUoVoATn8RjP6U54dtubcAZxJrpdgCN8fK9tnK9ZZFRS6ZqHn25F+KsgGOXxJgDNj9b1IzHqrMWzrl2LZ3XN972tAe1eMWwdUo7ZhpTrncZB9Q23YT9c2+rlnx4AvXKaSh1C6SoWQgJHxfKXBo0OZ4Sw5P89m0exzmTaFONpjOAiyrQAzyk5yGiT54loy/f2QmUJvWeYkfvxzztWxcubh56f+OALCDuV4HQOY+kkGXwWi/yitGicUaBQkoZWcL6IUXGDuzKRW92Az+BSeoJL6fTNHxq6Cr/d/g71cS8c3yeYzKgt53D+1CqbN4DFhG9qulVNT6ulsvD6pqW1afxG3UkWXqXo+1FU6kKzCd8UdauiGt4pNbV02VXsA7chYel6h6+lxhiwMR6pTrzBDB25SfwZoeSeFEpet2t2MSUF4xhGSR6AZgucMNDok5RV3xzs728FVZmCn9Eup6za58uiFmtzahV+mz2AF61QWTQmTdr7jgug04IkaEMSGaGNXFXAE/YddQnwDAnwlNQU9MjlX166iLdQkt6T5WJKbRw6F2PoQNf02keIDi1f82sfu1eipr3hLNRK2ZZ00LLbghFH70+yuYnDCsg8brvRc68AqYpz0U4bqyV+z1wjY5hCEWO5P92FytYFrq4YH93b0RezpD6iIF0vCAUkk8+/S5Tl3R2VRLuwRdUz34DTa1GlS6oXWsMsqkAWwg+2qJ6pUm8gy9SvPKtZgaO3DVVZHjL0ourYmm57HhW56VuG4RoNIIzMnmVdh1gc/xM7U/ujoCy5qoOgQsbgrpVYqese6D2NLC2HkWO5OaxKIW+qqAQnbRh3atR0DUc7VtftzY+vMSwN8nmRfkzRocoYojRtTaSfqG7VEKKGUWsN6wv1Vklhq1pMEZhbA1lALT4N/SylzRdUBOu7khX4MkIFIDj+lrfdlu1of3zd6hAbLoeW540p7OhJiz0Lqf/w9fV1/NL9CI+I8Kp89bLKVYGQCXAkqVXDlTjjhuirHeKN+1e3NKk2BZKsARimgq2lu2LqScyVKyqGF4ZxFaeafNkDf9eFKaXujsSx908EKKB3BPb7Ojt2Rxmt6jSoUKoPrO2L3Y72x0O5e7G7mKzYU3LLig2SFRsJQbF1yq2mKvS/ZOj9MWM1/FF25UhT/bxRK5tSvXLjNMiRpRvUlkQdjcCfx3mDDhhsnn2RDDHgXRkm0AzTor82/XV23N+uAOM60Wu6Inj9Nnir3Sj14HWu3lfcMzJsbgVIcmMDRR9751TFHUhXdRbqCrYgi+f4vsIkpNr9z7GVYNdpIVrrG5A4RqbseVo1FkL2rOeVmwzF4WWlSkPHl6JNMA/dNwKWoQHP9SzdcT2wqSkSbI3yfSLx/ndtFG1vf3y82f0c88WYwGa8eStuVFjceM7axsqo3+xqw+tqpO3c05hVyxBKGw/doxRX6pZ9VmRHTUuw14Zau2j1qBUZtqx+MpmYgbSsPnTeHNtRYwDsQ1NOQMXejy2zAJf0Fo18g4+2CdiLKSZRAAnqflvN7QUaShBp61qzhseSJLPoEqSVfat+i4a9M5019LNqirNMqrRBgZ91qI7sZWtPvH9uC/vnltN+P6wp2z9X8a5T27yBVQpW8dHpBJHrAKuTf/pEAhOb/XBe1ejFZxhw29Ypwd39Jt/vG9zi48Y4nd7AfTy4HfOE4LYuzHJf3VbdZe3FfUbPRswPObK8u+w17ir0w5SF4Oeq+2wq3D6O8LBJAwVCHokvnrW8dgpA9sZC84B/b0APN/8ko8jLbP7ZCHj6Hw==&lt;/diagram&gt;&lt;/mxfile&gt;">
+    <defs/>
+    <g>
+        <g>
+            <rect x="0" y="466" width="500" height="350" fill="none" stroke="none" pointer-events="all"/>
+            <path d="M 289.06 793.99 C 293.87 793.99 297.23 791.75 296.28 790.03 L 286.73 773.39 C 285.53 770.86 283.81 770.35 280.97 770.35 L 219.03 770.35 C 216.02 770.35 214.47 770.96 213.01 773.49 L 204.15 789.93 C 202.43 792.57 207.59 793.99 211.29 793.99 Z M 433.76 739.91 L 433.76 496.43 L 65.98 496.43 L 65.98 739.91 Z M 25.89 816 C 16.09 815.9 7.31 812.04 3.61 806.06 C 0 800.17 1.46 794.29 4.56 790.23 L 40.18 747.52 L 40.18 495.12 C 40.18 482.43 49.81 466 65.81 466 L 433.84 466 C 446.32 466 459.57 477.77 459.57 496.74 L 459.57 747.52 L 495.53 790.64 C 498.54 794.7 500 800.07 496.39 805.86 C 491.66 813.16 482.71 815.49 474.28 816 Z" fill="#505050" stroke="none" pointer-events="all" style="fill: light-dark(rgb(80, 80, 80), rgb(168, 168, 168));"/>
+        </g>
+        <g>
+            <rect x="590" y="491" width="820" height="970" fill="#ffffff" stroke="#000000" stroke-width="4" pointer-events="all" style="fill: light-dark(#ffffff, var(--ge-dark-color, #121212)); stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+        </g>
+        <g>
+            <rect x="850" y="491" width="300" height="80" fill="none" stroke="none" pointer-events="all"/>
+        </g>
+        <g>
+            <g transform="translate(-0.5 -0.5)">
+                <switch>
+                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                        <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 298px; height: 1px; padding-top: 531px; margin-left: 851px;">
+                            <div style="box-sizing: border-box; font-size: 0; text-align: center; color: #000000; ">
+                                <div style="display: inline-block; font-size: 12px; font-family: &quot;Roboto Mono&quot;, &quot;mono&quot;; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
+                                    <span style="font-size: 24px;">
+                                        <font face="Roboto, sans-serif">
+                                            Server(s)
+                                        </font>
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
+                    </foreignObject>
+                    <text x="1000" y="535" fill="light-dark(#000000, #ffffff)" font-family="&quot;Roboto Mono&quot;, &quot;mono&quot;" font-size="12px" text-anchor="middle">
+                        Server(s)
+                    </text>
+                </switch>
+            </g>
+        </g>
+        <g>
+            <path d="M 530 331 L 530 409 L 420 409 L 420 455.9" fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" stroke-dasharray="9 9" pointer-events="stroke" style="stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+            <path d="M 420 462.65 L 415.5 453.65 L 420 455.9 L 424.5 453.65 Z" fill="#000000" stroke="#000000" stroke-width="3" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(rgb(0, 0, 0), rgb(255, 255, 255)); stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+        </g>
+        <g>
+            <path d="M 162.5 66 C 96.5 66 80 131 132.8 144 C 80 172.6 139.4 235 182.3 209 C 212 261 311 261 344 209 C 410 209 410 157 368.75 131 C 410 79 344 27 286.25 53 C 245 14 179 14 162.5 66 Z" fill="#ffffff" stroke="#000000" stroke-width="3" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(#ffffff, var(--ge-dark-color, #121212)); stroke: light-dark(rgb(0, 0, 0), rgb(237, 237, 237));"/>
+        </g>
+        <g>
+            <g transform="translate(-0.5 -0.5)">
+                <switch>
+                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                        <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 328px; height: 1px; padding-top: 131px; margin-left: 81px;">
+                            <div style="box-sizing: border-box; font-size: 0; text-align: center; color: #000000; ">
+                                <div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
+                                    <font style="font-size: 24px" face="Roboto, sans-serif">
+                                        DNS Servers
+                                    </font>
+                                </div>
+                            </div>
+                        </div>
+                    </foreignObject>
+                    <text x="245" y="135" fill="light-dark(#000000, #ffffff)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle">
+                        DNS Servers
+                    </text>
+                </switch>
+            </g>
+        </g>
+        <g>
+            <rect x="635" y="861" width="355" height="440" fill="#dae8fc" stroke="#6c8ebf" stroke-width="4" pointer-events="all" style="fill: light-dark(rgb(218, 232, 252), rgb(29, 41, 59)); stroke: light-dark(rgb(108, 142, 191), rgb(92, 121, 163));"/>
+        </g>
+        <g>
+            <rect x="665" y="871" width="280" height="40" fill="none" stroke="none" pointer-events="all"/>
+        </g>
+        <g>
+            <g transform="translate(-0.5 -0.5)">
+                <switch>
+                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                        <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 278px; height: 1px; padding-top: 891px; margin-left: 666px;">
+                            <div style="box-sizing: border-box; font-size: 0; text-align: center; color: #000000; ">
+                                <div style="display: inline-block; font-size: 12px; font-family: &quot;Roboto Mono&quot;, &quot;mono&quot;; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
+                                    <font style="font-size: 24px">
+                                        <font face="Roboto, sans-serif">
+                                            TLS Termination Proxy
+                                        </font>
+                                        <br/>
+                                    </font>
+                                </div>
+                            </div>
+                        </div>
+                    </foreignObject>
+                    <text x="805" y="895" fill="light-dark(#000000, #ffffff)" font-family="&quot;Roboto Mono&quot;, &quot;mono&quot;" font-size="12px" text-anchor="middle">
+                        TLS Termination Proxy
+                    </text>
+                </switch>
+            </g>
+        </g>
+        <g>
+            <path d="M 1030 1081 L 1000.1 1081" fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke" style="stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+            <path d="M 993.35 1081 L 1002.35 1076.5 L 1000.1 1081 L 1002.35 1085.5 Z" fill="#000000" stroke="#000000" stroke-width="3" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(rgb(0, 0, 0), rgb(255, 255, 255)); stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+        </g>
+        <g>
+            <path d="M 1057.5 1290.8 L 1057.09 1311.9" fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke" style="stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+            <path d="M 1056.96 1318.65 L 1052.64 1309.56 L 1057.09 1311.9 L 1061.64 1309.73 Z" fill="#000000" stroke="#000000" stroke-width="3" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(rgb(0, 0, 0), rgb(255, 255, 255)); stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+        </g>
+        <g>
+            <rect x="1035" y="1191" width="300" height="100" fill="#dae8fc" stroke="#6c8ebf" stroke-width="4" pointer-events="all" style="fill: light-dark(rgb(218, 232, 252), rgb(29, 41, 59)); stroke: light-dark(rgb(108, 142, 191), rgb(92, 121, 163));"/>
+        </g>
+        <g>
+            <g transform="translate(-0.5 -0.5)">
+                <switch>
+                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                        <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 298px; height: 1px; padding-top: 1241px; margin-left: 1036px;">
+                            <div style="box-sizing: border-box; font-size: 0; text-align: center; color: #000000; ">
+                                <div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; font-weight: bold; white-space: normal; word-wrap: normal; ">
+                                    <font face="Roboto, sans-serif">
+                                        <font style="font-size: 24px;" data-font-src="https://fonts.googleapis.com/css?family=Roboto">
+                                            FastAPI
+                                        </font>
+                                        <font style="font-size: 24px; font-weight: normal;" data-font-src="https://fonts.googleapis.com/css?family=Roboto">
+                                            app for: someapp.example.com
+                                        </font>
+                                    </font>
+                                </div>
+                            </div>
+                        </div>
+                    </foreignObject>
+                    <text x="1185" y="1245" fill="light-dark(#000000, #ffffff)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle" font-weight="bold">
+                        FastAPI app for: someapp.example.com
+                    </text>
+                </switch>
+            </g>
+        </g>
+        <g>
+            <rect x="1035" y="591" width="300" height="100" fill="#dae8fc" stroke="#6c8ebf" stroke-width="4" pointer-events="all" style="fill: light-dark(rgb(218, 232, 252), rgb(29, 41, 59)); stroke: light-dark(rgb(108, 142, 191), rgb(92, 121, 163));"/>
+        </g>
+        <g>
+            <g transform="translate(-0.5 -0.5)">
+                <switch>
+                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                        <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 298px; height: 1px; padding-top: 641px; margin-left: 1036px;">
+                            <div style="box-sizing: border-box; font-size: 0; text-align: center; color: #000000; ">
+                                <div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; font-weight: bold; white-space: normal; word-wrap: normal; ">
+                                    <font face="Roboto, sans-serif">
+                                        <font style="font-size: 24px; font-weight: normal;" data-font-src="https://fonts.googleapis.com/css?family=Roboto">
+                                            Another app
+                                        </font>
+                                        <font style="font-size: 24px; font-weight: normal;" data-font-src="https://fonts.googleapis.com/css?family=Roboto">
+                                            : another.example.com
+                                        </font>
+                                    </font>
+                                </div>
+                            </div>
+                        </div>
+                    </foreignObject>
+                    <text x="1185" y="645" fill="light-dark(#000000, #ffffff)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle" font-weight="bold">
+                        Another app: another.example.com
+                    </text>
+                </switch>
+            </g>
+        </g>
+        <g>
+            <rect x="1035" y="721" width="300" height="100" fill="#dae8fc" stroke="#6c8ebf" stroke-width="4" pointer-events="all" style="fill: light-dark(rgb(218, 232, 252), rgb(29, 41, 59)); stroke: light-dark(rgb(108, 142, 191), rgb(92, 121, 163));"/>
+        </g>
+        <g>
+            <g transform="translate(-0.5 -0.5)">
+                <switch>
+                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                        <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 298px; height: 1px; padding-top: 771px; margin-left: 1036px;">
+                            <div style="box-sizing: border-box; font-size: 0; text-align: center; color: #000000; ">
+                                <div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; font-weight: bold; white-space: normal; word-wrap: normal; ">
+                                    <font face="Roboto, sans-serif">
+                                        <font style="font-size: 24px; font-weight: normal;" data-font-src="https://fonts.googleapis.com/css?family=Roboto">
+                                            One more app
+                                        </font>
+                                        <font style="font-size: 24px; font-weight: normal;" data-font-src="https://fonts.googleapis.com/css?family=Roboto">
+                                            : onemore.example.com
+                                        </font>
+                                    </font>
+                                </div>
+                            </div>
+                        </div>
+                    </foreignObject>
+                    <text x="1185" y="775" fill="light-dark(#000000, #ffffff)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle" font-weight="bold">
+                        One more app: onemore.example.com
+                    </text>
+                </switch>
+            </g>
+        </g>
+        <g>
+            <rect x="1035" y="1321" width="300" height="100" fill="#dae8fc" stroke="#6c8ebf" stroke-width="4" pointer-events="all" style="fill: light-dark(rgb(218, 232, 252), rgb(29, 41, 59)); stroke: light-dark(rgb(108, 142, 191), rgb(92, 121, 163));"/>
+        </g>
+        <g>
+            <g transform="translate(-0.5 -0.5)">
+                <switch>
+                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                        <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 298px; height: 1px; padding-top: 1371px; margin-left: 1036px;">
+                            <div style="box-sizing: border-box; font-size: 0; text-align: center; color: #000000; ">
+                                <div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; font-weight: bold; white-space: normal; word-wrap: normal; ">
+                                    <span style="font-size: 24px; font-weight: 400;">
+                                        <font face="Roboto, sans-serif">
+                                            A Database
+                                        </font>
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
+                    </foreignObject>
+                    <text x="1185" y="1375" fill="light-dark(#000000, #ffffff)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle" font-weight="bold">
+                        A Database
+                    </text>
+                </switch>
+            </g>
+        </g>
+        <g>
+            <path d="M 1050 1041 L 1320 1041 L 1340 1081 L 1320 1121 L 1050 1121 L 1030 1081 Z" fill="#e1d5e7" stroke="#9673a6" stroke-width="3" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(rgb(225, 213, 231), rgb(57, 47, 63)); stroke: light-dark(rgb(150, 115, 166), rgb(149, 119, 163));"/>
+        </g>
+        <g>
+            <g transform="translate(-0.5 -0.5)">
+                <switch>
+                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                        <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 308px; height: 1px; padding-top: 1081px; margin-left: 1031px;">
+                            <div style="box-sizing: border-box; font-size: 0; text-align: center; color: #000000; ">
+                                <div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
+                                    <span style="font-size: 24px;">
+                                        <font face="Roboto, sans-serif">
+                                            Plain response from: someapp.example.com
+                                        </font>
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
+                    </foreignObject>
+                    <text x="1185" y="1085" fill="light-dark(#000000, #ffffff)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle">
+                        Plain response from: someapp.example.com
+                    </text>
+                </switch>
+            </g>
+        </g>
+        <g>
+            <path d="M 1185 1191 L 1185 1121" fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke" style="stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+        </g>
+        <g>
+            <path d="M 990 931 L 1380 931 L 1380 1241 L 1345.1 1241" fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke" style="stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+            <path d="M 1338.35 1241 L 1347.35 1236.5 L 1345.1 1241 L 1347.35 1245.5 Z" fill="#000000" stroke="#000000" stroke-width="3" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(rgb(0, 0, 0), rgb(255, 255, 255)); stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+        </g>
+        <g>
+            <path d="M 1050 891 L 1320 891 L 1340 931 L 1320 971 L 1050 971 L 1030 931 Z" fill="#d5e8d4" stroke="#82b366" stroke-width="3" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(rgb(213, 232, 212), rgb(31, 47, 30)); stroke: light-dark(rgb(130, 179, 102), rgb(68, 110, 44));"/>
+        </g>
+        <g>
+            <g transform="translate(-0.5 -0.5)">
+                <switch>
+                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                        <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 308px; height: 1px; padding-top: 931px; margin-left: 1031px;">
+                            <div style="box-sizing: border-box; font-size: 0; text-align: center; color: #000000; ">
+                                <div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
+                                    <span style="font-size: 24px;">
+                                        <font face="Roboto, sans-serif">
+                                            Decrypted request for: someapp.example.com
+                                        </font>
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
+                    </foreignObject>
+                    <text x="1185" y="935" fill="light-dark(#000000, #ffffff)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle">
+                        Decrypted request for: someapp.example.com
+                    </text>
+                </switch>
+            </g>
+        </g>
+        <g>
+            <path d="M 185 331 L 185 296 L 245 296 L 245 271.1" fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" stroke-dasharray="9 9" pointer-events="stroke" style="stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+            <path d="M 245 264.35 L 249.5 273.35 L 245 271.1 L 240.5 273.35 Z" fill="#000000" stroke="#000000" stroke-width="3" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(rgb(0, 0, 0), rgb(255, 255, 255)); stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+        </g>
+        <g>
+            <path d="M 135 466 L 135 451 L 135 411" fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" stroke-dasharray="9 9" pointer-events="stroke" style="stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+        </g>
+        <g>
+            <path d="M 408.04 111 L 530 111 L 530 251" fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" stroke-dasharray="9 9" pointer-events="stroke" style="stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+        </g>
+        <g>
+            <path d="M 480 1041 L 480 1021 L 480 826.1" fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" stroke-dasharray="9 9" pointer-events="stroke" style="stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+            <path d="M 480 819.35 L 484.5 828.35 L 480 826.1 L 475.5 828.35 Z" fill="#000000" stroke="#000000" stroke-width="3" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(rgb(0, 0, 0), rgb(255, 255, 255)); stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+        </g>
+        <g>
+            <ellipse cx="555" cy="1281" rx="85" ry="60" fill="#ffffff" stroke="#000000" stroke-width="3" pointer-events="all" style="fill: light-dark(#ffffff, var(--ge-dark-color, #121212)); stroke: light-dark(rgb(0, 0, 0), rgb(237, 237, 237));"/>
+        </g>
+        <g>
+            <g transform="translate(-0.5 -0.5)">
+                <switch>
+                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                        <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 168px; height: 1px; padding-top: 1281px; margin-left: 471px;">
+                            <div style="box-sizing: border-box; font-size: 0; text-align: center; color: #000000; ">
+                                <div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
+                                    <font style="font-size: 24px" face="Roboto, sans-serif">
+                                        Port 443 (HTTPS)
+                                    </font>
+                                </div>
+                            </div>
+                        </div>
+                    </foreignObject>
+                    <text x="555" y="1285" fill="light-dark(#000000, #ffffff)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle">
+                        Port 443 (HTTPS)
+                    </text>
+                </switch>
+            </g>
+        </g>
+        <g>
+            <path d="M 190 1021 L 190 1281 L 459.9 1281" fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" stroke-dasharray="9 9" pointer-events="stroke" style="stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+            <path d="M 466.65 1281 L 457.65 1285.5 L 459.9 1281 L 457.65 1276.5 Z" fill="#000000" stroke="#000000" stroke-width="3" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(rgb(0, 0, 0), rgb(255, 255, 255)); stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+        </g>
+        <g>
+            <path d="M 300 816 L 300 881 L 300 941" fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" stroke-dasharray="9 9" pointer-events="stroke" style="stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+        </g>
+        <g>
+            <path d="M 150 941 L 420 941 L 440 981 L 420 1021 L 150 1021 L 130 981 Z" fill="#d5e8d4" stroke="#82b366" stroke-width="3" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(rgb(213, 232, 212), rgb(31, 47, 30)); stroke: light-dark(rgb(130, 179, 102), rgb(68, 110, 44));"/>
+        </g>
+        <g>
+            <g transform="translate(-0.5 -0.5)">
+                <switch>
+                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                        <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 308px; height: 1px; padding-top: 981px; margin-left: 131px;">
+                            <div style="box-sizing: border-box; font-size: 0; text-align: center; color: #000000; ">
+                                <div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
+                                    <span style="font-size: 24px;">
+                                        <font face="Roboto, sans-serif">
+                                            Encrypted request for: someapp.example.com
+                                        </font>
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
+                    </foreignObject>
+                    <text x="285" y="985" fill="light-dark(#000000, #ffffff)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle">
+                        Encrypted request for: someapp.example.com
+                    </text>
+                </switch>
+            </g>
+        </g>
+        <g>
+            <path d="M 50 331 L 320 331 L 340 371 L 320 411 L 50 411 L 30 371 Z" fill="#ffffff" stroke="#000000" stroke-width="3" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(#ffffff, var(--ge-dark-color, #121212)); stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+        </g>
+        <g>
+            <g transform="translate(-0.5 -0.5)">
+                <switch>
+                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                        <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 308px; height: 1px; padding-top: 371px; margin-left: 31px;">
+                            <div style="box-sizing: border-box; font-size: 0; text-align: center; color: #000000; ">
+                                <div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
+                                    <span style="font-size: 24px;">
+                                        <font face="Roboto, sans-serif">
+                                            Who is: someapp.example.com
+                                        </font>
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
+                    </foreignObject>
+                    <text x="185" y="375" fill="light-dark(#000000, #ffffff)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle">
+                        Who is: someapp.example.com
+                    </text>
+                </switch>
+            </g>
+        </g>
+        <g>
+            <path d="M 430 251 L 630 251 L 650 291 L 630 331 L 430 331 L 410 291 Z" fill="#ffffff" stroke="#000000" stroke-width="3" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(#ffffff, var(--ge-dark-color, #121212)); stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+        </g>
+        <g>
+            <g transform="translate(-0.5 -0.5)">
+                <switch>
+                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                        <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 238px; height: 1px; padding-top: 291px; margin-left: 411px;">
+                            <div style="box-sizing: border-box; font-size: 0; text-align: center; color: #000000; ">
+                                <div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
+                                    <font face="Roboto, sans-serif">
+                                        <span style="font-size: 24px;">
+                                            IP:
+                                        </span>
+                                        <br style=""/>
+                                        <span style="font-size: 24px;">
+                                            123.124.125.126
+                                        </span>
+                                    </font>
+                                </div>
+                            </div>
+                        </div>
+                    </foreignObject>
+                    <text x="530" y="295" fill="light-dark(#000000, #ffffff)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle">
+                        IP:...
+                    </text>
+                </switch>
+            </g>
+        </g>
+        <g>
+            <path d="M 100 921 L 100 1311 L 481.39 1311" fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" stroke-dasharray="9 9" pointer-events="stroke" style="stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+        </g>
+        <g>
+            <path d="M 50 841 L 240 841 L 260 881 L 240 921 L 50 921 L 30 881 Z" fill="#ffffff" stroke="#000000" stroke-width="3" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(#ffffff, var(--ge-dark-color, #121212)); stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+        </g>
+        <g>
+            <g transform="translate(-0.5 -0.5)">
+                <switch>
+                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                        <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 228px; height: 1px; padding-top: 881px; margin-left: 31px;">
+                            <div style="box-sizing: border-box; font-size: 0; text-align: center; color: #000000; ">
+                                <div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
+                                    <span style="font-size: 24px;">
+                                        <font face="Roboto, sans-serif">
+                                            TLS Handshake
+                                        </font>
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
+                    </foreignObject>
+                    <text x="145" y="885" fill="light-dark(#000000, #ffffff)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle">
+                        TLS Handshake
+                    </text>
+                </switch>
+            </g>
+        </g>
+        <g>
+            <path d="M 100 816 L 100 831 L 100 841" fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" stroke-dasharray="9 9" pointer-events="stroke" style="stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+        </g>
+        <g>
+            <path d="M 250 1041 L 520 1041 L 540 1081 L 520 1121 L 250 1121 L 230 1081 Z" fill="#e1d5e7" stroke="#9673a6" stroke-width="3" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(rgb(225, 213, 231), rgb(57, 47, 63)); stroke: light-dark(rgb(150, 115, 166), rgb(149, 119, 163));"/>
+        </g>
+        <g>
+            <g transform="translate(-0.5 -0.5)">
+                <switch>
+                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                        <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 308px; height: 1px; padding-top: 1081px; margin-left: 231px;">
+                            <div style="box-sizing: border-box; font-size: 0; text-align: center; color: #000000; ">
+                                <div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
+                                    <span style="font-size: 24px;">
+                                        <font face="Roboto, sans-serif">
+                                            Encrypted response from: someapp.example.com
+                                        </font>
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
+                    </foreignObject>
+                    <text x="385" y="1085" fill="light-dark(#000000, #ffffff)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle">
+                        Encrypted response from: someapp.example.com
+                    </text>
+                </switch>
+            </g>
+        </g>
+        <g>
+            <path d="M 481.39 1251 L 385 1251 L 385 1121" fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" stroke-dasharray="9 9" pointer-events="stroke" style="stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+        </g>
+        <g>
+            <rect x="650" y="941" width="310" height="320" fill="#fff2cc" stroke="#d6b656" stroke-width="4" pointer-events="all" style="fill: light-dark(rgb(255, 242, 204), rgb(40, 29, 0)); stroke: light-dark(rgb(214, 182, 86), rgb(109, 81, 0));"/>
+        </g>
+        <g>
+            <rect x="690.9" y="951" width="228.21" height="40" fill="none" stroke="none" pointer-events="all"/>
+        </g>
+        <g>
+            <g transform="translate(-0.5 -0.5)">
+                <switch>
+                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                        <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 226px; height: 1px; padding-top: 971px; margin-left: 692px;">
+                            <div style="box-sizing: border-box; font-size: 0; text-align: center; color: #000000; ">
+                                <div style="display: inline-block; font-size: 12px; font-family: &quot;Roboto Mono&quot;, &quot;mono&quot;; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
+                                    <font style="font-size: 24px">
+                                        <font face="Roboto, sans-serif">
+                                            HTTPS certificates
+                                        </font>
+                                        <br/>
+                                    </font>
+                                </div>
+                            </div>
+                        </div>
+                    </foreignObject>
+                    <text x="805" y="975" fill="light-dark(#000000, #ffffff)" font-family="&quot;Roboto Mono&quot;, &quot;mono&quot;" font-size="12px" text-anchor="middle">
+                        HTTPS certificates
+                    </text>
+                </switch>
+            </g>
+        </g>
+        <g>
+            <rect x="670" y="1006" width="270" height="70" fill="#ffffff" stroke="#000000" stroke-width="3" pointer-events="all" style="fill: light-dark(#ffffff, var(--ge-dark-color, #121212)); stroke: light-dark(rgb(0, 0, 0), rgb(237, 237, 237));"/>
+        </g>
+        <g>
+            <g transform="translate(-0.5 -0.5)">
+                <switch>
+                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                        <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 268px; height: 1px; padding-top: 1041px; margin-left: 671px;">
+                            <div style="box-sizing: border-box; font-size: 0; text-align: center; color: #000000; ">
+                                <div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
+                                    <font data-font-src="https://fonts.googleapis.com/css?family=Roboto">
+                                        <span style="font-size: 24px;">
+                                            <font face="Roboto, sans-serif">
+                                                someapp.example.com
+                                            </font>
+                                        </span>
+                                        <br/>
+                                    </font>
+                                </div>
+                            </div>
+                        </div>
+                    </foreignObject>
+                    <text x="805" y="1045" fill="light-dark(#000000, #ffffff)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle">
+                        someapp.example.com
+                    </text>
+                </switch>
+            </g>
+        </g>
+        <g>
+            <rect x="670" y="1086" width="270" height="70" fill="#f5f5f5" stroke="#666666" stroke-width="3" pointer-events="all" style="fill: light-dark(rgb(245, 245, 245), rgb(26, 26, 26)); stroke: light-dark(rgb(102, 102, 102), rgb(149, 149, 149));"/>
+        </g>
+        <g>
+            <g transform="translate(-0.5 -0.5)">
+                <switch>
+                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                        <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 268px; height: 1px; padding-top: 1121px; margin-left: 671px;">
+                            <div style="box-sizing: border-box; font-size: 0; text-align: center; color: #333333; ">
+                                <div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: light-dark(#333333, #c1c1c1); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
+                                    <font data-font-src="https://fonts.googleapis.com/css?family=Roboto">
+                                        <span style="font-size: 24px;">
+                                            <font face="Roboto, sans-serif">
+                                                another.example.net
+                                            </font>
+                                        </span>
+                                        <br/>
+                                    </font>
+                                </div>
+                            </div>
+                        </div>
+                    </foreignObject>
+                    <text x="805" y="1125" fill="#333333" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle">
+                        another.example.net
+                    </text>
+                </switch>
+            </g>
+        </g>
+        <g>
+            <rect x="670" y="1166" width="270" height="70" fill="#f5f5f5" stroke="#666666" stroke-width="3" pointer-events="all" style="fill: light-dark(rgb(245, 245, 245), rgb(26, 26, 26)); stroke: light-dark(rgb(102, 102, 102), rgb(149, 149, 149));"/>
+        </g>
+        <g>
+            <g transform="translate(-0.5 -0.5)">
+                <switch>
+                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                        <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 268px; height: 1px; padding-top: 1201px; margin-left: 671px;">
+                            <div style="box-sizing: border-box; font-size: 0; text-align: center; color: #333333; ">
+                                <div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: light-dark(#333333, #c1c1c1); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
+                                    <font data-font-src="https://fonts.googleapis.com/css?family=Roboto">
+                                        <span style="font-size: 24px;">
+                                            <font face="Roboto, sans-serif">
+                                                onemore.example.org
+                                            </font>
+                                        </span>
+                                        <br/>
+                                    </font>
+                                </div>
+                            </div>
+                        </div>
+                    </foreignObject>
+                    <text x="805" y="1205" fill="#333333" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle">
+                        onemore.example.org
+                    </text>
+                </switch>
+            </g>
+        </g>
+        <g>
+            <rect x="430" y="1141" width="220" height="70" fill="#ffffff" stroke="#000000" stroke-width="3" pointer-events="all" style="fill: light-dark(#ffffff, var(--ge-dark-color, #121212)); stroke: light-dark(rgb(0, 0, 0), rgb(237, 237, 237));"/>
+        </g>
+        <g>
+            <g transform="translate(-0.5 -0.5)">
+                <switch>
+                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                        <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 218px; height: 1px; padding-top: 1176px; margin-left: 431px;">
+                            <div style="box-sizing: border-box; font-size: 0; text-align: center; color: #000000; ">
+                                <div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
+                                    <font data-font-src="https://fonts.googleapis.com/css?family=Roboto">
+                                        <font face="Roboto, sans-serif">
+                                            <span style="font-size: 24px;">
+                                                IP:
+                                            </span>
+                                            <br/>
+                                            <span style="font-size: 24px;">
+                                                123.124.125.126
+                                            </span>
+                                        </font>
+                                        <br/>
+                                    </font>
+                                </div>
+                            </div>
+                        </div>
+                    </foreignObject>
+                    <text x="540" y="1180" fill="light-dark(#000000, #ffffff)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle">
+                        IP:...
+                    </text>
+                </switch>
+            </g>
+        </g>
+        <g>
+            <rect x="60" y="493" width="380" height="250" fill="#ffffff" stroke="#000000" stroke-width="4" pointer-events="all" style="fill: light-dark(#ffffff, var(--ge-dark-color, #121212)); stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/>
+        </g>
+        <g>
+            <g transform="translate(-0.5 -0.5)">
+                <switch>
+                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                        <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 378px; height: 1px; padding-top: 618px; margin-left: 61px;">
+                            <div style="box-sizing: border-box; font-size: 0; text-align: center; color: #000000; ">
+                                <div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; font-weight: bold; white-space: normal; word-wrap: normal; ">
+                                    <font style="font-size: 24px" face="Roboto, sans-serif">
+                                        https://someapp.example.com
+                                    </font>
+                                </div>
+                            </div>
+                        </div>
+                    </foreignObject>
+                    <text x="250" y="622" fill="light-dark(#000000, #ffffff)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle" font-weight="bold">
+                        https://someapp.example.com
+                    </text>
+                </switch>
+            </g>
+        </g>
+    </g>
+    <switch>
+        <g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/>
+        <a transform="translate(0,-5)" xlink:href="https://www.drawio.com/doc/faq/svg-export-text-problems" target="_blank">
+            <text text-anchor="middle" font-size="10px" x="50%" y="100%">
+                Text is not SVG - cannot display
+            </text>
+        </a>
+    </switch>
+</svg>
--- a/docs/en/docs/img/deployment/https/https08.svg
+++ b/docs/en/docs/img/deployment/https/https08.svg
--- a/docs/en/docs/img/tutorial/bigger-applications/package.drawio
+++ b/docs/en/docs/img/tutorial/bigger-applications/package.drawio
@ -1,43 +0,0 @@
-<mxfile host="65bd71144e" modified="2020-11-28T18:13:19.199Z" agent="5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Code/1.51.1 Chrome/83.0.4103.122 Electron/9.3.3 Safari/537.36" etag="KPHuXUeExV3PdWouu_3U" version="13.6.5">
-    <diagram id="zB4-QXJZ7ScUzHSLnJ1i" name="Page-1">
-        <mxGraphModel dx="1154" dy="780" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1920" pageHeight="1200" math="0" shadow="0" extFonts="Roboto^https://fonts.googleapis.com/css?family=Roboto|Roboto Mono, mono^https://fonts.googleapis.com/css?family=Roboto+Mono%2C+mono">
-            <root>
-                <mxCell id="0"/>
-                <mxCell id="1" parent="0"/>
-                <mxCell id="2" value="" style="rounded=0;whiteSpace=wrap;html=1;fontStyle=1;strokeWidth=4;" parent="1" vertex="1">
-                    <mxGeometry x="110" y="280" width="1350" height="620" as="geometry"/>
-                </mxCell>
-                <mxCell id="3" value="&lt;font style=&quot;font-size: 24px&quot; face=&quot;Roboto&quot;&gt;Package app&lt;br&gt;app/__init__.py&lt;/font&gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;strokeWidth=3;fontFamily=Roboto Mono, mono;FType=g;" parent="1" vertex="1">
-                    <mxGeometry x="635" y="310" width="300" height="80" as="geometry"/>
-                </mxCell>
-                <mxCell id="15" value="&lt;span style=&quot;font-family: &amp;#34;roboto&amp;#34; ; font-size: 24px&quot;&gt;Module app.main&lt;/span&gt;&lt;br style=&quot;font-family: &amp;#34;roboto&amp;#34; ; font-size: 24px&quot;&gt;&lt;span style=&quot;font-family: &amp;#34;roboto&amp;#34; ; font-size: 24px&quot;&gt;app/main.py&lt;/span&gt;" style="shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fixedSize=1;strokeWidth=3;" parent="1" vertex="1">
-                    <mxGeometry x="140" y="430" width="360" height="100" as="geometry"/>
-                </mxCell>
-                <mxCell id="16" value="&lt;span style=&quot;font-family: &amp;#34;roboto&amp;#34; ; font-size: 24px&quot;&gt;Module app.dependencies&lt;/span&gt;&lt;br style=&quot;font-family: &amp;#34;roboto&amp;#34; ; font-size: 24px&quot;&gt;&lt;span style=&quot;font-family: &amp;#34;roboto&amp;#34; ; font-size: 24px&quot;&gt;app/dependencies.py&lt;/span&gt;" style="shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fixedSize=1;strokeWidth=3;" parent="1" vertex="1">
-                    <mxGeometry x="130" y="565" width="370" height="100" as="geometry"/>
-                </mxCell>
-                <mxCell id="5" value="" style="rounded=0;whiteSpace=wrap;html=1;fontStyle=1;strokeWidth=4;" parent="1" vertex="1">
-                    <mxGeometry x="1030" y="430" width="400" height="260" as="geometry"/>
-                </mxCell>
-                <mxCell id="8" value="&lt;font style=&quot;font-size: 24px&quot; face=&quot;Roboto&quot;&gt;Subpackage app.internal&lt;br&gt;&lt;/font&gt;&lt;span style=&quot;font-family: &amp;#34;roboto&amp;#34; ; font-size: 24px&quot;&gt;app/internal/__init__.py&lt;/span&gt;&lt;font style=&quot;font-size: 24px&quot; face=&quot;Roboto&quot;&gt;&lt;br&gt;&lt;/font&gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;strokeWidth=3;fontFamily=Roboto Mono, mono;FType=g;" parent="1" vertex="1">
-                    <mxGeometry x="1083.8438461538462" y="460" width="292.3076923076923" height="80" as="geometry"/>
-                </mxCell>
-                <mxCell id="19" value="&lt;span style=&quot;font-family: &amp;#34;roboto&amp;#34; ; font-size: 24px&quot;&gt;Module app.internal.admin&lt;/span&gt;&lt;br style=&quot;font-family: &amp;#34;roboto&amp;#34; ; font-size: 24px&quot;&gt;&lt;span style=&quot;font-family: &amp;#34;roboto&amp;#34; ; font-size: 24px&quot;&gt;app/internal/admin.py&lt;/span&gt;" style="shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fixedSize=1;strokeWidth=3;" parent="1" vertex="1">
-                    <mxGeometry x="1050" y="570" width="360" height="100" as="geometry"/>
-                </mxCell>
-                <mxCell id="4" value="" style="rounded=0;whiteSpace=wrap;html=1;fontStyle=1;strokeWidth=4;" parent="1" vertex="1">
-                    <mxGeometry x="540" y="430" width="440" height="410" as="geometry"/>
-                </mxCell>
-                <mxCell id="7" value="&lt;font style=&quot;font-size: 24px&quot; face=&quot;Roboto&quot;&gt;Subpackage app.routers&lt;br&gt;app/routers/__init__.py&lt;br&gt;&lt;/font&gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;strokeWidth=3;fontFamily=Roboto Mono, mono;FType=g;" parent="1" vertex="1">
-                    <mxGeometry x="599.2307692307693" y="460" width="321.53846153846155" height="80" as="geometry"/>
-                </mxCell>
-                <mxCell id="17" value="&lt;span style=&quot;font-family: &amp;#34;roboto&amp;#34; ; font-size: 24px&quot;&gt;Module app.routers.items&lt;/span&gt;&lt;br style=&quot;font-family: &amp;#34;roboto&amp;#34; ; font-size: 24px&quot;&gt;&lt;span style=&quot;font-family: &amp;#34;roboto&amp;#34; ; font-size: 24px&quot;&gt;app/routers/items.py&lt;/span&gt;" style="shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fixedSize=1;strokeWidth=3;" parent="1" vertex="1">
-                    <mxGeometry x="580" y="570" width="360" height="100" as="geometry"/>
-                </mxCell>
-                <mxCell id="18" value="&lt;span style=&quot;font-family: &amp;#34;roboto&amp;#34; ; font-size: 24px&quot;&gt;Module app.routers.users&lt;/span&gt;&lt;br style=&quot;font-family: &amp;#34;roboto&amp;#34; ; font-size: 24px&quot;&gt;&lt;span style=&quot;font-family: &amp;#34;roboto&amp;#34; ; font-size: 24px&quot;&gt;app/routers/users.py&lt;/span&gt;" style="shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fixedSize=1;strokeWidth=3;" parent="1" vertex="1">
-                    <mxGeometry x="580" y="700" width="360" height="100" as="geometry"/>
-                </mxCell>
-            </root>
-        </mxGraphModel>
-    </diagram>
-</mxfile>
--- a/docs/en/docs/img/tutorial/bigger-applications/package.drawio.svg
+++ b/docs/en/docs/img/tutorial/bigger-applications/package.drawio.svg
--- a/docs/en/docs/img/tutorial/bigger-applications/package.svg
+++ b/docs/en/docs/img/tutorial/bigger-applications/package.svg
--- a/docs/en/docs/tutorial/bigger-applications.md
+++ b/docs/en/docs/tutorial/bigger-applications.md
@ -52,7 +52,7 @@ from app.routers import items
 * There's also a subdirectory `app/internal/` with another file `__init__.py`, so it's another "Python subpackage": `app.internal`.
 * And the file `app/internal/admin.py` is another submodule: `app.internal.admin`.

-<img src="/img/tutorial/bigger-applications/package.svg">
+<img src="/img/tutorial/bigger-applications/package.drawio.svg">

 The same file structure with comments:

@ -270,7 +270,7 @@ But that file doesn't exist, our dependencies are in a file at `app/dependencies

 Remember how our app/file structure looks like:

-<img src="/img/tutorial/bigger-applications/package.svg">
+<img src="/img/tutorial/bigger-applications/package.drawio.svg">

 ---

--- a/docs/es/docs/deployment/concepts.md
+++ b/docs/es/docs/deployment/concepts.md
@ -216,7 +216,7 @@ Este Proceso Administrador probablemente sería el que escuche en el **puerto**

 Esos worker processes serían los que ejecutan tu aplicación, realizarían los cálculos principales para recibir un **request** y devolver un **response**, y cargarían cualquier cosa que pongas en variables en RAM.

-<img src="/img/deployment/concepts/process-ram.svg">
+<img src="/img/deployment/concepts/process-ram.drawio.svg">

 Y por supuesto, la misma máquina probablemente tendría **otros procesos** ejecutándose también, aparte de tu aplicación.

--- a/docs/es/docs/deployment/https.md
+++ b/docs/es/docs/deployment/https.md
@ -85,7 +85,7 @@ Primero, el navegador consultaría con los **servidores DNS** cuál es la **IP d

 Los servidores DNS le dirían al navegador que use una **dirección IP** específica. Esa sería la dirección IP pública utilizada por tu servidor, que configuraste en los servidores DNS.

-<img src="/img/deployment/https/https01.svg">
+<img src="/img/deployment/https/https01.drawio.svg">

 ### Inicio del Handshake TLS

@ -93,7 +93,7 @@ El navegador luego se comunicaría con esa dirección IP en el **puerto 443** (e

 La primera parte de la comunicación es solo para establecer la conexión entre el cliente y el servidor y decidir las claves criptográficas que usarán, etc.

-<img src="/img/deployment/https/https02.svg">
+<img src="/img/deployment/https/https02.drawio.svg">

 Esta interacción entre el cliente y el servidor para establecer la conexión TLS se llama **handshake TLS**.

@ -111,7 +111,7 @@ Usando la **extensión SNI** discutida anteriormente, el TLS Termination Proxy v

 En este caso, usaría el certificado para `someapp.example.com`.

-<img src="/img/deployment/https/https03.svg">
+<img src="/img/deployment/https/https03.drawio.svg">

 El cliente ya **confía** en la entidad que generó ese certificado TLS (en este caso Let's Encrypt, pero lo veremos más adelante), por lo que puede **verificar** que el certificado sea válido.

@ -133,19 +133,19 @@ Ahora que el cliente y el servidor (específicamente el navegador y el TLS Termi

 Así que, el cliente envía un **request HTTPS**. Esto es simplemente un request HTTP a través de una conexión TLS encriptada.

-<img src="/img/deployment/https/https04.svg">
+<img src="/img/deployment/https/https04.drawio.svg">

 ### Desencriptar el Request

 El TLS Termination Proxy usaría la encriptación acordada para **desencriptar el request**, y transmitiría el **request HTTP simple (desencriptado)** al proceso que ejecuta la aplicación (por ejemplo, un proceso con Uvicorn ejecutando la aplicación FastAPI).

-<img src="/img/deployment/https/https05.svg">
+<img src="/img/deployment/https/https05.drawio.svg">

 ### Response HTTP

 La aplicación procesaría el request y enviaría un **response HTTP simple (sin encriptar)** al TLS Termination Proxy.

-<img src="/img/deployment/https/https06.svg">
+<img src="/img/deployment/https/https06.drawio.svg">

 ### Response HTTPS

@ -153,7 +153,7 @@ El TLS Termination Proxy entonces **encriptaría el response** usando la criptog

 Luego, el navegador verificaría que el response sea válido y encriptado con la clave criptográfica correcta, etc. Entonces **desencriptaría el response** y lo procesaría.

-<img src="/img/deployment/https/https07.svg">
+<img src="/img/deployment/https/https07.drawio.svg">

 El cliente (navegador) sabrá que el response proviene del servidor correcto porque está utilizando la criptografía que acordaron usando el **certificado HTTPS** anteriormente.

@ -163,7 +163,7 @@ En el mismo servidor (o servidores), podrían haber **múltiples aplicaciones**,

 Solo un proceso puede estar gestionando la IP y puerto específica (el TLS Termination Proxy en nuestro ejemplo) pero las otras aplicaciones/procesos pueden estar ejecutándose en el/los servidor(es) también, siempre y cuando no intenten usar la misma **combinación de IP pública y puerto**.

-<img src="/img/deployment/https/https08.svg">
+<img src="/img/deployment/https/https08.drawio.svg">

 De esa manera, el TLS Termination Proxy podría gestionar HTTPS y certificados para **múltiples dominios**, para múltiples aplicaciones, y luego transmitir los requests a la aplicación correcta en cada caso.

@ -173,7 +173,7 @@ En algún momento en el futuro, cada certificado **expiraría** (alrededor de 3

 Y entonces, habría otro programa (en algunos casos es otro programa, en algunos casos podría ser el mismo TLS Termination Proxy) que hablaría con Let's Encrypt y renovaría el/los certificado(s).

-<img src="/img/deployment/https/https.svg">
+<img src="/img/deployment/https/https.drawio.svg">

 Los **certificados TLS** están **asociados con un nombre de dominio**, no con una dirección IP.

--- a/docs/es/docs/tutorial/bigger-applications.md
+++ b/docs/es/docs/tutorial/bigger-applications.md
@ -52,7 +52,7 @@ from app.routers import items
 * También hay un subdirectorio `app/internal/` con otro archivo `__init__.py`, por lo que es otro "subpaquete de Python": `app.internal`.
 * Y el archivo `app/internal/admin.py` es otro submódulo: `app.internal.admin`.

-<img src="/img/tutorial/bigger-applications/package.svg">
+<img src="/img/tutorial/bigger-applications/package.drawio.svg">

 La misma estructura de archivos con comentarios:

@ -270,7 +270,7 @@ Pero ese archivo no existe, nuestras dependencias están en un archivo en `app/d

 Recuerda cómo se ve nuestra estructura de aplicación/archivo:

-<img src="/img/tutorial/bigger-applications/package.svg">
+<img src="/img/tutorial/bigger-applications/package.drawio.svg">

 ---

--- a/docs/ja/docs/deployment/concepts.md
+++ b/docs/ja/docs/deployment/concepts.md
@ -219,7 +219,7 @@ FastAPI アプリケーションでは、Uvicorn のようなサーバープロ

 これらのワーカー・プロセスは、アプリケーションを実行するものであり、**リクエスト**を受けて**レスポンス**を返すための主要な計算を行い、あなたが変数に入れたものは何でもRAMにロードします。

-<img src="/img/deployment/concepts/process-ram.svg">
+<img src="/img/deployment/concepts/process-ram.drawio.svg">

 そしてもちろん、同じマシンでは、あなたのアプリケーションとは別に、**他のプロセス**も実行されているでしょう。

--- a/docs/ja/docs/deployment/https.md
+++ b/docs/ja/docs/deployment/https.md
@ -92,7 +92,7 @@ DNSサーバーでは、**取得したドメイン**をあなたのサーバー

 DNSサーバーは、ブラウザに特定の**IPアドレス**を使用するように指示します。このIPアドレスは、DNSサーバーで設定した、あなたのサーバーが使用するパブリックIPアドレスになります。

-<img src="/img/deployment/https/https01.svg">
+<img src="/img/deployment/https/https01.drawio.svg">

 ### TLS Handshake の開始

@ -100,7 +100,7 @@ DNSサーバーは、ブラウザに特定の**IPアドレス**を使用する

 通信の最初の部分は、クライアントとサーバー間の接続を確立し、使用する暗号鍵などを決めるだけです。

-<img src="/img/deployment/https/https02.svg">
+<img src="/img/deployment/https/https02.drawio.svg">

 TLS接続を確立するためのクライアントとサーバー間のこのやりとりは、**TLSハンドシェイク**と呼ばれます。

@ -120,7 +120,7 @@ TLS Termination Proxyは、1つ以上の**TLS証明書**（HTTPS証明書）に

 今回は、`someapp.example.com`の証明書を使うことになります。

-<img src="/img/deployment/https/https03.svg">
+<img src="/img/deployment/https/https03.drawio.svg">

 クライアントは、そのTLS証明書を生成したエンティティ（この場合はLet's Encryptですが、これについては後述します）をすでに**信頼**しているため、その証明書が有効であることを**検証**することができます。

@ -142,19 +142,19 @@ TLS Termination Proxyは、1つ以上の**TLS証明書**（HTTPS証明書）に

 そこで、クライアントは**HTTPSリクエスト**を送信します。これは、暗号化されたTLSコネクションを介した単なるHTTPリクエストです。

-<img src="/img/deployment/https/https04.svg">
+<img src="/img/deployment/https/https04.drawio.svg">

 ### リクエストの復号化

 TLS Termination Proxy は、合意が取れている暗号化を使用して、**リクエストを復号化**し、**プレーン (復号化された) HTTP リクエスト** をアプリケーションを実行しているプロセス (例えば、FastAPI アプリケーションを実行している Uvicorn を持つプロセス) に送信します。

-<img src="/img/deployment/https/https05.svg">
+<img src="/img/deployment/https/https05.drawio.svg">

 ### HTTP レスポンス

 アプリケーションはリクエストを処理し、**プレーン(暗号化されていない)HTTPレスポンス** をTLS Termination Proxyに送信します。

-<img src="/img/deployment/https/https06.svg">
+<img src="/img/deployment/https/https06.drawio.svg">

 ### HTTPS レスポンス

@ -162,7 +162,7 @@ TLS Termination Proxyは次に、事前に合意が取れている暗号(`someap

 その後ブラウザでは、レスポンスが有効で正しい暗号キーで暗号化されていることなどを検証します。そして、ブラウザはレスポンスを**復号化**して処理します。

-<img src="/img/deployment/https/https07.svg">
+<img src="/img/deployment/https/https07.drawio.svg">

 クライアント（ブラウザ）は、レスポンスが正しいサーバーから来たことを知ることができます。 なぜなら、そのサーバーは、以前に**HTTPS証明書**を使って合意した暗号を使っているからです。

@ -172,7 +172,7 @@ TLS Termination Proxyは次に、事前に合意が取れている暗号(`someap

 特定のIPとポート（この例ではTLS Termination Proxy）を扱うことができるのは1つのプロセスだけですが、他のアプリケーション/プロセスも、同じ**パブリックIPとポート**の組み合わせを使用しようとしない限り、サーバー上で実行することができます。

-<img src="/img/deployment/https/https08.svg">
+<img src="/img/deployment/https/https08.drawio.svg">

 そうすれば、TLS Termination Proxy は、**複数のドメイン**や複数のアプリケーションのHTTPSと証明書を処理し、それぞれのケースで適切なアプリケーションにリクエストを送信することができます。

@ -182,7 +182,7 @@ TLS Termination Proxyは次に、事前に合意が取れている暗号(`someap

 その後、Let's Encryptと通信する別のプログラム（別のプログラムである場合もあれば、同じTLS Termination Proxyである場合もある）によって、証明書を更新します。

-<img src="/img/deployment/https/https.svg">
+<img src="/img/deployment/https/https.drawio.svg">

 **TLS証明書**は、IPアドレスではなく、**ドメイン名に関連付けられて**います。

--- a/docs/pt/docs/deployment/concepts.md
+++ b/docs/pt/docs/deployment/concepts.md
@ -216,7 +216,7 @@ Este Processo de Gerenciador provavelmente seria o que escutaria na **porta** no

 Esses processos de trabalho seriam aqueles que executariam seu aplicativo, eles executariam os cálculos principais para receber uma **solicitação** e retornar uma **resposta**, e carregariam qualquer coisa que você colocasse em variáveis na RAM.

-<img src="/img/deployment/concepts/process-ram.svg">
+<img src="/img/deployment/concepts/process-ram.drawio.svg">

 E, claro, a mesma máquina provavelmente teria **outros processos** em execução, além do seu aplicativo.

--- a/docs/pt/docs/deployment/https.md
+++ b/docs/pt/docs/deployment/https.md
@ -85,7 +85,7 @@ Primeiro, o navegador iria verificar com os **servidores DNS** qual o **IP do do

 Os servidores DNS iriam informar o navegador para utilizar algum **endereço IP** específico. Esse seria o endereço IP público em uso no seu servidor, que você configurou nos servidores DNS.

-<img src="/img/deployment/https/https01.svg">
+<img src="/img/deployment/https/https01.drawio.svg">

 ### Início do Handshake TLS

@ -93,7 +93,7 @@ O navegador então irá comunicar-se com esse endereço IP na **porta 443** (a p

 A primeira parte dessa comunicação é apenas para estabelecer a conexão entre o cliente e o servidor e para decidir as chaves criptográficas a serem utilizadas, etc.

-<img src="/img/deployment/https/https02.svg">
+<img src="/img/deployment/https/https02.drawio.svg">

 Esse interação entre o cliente e o servidor para estabelecer uma conexão TLS é chamada de **Handshake TLS**.

@ -111,7 +111,7 @@ Utilizando a **extensão SNI** discutida acima, o Proxy de Terminação TLS iria

 Nesse caso, ele usaria o certificado para `someapp.example.com`.

-<img src="/img/deployment/https/https03.svg">
+<img src="/img/deployment/https/https03.drawio.svg">

 O cliente já **confia** na entidade que gerou o certificado TLS (nesse caso, o Let's Encrypt, mas veremos sobre isso mais tarde), então ele pode **verificar** que o certificado é válido.

@ -133,19 +133,19 @@ Agora que o cliente e servidor (especialmente o navegador e o Proxy de Terminaç

 Então, o cliente envia uma **solicitação HTTPS**. Que é apenas uma solicitação HTTP sobre uma conexão TLS encriptada.

-<img src="/img/deployment/https/https04.svg">
+<img src="/img/deployment/https/https04.drawio.svg">

 ### Desencriptando a Solicitação

 O Proxy de Terminação TLS então usaria a encriptação combinada para **desencriptar a solicitação**, e transmitiria a **solicitação básica (desencriptada)** para o processo executando a aplicação (por exemplo, um processo com Uvicorn executando a aplicação FastAPI).

-<img src="/img/deployment/https/https05.svg">
+<img src="/img/deployment/https/https05.drawio.svg">

 ### Resposta HTTP

 A aplicação processaria a solicitação e retornaria uma **resposta HTTP básica (não encriptada)** para o Proxy de Terminação TLS.

-<img src="/img/deployment/https/https06.svg">
+<img src="/img/deployment/https/https06.drawio.svg">

 ### Resposta HTTPS

@ -153,7 +153,7 @@ O Proxy de Terminação TLS iria **encriptar a resposta** utilizando a criptogra

 No próximo passo, o navegador verifica que a resposta é válida e encriptada com a chave criptográfica correta, etc. E depois **desencripta a resposta** e a processa.

-<img src="/img/deployment/https/https07.svg">
+<img src="/img/deployment/https/https07.drawio.svg">

 O cliente (navegador) saberá que a resposta vem do servidor correto por que ela usa a criptografia que foi combinada entre eles usando o **certificado HTTPS** anterior.

@ -163,7 +163,7 @@ Podem existir **múltiplas aplicações** em execução no mesmo servidor (ou se

 Apenas um processo pode estar vinculado a um IP e porta (o Proxy de Terminação TLS, por exemplo), mas outras aplicações/processos também podem estar em execução no(s) servidor(es), desde que não tentem usar a mesma **combinação de IP público e porta**.

-<img src="/img/deployment/https/https08.svg">
+<img src="/img/deployment/https/https08.drawio.svg">

 Dessa forma, o Proxy de Terminação TLS pode gerenciar o HTTPS e os certificados de **múltiplos domínios**, para múltiplas aplicações, e então transmitir as requisições para a aplicação correta em cada caso.

@ -173,7 +173,7 @@ Em algum momento futuro, cada certificado irá **expirar** (aproximadamente 3 me

 E então, haverá outro programa (em alguns casos pode ser o próprio Proxy de Terminação TLS) que irá interagir com o Let's Encrypt e renovar o(s) certificado(s).

-<img src="/img/deployment/https/https.svg">
+<img src="/img/deployment/https/https.drawio.svg">

 Os **certificados TLS** são **associados com um nome de domínio**, e não a um endereço IP.

--- a/docs/pt/docs/tutorial/bigger-applications.md
+++ b/docs/pt/docs/tutorial/bigger-applications.md
@ -52,7 +52,7 @@ from app.routers import items
 * Há também um subdiretório `app/internal/` com outro arquivo `__init__.py`, então ele é outro "subpacote Python":`app.internal`.
 * E o arquivo `app/internal/admin.py` é outro submódulo: `app.internal.admin`.

-<img src="/img/tutorial/bigger-applications/package.svg">
+<img src="/img/tutorial/bigger-applications/package.drawio.svg">

 A mesma estrutura de arquivos com comentários:

@ -270,7 +270,7 @@ Mas esse arquivo não existe, nossas dependências estão em um arquivo em `app/

 Lembre-se de como nossa estrutura app/file se parece:

-<img src="/img/tutorial/bigger-applications/package.svg">
+<img src="/img/tutorial/bigger-applications/package.drawio.svg">

 ---

--- a/docs/ru/docs/deployment/concepts.md
+++ b/docs/ru/docs/deployment/concepts.md
@ -216,7 +216,7 @@

 Каждый из этих процессов будет запускать ваше приложение для обработки полученного **запроса** и возвращения вычисленного **ответа** и они будут использовать оперативную память.

-<img src="/img/deployment/concepts/process-ram.svg">
+<img src="/img/deployment/concepts/process-ram.drawio.svg">

 Безусловно, на этом же сервере будут работать и **другие процессы**, которые не относятся к вашему приложению.

--- a/docs/ru/docs/deployment/https.md
+++ b/docs/ru/docs/deployment/https.md
@ -92,7 +92,7 @@

 DNS-сервера присылают браузеру определённый **IP-адрес**, тот самый публичный IP-адрес вашего сервера, который вы указали в ресурсной "записи А" при настройке.

-<img src="/img/deployment/https/https01.svg">
+<img src="/img/deployment/https/https01.drawio.svg">

 ### Рукопожатие TLS

@ -100,7 +100,7 @@ DNS-сервера присылают браузеру определённый

 Первым шагом будет установление соединения между клиентом (браузером) и сервером и выбор криптографического ключа (для шифрования).

-<img src="/img/deployment/https/https02.svg">
+<img src="/img/deployment/https/https02.drawio.svg">

 Эта часть клиент-серверного взаимодействия устанавливает TLS-соединение и называется **TLS-рукопожатием**.

@ -118,7 +118,7 @@ DNS-сервера присылают браузеру определённый

 То есть будет выбран сертификат для домена `someapp.example.com`.

-<img src="/img/deployment/https/https03.svg">
+<img src="/img/deployment/https/https03.drawio.svg">

 Клиент уже **доверяет** тому, кто выдал этот TLS-сертификат (в нашем случае - Let's Encrypt, но мы ещё обсудим это), потому может **проверить**, действителен ли полученный от сервера сертификат.

@ -140,19 +140,19 @@ DNS-сервера присылают браузеру определённый

 Так клиент отправляет **HTTPS-запрос**. То есть обычный HTTP-запрос, но через зашифрованное TLS-содинение.

-<img src="/img/deployment/https/https04.svg">
+<img src="/img/deployment/https/https04.drawio.svg">

 ### Расшифровка запроса

 Прокси-сервер, используя согласованный с клиентом ключ, расшифрует полученный **зашифрованный запрос** и передаст **обычный (незашифрованный) HTTP-запрос** процессу, запускающему приложение (например, процессу Uvicorn запускающему приложение FastAPI).

-<img src="/img/deployment/https/https05.svg">
+<img src="/img/deployment/https/https05.drawio.svg">

 ### HTTP-ответ

 Приложение обработает запрос и вернёт **обычный (незашифрованный) HTTP-ответ** прокси-серверу.

-<img src="/img/deployment/https/https06.svg">
+<img src="/img/deployment/https/https06.drawio.svg">

 ### HTTPS-ответ

@ -160,7 +160,7 @@ DNS-сервера присылают браузеру определённый

 Наконец, браузер проверит ответ, в том числе, что тот зашифрован с нужным  ключом, **расшифрует его** и обработает.

-<img src="/img/deployment/https/https07.svg">
+<img src="/img/deployment/https/https07.drawio.svg">

 Клиент (браузер) знает, что ответ пришёл от правильного сервера, так как использует методы шифрования, согласованные ими раннее через **HTTPS-сертификат**.

@ -171,7 +171,7 @@ DNS-сервера присылают браузеру определённый
 Напомню, что только один процесс (например, прокси-сервер) может прослушивать определённый порт определённого IP-адреса.
 Но другие процессы и приложения тоже могут работать на этом же сервере (серверах), если они не пытаются использовать уже занятую **комбинацию IP-адреса и порта** (сокет).

-<img src="/img/deployment/https/https08.svg">
+<img src="/img/deployment/https/https08.drawio.svg">

 Таким образом, сервер завершения TLS может обрабатывать HTTPS-запросы и использовать сертификаты для **множества доменов** или приложений и передавать запросы правильным адресатам (другим приложениям).

@ -181,7 +181,7 @@ DNS-сервера присылают браузеру определённый

 Когда это произойдёт, можно запустить другую программу, которая подключится к Let's Encrypt и обновит сертификат(ы). Существуют прокси-серверы, которые могут сделать это действие самостоятельно.

-<img src="/img/deployment/https/https.svg">
+<img src="/img/deployment/https/https.drawio.svg">

 **TLS-сертификаты** не привязаны к IP-адресу, но **связаны с именем домена**.

--- a/docs/ru/docs/tutorial/bigger-applications.md
+++ b/docs/ru/docs/tutorial/bigger-applications.md
@ -52,7 +52,7 @@ from app.routers import items
 * Подкаталог `app/internal/`, содержащий файл `__init__.py`, является ещё одним суб-пакетом: `app.internal`.
 * А файл `app/internal/admin.py` является ещё одним суб-модулем: `app.internal.admin`.

-<img src="/img/tutorial/bigger-applications/package.svg">
+<img src="/img/tutorial/bigger-applications/package.drawio.svg">

 Та же самая файловая структура приложения, но с комментариями:

@ -269,7 +269,7 @@ from .dependencies import get_token_header

 Вспомните, как выглядит файловая структура нашего приложения:

-<img src="/img/tutorial/bigger-applications/package.svg">
+<img src="/img/tutorial/bigger-applications/package.drawio.svg">

 ---

--- a/docs/zh/docs/deployment/concepts.md
+++ b/docs/zh/docs/deployment/concepts.md
@ -220,7 +220,7 @@

 这些工作进程将是运行您的应用程序的进程，它们将执行主要计算以接收 **请求** 并返回 **响应**，并且它们将加载您放入 RAM 中的变量中的任何内容。

-<img src="/img/deployment/concepts/process-ram.svg">
+<img src="/img/deployment/concepts/process-ram.drawio.svg">

 当然，除了您的应用程序之外，同一台机器可能还运行**其他进程**。

--- a/docs/zh/docs/deployment/https.md
+++ b/docs/zh/docs/deployment/https.md
@ -86,7 +86,7 @@

 DNS 服务器会告诉浏览器使用某个特定的 **IP 地址**。 这将是你在 DNS 服务器中为你的服务器配置的公共 IP 地址。

-<img src="/img/deployment/https/https01.svg">
+<img src="/img/deployment/https/https01.drawio.svg">

 ### TLS 握手开始

@ -94,7 +94,7 @@ DNS 服务器会告诉浏览器使用某个特定的 **IP 地址**。 这将是

 通信的第一部分只是建立客户端和服务器之间的连接并决定它们将使用的加密密钥等。

-<img src="/img/deployment/https/https02.svg">
+<img src="/img/deployment/https/https02.drawio.svg">

 客户端和服务器之间建立 TLS 连接的过程称为 **TLS 握手**。

@ -112,7 +112,7 @@ TLS 终止代理可以访问一个或多个 **TLS 证书**（HTTPS 证书）。

 在这种情况下，它将使用`someapp.example.com`的证书。

-<img src="/img/deployment/https/https03.svg">
+<img src="/img/deployment/https/https03.drawio.svg">

 客户端已经**信任**生成该 TLS 证书的实体（在本例中为 Let's Encrypt，但我们稍后会看到），因此它可以**验证**该证书是否有效。

@ -134,19 +134,19 @@ TLS 终止代理可以访问一个或多个 **TLS 证书**（HTTPS 证书）。

 接下来，客户端发送一个 **HTTPS 请求**。 这其实只是一个通过 TLS 加密连接的 HTTP 请求。

-<img src="/img/deployment/https/https04.svg">
+<img src="/img/deployment/https/https04.drawio.svg">

 ### 解密请求

 TLS 终止代理将使用协商好的加密算法**解密请求**，并将**（解密的）HTTP 请求**传输到运行应用程序的进程（例如运行 FastAPI 应用的 Uvicorn 进程）。

-<img src="/img/deployment/https/https05.svg">
+<img src="/img/deployment/https/https05.drawio.svg">

 ### HTTP 响应

 应用程序将处理请求并向 TLS 终止代理发送**（未加密）HTTP 响应**。

-<img src="/img/deployment/https/https06.svg">
+<img src="/img/deployment/https/https06.drawio.svg">

 ### HTTPS 响应

@ -154,7 +154,7 @@ TLS 终止代理将使用协商好的加密算法**解密请求**，并将**（

 接下来，浏览器将验证响应是否有效和是否使用了正确的加密密钥等。然后它会**解密响应**并处理它。

-<img src="/img/deployment/https/https07.svg">
+<img src="/img/deployment/https/https07.drawio.svg">

 客户端（浏览器）将知道响应来自正确的服务器，因为它使用了他们之前使用 **HTTPS 证书** 协商出的加密算法。

@ -164,7 +164,7 @@ TLS 终止代理将使用协商好的加密算法**解密请求**，并将**（

 只有一个进程可以处理特定的 IP 和端口（在我们的示例中为 TLS 终止代理），但其他应用程序/进程也可以在服务器上运行，只要它们不尝试使用相同的 **公共 IP 和端口的组合**。

-<img src="/img/deployment/https/https08.svg">
+<img src="/img/deployment/https/https08.drawio.svg">

 这样，TLS 终止代理就可以为多个应用程序处理**多个域名**的 HTTPS 和证书，然后在每种情况下将请求传输到正确的应用程序。

@ -174,7 +174,7 @@ TLS 终止代理将使用协商好的加密算法**解密请求**，并将**（

 然后，会有另一个程序（在某些情况下是另一个程序，在某些情况下可能是同一个 TLS 终止代理）与 Let's Encrypt 通信并更新证书。

-<img src="/img/deployment/https/https.svg">
+<img src="/img/deployment/https/https.drawio.svg">

 **TLS 证书** **与域名相关联**，而不是与 IP 地址相关联。

--- a/docs/zh/docs/tutorial/bigger-applications.md
+++ b/docs/zh/docs/tutorial/bigger-applications.md
@ -52,7 +52,7 @@ from app.routers import items
 * 还有一个子目录 `app/internal/` 包含另一个 `__init__.py` 文件，因此它是又一个「Python 子包」：`app.internal`。
 * `app/internal/admin.py` 是另一个子模块：`app.internal.admin`。

-<img src="https://fastapi.tiangolo.com/img/tutorial/bigger-applications/package.svg">
+<img src="https://fastapi.tiangolo.com/img/tutorial/bigger-applications/package.drawio.svg">

 带有注释的同一文件结构：

@ -244,7 +244,7 @@ from .dependencies import get_token_header

 请记住我们的程序/文件结构是怎样的：

-<img src="https://fastapi.tiangolo.com/img/tutorial/bigger-applications/package.svg">
+<img src="https://fastapi.tiangolo.com/img/tutorial/bigger-applications/package.drawio.svg">

 ---