From a4792b7723e2db20acc6eba4a25e8e2c05510b6b Mon Sep 17 00:00:00 2001
From: Aaron Timony <Aarontimony0@gmail.com>
Date: Mon, 4 May 2026 15:23:13 +0100
Subject: [PATCH] Add sequence diagram to middleware execution order docs

---
 docs/en/docs/tutorial/middleware.md | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/docs/en/docs/tutorial/middleware.md b/docs/en/docs/tutorial/middleware.md
index 5da549cb7e..3d78170aea 100644
--- a/docs/en/docs/tutorial/middleware.md
+++ b/docs/en/docs/tutorial/middleware.md
@@ -82,9 +82,20 @@ app.add_middleware(MiddlewareB)
 
 This results in the following execution order:
 
-* **Request**: MiddlewareB → MiddlewareA → route
-
-* **Response**: route → MiddlewareA → MiddlewareB
+```mermaid
+sequenceDiagram
+    participant Client
+    participant B as Middleware B<br/>(added last · outermost)
+    participant A as Middleware A<br/>(added first · innermost)
+    participant App as FastAPI app
+
+    Client ->> B: Request
+    B ->> A: Request
+    A ->> App: Request
+    App -->> A: Response
+    A -->> B: Response
+    B -->> Client: Response
+```
 
 This stacking behavior ensures that middlewares are executed in a predictable and controllable order.