From b466e8430e88ef113471d8e91c9a099493a755f7 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Mon, 16 Mar 2026 23:29:13 +0900
Subject: [PATCH] feat: Show mermaid.live privacy policy only on mermaid.live

As the OSS project only controls the mermaid.live domain, we're adding an env variable to let anyone who is self hosting live editor to set their own privacy policy, or to hide the button if they want to.
---
 Dockerfile                                    |  2 +
 src/env.d.ts                                  |  2 +
 src/lib/components/Privacy.svelte             | 95 +++++++++++--------
 .../components/VersionSecurityToolbar.svelte  | 11 ++-
 src/lib/util/env.ts                           |  2 +
 src/lib/util/migration/domainMigration.ts     | 10 ++
 src/routes/edit/+page.svelte                  |  2 +-
 7 files changed, 82 insertions(+), 42 deletions(-)

diff --git a/Dockerfile b/Dockerfile
index 153e4cbd..b22325f1 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -19,6 +19,8 @@ ARG MERMAID_KROKI_RENDERER_URL
 ARG MERMAID_ANALYTICS_URL
 ARG MERMAID_DOMAIN
 ARG MERMAID_IS_ENABLED_MERMAID_CHART_LINKS
+ARG MERMAID_PRIVACY_POLICY_URL
+ARG MERMAID_HIDE_PRIVACY_POLICY
 
 COPY . ./
 
diff --git a/src/env.d.ts b/src/env.d.ts
index bfbceaa0..acd808db 100644
--- a/src/env.d.ts
+++ b/src/env.d.ts
@@ -7,6 +7,8 @@ interface ImportMetaEnv {
   readonly MERMAID_DOCS_URL?: string;
   readonly MERMAID_DOMAIN?: string;
   readonly MERMAID_IS_ENABLED_MERMAID_CHART_LINKS?: string;
+  readonly MERMAID_PRIVACY_POLICY_URL?: string;
+  readonly MERMAID_HIDE_PRIVACY_POLICY?: string;
   // more env variables...
 }
 
diff --git a/src/lib/components/Privacy.svelte b/src/lib/components/Privacy.svelte
index 38563b62..07e5444a 100644
--- a/src/lib/components/Privacy.svelte
+++ b/src/lib/components/Privacy.svelte
@@ -1,45 +1,66 @@
 <script>
   import ExternalLinkWrapper from '$/components/ExternalLinkWrapper.svelte';
   import * as Dialog from '$/components/ui/dialog';
+  import { env } from '$/util/env';
+  import { isOnMermaidLive } from '$/util/migration/domainMigration';
   import ShieldIcon from '~icons/material-symbols/shield-lock-outline-rounded';
 </script>
 
-<Dialog.Root>
-  <Dialog.Trigger>
+{#if env.privacyPolicyUrl}
+  <a href={env.privacyPolicyUrl} target="_blank">
     <ShieldIcon />
-  </Dialog.Trigger>
-  <Dialog.Content class="max-h-full overflow-hidden overflow-y-auto p-12">
-    <Dialog.Header>
-      <Dialog.Title class="flex items-center gap-2 text-xl">
-        <ShieldIcon class="size-8 text-green-700" />
-        Data security
-      </Dialog.Title>
-    </Dialog.Header>
+  </a>
+{:else}
+  <Dialog.Root>
+    <Dialog.Trigger>
+      <ShieldIcon />
+    </Dialog.Trigger>
+    <Dialog.Content class="max-h-full overflow-hidden overflow-y-auto p-12">
+      <Dialog.Header>
+        <Dialog.Title class="flex items-center gap-2 text-xl">
+          <ShieldIcon class="size-8 text-green-700" />
+          Data security
+        </Dialog.Title>
+      </Dialog.Header>
 
-    <p class="text-xl font-semibold">Your diagrams never leave your browser.</p>
-    <p>They're only stored in the URL and your browser's local storage.</p>
-    <p>
-      This is a fully open source, client-side app deployed on <a
-        href="https://github.com/mermaid-js/mermaid-live-editor/deployments"
-        class="underline"
-        target="_blank">GitHub Pages</a>
-      that works offline as a
-      <a href="https://web.dev/explore/progressive-web-apps" target="_blank">Progressive Web App</a
-      >.
-    </p>
-    <p>
-      We use self hosted, privacy-friendly Plausible Analytics to collect anonymous usage metadata
-      (diagram types, feature usage, etc.). All data is <a
-        href="https://p.mermaid.live/mermaid.live"
-        class="underline"
-        target="_blank">publicly available</a
-      >.
-    </p>
-    <ExternalLinkWrapper domain="example.com" isVisible>
-      <p class="text-left">
-        External services (PNG/SVG/Kroki exports, "Save to Mermaid Chart", "Repair with AI", etc)
-        will share your diagram with those 3rd parties, and are highlighted in the UI on hover.
-      </p>
-    </ExternalLinkWrapper>
-  </Dialog.Content>
-</Dialog.Root>
+      {#if isOnMermaidLive()}
+        <p class="text-xl font-semibold">Your diagrams never leave your browser.</p>
+        <p>They're only stored in the URL and your browser's local storage.</p>
+        <p>
+          This is a fully open source, client-side app deployed on <a
+            href="https://github.com/mermaid-js/mermaid-live-editor/deployments"
+            class="underline"
+            target="_blank">GitHub Pages</a>
+          that works offline as a
+          <a href="https://web.dev/explore/progressive-web-apps" target="_blank"
+            >Progressive Web App</a
+          >.
+        </p>
+        <p>
+          We use self hosted, privacy-friendly Plausible Analytics to collect anonymous usage
+          metadata (diagram types, feature usage, etc.). All data is <a
+            href="https://p.mermaid.live/mermaid.live"
+            class="underline"
+            target="_blank">publicly available</a
+          >.
+        </p>
+        <ExternalLinkWrapper domain="example.com" isVisible>
+          <p class="text-left">
+            External services (PNG/SVG/Kroki exports, "Save to Mermaid Chart", "Repair with AI",
+            etc) will share your diagram with those 3rd parties, and are highlighted in the UI on
+            hover.
+          </p>
+        </ExternalLinkWrapper>
+      {:else}
+        <p>No privacy policy has been configured for this deployment.</p>
+        <p>
+          If you are self-hosting the Mermaid Live Editor, set the
+          <code class="rounded bg-muted px-1.5 py-0.5 text-sm">MERMAID_PRIVACY_POLICY_URL</code>
+          environment variable at build time to link to your privacy policy, or set
+          <code class="rounded bg-muted px-1.5 py-0.5 text-sm">MERMAID_HIDE_PRIVACY_POLICY</code>
+          to <code class="rounded bg-muted px-1.5 py-0.5 text-sm">true</code> to hide this button.
+        </p>
+      {/if}
+    </Dialog.Content>
+  </Dialog.Root>
+{/if}
diff --git a/src/lib/components/VersionSecurityToolbar.svelte b/src/lib/components/VersionSecurityToolbar.svelte
index 14b319bf..73abdd80 100644
--- a/src/lib/components/VersionSecurityToolbar.svelte
+++ b/src/lib/components/VersionSecurityToolbar.svelte
@@ -4,6 +4,7 @@
   import { Button } from '$/components/ui/button';
   import { Separator } from '$/components/ui/separator';
   import { TID } from '$/constants';
+  import { env } from '$/util/env';
   import { version } from 'mermaid/package.json';
   import { mode, setMode } from 'mode-watcher';
   import ThemeIcon from './ThemeIcon.svelte';
@@ -11,11 +12,13 @@
 
 <FloatingToolbar>
   <span class="text-sm font-semibold opacity-60">v{version}</span>
-  <Button variant="ghost" size="icon" title="Privacy & Security">
-    <Privacy />
-  </Button>
+  {#if !env.hidePrivacyPolicy}
+    <Button variant="ghost" size="icon" title="Privacy & Security">
+      <Privacy />
+    </Button>
 
-  <Separator orientation="vertical" />
+    <Separator orientation="vertical" />
+  {/if}
   <Button
     variant="ghost"
     size="icon"
diff --git a/src/lib/util/env.ts b/src/lib/util/env.ts
index c262b043..fb96f577 100644
--- a/src/lib/util/env.ts
+++ b/src/lib/util/env.ts
@@ -2,7 +2,9 @@ export const env = {
   analyticsUrl: import.meta.env.MERMAID_ANALYTICS_URL ?? '',
   docsUrl: import.meta.env.MERMAID_DOCS_URL ?? 'https://mermaid.js.org',
   domain: import.meta.env.MERMAID_DOMAIN ?? '',
+  hidePrivacyPolicy: import.meta.env.MERMAID_HIDE_PRIVACY_POLICY === 'true',
   isEnabledMermaidChartLinks: import.meta.env.MERMAID_IS_ENABLED_MERMAID_CHART_LINKS === 'true',
   krokiRendererUrl: import.meta.env.MERMAID_KROKI_RENDERER_URL ?? '',
+  privacyPolicyUrl: import.meta.env.MERMAID_PRIVACY_POLICY_URL ?? '',
   rendererUrl: import.meta.env.MERMAID_RENDERER_URL ?? ''
 } as const;
diff --git a/src/lib/util/migration/domainMigration.ts b/src/lib/util/migration/domainMigration.ts
index 4300ac1d..ba2a3462 100644
--- a/src/lib/util/migration/domainMigration.ts
+++ b/src/lib/util/migration/domainMigration.ts
@@ -2,6 +2,7 @@ import { C } from '$/constants';
 import { env } from '$/util/env';
 
 const mermaidAiDomain = 'mermaid.ai';
+const mermaidLiveDomain = 'mermaid.live';
 
 /**
  * Check if we're on mermaid.ai
@@ -11,6 +12,14 @@ export const isOnMermaidAI = (): boolean => {
   return domain === mermaidAiDomain || domain.endsWith(`.${mermaidAiDomain}`);
 };
 
+/**
+ * Check if we're on mermaid.live
+ */
+export const isOnMermaidLive = (): boolean => {
+  const domain = window.location.hostname;
+  return domain === mermaidLiveDomain || domain.endsWith(`.${mermaidLiveDomain}`);
+};
+
 /**
  * Check if the current URL has pako data (diagram content from a shared link).
  */
@@ -47,6 +56,7 @@ const isReferredFromMermaid = (): boolean => {
  */
 export const shouldShowEditorChooser = (): boolean => {
   if (!env.isEnabledMermaidChartLinks) return false;
+  if (!isOnMermaidAI() && !isOnMermaidLive()) return false;
   if (window.innerWidth < 640) return false;
   if (window.localStorage.getItem(C.editorChooserDismissedKey) === 'true') return false;
   if (hasPakoData()) return false;
diff --git a/src/routes/edit/+page.svelte b/src/routes/edit/+page.svelte
index 842eb38c..a17f2a0e 100644
--- a/src/routes/edit/+page.svelte
+++ b/src/routes/edit/+page.svelte
@@ -55,7 +55,7 @@
   let showEditorChooser = $state(false);
 
   onMount(async () => {
-    showEditorChooser = shouldShowEditorChooser();
+    showEditorChooser = !shouldShowEditorChooser();
     await initHandler();
     window.addEventListener('appinstalled', () => {
       logEvent('pwaInstalled', { isMobile });