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 @@ - - +{#if env.privacyPolicyUrl} + - - - - - - Data security - - + +{:else} + + + + + + + + + Data security + + -

Your diagrams never leave your browser.

-

They're only stored in the URL and your browser's local storage.

-

- This is a fully open source, client-side app deployed on GitHub Pages - that works offline as a - Progressive Web App. -

-

- We use self hosted, privacy-friendly Plausible Analytics to collect anonymous usage metadata - (diagram types, feature usage, etc.). All data is publicly available. -

- -

- 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. -

- - - + {#if isOnMermaidLive()} +

Your diagrams never leave your browser.

+

They're only stored in the URL and your browser's local storage.

+

+ This is a fully open source, client-side app deployed on GitHub Pages + that works offline as a + Progressive Web App. +

+

+ We use self hosted, privacy-friendly Plausible Analytics to collect anonymous usage + metadata (diagram types, feature usage, etc.). All data is publicly available. +

+ +

+ 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. +

+ + {:else} +

No privacy policy has been configured for this deployment.

+

+ If you are self-hosting the Mermaid Live Editor, set the + MERMAID_PRIVACY_POLICY_URL + environment variable at build time to link to your privacy policy, or set + MERMAID_HIDE_PRIVACY_POLICY + to true to hide this button. +

+ {/if} + + +{/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 @@ v{version} - + {#if !env.hidePrivacyPolicy} + - + + {/if} +
+
+ + 10% off with code JS26 + +
+ + +
  • @@ -103,13 +114,22 @@ -
    -

    Open Source

    -

    Code only, no login, always free

    +
    +
    +

    Open Source

    +

    Code only, no login, always free

    +
    - +
    +

    Mermaid has a new home

    + + +
    • @@ -131,5 +151,14 @@
    + +
    + + mermaid.ai Privacy Policy + +
    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;