Added 2 mermaid diagrams to demonstrate entity caching and entity cac…

…he invalidation (#6260)

docs/source/routing/performance/caching/entity.mdx

@@ -61,6 +61,83 @@ With entity caching enabled for this example, the router can:
 - Cache the cart per user, with a small amount of data.
 - Cache inventory data with a short TTL or not cache it at all.
 
+For example, the diagram below shows how a price entity can be cached and then combined with purchase and inventory fragments to serve a `products` query. Because price data is subject to change less often than inventory data, it makes sense to cache it with a different TTL.
+
+```mermaid
+flowchart RL
+	subgraph QueryResponse["JSON Response"]
+		n1["{
+			  "products": [
+			    {
+			      "name": "DraftSnowboard",
+			      "pastPurchases": ...,
+			      "price": {
+			        "amount": "1500",
+			        "currency_code": "USD"
+			      },
+			      "quantity": "250"
+			    },
+			    ...
+			  ]		
+		}"]
+    end
+
+	subgraph Subgraphs["Subgraphs"]
+		Purchases["Purchases"]
+		Inventory["Inventory"]
+		Price["Price"]
+	end
+
+	subgraph PriceQueryFragment["Price Query Fragment (e.g. TTL 2200)"]
+		n2["{
+    	  "price": {
+            "id": 101,
+            "product_id": 12,
+            "amount": 1500,
+            "currency_code": "USD"
+    	  }
+		}"]
+	end
+
+	subgraph PurchaseHistoryQueryFragment["Purchase History Query Fragment"]
+		n3["{
+			  "purchases": {
+			    "product_id": 12,
+			    "user_id": 2932,
+			    ...
+			  }
+		}"]
+	end
+
+	subgraph InventoryQueryFragment["Inventory Query Fragment"]
+		n4["{
+			  "inventory": {
+			    "id": 19,
+			    "product_id": 12,
+			    "quantity": 250
+			  }
+		}"]
+	end
+
+	Router
+	Database[("   ")]
+
+  Router --> QueryResponse
+	Purchases --> Router
+	Inventory --> Router
+	Price --- Router
+	PriceQueryFragment --> Database
+	PurchaseHistoryQueryFragment --> Purchases
+	InventoryQueryFragment --> Inventory
+	Database --> Router
+
+	style n1 text-align:left
+	style n2 text-align:left
+	style n3 text-align:left
+	style n4 text-align:left
+	style Price border:none,stroke-width:1px,stroke-dasharray:5 5,stroke:#A6A6A6
+```
+
 ## Use entity caching
 
 Follow this guide to enable and configure entity caching in the GraphOS Router.
@@ -135,6 +212,56 @@ This entry contains an object with the `all` field to affect all subgraph reques
 
 ### Entity cache invalidation
 
+You can invalidate entity cache entries with a [specifically formatted request](#invalidation-request-format once you [configure your router](#configuration) appropriately. For example, if price data changes before a price entity's TTL expires, you can send an invalidation request.
+
+```mermaid
+
+flowchart RL
+	subgraph QueryResponse["Cache invalidation POST"]
+		n1["{
+			  "kind": "subgraph",
+			  "subgraph": "price",
+			  "type": "Price",
+			  "key": {
+			    "id": "101"
+			  }
+		}"]
+    end
+
+	subgraph Subgraphs["Subgraphs"]
+		Purchases["Purchases"]
+		Inventory["Inventory"]
+		Price["Price"]
+	end
+
+	subgraph PriceQueryFragment["Price Query Fragment (e.g. TTL 2200)"]
+		n2[" ̶{̶
+    	  " ̶p̶r̶i̶c̶e̶":  ̶{̶
+            " ̶i̶d̶":  ̶1̶0̶1̶,
+            " ̶p̶r̶o̶d̶u̶c̶t̶_̶i̶d̶":  ̶1̶2̶,
+            " ̶a̶m̶o̶u̶n̶t̶":  ̶1̶5̶0̶0̶,
+            "̶c̶u̶r̶r̶e̶n̶c̶y̶_̶c̶o̶d̶e̶": " ̶U̶S̶D̶"
+    	   ̶}̶
+		 ̶}̶"]
+	end
+
+	Router
+	Database[("   ")]
+
+    QueryResponse --> Router
+	Purchases --> Router
+	Inventory --> Router
+	Price --- Router
+	PriceQueryFragment --> Database
+	Database --> Router
+
+	style n1 text-align:left
+	style Price border:none,stroke-width:1px,stroke-dasharray:5 5,stroke:#A6A6A6
+	style Purchases border:none,stroke-width:1px,stroke-dasharray:5 5,stroke:#A6A6A6
+	style Inventory border:none,stroke-width:1px,stroke-dasharray:5 5,stroke:#A6A6A6
+	style n2 text-align:left
+```
+
 When existing cache entries need to be replaced, the router supports a couple of ways for you to invalidate entity cache entries:
 - [**Invalidation endpoint**](#invalidation-http-endpoint) - the router exposes an invalidation endpoint that can receive invalidation requests from any authorized service. This is primarily intended as an alternative to the extensions mechanism described below. For example a subgraph could use it to trigger invalidation events "out of band" from any requests received by the router or a platform operator could use it to invalidate cache entries in response to events which aren't directly related to a router.
 - **Subgraph response extensions** - you can send invalidation requests via subgraph response extensions, allowing a subgraph to invalidate cached data right after a mutation.