Merge branch 'master' into remove-deps-cache-copy

2 months ago · 269a6b59d8
66 changed files with 5897 additions and 2397 deletions
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@ -14,7 +14,7 @@ repos:
    -   id: end-of-file-fixer
    -   id: trailing-whitespace
 -   repo: https://github.com/astral-sh/ruff-pre-commit
-    rev: v0.11.8
+    rev: v0.11.10
    hooks:
    -   id: ruff
        args:
--- a/README.md
+++ b/README.md
@ -51,17 +51,17 @@ The key features are:
 <a href="https://www.porter.run" target="_blank" title="Deploy FastAPI on AWS with a few clicks"><img src="https://fastapi.tiangolo.com/img/sponsors/porter.png"></a>
 <a href="https://github.com/scalar/scalar/?utm_source=fastapi&utm_medium=website&utm_campaign=main-badge" target="_blank" title="Scalar: Beautiful Open-Source API References from Swagger/OpenAPI files"><img src="https://fastapi.tiangolo.com/img/sponsors/scalar.svg"></a>
 <a href="https://www.propelauth.com/?utm_source=fastapi&utm_campaign=1223&utm_medium=mainbadge" target="_blank" title="Auth, user management and more for your B2B product"><img src="https://fastapi.tiangolo.com/img/sponsors/propelauth.png"></a>
-<a href="https://www.mongodb.com/developer/languages/python/python-quickstart-fastapi/?utm_campaign=fastapi_framework&utm_source=fastapi_sponsorship&utm_medium=web_referral" target="_blank" title="Simplify Full Stack Development with FastAPI & MongoDB"><img src="https://fastapi.tiangolo.com/img/sponsors/mongodb.png"></a>
 <a href="https://zuplo.link/fastapi-gh" target="_blank" title="Zuplo: Deploy, Secure, Document, and Monetize your FastAPI"><img src="https://fastapi.tiangolo.com/img/sponsors/zuplo.png"></a>
 <a href="https://liblab.com?utm_source=fastapi" target="_blank" title="liblab - Generate SDKs from FastAPI"><img src="https://fastapi.tiangolo.com/img/sponsors/liblab.png"></a>
 <a href="https://docs.render.com/deploy-fastapi?utm_source=deploydoc&utm_medium=referral&utm_campaign=fastapi" target="_blank" title="Deploy & scale any full-stack web app on Render. Focus on building apps, not infra."><img src="https://fastapi.tiangolo.com/img/sponsors/render.svg"></a>
 <a href="https://www.coderabbit.ai/?utm_source=fastapi&utm_medium=badge&utm_campaign=fastapi" target="_blank" title="Cut Code Review Time & Bugs in Half with CodeRabbit"><img src="https://fastapi.tiangolo.com/img/sponsors/coderabbit.png"></a>
-<a href="https://github.com/deepset-ai/haystack/" target="_blank" title="Build powerful search from composable, open source building blocks"><img src="https://fastapi.tiangolo.com/img/sponsors/haystack-fastapi.svg"></a>
+<a href="https://subtotal.com/?utm_source=fastapi&utm_medium=sponsorship&utm_campaign=open-source" target="_blank" title="The Gold Standard in Retail Account Linking"><img src="https://fastapi.tiangolo.com/img/sponsors/subtotal.svg"></a>
 <a href="https://databento.com/" target="_blank" title="Pay as you go for market data"><img src="https://fastapi.tiangolo.com/img/sponsors/databento.svg"></a>
 <a href="https://speakeasy.com?utm_source=fastapi+repo&utm_medium=github+sponsorship" target="_blank" title="SDKs for your API | Speakeasy"><img src="https://fastapi.tiangolo.com/img/sponsors/speakeasy.png"></a>
 <a href="https://www.svix.com/" target="_blank" title="Svix - Webhooks as a service"><img src="https://fastapi.tiangolo.com/img/sponsors/svix.svg"></a>
 <a href="https://www.stainlessapi.com/?utm_source=fastapi&utm_medium=referral" target="_blank" title="Stainless | Generate best-in-class SDKs"><img src="https://fastapi.tiangolo.com/img/sponsors/stainless.png"></a>
 <a href="https://www.permit.io/blog/implement-authorization-in-fastapi?utm_source=github&utm_medium=referral&utm_campaign=fastapi" target="_blank" title="Fine-Grained Authorization for FastAPI"><img src="https://fastapi.tiangolo.com/img/sponsors/permit.png"></a>
+<a href="https://www.interviewpal.com/?utm_source=fastapi&utm_medium=open-source&utm_campaign=dev-hiring" target="_blank" title="InterviewPal - AI Interview Coach for Engineers and Devs"><img src="https://fastapi.tiangolo.com/img/sponsors/interviewpal.png"></a>

 <!-- /sponsors -->

--- 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/data/sponsors.yml
+++ b/docs/en/data/sponsors.yml
@ -14,9 +14,6 @@ gold:
  - url: https://www.propelauth.com/?utm_source=fastapi&utm_campaign=1223&utm_medium=mainbadge
    title: Auth, user management and more for your B2B product
    img: https://fastapi.tiangolo.com/img/sponsors/propelauth.png
-  - url: https://www.mongodb.com/developer/languages/python/python-quickstart-fastapi/?utm_campaign=fastapi_framework&utm_source=fastapi_sponsorship&utm_medium=web_referral
-    title: Simplify Full Stack Development with FastAPI & MongoDB
-    img: https://fastapi.tiangolo.com/img/sponsors/mongodb.png
  - url: https://zuplo.link/fastapi-gh
    title: 'Zuplo: Deploy, Secure, Document, and Monetize your FastAPI'
    img: https://fastapi.tiangolo.com/img/sponsors/zuplo.png
@ -29,10 +26,10 @@ gold:
  - url: https://www.coderabbit.ai/?utm_source=fastapi&utm_medium=badge&utm_campaign=fastapi
    title: Cut Code Review Time & Bugs in Half with CodeRabbit
    img: https://fastapi.tiangolo.com/img/sponsors/coderabbit.png
+  - url: https://subtotal.com/?utm_source=fastapi&utm_medium=sponsorship&utm_campaign=open-source
+    title: The Gold Standard in Retail Account Linking
+    img: https://fastapi.tiangolo.com/img/sponsors/subtotal.svg
 silver:
-  - url: https://github.com/deepset-ai/haystack/
-    title: Build powerful search from composable, open source building blocks
-    img: https://fastapi.tiangolo.com/img/sponsors/haystack-fastapi.svg
  - url: https://databento.com/
    title: Pay as you go for market data
    img: https://fastapi.tiangolo.com/img/sponsors/databento.svg
@ -48,6 +45,9 @@ silver:
  - url: https://www.permit.io/blog/implement-authorization-in-fastapi?utm_source=github&utm_medium=referral&utm_campaign=fastapi
    title: Fine-Grained Authorization for FastAPI
    img: https://fastapi.tiangolo.com/img/sponsors/permit.png
+  - url: https://www.interviewpal.com/?utm_source=fastapi&utm_medium=open-source&utm_campaign=dev-hiring
+    title: InterviewPal - AI Interview Coach for Engineers and Devs
+    img: https://fastapi.tiangolo.com/img/sponsors/interviewpal.png
 bronze:
  - url: https://www.exoflare.com/open-source/?utm_source=FastAPI&utm_campaign=open_source
    title: Biosecurity risk assessments made easy.
--- a/docs/en/data/sponsors_badge.yml
+++ b/docs/en/data/sponsors_badge.yml
@ -38,3 +38,7 @@ logins:
  - render-sponsorships
  - renderinc
  - stainless-api
+  - snapit-cypher
+  - coderabbitai
+  - permitio
+  - LambdaTest-Inc
--- 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/sponsors/interviewpal.png
+++ b/docs/en/docs/img/sponsors/interviewpal.png
--- a/docs/en/docs/img/sponsors/subtotal-banner.svg
+++ b/docs/en/docs/img/sponsors/subtotal-banner.svg
--- a/docs/en/docs/img/sponsors/subtotal.svg
+++ b/docs/en/docs/img/sponsors/subtotal.svg
@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="240px" height="100px" viewBox="0 0 240 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>sponsorship-badge</title>
+    <g id="sponsorship-badge" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect fill="#21002A" x="0" y="0" width="240" height="100"></rect>
+        <g id="Logo-Color-White" transform="translate(25.3346, 37.0438)" fill-rule="nonzero">
+            <g id="subtotal-white" transform="translate(-0, 0)">
+                <path d="M35.4635593,9.25233359 L35.4547458,22.6797912 C35.4547458,22.6797912 28.9172881,15.7964014 23.7327119,13.7252149 L23.7327119,20.903859 C23.7283051,24.4006387 20.7845763,26.1236895 17.7328814,26.0972488 C11.6030508,26.0972488 2.38186441,19.5553844 -3.13120528e-15,16.8474183 L0.00661016949,3.4221641 C0.00661016949,3.4221641 6.5440678,10.3011472 11.7286441,12.3723336 L11.7330508,5.19368953 C11.7330508,1.69690986 14.6767797,-0.026140983 17.7328814,0.00029969496 C23.8583051,0.00029969496 33.0794915,6.5421641 35.4613559,9.2501302" id="Path" fill="#DE4AE4"></path>
+                <path d="M49.5233898,23.034537 L49.5233898,17.6164014 C51.5857627,19.1257234 53.9301695,20.0797912 55.9947458,20.0797912 C58.059322,20.0797912 59.1081356,19.1257234 59.1081356,17.9557234 C59.1081356,14.7233505 49.1223729,16.0475878 49.1223729,8.44148614 C49.1223729,4.13165563 52.1740678,1.60657088 56.8849153,1.60657088 C59.1323729,1.60657088 61.6001695,2.22131664 63.3232203,3.29877427 L63.3232203,8.62436749 C61.7522034,7.3001302 59.5311864,6.50029969 57.5613559,6.50029969 C55.8052542,6.50029969 54.4457627,7.20979122 54.4457627,8.34674037 C54.4457627,11.5791133 64.4315254,10.254876 64.4315254,17.8609777 C64.4315254,22.1708082 61.2255932,25.0043675 56.329661,25.0043675 C53.8354237,25.0043675 51.2133898,24.3279268 49.5211864,23.034537" id="Path" fill="#FFFFFF"></path>
+                <path d="M66.8045763,2.09792681 L72.1015254,2.09792681 L72.1015254,16.0013166 C72.1015254,18.8018251 73.399322,20.0797912 75.2457627,20.0797912 C77.0922034,20.0797912 78.3591525,18.7599607 78.3591525,16.0013166 L78.3591525,2.09792681 L83.6538983,2.09792681 L83.6538983,15.9175878 C83.6538983,22.0980963 80.0469492,25.0043675 75.1818644,25.0043675 C70.3167797,25.0043675 66.8023729,22.0364014 66.8023729,15.9175878 L66.8023729,2.09792681 L66.8045763,2.09792681 Z" id="Path" fill="#FFFFFF"></path>
+                <path d="M86.919322,2.1001302 L94.2037288,2.1001302 C100.320339,2.1001302 102.45322,4.55911325 102.466441,8.04046919 C102.473051,10.124876 101.571864,11.4579268 100.287288,12.3304692 C102.444407,13.6789438 103.98678,15.5892827 103.98678,18.3413166 C103.98678,22.0364014 101.759153,24.5130116 96.2440678,24.5130116 L86.9215254,24.5130116 L86.9215254,2.1001302 L86.919322,2.1001302 Z M95.0961017,6.62368953 L92.2140678,6.62368953 L92.2140678,11.8236895 C92.2140678,11.8236895 97.5727119,10.9070794 97.5727119,8.48114715 C97.5727119,7.18114715 96.5789831,6.62368953 95.0961017,6.62368953 Z M96.8433898,14.4589438 C96.8433898,14.4589438 94.1045763,15.5297912 92.2118644,15.9991133 L92.2118644,19.9872488 L95.4288136,19.9872488 C97.7005085,19.9872488 98.7581356,19.0750455 98.7581356,17.5018251 C98.7581356,16.0608082 97.8811864,15.1530116 96.8411864,14.4589438 L96.8433898,14.4589438 Z" id="Shape" fill="#FFFFFF"></path>
+                <polygon id="Path" fill="#FFFFFF" points="109.312373 6.62589292 104.171864 6.62589292 104.171864 2.1001302 119.657288 2.1001302 119.657288 6.62589292 114.607119 6.62589292 114.607119 24.5130116 109.312373 24.5130116"></polygon>
+                <path d="M120.452712,13.3065709 C120.452712,5.91640139 124.055254,1.60657088 130.182881,1.60657088 C136.310508,1.60657088 139.910847,5.91640139 139.910847,13.3065709 C139.910847,20.6967404 136.308305,25.0065709 130.182881,25.0065709 C124.057458,25.0065709 120.452712,20.6967404 120.452712,13.3065709 M134.552203,13.3065709 C134.552203,8.96589292 133.042881,6.53335054 130.180678,6.53335054 C127.318475,6.53335054 125.809153,8.96589292 125.809153,13.3065709 C125.809153,17.6472488 127.318475,20.0797912 130.180678,20.0797912 C133.042881,20.0797912 134.552203,17.6472488 134.552203,13.3065709" id="Shape" fill="#FFFFFF"></path>
+                <polygon id="Path" fill="#FFFFFF" points="145.84678 6.62589292 140.706271 6.62589292 140.706271 2.1001302 156.191695 2.1001302 156.191695 6.62589292 151.141525 6.62589292 151.141525 24.5130116 145.84678 24.5130116"></polygon>
+                <polygon id="Path" fill="#FFFFFF" points="176.211695 2.1001302 181.506441 2.1001302 181.506441 19.9872488 188.62339 19.9872488 188.62339 24.5130116 176.211695 24.5130116"></polygon>
+                <path d="M168.312542,24.5130116 L173.609492,24.5130116 C173.609492,15.6928421 171.194576,7.33758783 167.605254,2.09792681 L161.955763,2.09792681 C158.366441,7.33538444 155.951525,15.6928421 155.951525,24.5130116 L161.248475,24.5130116 C161.248475,22.9243675 161.318983,21.3467404 161.457797,19.784537 L168.10322,19.784537 C168.242034,21.3489438 168.312542,22.9265709 168.312542,24.5130116 Z M162.039492,15.4130116 C162.61678,12.1982658 163.517966,9.07385902 164.780508,6.09046919 C166.043051,9.07385902 166.944237,12.1982658 167.521525,15.4130116 L162.041695,15.4130116 L162.039492,15.4130116 Z" id="Shape" fill="#FFFFFF"></path>
+            </g>
+            <g id="subtotal-white" transform="translate(-0, 0)">
+                <path d="M35.4635593,9.25233359 L35.4547458,22.6797912 C35.4547458,22.6797912 28.9172881,15.7964014 23.7327119,13.7252149 L23.7327119,20.903859 C23.7283051,24.4006387 20.7845763,26.1236895 17.7328814,26.0972488 C11.6030508,26.0972488 2.38186441,19.5553844 -3.13120528e-15,16.8474183 L0.00661016949,3.4221641 C0.00661016949,3.4221641 6.5440678,10.3011472 11.7286441,12.3723336 L11.7330508,5.19368953 C11.7330508,1.69690986 14.6767797,-0.026140983 17.7328814,0.00029969496 C23.8583051,0.00029969496 33.0794915,6.5421641 35.4613559,9.2501302" id="Path" fill="#DE4AE4"></path>
+                <path d="M49.5233898,23.034537 L49.5233898,17.6164014 C51.5857627,19.1257234 53.9301695,20.0797912 55.9947458,20.0797912 C58.059322,20.0797912 59.1081356,19.1257234 59.1081356,17.9557234 C59.1081356,14.7233505 49.1223729,16.0475878 49.1223729,8.44148614 C49.1223729,4.13165563 52.1740678,1.60657088 56.8849153,1.60657088 C59.1323729,1.60657088 61.6001695,2.22131664 63.3232203,3.29877427 L63.3232203,8.62436749 C61.7522034,7.3001302 59.5311864,6.50029969 57.5613559,6.50029969 C55.8052542,6.50029969 54.4457627,7.20979122 54.4457627,8.34674037 C54.4457627,11.5791133 64.4315254,10.254876 64.4315254,17.8609777 C64.4315254,22.1708082 61.2255932,25.0043675 56.329661,25.0043675 C53.8354237,25.0043675 51.2133898,24.3279268 49.5211864,23.034537" id="Path" fill="#FFFFFF"></path>
+                <path d="M66.8045763,2.09792681 L72.1015254,2.09792681 L72.1015254,16.0013166 C72.1015254,18.8018251 73.399322,20.0797912 75.2457627,20.0797912 C77.0922034,20.0797912 78.3591525,18.7599607 78.3591525,16.0013166 L78.3591525,2.09792681 L83.6538983,2.09792681 L83.6538983,15.9175878 C83.6538983,22.0980963 80.0469492,25.0043675 75.1818644,25.0043675 C70.3167797,25.0043675 66.8023729,22.0364014 66.8023729,15.9175878 L66.8023729,2.09792681 L66.8045763,2.09792681 Z" id="Path" fill="#FFFFFF"></path>
+                <path d="M86.919322,2.1001302 L94.2037288,2.1001302 C100.320339,2.1001302 102.45322,4.55911325 102.466441,8.04046919 C102.473051,10.124876 101.571864,11.4579268 100.287288,12.3304692 C102.444407,13.6789438 103.98678,15.5892827 103.98678,18.3413166 C103.98678,22.0364014 101.759153,24.5130116 96.2440678,24.5130116 L86.9215254,24.5130116 L86.9215254,2.1001302 L86.919322,2.1001302 Z M95.0961017,6.62368953 L92.2140678,6.62368953 L92.2140678,11.8236895 C92.2140678,11.8236895 97.5727119,10.9070794 97.5727119,8.48114715 C97.5727119,7.18114715 96.5789831,6.62368953 95.0961017,6.62368953 Z M96.8433898,14.4589438 C96.8433898,14.4589438 94.1045763,15.5297912 92.2118644,15.9991133 L92.2118644,19.9872488 L95.4288136,19.9872488 C97.7005085,19.9872488 98.7581356,19.0750455 98.7581356,17.5018251 C98.7581356,16.0608082 97.8811864,15.1530116 96.8411864,14.4589438 L96.8433898,14.4589438 Z" id="Shape" fill="#FFFFFF"></path>
+                <polygon id="Path" fill="#FFFFFF" points="109.312373 6.62589292 104.171864 6.62589292 104.171864 2.1001302 119.657288 2.1001302 119.657288 6.62589292 114.607119 6.62589292 114.607119 24.5130116 109.312373 24.5130116"></polygon>
+                <path d="M120.452712,13.3065709 C120.452712,5.91640139 124.055254,1.60657088 130.182881,1.60657088 C136.310508,1.60657088 139.910847,5.91640139 139.910847,13.3065709 C139.910847,20.6967404 136.308305,25.0065709 130.182881,25.0065709 C124.057458,25.0065709 120.452712,20.6967404 120.452712,13.3065709 M134.552203,13.3065709 C134.552203,8.96589292 133.042881,6.53335054 130.180678,6.53335054 C127.318475,6.53335054 125.809153,8.96589292 125.809153,13.3065709 C125.809153,17.6472488 127.318475,20.0797912 130.180678,20.0797912 C133.042881,20.0797912 134.552203,17.6472488 134.552203,13.3065709" id="Shape" fill="#FFFFFF"></path>
+                <polygon id="Path" fill="#FFFFFF" points="145.84678 6.62589292 140.706271 6.62589292 140.706271 2.1001302 156.191695 2.1001302 156.191695 6.62589292 151.141525 6.62589292 151.141525 24.5130116 145.84678 24.5130116"></polygon>
+                <polygon id="Path" fill="#FFFFFF" points="176.211695 2.1001302 181.506441 2.1001302 181.506441 19.9872488 188.62339 19.9872488 188.62339 24.5130116 176.211695 24.5130116"></polygon>
+                <path d="M168.312542,24.5130116 L173.609492,24.5130116 C173.609492,15.6928421 171.194576,7.33758783 167.605254,2.09792681 L161.955763,2.09792681 C158.366441,7.33538444 155.951525,15.6928421 155.951525,24.5130116 L161.248475,24.5130116 C161.248475,22.9243675 161.318983,21.3467404 161.457797,19.784537 L168.10322,19.784537 C168.242034,21.3489438 168.312542,22.9265709 168.312542,24.5130116 Z M162.039492,15.4130116 C162.61678,12.1982658 163.517966,9.07385902 164.780508,6.09046919 C166.043051,9.07385902 166.944237,12.1982658 167.521525,15.4130116 L162.041695,15.4130116 L162.039492,15.4130116 Z" id="Shape" fill="#FFFFFF"></path>
+            </g>
+        </g>
+    </g>
+</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/release-notes.md
+++ b/docs/en/docs/release-notes.md
@ -13,6 +13,7 @@ hide:

 ### Docs

+* 🍱 Update Drawio diagrams SVGs, single file per diagram, sans-serif font. PR [#13706](https://github.com/fastapi/fastapi/pull/13706) by [@tiangolo](https://github.com/tiangolo).
 * 📝 Update docs for "Help FastAPI", simplify and reduce "sponsor" section. PR [#13670](https://github.com/fastapi/fastapi/pull/13670) by [@tiangolo](https://github.com/tiangolo).
 * 📝 Remove unnecessary bullet from docs. PR [#13641](https://github.com/fastapi/fastapi/pull/13641) by [@Adamowoc](https://github.com/Adamowoc).
 * ✏️ Fix syntax error in `docs/en/docs/tutorial/handling-errors.md`. PR [#13623](https://github.com/fastapi/fastapi/pull/13623) by [@gsheni](https://github.com/gsheni).
@ -31,6 +32,12 @@ hide:

 ### Internal

+* 🔧 Update sponsors: Add InterviewPal. PR [#13728](https://github.com/fastapi/fastapi/pull/13728) by [@tiangolo](https://github.com/tiangolo).
+* 🔧 Remove Google Analytics. PR [#13727](https://github.com/fastapi/fastapi/pull/13727) by [@tiangolo](https://github.com/tiangolo).
+* 🔧 Update sponsors: remove MongoDB. PR [#13725](https://github.com/fastapi/fastapi/pull/13725) by [@tiangolo](https://github.com/tiangolo).
+* ⬆ [pre-commit.ci] pre-commit autoupdate. PR [#13711](https://github.com/fastapi/fastapi/pull/13711) by [@pre-commit-ci[bot]](https://github.com/apps/pre-commit-ci).
+* 🔧 Update sponsors: add Subtotal. PR [#13701](https://github.com/fastapi/fastapi/pull/13701) by [@tiangolo](https://github.com/tiangolo).
+* 🔧 Update sponsors: remove deepset / Haystack. PR [#13700](https://github.com/fastapi/fastapi/pull/13700) by [@tiangolo](https://github.com/tiangolo).
 * ⬆ [pre-commit.ci] pre-commit autoupdate. PR [#13688](https://github.com/fastapi/fastapi/pull/13688) by [@pre-commit-ci[bot]](https://github.com/apps/pre-commit-ci).
 * 👥 Update FastAPI People - Experts. PR [#13671](https://github.com/fastapi/fastapi/pull/13671) by [@tiangolo](https://github.com/tiangolo).
 * ⬆ Bump typer from 0.12.5 to 0.15.3. PR [#13666](https://github.com/fastapi/fastapi/pull/13666) by [@dependabot[bot]](https://github.com/apps/dependabot).
--- 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/en/mkdocs.yml
+++ b/docs/en/mkdocs.yml
@ -289,20 +289,6 @@ markdown_extensions:
  mdx_include: null
  markdown_include_variants: null
 extra:
-  analytics:
-    provider: google
-    property: G-YNEVN69SC3
-    feedback:
-      title: Was this page helpful?
-      ratings:
-      - icon: material/emoticon-happy-outline
-        name: This page was helpful
-        data: 1
-        note: Thanks for your feedback!
-      - icon: material/emoticon-sad-outline
-        name: This page could be improved
-        data: 0
-        note: Thanks for your feedback!
  social:
  - icon: fontawesome/brands/github-alt
    link: https://github.com/fastapi/fastapi
--- a/docs/en/overrides/main.html
+++ b/docs/en/overrides/main.html
@ -56,12 +56,6 @@
        <img class="sponsor-image" src="/img/sponsors/propelauth-banner.png" />
      </a>
    </div>
-    <div class="item">
-      <a title="Build your next app with FastAPI and MongoDB" style="display: block; position: relative;" href="https://www.mongodb.com/developer/languages/python/python-quickstart-fastapi/?utm_campaign=fastapi_framework&utm_source=fastapi_sponsorship&utm_medium=web_referral" target="_blank">
-        <span class="sponsor-badge">sponsor</span>
-        <img class="sponsor-image" src="/img/sponsors/mongodb-banner.png" />
-      </a>
-    </div>
    <div class="item">
      <a title="Zuplo: Scale, Protect, Document, and Monetize your FastAPI" style="display: block; position: relative;" href="https://zuplo.link/fastapi-web" target="_blank">
        <span class="sponsor-badge">sponsor</span>
@ -86,6 +80,12 @@
        <img class="sponsor-image" src="/img/sponsors/coderabbit-banner.png" />
      </a>
    </div>
+    <div class="item">
+      <a title="Making Retail Purchases Actionable for Brands and Developers" style="display: block; position: relative;" href="https://subtotal.com/?utm_source=fastapi&utm_medium=sponsorship&utm_campaign=open-source" target="_blank">
+        <span class="sponsor-badge">sponsor</span>
+        <img class="sponsor-image" src="/img/sponsors/subtotal-banner.svg" />
+      </a>
+    </div>
  </div>
 </div>
 {% endblock %}
--- 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">

 ---