Cap-go · WcaleNieWolny · Jan 18, 2026 · Jan 18, 2026 · Jan 18, 2026
diff --git a/src/components/AndroidAppleLoginGraph.astro → src/components/MermaidGraph.astro b/src/components/AndroidAppleLoginGraph.astro → src/components/MermaidGraph.astro
@@ -1,16 +1,33 @@
+---
+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>
   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',
+      fontSize: 18,
     })
   }
 
-  // Save original mermaid content for later re-rendering
   function saveOriginalContent() {
     document.querySelectorAll('.mermaid').forEach((element) => {
       if (!element.getAttribute('data-original-content')) {
@@ -19,60 +36,52 @@
     })
   }
 
-  // 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',
+      fontSize: 18,
     })
 
-    // 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%;">
+<div
+  style={containerStyle}
+  aria-live="polite"
+>
   <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>
+    class="mermaid"
+    style={preStyle}
+    role="img"
+    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
@@ -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
@@ -6,6 +6,14 @@ sidebar:
 ---
 
 import { Steps, Card, CardGrid } from '@astrojs/starlight/components';
+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.
 
@@ -128,14 +136,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]
-```
+<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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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} />
 
 现在你已经了解了挑战和流程,让我们开始配置。