fix: Replace old KIC images with mermaid diagrams (#7998)

* Replace old images with mermaid diagrams Signed-off-by: Diana <[email protected]> * Remove div from architecture diagram to fix it Signed-off-by: Diana <[email protected]> * Add request traffic lines Signed-off-by: Diana <[email protected]> --------- Signed-off-by: Diana <[email protected]>
Kong · Oct 24, 2024 · 707c22e · 707c22e
1 parent 19eec8b
commit 707c22e
Show file tree

Hide file tree

Showing 3 changed files with 153 additions and 7 deletions.
diff --git a/app/_src/kubernetes-ingress-controller/concepts/architecture.md b/app/_src/kubernetes-ingress-controller/concepts/architecture.md
@@ -14,7 +14,24 @@ The {{site.kic_product_name}} configures {{site.base_gateway}} using Ingress or
 
 The figure illustrates how {{site.kic_product_name}} works:
 
-![high-level-design](/assets/images/products/kubernetes-ingress-controller/high-level-design.png "High Level Design")
+<!--vale off-->
+{% mermaid %}
+flowchart LR
+    subgraph Kubernetes cluster
+        direction LR
+        A(<img src="/assets/images/icons/third-party/kubernetes-logo.png" style="max-width:25px; display:block; margin:0 auto;" class="no-image-expand"/> API server) --> |events| B(<img src="/assets/images/logos/konglogo-gradient-secondary.svg" style="max-width:25px; display:block; margin:0 auto;" class="no-image-expand"/>Controller)
+        B --> |configuration| C(<img src="/assets/images/logos/konglogo-gradient-secondary.svg" style="max-width:25px; display:block; margin:0 auto;" class="no-image-expand"/>Kong)
+        C --> D(services)
+    end
+
+    E(Request traffic)
+    E --> C
+
+    %% Change the arrow colors
+    linkStyle 0,1 stroke:#d44324,color:#d44324  
+    linkStyle 2,3 stroke:#b6d7a8
+{% endmermaid %}
+<!--vale on-->
 
 The Controller listens for the changes inside the Kubernetes cluster and updates Kong in response to those changes. So that it can correctly proxy all the traffic. Kong is updated dynamically to respond to changes around scaling, configuration, and failures that occur inside a Kubernetes cluster.
 
@@ -60,7 +77,50 @@ An [Ingress][ingress] resource in Kubernetes defines a set of rules for proxying
 
 This image describes the relationship between Kubernetes concepts and Kong's Ingress configuration.
 
-![translating Kubernetes to Kong](/assets/images/products/kubernetes-ingress-controller/k8s-to-kong.png "Translating k8s resources to Kong")
+<!--vale off-->
+{% mermaid %}
+flowchart LR
+    H(Request traffic)
+    subgraph Pods
+        direction LR
+        E(Target)
+        F(Target)
+        G(Target)
+    end
+
+    subgraph Kubernetes Service
+        direction TB
+        C(Service)
+        D(Upstream)
+    end
+
+    subgraph Ingress rules
+        direction LR
+        A(Route)
+        B(Route)
+    end
+
+    A --> C
+    B --> C
+    C --> D
+    D --> E
+    D --> F
+    D --> G
+    H --> A
+
+    classDef lightBlue fill:#cce7ff;
+    classDef lightGreen fill:#c4e1c4;
+    classDef lightPurple fill:#e6d8eb;
+    classDef lightGrey fill:#f5f5f5;
+
+    class A,B lightGreen;
+    class C lightBlue;
+    class D lightPurple;
+    class E,F,G lightGrey;
+
+    linkStyle 6 stroke:#b6d7a8
+{% endmermaid %}
+<!--vale on-->
 
 [gateway-api]: https://gateway-api.sigs.k8s.io/
 [gateway-api-gateway]: https://gateway-api.sigs.k8s.io/concepts/api-overview/#gateway

diff --git a/app/_src/kubernetes-ingress-controller/concepts/custom-resources.md b/app/_src/kubernetes-ingress-controller/concepts/custom-resources.md
@@ -66,7 +66,21 @@ when attached to an Ingress.
 
 This diagram shows how the resources are linked with one another.
 
-![Associating Kong Ingress](/assets/images/products/kubernetes-ingress-controller/kong-ingress-association.png "Associating Kong Ingress")
+<!--vale off-->
+{% mermaid %}
+flowchart TD
+    A(apiVersion: configuration.konghq.com/v1<br>kind: KongIngress<br>metadata:<br>&nbsp;&nbsp;&nbsp;name: demo-kong-ingress<br>route: <br>&nbsp;&nbsp;&nbsp;# various route properties can be overridden):::left -->|konghq.com/override annotation-based association| B(apiVersion: extensions/v1beta1<br>kind: Ingress<br>metadata:<br>&nbsp;&nbsp;&nbsp;name: demo-api<br>&nbsp;&nbsp;&nbsp;annotations:<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;konghq.com/override: demo-kong-ingress):::left
+    B --> C(apiVersion: v1<br>kind: Service<br>metadata:<br>&nbsp;&nbsp;&nbsp;name: echo-svc<br>&nbsp;&nbsp;&nbsp;annotations:<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;konghq.com/override: https-upstream):::left
+    D(apiVersion: configuration.konghq.com/v1<br>kind: KongIngress<br>metadata:<br>&nbsp;&nbsp;&nbsp;name: https-upstream<br>proxy:<br>&nbsp;&nbsp;&nbsp;protocol: https<br>upstream:<br>&nbsp;&nbsp;&nbsp;# load-balancing and health-check behaviors can be tuned):::left --> C
+
+    classDef left text-align:left;
+    classDef lightBlue fill:#cce7ff;
+    classDef lightGreen fill:#c4e1c4;
+
+    class B lightGreen;
+    class C lightBlue;
+{% endmermaid %}
+<!--vale on-->
 
 ## KongPlugin
 
@@ -82,9 +96,38 @@ Ingress, Service, HTTPRoute, KongConsumer or KongConsumerGroup resource in Kuber
 This diagram shows how you can link a KongPlugin resource to an
 Ingress, Service, or KongConsumer.
 
-|  |  |
-:-:|:-:
-![](/assets/images/products/kubernetes-ingress-controller/kong-plugin-association1.png)|![](/assets/images/products/kubernetes-ingress-controller/kong-plugin-association2.png)
+<!--vale off-->
+{% mermaid %}
+flowchart TD
+    subgraph Link to consumer
+        direction TB
+        E(apiVersion: configuration.konghq.com/v1<br>kind: KongPlugin<br>metadata:<br>&nbsp;&nbsp;&nbsp;name: custom-api-limit<br>plugin: rate-limiting<br>config:<br>&nbsp;&nbsp;&nbsp;minute: 10):::left
+        F(apiVersion: configuration.konghq.com<br>kind: KongConsumer<br>metadata:<br>&nbsp;&nbsp;&nbsp;name: demo-api<br>&nbsp;&nbsp;&nbsp;annotations:<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;konghq.com/plugins: custom-api-limit<br>username: special-client):::left
+    end
+
+    subgraph Link to Ingress and service
+        direction TB
+        A(apiVersion: configuration.konghq.com/v1<br>kind: KongPlugin<br>metadata:<br>&nbsp;&nbsp;&nbsp;name: reports-api-limit<br>plugin: rate-limiting<br>config: <br>&nbsp;&nbsp;&nbsp;minute: 5):::left 
+        B(apiVersion: extensions/v1beta1<br>kind: Ingress<br>metadata:<br>&nbsp;&nbsp;&nbsp;name: demo-api<br>&nbsp;&nbsp;&nbsp;annotations:<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;konghq.com/plugins: reports-api-limit):::left
+        C(apiVersion: v1<br>kind: Service<br>metadata:<br>&nbsp;&nbsp;&nbsp;name: billing-api<br>&nbsp;&nbsp;&nbsp;annotations:<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;konghq.com/plugins: billing-auth):::left
+        D(apiVersion: configuration.konghq.com/v1<br>kind: KongPlugin<br>metadata:<br>&nbsp;&nbsp;&nbsp;name: billing-auth<br>plugin: basic auth):::left
+    end
+
+    A --> |execute the plugin for any request that matches a rule in the following ingress resource|B
+    B --> C
+    D --> |execute the plugin for any request that is forwarded to the billing-api service in k8s|C
+    E --> |Associated using konghq.com/plugins annotation|F
+
+    classDef left text-align:left;
+    classDef lightBlue fill:#cce7ff;
+    classDef lightGreen fill:#c4e1c4;
+    classDef lightPurple fill:#e6d8eb;
+
+    class B lightGreen;
+    class C lightBlue;
+    class F lightPurple;
+{% endmermaid %}
+<!--vale on-->
 
 ## KongClusterPlugin
 

diff --git a/app/_src/kubernetes-ingress-controller/get-started/services-and-routes.md b/app/_src/kubernetes-ingress-controller/get-started/services-and-routes.md
@@ -11,7 +11,50 @@ A Service inside Kubernetes is a way to abstract an application that is running
 
 The service object in Kong holds the information of the protocol to use to talk to the upstream service and various other protocol specific settings. The Upstream object defines load-balancing and health-checking behavior.
 
-![translating Kubernetes to Kong](/assets/images/products/kubernetes-ingress-controller/k8s-to-kong.png "Translating k8s resources to Kong")
+<!--vale off-->
+{% mermaid %}
+flowchart LR
+    H(Request traffic)
+    subgraph Pods
+        direction LR
+        E(Target)
+        F(Target)
+        G(Target)
+    end
+
+    subgraph Kubernetes Service
+        direction TB
+        C(Service)
+        D(Upstream)
+    end
+
+    subgraph Ingress rules
+        direction LR
+        A(Route)
+        B(Route)
+    end
+
+    A --> C
+    B --> C
+    C --> D
+    D --> E
+    D --> F
+    D --> G
+    H --> A
+
+    classDef lightBlue fill:#cce7ff;
+    classDef lightGreen fill:#c4e1c4;
+    classDef lightPurple fill:#e6d8eb;
+    classDef lightGrey fill:#f5f5f5;
+
+    class A,B lightGreen;
+    class C lightBlue;
+    class D lightPurple;
+    class E,F,G lightGrey;
+
+    linkStyle 6 stroke:#b6d7a8
+{% endmermaid %}
+<!--vale on-->
 
 Routes are configured using Gateway API or Ingress resources, such as `HTTPRoute`, `TCPRoute`, `GRPCRoute`, `Ingress` and more.