docs(http): add example for interceptor order (#39938)

Add an example for the order of interceptor with image

PR Close #39938

aio/content/guide/http.md

@@ -653,8 +653,20 @@ There are many more interceptors in the complete sample code.
 ### Interceptor order
 
 Angular applies interceptors in the order that you provide them.
-If you provide interceptors _A_, then _B_, then _C_,  requests flow in _A->B->C_ and
-responses flow out _C->B->A_.
+For example, consider a situation in which you want to handle the authentication of your HTTP requests and log them before sending them to a server. To accomplish this task, you could provide an `AuthInterceptor` service and then a `LoggingInterceptor` service.
+Outgoing requests would flow from the `AuthInterceptor` to the `LoggingInterceptor`.
+Responses from these requests would flow in the other direction, from `LoggingInterceptor` back to `AuthInterceptor`.
+The following is a visual representation of the process:
+
+<div class="lightbox">
+  <img src="generated/images/guide/http/interceptor-order.svg" alt="Interceptor order">
+</div>
+
+<div class="alert is-helpful">
+
+   The last interceptor in the process is always the `HttpBackend` that handles communication with the server.
+
+</div>
 
 You cannot change the order or remove interceptors later.
 If you need to enable and disable an interceptor dynamically, you'll have to build that capability into the interceptor itself.

aio/content/images/guide/http/interceptor-order.svg

@@ -0,0 +1,50 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 94" width="300">
+  <style>
+    #interceptor-exec-order {
+      fill: none;
+      stroke: black;
+      stroke-width: .3;
+    }
+    #interceptor-exec-order > text {
+      dominant-baseline: central;
+      fill: black;
+      font-size: 4px;
+      font-weight: lighter;
+      letter-spacing: .2px;
+      text-anchor: middle;
+    }
+    #interceptor-exec-order > .dashed {
+      stroke-dasharray: 2 1;
+    }
+  </style>
+
+  <defs>
+    <rect id="textbox" x="2" width="50" height="10" rx="2" />
+    <path id="arrow" d="M12,0 v10 l-2,-4 m2,4 l2,-4" />
+    <g id="arrows">
+      <use href="#arrow" />
+      <use href="#arrow" style="transform: rotateZ(180deg); transform-origin: 27px 5px;" />
+    </g>
+  </defs>
+
+  <g id="interceptor-exec-order">
+    <text x="27" y="7">HttpClient</text>
+    <use href="#textbox" y="02" class="dashed" />
+    <use href="#arrows"  y="12" class="dashed" />
+
+    <text x="27" y="27">AuthInterceptor</text>
+    <use href="#textbox" y="22" />
+    <use href="#arrows"  y="32" />
+
+    <text x="27" y="47">LoggingInterceptor</text>
+    <use href="#textbox" y="42" />
+    <use href="#arrows"  y="52" />
+
+    <text x="27" y="67">HttpBackend</text>
+    <use href="#textbox" y="62" />
+    <use href="#arrows"  y="72" class="dashed" />
+
+    <text x="27" y="87">Server</text>
+    <use href="#textbox" y="82" class="dashed" />
+  </g>
+</svg>