From 3c8c742350bb0765482b87d3d1a86f50946932b5 Mon Sep 17 00:00:00 2001
From: WcaleNieWolny <isupermichael007@gmail.com>
Date: Sun, 18 Jan 2026 11:02:46 +0100
Subject: [PATCH 1/3] fix: replace mermaid code block with custom component for
 build process diagram

---
 src/components/BuildProcessFlow.astro         | 70 +++++++++++++++++++
 .../docs/cli/cloud-build/getting-started.mdx  | 10 +--
 2 files changed, 72 insertions(+), 8 deletions(-)
 create mode 100644 src/components/BuildProcessFlow.astro

diff --git a/src/components/BuildProcessFlow.astro b/src/components/BuildProcessFlow.astro
new file mode 100644
index 000000000..a4b86f1ab
--- /dev/null
+++ b/src/components/BuildProcessFlow.astro
@@ -0,0 +1,70 @@
+---
+---
+
+<script>
+  import mermaid from 'mermaid'
+
+  function initializeMermaid() {
+    const isDarkTheme = document.documentElement.dataset.theme === 'dark'
+    mermaid.initialize({
+      startOnLoad: true,
+      theme: isDarkTheme ? 'dark' : 'default',
+      fontSize: 18,
+    })
+  }
+
+  function saveOriginalContent() {
+    document.querySelectorAll('.mermaid').forEach((element) => {
+      if (!element.getAttribute('data-original-content')) {
+        element.setAttribute('data-original-content', element.innerHTML)
+      }
+    })
+  }
+
+  function resetAndRender() {
+    document.querySelectorAll('.mermaid').forEach((element) => {
+      const originalContent = element.getAttribute('data-original-content')
+      if (originalContent) {
+        element.removeAttribute('data-processed')
+        element.innerHTML = originalContent
+      }
+    })
+
+    const isDarkTheme = document.documentElement.dataset.theme === 'dark'
+    mermaid.initialize({
+      startOnLoad: false,
+      theme: isDarkTheme ? 'dark' : 'default',
+      fontSize: 18,
+    })
+
+    mermaid.run()
+  }
+
+  document.addEventListener('DOMContentLoaded', () => {
+    initializeMermaid()
+    saveOriginalContent()
+  })
+
+  const observer = new MutationObserver((mutations) => {
+    mutations.forEach((mutation) => {
+      if (mutation.attributeName === 'data-theme') {
+        resetAndRender()
+      }
+    })
+  })
+
+  if (typeof document !== 'undefined') {
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] })
+  }
+</script>
+
+<div style="width: 100%; padding: 1rem 0; display: flex; justify-content: center;">
+  <pre class="mermaid" style="width: 100%; max-width: 900px;">
+flowchart LR
+    A[Your Machine] -->|1. Zip Project| B[Local Temp]
+    B -->|2. Upload| C[Capgo Cloud]
+    C -->|3. Build| D[Build Server]
+    D -->|4. Logs Stream| A
+    D -->|5. Cleanup| E[Auto Delete]
+  </pre>
+</div>
diff --git a/src/content/docs/docs/cli/cloud-build/getting-started.mdx b/src/content/docs/docs/cli/cloud-build/getting-started.mdx
index a33700097..9bc55677a 100644
--- a/src/content/docs/docs/cli/cloud-build/getting-started.mdx
+++ b/src/content/docs/docs/cli/cloud-build/getting-started.mdx
@@ -6,6 +6,7 @@ sidebar:
 ---
 
 import { Steps, Card, CardGrid } from '@astrojs/starlight/components';
+import BuildProcessFlow from '@/components/BuildProcessFlow.astro';
 
 Get started with Capgo Cloud Build and create your first iOS or Android native build in minutes.
 
@@ -128,14 +129,7 @@ Before you begin, ensure you have:
 
 When you run the build command, here's what happens:
 
-```mermaid
-graph LR
-    A[Your Machine] -->|1. Zip Project| B[Local Temp]
-    B -->|2. Upload| C[Capgo Cloud]
-    C -->|3. Build| D[Build Server]
-    D -->|4. Logs Stream| A
-    D -->|5. Cleanup| E[Auto Delete]
-```
+<BuildProcessFlow />
 
 1. **Local Preparation** - Your project is zipped (excluding `node_modules` and dotfiles)
 2. **Upload** - The zip is uploaded to secure cloud storage (Cloudflare R2)

From 30e09d6dac3d9f3d7aeaa798cbc2650323d5e65c Mon Sep 17 00:00:00 2001
From: WcaleNieWolny <50914789+WcaleNieWolny@users.noreply.github.com>
Date: Sun, 18 Jan 2026 11:42:54 +0100
Subject: [PATCH 2/3] chore: accessibility for screen readers

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
---
 src/components/BuildProcessFlow.astro | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/BuildProcessFlow.astro b/src/components/BuildProcessFlow.astro
index a4b86f1ab..9f9b39f95 100644
--- a/src/components/BuildProcessFlow.astro
+++ b/src/components/BuildProcessFlow.astro
@@ -58,8 +58,16 @@
   }
 </script>
 
-<div style="width: 100%; padding: 1rem 0; display: flex; justify-content: center;">
-  <pre class="mermaid" style="width: 100%; max-width: 900px;">
+<div
+  style="width: 100%; padding: 1rem 0; display: flex; justify-content: center;"
+  aria-live="polite"
+>
+  <pre
+    class="mermaid"
+    style="width: 100%; max-width: 900px;"
+    role="img"
+    aria-label="Capgo Cloud Build process flow diagram"
+  >
 flowchart LR
     A[Your Machine] -->|1. Zip Project| B[Local Temp]
     B -->|2. Upload| C[Capgo Cloud]

From 204f7173e123bdfee158edc7562582a5f36546ce Mon Sep 17 00:00:00 2001
From: WcaleNieWolny <isupermichael007@gmail.com>
Date: Sun, 18 Jan 2026 11:53:41 +0100
Subject: [PATCH 3/3] chore: prevent code duplication by creating mermaid
 component

---
 src/components/AndroidAppleLoginGraph.astro   | 78 -------------------
 ...ldProcessFlow.astro => MermaidGraph.astro} | 31 +++++---
 .../plugins/social-login/apple/android.mdx    | 12 ++-
 .../docs/cli/cloud-build/getting-started.mdx  | 11 ++-
 .../plugins/social-login/apple/android.mdx    | 12 ++-
 .../plugins/social-login/apple/android.mdx    | 12 ++-
 .../fr/plugins/social-login/apple/android.mdx | 12 ++-
 .../plugins/social-login/apple/android.mdx    | 12 ++-
 .../plugins/social-login/apple/android.mdx    | 12 ++-
 .../plugins/social-login/apple/android.mdx    | 12 ++-
 .../plugins/social-login/apple/android.mdx    | 12 ++-
 .../plugins/social-login/apple/android.mdx    | 12 ++-
 12 files changed, 119 insertions(+), 109 deletions(-)
 delete mode 100644 src/components/AndroidAppleLoginGraph.astro
 rename src/components/{BuildProcessFlow.astro => MermaidGraph.astro} (76%)

diff --git a/src/components/AndroidAppleLoginGraph.astro b/src/components/AndroidAppleLoginGraph.astro
deleted file mode 100644
index b98c73045..000000000
--- a/src/components/AndroidAppleLoginGraph.astro
+++ /dev/null
@@ -1,78 +0,0 @@
-<script>
-  import mermaid from 'mermaid'
-
-  // Initialize on load with current theme
-  function initializeMermaid() {
-    const isDarkTheme = document.documentElement.dataset.theme === 'dark'
-    mermaid.initialize({
-      startOnLoad: true,
-      theme: isDarkTheme ? 'dark' : 'default',
-    })
-  }
-
-  // Save original mermaid content for later re-rendering
-  function saveOriginalContent() {
-    document.querySelectorAll('.mermaid').forEach((element) => {
-      if (!element.getAttribute('data-original-content')) {
-        element.setAttribute('data-original-content', element.innerHTML)
-      }
-    })
-  }
-
-  // Reset mermaid elements and restore original content
-  function resetAndRender() {
-    document.querySelectorAll('.mermaid').forEach((element) => {
-      const originalContent = element.getAttribute('data-original-content')
-      if (originalContent) {
-        // Remove the processed attribute so mermaid will reprocess it
-        element.removeAttribute('data-processed')
-        // Restore original content
-        element.innerHTML = originalContent
-      }
-    })
-
-    // Re-initialize with new theme
-    const isDarkTheme = document.documentElement.dataset.theme === 'dark'
-    mermaid.initialize({
-      startOnLoad: false,
-      theme: isDarkTheme ? 'dark' : 'default',
-    })
-
-    // Run mermaid on all diagrams
-    mermaid.run()
-  }
-
-  // Initial setup
-  document.addEventListener('DOMContentLoaded', () => {
-    initializeMermaid()
-    saveOriginalContent()
-  })
-
-  // Watch for theme changes
-  const observer = new MutationObserver((mutations) => {
-    mutations.forEach((mutation) => {
-      if (mutation.attributeName === 'data-theme') {
-        console.log('theme changed', document.documentElement.dataset.theme)
-        resetAndRender()
-      }
-    })
-  })
-
-  // Start observing theme changes
-  if (typeof document !== 'undefined') {
-    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] })
-  }
-</script>
-
-<div style="display: flex; justify-content: center; align-items: center; height: 100%;">
-  <pre
-    class="mermaid">
-        flowchart TD
-            A("await SocialLogin.login()") -->|Handled in the plugin|B(Generate the login URL)
-            B --> |Pass the link| C(Open the Chrome browser)
-            C --> D(Wait for the user to login)
-            D --> |Apple redirects to your backend|E(Handle the data returned from Apple)
-            E --> F(Redirect back to the app)
-            F --> G(Return to JS)
-        </pre>
-</div>
diff --git a/src/components/BuildProcessFlow.astro b/src/components/MermaidGraph.astro
similarity index 76%
rename from src/components/BuildProcessFlow.astro
rename to src/components/MermaidGraph.astro
index 9f9b39f95..f56132d98 100644
--- a/src/components/BuildProcessFlow.astro
+++ b/src/components/MermaidGraph.astro
@@ -1,4 +1,19 @@
 ---
+interface Props {
+  graph: string
+  ariaLabel?: string
+  fullWidth?: boolean
+}
+
+const { graph, ariaLabel, fullWidth = true } = Astro.props
+
+const containerStyle = fullWidth
+  ? "width: 100%; padding: 1rem 0; display: flex; justify-content: center;"
+  : "display: flex; justify-content: center; align-items: center; height: 100%;"
+
+const preStyle = fullWidth
+  ? "width: 100%; max-width: 900px;"
+  : ""
 ---
 
 <script>
@@ -59,20 +74,14 @@
 </script>
 
 <div
-  style="width: 100%; padding: 1rem 0; display: flex; justify-content: center;"
+  style={containerStyle}
   aria-live="polite"
 >
   <pre
     class="mermaid"
-    style="width: 100%; max-width: 900px;"
+    style={preStyle}
     role="img"
-    aria-label="Capgo Cloud Build process flow diagram"
-  >
-flowchart LR
-    A[Your Machine] -->|1. Zip Project| B[Local Temp]
-    B -->|2. Upload| C[Capgo Cloud]
-    C -->|3. Build| D[Build Server]
-    D -->|4. Logs Stream| A
-    D -->|5. Cleanup| E[Auto Delete]
-  </pre>
+    aria-label={ariaLabel}
+    set:html={graph}
+  />
 </div>
diff --git a/src/content/docs/de/docs/plugins/social-login/apple/android.mdx b/src/content/docs/de/docs/plugins/social-login/apple/android.mdx
index 50b7b7e3e..c7db30a68 100644
--- a/src/content/docs/de/docs/plugins/social-login/apple/android.mdx
+++ b/src/content/docs/de/docs/plugins/social-login/apple/android.mdx
@@ -8,9 +8,17 @@ sidebar:
   order: 3
 locale: de
 ---
-import AndroidAppleLoginGraph from '@/components/AndroidAppleLoginGraph.astro'
+import MermaidGraph from '@/components/MermaidGraph.astro';
 import { Steps } from '@astrojs/starlight/components';
 
+export const appleLoginFlowGraph = `flowchart TD
+    A("await SocialLogin.login()") -->|Handled in the plugin|B(Generate the login URL)
+    B --> |Pass the link| C(Open the Chrome browser)
+    C --> D(Wait for the user to login)
+    D --> |Apple redirects to your backend|E(Handle the data returned from Apple)
+    E --> F(Redirect back to the app)
+    F --> G(Return to JS)`;
+
 Apple login on android is hacky. Apple has no official support for `Sign in with Apple` on Android, so the solution is slightly hacky.
 
 Android currently uses a chrome tabs to display an OAuth2 website. This approach has the challenges:
@@ -22,7 +30,7 @@ Android currently uses a chrome tabs to display an OAuth2 website. This approach
 
 Let me use a diagram to explain the flow on android:
 
-<AndroidAppleLoginGraph />
+<MermaidGraph graph={appleLoginFlowGraph} ariaLabel="Apple Login flow diagram on Android" fullWidth={false} />
 
 Now that you are aware of the challlanges and the flow, let's begin the configuration.
 
diff --git a/src/content/docs/docs/cli/cloud-build/getting-started.mdx b/src/content/docs/docs/cli/cloud-build/getting-started.mdx
index 9bc55677a..b72930bb3 100644
--- a/src/content/docs/docs/cli/cloud-build/getting-started.mdx
+++ b/src/content/docs/docs/cli/cloud-build/getting-started.mdx
@@ -6,7 +6,14 @@ sidebar:
 ---
 
 import { Steps, Card, CardGrid } from '@astrojs/starlight/components';
-import BuildProcessFlow from '@/components/BuildProcessFlow.astro';
+import MermaidGraph from '@/components/MermaidGraph.astro';
+
+export const buildProcessFlowGraph = `flowchart LR
+    A[Your Machine] -->|1. Zip Project| B[Local Temp]
+    B -->|2. Upload| C[Capgo Cloud]
+    C -->|3. Build| D[Build Server]
+    D -->|4. Logs Stream| A
+    D -->|5. Cleanup| E[Auto Delete]`;
 
 Get started with Capgo Cloud Build and create your first iOS or Android native build in minutes.
 
@@ -129,7 +136,7 @@ Before you begin, ensure you have:
 
 When you run the build command, here's what happens:
 
-<BuildProcessFlow />
+<MermaidGraph graph={buildProcessFlowGraph} ariaLabel="Capgo Cloud Build process flow diagram" />
 
 1. **Local Preparation** - Your project is zipped (excluding `node_modules` and dotfiles)
 2. **Upload** - The zip is uploaded to secure cloud storage (Cloudflare R2)
diff --git a/src/content/docs/docs/plugins/social-login/apple/android.mdx b/src/content/docs/docs/plugins/social-login/apple/android.mdx
index 568b5c450..297016fff 100644
--- a/src/content/docs/docs/plugins/social-login/apple/android.mdx
+++ b/src/content/docs/docs/plugins/social-login/apple/android.mdx
@@ -4,9 +4,17 @@ description: This guide provides a comprehensive walkthrough on setting up Apple
 sidebar:
     order: 3
 ---
-import AndroidAppleLoginGraph from '@/components/AndroidAppleLoginGraph.astro'
+import MermaidGraph from '@/components/MermaidGraph.astro';
 import { Steps } from '@astrojs/starlight/components';
 
+export const appleLoginFlowGraph = `flowchart TD
+    A("await SocialLogin.login()") -->|Handled in the plugin|B(Generate the login URL)
+    B --> |Pass the link| C(Open the Chrome browser)
+    C --> D(Wait for the user to login)
+    D --> |Apple redirects to your backend|E(Handle the data returned from Apple)
+    E --> F(Redirect back to the app)
+    F --> G(Return to JS)`;
+
 Apple login on android is hacky. Apple has no official support for `Sign in with Apple` on Android, so the solution is slightly hacky.
 
 Android currently uses a chrome tabs to display an OAuth2 website. This approach has the challenges:
@@ -18,7 +26,7 @@ Android currently uses a chrome tabs to display an OAuth2 website. This approach
 
 Let me use a diagram to explain the flow on android:
 
-<AndroidAppleLoginGraph />
+<MermaidGraph graph={appleLoginFlowGraph} ariaLabel="Apple Login flow diagram on Android" fullWidth={false} />
 
 Now that you are aware of the challlanges and the flow, let's begin the configuration.
 
diff --git a/src/content/docs/es/docs/plugins/social-login/apple/android.mdx b/src/content/docs/es/docs/plugins/social-login/apple/android.mdx
index 93568d01a..907146097 100644
--- a/src/content/docs/es/docs/plugins/social-login/apple/android.mdx
+++ b/src/content/docs/es/docs/plugins/social-login/apple/android.mdx
@@ -6,9 +6,17 @@ sidebar:
 locale: es
 ---
 
-import AndroidAppleLoginGraph from '@/components/AndroidAppleLoginGraph.astro'
+import MermaidGraph from '@/components/MermaidGraph.astro';
 import { Steps } from '@astrojs/starlight/components';
 
+export const appleLoginFlowGraph = `flowchart TD
+    A("await SocialLogin.login()") -->|Handled in the plugin|B(Generate the login URL)
+    B --> |Pass the link| C(Open the Chrome browser)
+    C --> D(Wait for the user to login)
+    D --> |Apple redirects to your backend|E(Handle the data returned from Apple)
+    E --> F(Redirect back to the app)
+    F --> G(Return to JS)`;
+
 Apple login on android is hacky. Apple has no official support for `Sign in with Apple` on Android, so the solution is slightly hacky.
 
 Android currently uses a chrome tabs to display an OAuth2 website. This approach has the challenges:
@@ -20,7 +28,7 @@ Android currently uses a chrome tabs to display an OAuth2 website. This approach
 
 Let me use a diagram to explain the flow on android:
 
-<AndroidAppleLoginGraph />
+<MermaidGraph graph={appleLoginFlowGraph} ariaLabel="Apple Login flow diagram on Android" fullWidth={false} />
 
 Now that you are aware of the challlanges and the flow, let's begin the configuration.
 
diff --git a/src/content/docs/fr/plugins/social-login/apple/android.mdx b/src/content/docs/fr/plugins/social-login/apple/android.mdx
index 011de5fea..2e3d0b3a4 100644
--- a/src/content/docs/fr/plugins/social-login/apple/android.mdx
+++ b/src/content/docs/fr/plugins/social-login/apple/android.mdx
@@ -5,9 +5,17 @@ description: This Guide provides a comprehensive walkthrough on setting up Apple
 sidebar: 
     order: 3
 ---
-import AndroidAppleLoginGraph from '@/components/AndroidAppleLoginGraph.astro'
+import MermaidGraph from '@/components/MermaidGraph.astro';
 import { Steps } from '@astrojs/starlight/components';
 
+export const appleLoginFlowGraph = `flowchart TD
+    A("await SocialLogin.login()") -->|Handled in the plugin|B(Generate the login URL)
+    B --> |Pass the link| C(Open the Chrome browser)
+    C --> D(Wait for the user to login)
+    D --> |Apple redirects to your backend|E(Handle the data returned from Apple)
+    E --> F(Redirect back to the app)
+    F --> G(Return to JS)`;
+
 Apple login on android is hacky. Apple has no official support for `Sign in with Apple` on Android, so the solution is slightly hacky.
 
 Android currently uses a chrome tabs to display an OAuth2 website. This approach has the challenges:
@@ -19,7 +27,7 @@ Android currently uses a chrome tabs to display an OAuth2 website. This approach
 
 Let me use a diagram to explain the flow on Android:
 
-<AndroidAppleLoginGraph />
+<MermaidGraph graph={appleLoginFlowGraph} ariaLabel="Apple Login flow diagram on Android" fullWidth={false} />
 
 Now that you are aware of the challlanges and the flow, let's begin the Configuration.
 
diff --git a/src/content/docs/id/docs/plugins/social-login/apple/android.mdx b/src/content/docs/id/docs/plugins/social-login/apple/android.mdx
index 7eaaf21bf..b7c7ff527 100644
--- a/src/content/docs/id/docs/plugins/social-login/apple/android.mdx
+++ b/src/content/docs/id/docs/plugins/social-login/apple/android.mdx
@@ -5,9 +5,17 @@ description: Panduan ini memberikan panduan komprehensif tentang pengaturan Logi
 sidebar:
     order: 3
 ---
-import AndroidAppleLoginGraph from '@/components/AndroidAppleLoginGraph.astro'
+import MermaidGraph from '@/components/MermaidGraph.astro';
 import { Steps } from '@astrojs/starlight/components';
 
+export const appleLoginFlowGraph = `flowchart TD
+    A("await SocialLogin.login()") -->|Handled in the plugin|B(Generate the login URL)
+    B --> |Pass the link| C(Open the Chrome browser)
+    C --> D(Wait for the user to login)
+    D --> |Apple redirects to your backend|E(Handle the data returned from Apple)
+    E --> F(Redirect back to the app)
+    F --> G(Return to JS)`;
+
 Login Apple di Android agak rumit. Apple tidak memiliki dukungan resmi untuk `Sign in with Apple` di Android, jadi solusinya sedikit rumit.
 
 Android saat ini menggunakan tab Chrome untuk menampilkan situs web OAuth2. Pendekatan ini memiliki tantangan:
@@ -19,7 +27,7 @@ Android saat ini menggunakan tab Chrome untuk menampilkan situs web OAuth2. Pend
 
 Mari saya gunakan diagram untuk menjelaskan alur di Android:
 
-<AndroidAppleLoginGraph />
+<MermaidGraph graph={appleLoginFlowGraph} ariaLabel="Apple Login flow diagram on Android" fullWidth={false} />
 
 Sekarang setelah Anda mengetahui tantangan dan alurnya, mari kita mulai konfigurasi.
 
diff --git a/src/content/docs/it/docs/plugins/social-login/apple/android.mdx b/src/content/docs/it/docs/plugins/social-login/apple/android.mdx
index d51035eb9..6e9577e87 100644
--- a/src/content/docs/it/docs/plugins/social-login/apple/android.mdx
+++ b/src/content/docs/it/docs/plugins/social-login/apple/android.mdx
@@ -5,9 +5,17 @@ description: Questa guida fornisce una procedura completa per configurare il Log
 sidebar:
     order: 3
 ---
-import AndroidAppleLoginGraph from '@/components/AndroidAppleLoginGraph.astro'
+import MermaidGraph from '@/components/MermaidGraph.astro';
 import { Steps } from '@astrojs/starlight/components';
 
+export const appleLoginFlowGraph = `flowchart TD
+    A("await SocialLogin.login()") -->|Handled in the plugin|B(Generate the login URL)
+    B --> |Pass the link| C(Open the Chrome browser)
+    C --> D(Wait for the user to login)
+    D --> |Apple redirects to your backend|E(Handle the data returned from Apple)
+    E --> F(Redirect back to the app)
+    F --> G(Return to JS)`;
+
 Il login Apple su Android è complicato. Apple non ha supporto ufficiale per `Sign in with Apple` su Android, quindi la soluzione è leggermente hacky.
 
 Android attualmente utilizza schede Chrome per visualizzare un sito web OAuth2. Questo approccio presenta le seguenti sfide:
@@ -19,7 +27,7 @@ Android attualmente utilizza schede Chrome per visualizzare un sito web OAuth2.
 
 Lascia che usi un diagramma per spiegare il flusso su Android:
 
-<AndroidAppleLoginGraph />
+<MermaidGraph graph={appleLoginFlowGraph} ariaLabel="Apple Login flow diagram on Android" fullWidth={false} />
 
 Ora che sei consapevole delle sfide e del flusso, iniziamo la configurazione.
 
diff --git a/src/content/docs/ja/docs/plugins/social-login/apple/android.mdx b/src/content/docs/ja/docs/plugins/social-login/apple/android.mdx
index 799d81624..9f742fde9 100644
--- a/src/content/docs/ja/docs/plugins/social-login/apple/android.mdx
+++ b/src/content/docs/ja/docs/plugins/social-login/apple/android.mdx
@@ -8,9 +8,17 @@ sidebar:
   order: 3
 locale: ja
 ---
-import AndroidAppleLoginGraph from '@/components/AndroidAppleLoginGraph.astro'
+import MermaidGraph from '@/components/MermaidGraph.astro';
 import { Steps } from '@astrojs/starlight/components';
 
+export const appleLoginFlowGraph = `flowchart TD
+    A("await SocialLogin.login()") -->|Handled in the plugin|B(Generate the login URL)
+    B --> |Pass the link| C(Open the Chrome browser)
+    C --> D(Wait for the user to login)
+    D --> |Apple redirects to your backend|E(Handle the data returned from Apple)
+    E --> F(Redirect back to the app)
+    F --> G(Return to JS)`;
+
 AndroidでのAppleログインはハッキー的です。AppleはAndroidで「Sign in with Apple」の公式サポートがないため、ソリューションはやや不格好です。
 
 Android は現在、Chrome タブを使用して OAuth2 Web サイトを表示しています。このアプローチには以下の課題があります:
@@ -22,7 +30,7 @@ Android は現在、Chrome タブを使用して OAuth2 Web サイトを表示
 
 Let me use a diagram to explain the flow on android:
 
-<AndroidAppleLoginGraph />
+<MermaidGraph graph={appleLoginFlowGraph} ariaLabel="Apple Login flow diagram on Android" fullWidth={false} />
 
 Now that you are aware of the challlanges and the flow, let's begin the configuration.
 
diff --git a/src/content/docs/ko/docs/plugins/social-login/apple/android.mdx b/src/content/docs/ko/docs/plugins/social-login/apple/android.mdx
index ccb4357b9..5c60a2bf8 100644
--- a/src/content/docs/ko/docs/plugins/social-login/apple/android.mdx
+++ b/src/content/docs/ko/docs/plugins/social-login/apple/android.mdx
@@ -5,9 +5,17 @@ description: iOS 기기에 Capacitor를 사용하여 Apple 로그인을 설정
 sidebar:
     order: 3
 ---
-import AndroidAppleLoginGraph from '@/components/AndroidAppleLoginGraph.astro'
+import MermaidGraph from '@/components/MermaidGraph.astro';
 import { Steps } from '@astrojs/starlight/components';
 
+export const appleLoginFlowGraph = `flowchart TD
+    A("await SocialLogin.login()") -->|Handled in the plugin|B(Generate the login URL)
+    B --> |Pass the link| C(Open the Chrome browser)
+    C --> D(Wait for the user to login)
+    D --> |Apple redirects to your backend|E(Handle the data returned from Apple)
+    E --> F(Redirect back to the app)
+    F --> G(Return to JS)`;
+
 Apple login on android is hacky. Apple has no official support for `Sign in with Apple` on Android, so the solution is slightly hacky.
 
 Android currently uses a chrome tabs to display an OAuth2 website. This approach has the challenges:
@@ -19,7 +27,7 @@ Android currently uses a chrome tabs to display an OAuth2 website. This approach
 
 Let me use a diagram to explain the flow on android:
 
-<AndroidAppleLoginGraph />
+<MermaidGraph graph={appleLoginFlowGraph} ariaLabel="Apple Login flow diagram on Android" fullWidth={false} />
 
 Now that you are aware of the challlanges and the flow, let's begin the configuration.
 
diff --git a/src/content/docs/zh/docs/plugins/social-login/apple/android.mdx b/src/content/docs/zh/docs/plugins/social-login/apple/android.mdx
index 2599f930f..c0f560c45 100644
--- a/src/content/docs/zh/docs/plugins/social-login/apple/android.mdx
+++ b/src/content/docs/zh/docs/plugins/social-login/apple/android.mdx
@@ -5,9 +5,17 @@ description: 本指南提供了在 iOS 设备上使用 Capacitor 设置 Apple 
 sidebar:
     order: 3
 ---
-import AndroidAppleLoginGraph from '@/components/AndroidAppleLoginGraph.astro'
+import MermaidGraph from '@/components/MermaidGraph.astro';
 import { Steps } from '@astrojs/starlight/components';
 
+export const appleLoginFlowGraph = `flowchart TD
+    A("await SocialLogin.login()") -->|Handled in the plugin|B(Generate the login URL)
+    B --> |Pass the link| C(Open the Chrome browser)
+    C --> D(Wait for the user to login)
+    D --> |Apple redirects to your backend|E(Handle the data returned from Apple)
+    E --> F(Redirect back to the app)
+    F --> G(Return to JS)`;
+
 Android 上的 Apple 登录比较复杂。Apple 没有官方支持 Android 上的 `Sign in with Apple`,因此解决方案略显取巧。
 
 Android 目前使用 chrome 标签页显示 OAuth2 网站。这种方法面临以下挑战:
@@ -19,7 +27,7 @@ Android 目前使用 chrome 标签页显示 OAuth2 网站。这种方法面临
 
 让我用一张图表来解释 Android 上的流程:
 
-<AndroidAppleLoginGraph />
+<MermaidGraph graph={appleLoginFlowGraph} ariaLabel="Apple Login flow diagram on Android" fullWidth={false} />
 
 现在你已经了解了挑战和流程,让我们开始配置。