From eb9dfe987c02f110d38fd6e0f31c537ace055121 Mon Sep 17 00:00:00 2001 From: shaun-nx Date: Tue, 19 Aug 2025 11:56:35 +0100 Subject: [PATCH] Embed mermaid code in markdown files --- .../traffic-management/advanced-routing.md | 38 +++++++- .../ngf/traffic-management/basic-routing.md | 96 ++++++++++++++++++- static/ngf/img/src/README.md | 3 - static/ngf/img/src/advanced-routing.mermaid | 35 ------- .../ngf/img/src/route-all-traffic-app.mermaid | 13 --- .../img/src/route-all-traffic-config.mermaid | 42 -------- .../img/src/route-all-traffic-flow.mermaid | 33 ------- 7 files changed, 130 insertions(+), 130 deletions(-) delete mode 100644 static/ngf/img/src/README.md delete mode 100644 static/ngf/img/src/advanced-routing.mermaid delete mode 100644 static/ngf/img/src/route-all-traffic-app.mermaid delete mode 100644 static/ngf/img/src/route-all-traffic-config.mermaid delete mode 100644 static/ngf/img/src/route-all-traffic-flow.mermaid diff --git a/content/ngf/traffic-management/advanced-routing.md b/content/ngf/traffic-management/advanced-routing.md index 96bb1127d..ba52cc477 100644 --- a/content/ngf/traffic-management/advanced-routing.md +++ b/content/ngf/traffic-management/advanced-routing.md @@ -15,7 +15,43 @@ In this guide we will configure advanced routing rules for multiple applications The following image shows the traffic flow that we will be creating with these rules. -{{< img src="/ngf/img/advanced-routing.png" alt="" >}} +```mermaid +graph LR + users[Users] + ngfSvc["Public Endpoint
for
cafe.example.com"] + subgraph cluster [Kubernetes Cluster] + subgraph appNs [Namespace
default] + subgraph nsPadding [" "] + nginxPod[Pod
NGINX] + coffeeV1Pod[Pod
coffee v1] + coffeeV2Pod[Pod
coffee v2] + teaPod[Pod
tea] + teaPostPod[Pod
tea-post] + end + end + end + + ngfSvc --> nginxPod + nginxPod --/coffee--> coffeeV1Pod + nginxPod --/coffee
header: version=v2
OR
/coffee?TEST=v2--> coffeeV2Pod + nginxPod --GET /tea--> teaPod + nginxPod --POST /tea--> teaPostPod + users --> ngfSvc + + class clusterPadding,nsPadding,clusterPadding2 noBorder + class gwNS,appNs namespace + class ngfSvc,nginxPod nginxNode + class coffeeV1Pod,coffeeV2Pod coffeeNode + class teaPod,teaPostPod teaNode + + classDef noBorder stroke:none,fill:none + classDef default fill:#FFFFFF,stroke:#000000 + classDef namespace fill:#FFFFFF,stroke:#036ffc,stroke-dasharray: 5 5,text-align:center + classDef nginxNode fill:#b4e0ad,stroke:#2AA317 + classDef coffeeNode fill:#edbd8c,stroke:#D9822B + classDef teaNode fill:#ff8f6a,stroke:#e5805f + +``` The goal is to create a set of rules that will result in client requests being sent to specific backends based on the request attributes. In this diagram, we have two versions of the `coffee` service. Traffic for v1 needs to be directed to the old application, while traffic for v2 needs to be directed towards the new application. We also have two `tea` services, one that handles GET operations and one that handles POST operations. Both the `tea` and `coffee` applications share the same Gateway. diff --git a/content/ngf/traffic-management/basic-routing.md b/content/ngf/traffic-management/basic-routing.md index 36f87724c..bae0147fc 100644 --- a/content/ngf/traffic-management/basic-routing.md +++ b/content/ngf/traffic-management/basic-routing.md @@ -21,7 +21,21 @@ You can route traffic to your Kubernetes applications using the Gateway API and The application we are going to use in this guide is a simple **coffee** application comprised of one service and two pods: -{{This image shows a single 'coffee' Service connecting to two 'coffee' Pods.}} +```mermaid +graph TB + subgraph cluster [Kubernetes Cluster] + style cluster fill:#FFFFFF,stroke:#000000 + svc[Service
coffee] + pod1[Pod
coffee] + pod2[Pod
coffee] + end + + svc --> pod1 & pod2 + + class pod1,pod2,svc appNode + classDef appNode fill:#edbd8c,stroke:#D9822B + +``` Using this architecture, the **coffee** application is not accessible outside the cluster. We want to expose this application on the hostname "cafe.example.com" so that clients outside the cluster can access it. @@ -96,7 +110,49 @@ service/coffee ClusterIP 198.51.100.1 80/TCP 77s To route traffic to the **coffee** application, we will create a Gateway and HTTPRoute. The following diagram shows the configuration we are creating in the next step: -{{}} +```mermaid +graph LR + subgraph config [Namespace default] + subgraph padding [" "] + direction LR + style config fill:#FFFFFF,stroke:#000000 + subgraph gw[Gateway cafe] + subgraph gwPadding [" "] + gwContents[HTTP/80] + end + end + subgraph hr[HTTPRoute coffee] + subgraph hrPadding [" "] + hrContents[cafe.example.com] + subgraph describeMatchAll [Match all
traffic] + subgraph describeMatchPadding [" "] + matchAll[Host: *
Path: *] + end + end + subgraph describeService [Group matching
pods within a Service] + subgraph describePadding [" "] + coffeeSvc[Service
coffee] + end + end + end + end + end + end + + gwContents --> hrContents --> matchAll --> coffeeSvc + class padding,gwPadding,hrPadding,describeMatchAll,describeService,describePadding,describeMatchPadding noBorder + class gw gateway + class hr httpRoute + class matchAll,hrContents,coffeeSvc appDevNode + class gwContents clusterOppNode + + classDef noBorder stroke:none,fill:none,text-align:center + classDef default fill:#FFFFFF,stroke:#000000 + classDef gateway fill:#FFFFFF,stroke:#blue,stroke-dasharray: 3 3,text-align:center + classDef httpRoute fill:#FFFFFF,stroke:#D9822B,stroke-dasharray: 3 3,text-align:center + classDef appDevNode fill:#edbd8c,stroke:#D9822B + classDef clusterOppNode fill:lightblue,stroke:darkblue +``` We need a Gateway to create an entry point for HTTP traffic coming into the cluster. The **cafe** Gateway we are going to create will open an entry point to the cluster on port 80 for HTTP traffic. @@ -104,7 +160,41 @@ To route HTTP traffic from the Gateway to the **coffee** service, we need to cre Once NGINX Gateway Fabric processes the **cafe** Gateway and **coffee** HTTPRoute, it will configure a data plane (NGINX) to route all HTTP requests sent to "cafe.example.com" to the pods that the **coffee** service targets: -{{Traffic Flow}} +```mermaid +graph LR + style cluster fill:#FFFFFF,stroke:#000000 + clients[Clients] + ngfSvc["Public IP Address for
cafe.example.com"] + subgraph cluster [Kubernetes Cluster] + + subgraph appNs [Namespace
default] + subgraph nsPadding [" "] + nginxPod[Pod NGINX] + coffeePod1[Pod coffee] + coffeePod2[Pod coffee] + end + end + end + + ngfSvc --> nginxPod + nginxPod --> coffeePod1 & coffeePod2 + clients --> ngfSvc + + class clusterPadding,nsPadding,clusterPadding2 noBorder + class gwNS,appNs namespace + class nginxPod nginxNode + class coffeePod1,coffeePod2 coffeeNode + class ngfSvc svc + class clients clientNode + + classDef noBorder stroke:none,fill:none + classDef default fill:#FFFFFF,stroke:#000000 + classDef namespace fill:#FFFFFF,stroke:#036ffc,stroke-dasharray: 5 5,text-align:center + classDef nginxNode fill:#b4e0ad,stroke:#2AA317 + classDef svc fill:lightblue,stroke:darkblue + classDef coffeeNode fill:#edbd8c,stroke:#D9822B + classDef clientNode fill:#D3D3D3 +``` The **coffee** service is omitted from the diagram above because the NGINX Pod routes directly to the pods that the **coffee** service targets. diff --git a/static/ngf/img/src/README.md b/static/ngf/img/src/README.md deleted file mode 100644 index 02c93c4d4..000000000 --- a/static/ngf/img/src/README.md +++ /dev/null @@ -1,3 +0,0 @@ -# Diagram Source Files - -This directory contains the source files for the diagrams used in the docs. Source files are named after the image name. diff --git a/static/ngf/img/src/advanced-routing.mermaid b/static/ngf/img/src/advanced-routing.mermaid deleted file mode 100644 index 8d7d83b8a..000000000 --- a/static/ngf/img/src/advanced-routing.mermaid +++ /dev/null @@ -1,35 +0,0 @@ -%% mermaid source for advanced-routing.png diagram -graph LR - users[Users] - ngfSvc["Public Endpoint\nfor\ncafe.example.com"] - subgraph cluster [Kubernetes Cluster] - subgraph appNs [Namespace\ndefault] - subgraph nsPadding [" "] - nginxPod[Pod\nNGINX] - coffeeV1Pod[Pod\ncoffee v1] - coffeeV2Pod[Pod\ncoffee v2] - teaPod[Pod\ntea] - teaPostPod[Pod\ntea-post] - end - end - end - - ngfSvc --> nginxPod - nginxPod --/coffee--> coffeeV1Pod - nginxPod --/coffee\nheader: version=v2\nOR\n/coffee?TEST=v2--> coffeeV2Pod - nginxPod --GET /tea--> teaPod - nginxPod --POST /tea--> teaPostPod - users --> ngfSvc - - class clusterPadding,nsPadding,clusterPadding2 noBorder - class gwNS,appNs namespace - class ngfSvc,nginxPod nginxNode - class coffeeV1Pod,coffeeV2Pod coffeeNode - class teaPod,teaPostPod teaNode - - classDef noBorder stroke:none,fill:none - classDef default fill:#FFFFFF,stroke:#000000 - classDef namespace fill:#FFFFFF,stroke:#036ffc,stroke-dasharray: 5 5,text-align:center - classDef nginxNode fill:#b4e0ad,stroke:#2AA317 - classDef coffeeNode fill:#edbd8c,stroke:#D9822B - classDef teaNode fill:#ff8f6a,stroke:#e5805f diff --git a/static/ngf/img/src/route-all-traffic-app.mermaid b/static/ngf/img/src/route-all-traffic-app.mermaid deleted file mode 100644 index bc2d4d706..000000000 --- a/static/ngf/img/src/route-all-traffic-app.mermaid +++ /dev/null @@ -1,13 +0,0 @@ -%% mermaid source for route-all-traffic-app.png diagram -graph TB - subgraph cluster [Kubernetes Cluster] - style cluster fill:#FFFFFF,stroke:#000000 - svc[Service\ncoffee] - pod1[Pod\ncoffee] - pod2[Pod\ncoffee] - end - - svc --> pod1 & pod2 - - class pod1,pod2,svc appNode - classDef appNode fill:#edbd8c,stroke:#D9822B diff --git a/static/ngf/img/src/route-all-traffic-config.mermaid b/static/ngf/img/src/route-all-traffic-config.mermaid deleted file mode 100644 index d2e0a4ffc..000000000 --- a/static/ngf/img/src/route-all-traffic-config.mermaid +++ /dev/null @@ -1,42 +0,0 @@ -%% mermaid source for route-all-traffic-config.png diagram -graph LR - subgraph config [Namespace default] - subgraph padding [" "] - direction LR - style config fill:#FFFFFF,stroke:#000000 - subgraph gw[Gateway cafe] - subgraph gwPadding [" "] - gwContents[HTTP/80] - end - end - subgraph hr[HTTPRoute coffee] - subgraph hrPadding [" "] - hrContents[cafe.example.com] - subgraph describeMatchAll [Match all\ntraffic] - subgraph describeMatchPadding [" "] - matchAll[Host: *\nPath: *] - end - end - subgraph describeService [Group matching\npods within a Service] - subgraph describePadding [" "] - coffeeSvc[Service\ncoffee] - end - end - end - end - end - end - - gwContents --> hrContents --> matchAll --> coffeeSvc - class padding,gwPadding,hrPadding,describeMatchAll,describeService,describePadding,describeMatchPadding noBorder - class gw gateway - class hr httpRoute - class matchAll,hrContents,coffeeSvc appDevNode - class gwContents clusterOppNode - - classDef noBorder stroke:none,fill:none,text-align:center - classDef default fill:#FFFFFF,stroke:#000000 - classDef gateway fill:#FFFFFF,stroke:#2AA317,stroke-dasharray: 3 3,text-align:center - classDef httpRoute fill:#FFFFFF,stroke:#D9822B,stroke-dasharray: 3 3,text-align:center - classDef appDevNode fill:#edbd8c,stroke:#D9822B - classDef clusterOppNode fill:#b4e0ad,stroke:#2AA317 diff --git a/static/ngf/img/src/route-all-traffic-flow.mermaid b/static/ngf/img/src/route-all-traffic-flow.mermaid deleted file mode 100644 index ed310024f..000000000 --- a/static/ngf/img/src/route-all-traffic-flow.mermaid +++ /dev/null @@ -1,33 +0,0 @@ -%% mermaid source for route-all-traffic-flow.png diagram -graph LR - clients[Clients] - ngfSvc["Public IP Address\nfor\ncafe.example.com"] - - subgraph cluster [Kubernetes Cluster] - style cluster fill:#FFFFFF,stroke:#000000 - - subgraph appNs [Namespace\ndefault] - subgraph nsPadding [" "] - nginxPod[Pod\nNGINX] - coffeePod1[Pod\ncoffee] - coffeePod2[Pod\ncoffee] - end - end - end - - ngfSvc --> nginxPod - nginxPod --> coffeePod1 & coffeePod2 - clients --> ngfSvc - - class clusterPadding,nsPadding,clusterPadding2 noBorder - class gwNS,appNs namespace - class nginxPod,ngfSvc nginxNode - class coffeePod1,coffeePod2 coffeeNode - class clients clientNode - - classDef noBorder stroke:none,fill:none - classDef default fill:#FFFFFF,stroke:#000000 - classDef namespace fill:#FFFFFF,stroke:#036ffc,stroke-dasharray: 5 5,text-align:center - classDef nginxNode fill:#b4e0ad,stroke:#2AA317 - classDef coffeeNode fill:#edbd8c,stroke:#D9822B - classDef clientNode fill:#D3D3D3