chore: remove mermaid, use static SVG (#28083)

apps/docs/components/Mermaid/Mermaid.tsx

@@ -1,2 +0,0 @@
-import { Mermaid } from 'mdx-mermaid/lib/Mermaid'
-export default Mermaid

apps/docs/components/Mermaid/index.tsx

@@ -1,13 +0,0 @@
-'use client'
-
-import { Suspense, lazy } from 'react'
-
-const MermaidHeavy = lazy(() => import('./Mermaid'))
-
-export function Mermaid(props) {
-  return (
-    <Suspense>
-      <MermaidHeavy {...props} />
-    </Suspense>
-  )
-}

apps/docs/components/index.tsx

@@ -77,7 +77,6 @@ import { AppleSecretGenerator } from './AppleSecretGenerator'
 import { AuthSmsProviderConfig } from './AuthSmsProviderConfig'
 import { Extensions } from './Extensions'
 import { JwtGenerator } from './JwtGenerator'
-import { Mermaid } from './Mermaid'
 import { RealtimeLimitsEstimator } from './RealtimeLimitsEstimator'
 
 const components = {
@@ -146,7 +145,6 @@ const components = {
   JwtGenerator,
   KotlinProjectSetup,
   Link,
-  Mermaid,
   MigrationWarnings,
   NavData,
   OAuthPkceFlow,

apps/docs/content/guides/auth/auth-mfa.mdx

@@ -34,16 +34,13 @@ Supabase Auth provides:
 
 Below is a flow chart illustrating how these APIs work together to enable MFA features in your app.
 
-<Mermaid
-  chart={`
-graph TD;
-  InitS((Setup flow)) --> SAAL1[/Session is AAL1/] --> Enroll[Enroll API] --> ShowQR[Show QR code] --> Scan([User: Scan QR code in authenticator]) --> Enter([User: Enter code]) --> Verify[Challenge + Verify API] --> Check{{Is code correct?}}
-  Check -->|Yes| AAL2[/Upgrade to AAL2/] --> Done((Done))
-  Check -->|No| Enter
-  InitA((Login flow)) --> SignIn([User: Sign-in]) --> AAL1[/Upgrade to AAL1/] --> ListFactors[List Factors API]
-  ListFactors -->|1 or more factors| OpenAuth([User: Open authenticator]) --> Enter
-  ListFactors -->|0 factors| Setup[[Setup flow]]
-`}
+<Image
+  alt="Diagram showing the flow of Multi-Factor authentication"
+  src={{
+    light: '/docs/img/guides/auth-mfa/auth-mfa-flow.svg',
+    dark: '/docs/img/guides/auth-mfa/auth-mfa-flow.svg',
+  }}
+  containerClassName="max-w-[700px]"
 />
 
 These sets of APIs let you control the MFA experience that works for you. You can create flows where MFA is optional, mandatory for all, or only specific groups of users.

apps/docs/features/docs/mdx.shared.tsx

@@ -26,7 +26,6 @@ import {
   SocialProviderSettingsSupabase,
   SocialProviderSetup,
 } from '~/components/MDX/partials'
-import { Mermaid } from '~/components/Mermaid'
 import { NavData } from '~/components/NavData'
 import { ProjectConfigVariables } from '~/components/ProjectConfigVariables'
 import { RealtimeLimitsEstimator } from '~/components/RealtimeLimitsEstimator'
@@ -62,7 +61,6 @@ const components = {
   JwtGenerator,
   KotlinProjectSetup,
   Link,
-  Mermaid,
   MigrationWarnings,
   NavData,
   OAuthPkceFlow,

apps/docs/next.config.mjs

@@ -62,17 +62,7 @@ const nextConfig = {
       transform: 'lodash/{{member}}',
     },
   },
-  transpilePackages: [
-    'ui',
-    'ui-patterns',
-    'common',
-    'mermaid',
-    'mdx-mermaid',
-    'dayjs',
-    'shared-data',
-    'api-types',
-    'icons',
-  ],
+  transpilePackages: ['ui', 'ui-patterns', 'common', 'dayjs', 'shared-data', 'api-types', 'icons'],
   /**
    * The SQL to REST API translator relies on libpg-query, which packages a
    * native Node.js module that wraps the Postgres query parser.

apps/docs/package.json

@@ -54,8 +54,6 @@
     "mdast-util-mdx": "^2.0.0",
     "mdast-util-to-markdown": "^1.5.0",
     "mdast-util-to-string": "^3.1.1",
-    "mdx-mermaid": "^2.0.0",
-    "mermaid": "^10.0.2",
     "micromark-extension-mdxjs": "^1.0.0",
     "next": "^14.2.3",
     "next-mdx-remote": "^4.4.1",

apps/docs/public/img/guides/auth-mfa/auth-mfa.mermaid

@@ -0,0 +1,7 @@
+graph TD;
+  InitS((Setup flow)) --> SAAL1[/Session is AAL1/] --> Enroll[Enroll API] --> ShowQR[Show QR code] --> Scan([User: Scan QR code in authenticator]) --> Enter([User: Enter code]) --> Verify[Challenge + Verify API] --> Check{{Is code correct?}}
+  Check -->|Yes| AAL2[/Upgrade to AAL2/] --> Done((Done))
+  Check -->|No| Enter
+  InitA((Login flow)) --> SignIn([User: Sign-in]) --> AAL1[/Upgrade to AAL1/] --> ListFactors[List Factors API]
+  ListFactors -->|1 or more factors| OpenAuth([User: Open authenticator]) --> Enter
+  ListFactors -->|0 factors| Setup[[Setup flow]]