diff --git a/src/lib/components/Actions.svelte b/src/lib/components/Actions.svelte
index 67c7b3f2..a3ba7fcc 100644
--- a/src/lib/components/Actions.svelte
+++ b/src/lib/components/Actions.svelte
@@ -6,8 +6,7 @@
   import { browser } from '$app/environment';
   import { waitForRender } from '$lib/util/autoSync';
   import { env } from '$lib/util/env';
-  import { pakoSerde } from '$lib/util/serde';
-  import { stateStore } from '$lib/util/state';
+  import { stateStore, urlsStore } from '$lib/util/state';
   import { logEvent } from '$lib/util/stats';
   import { version as FAVersion } from '@fortawesome/fontawesome-free/package.json';
   import dayjs from 'dayjs';
@@ -16,6 +15,7 @@
   import DownloadIcon from '~icons/material-symbols/download';
   import ExternalLinkIcon from '~icons/material-symbols/open-in-new-rounded';
   import WidthIcon from '~icons/material-symbols/width-rounded';
+  import CopyInput from './CopyInput.svelte';
   import { Separator } from './ui/separator';
 
   const FONT_AWESOME_URL = `https://cdnjs.cloudflare.com/ajax/libs/font-awesome/${FAVersion}/css/all.min.css`;
@@ -151,12 +151,6 @@ ${svgString}`);
     });
   };
 
-  const onCopyMarkdown = () => {
-    document.querySelector<HTMLInputElement>('#markdown')?.select();
-    document.execCommand('Copy');
-    logEvent('copyMarkdown');
-  };
-
   let gistURL = $state('');
   stateStore.subscribe(({ loader }) => {
     if (loader?.type === 'gist') {
@@ -173,10 +167,6 @@ ${svgString}`);
     logEvent('loadGist');
   };
 
-  let iUrl: string | undefined = $state();
-  let svgUrl: string | undefined = $state();
-  let krokiUrl: string | undefined = $state();
-  let mdCode: string | undefined = $state();
   let imageSizeMode: 'auto' | 'width' | 'height' = $state('auto');
 
   $effect(() => {
@@ -187,16 +177,8 @@ ${svgString}`);
 
   let imageSize = $state(1080);
 
-  let isNetlify = $state(false);
-  if (browser && ['mermaid.live', 'netlify'].some((path) => window.location.host.includes(path))) {
-    isNetlify = true;
-  }
-  stateStore.subscribe(({ code, serialized }) => {
-    iUrl = `${rendererUrl}/img/${serialized}?type=png`;
-    svgUrl = `${rendererUrl}/svg/${serialized}`;
-    krokiUrl = `${krokiRendererUrl}/mermaid/svg/${pakoSerde.serialize(code)}`;
-    mdCode = `[![](${iUrl})](${window.location.protocol}//${window.location.host}${window.location.pathname}#${serialized})`;
-  });
+  const isNetlify =
+    browser && ['mermaid.live', 'netlify'].some((path) => window.location.host.includes(path));
 </script>
 
 {#snippet dualActionButton(text: string, download: (event: Event) => unknown, url?: string)}
@@ -221,13 +203,6 @@ ${svgString}`);
         <ToggleGroup.Item value="width">Width</ToggleGroup.Item>
         <ToggleGroup.Item value="height">Height</ToggleGroup.Item>
       </ToggleGroup.Root>
-      <!-- <Separator orientation="vertical" />
-      <span class="flex items-center gap-2">
-        Auto
-        <Switch id="autosize" bind:checked={isAutoImageMode} />
-      </span> -->
-
-      <!-- {#if } -->
       {#if imageSizeMode !== 'auto'}
         <div>
           <WidthIcon class="{imageSizeMode === 'width' ? '' : 'rotate-90'} size-6 transition-all" />
@@ -239,14 +214,13 @@ ${svgString}`);
         max="10000"
         disabled={imageSizeMode === 'auto'}
         bind:value={imageSize} />
-      <!-- {/if} -->
     </div>
     <div class="flex gap-2">
-      {@render dualActionButton('PNG', onDownloadPNG, iUrl)}
-      {@render dualActionButton('SVG', onDownloadSVG, svgUrl)}
+      {@render dualActionButton('PNG', onDownloadPNG, $urlsStore.png)}
+      {@render dualActionButton('SVG', onDownloadSVG, $urlsStore.svg)}
 
       {#if krokiRendererUrl}
-        <a target="_blank" rel="noreferrer" class="flex-grow" href={krokiUrl}>
+        <a target="_blank" rel="noreferrer" class="flex-grow" href={$urlsStore.kroki}>
           <Button class="action-btn w-full">
             <ExternalLinkIcon class="mr-2" /> Kroki
           </Button>
@@ -259,11 +233,8 @@ ${svgString}`);
         <CopyIcon /> Copy Image
       </Button>
     {/if}
-    {#if rendererUrl}
-      <div class="flex w-full items-center gap-2">
-        <Input type="text" value={mdCode} onclick={onCopyMarkdown} />
-        <Button onclick={onCopyMarkdown}><CopyIcon /> Copy Markdown</Button>
-      </div>
+    {#if $urlsStore.mdCode}
+      <CopyInput value={$urlsStore.mdCode} label="Copy Markdown" />
     {/if}
 
     <div class="flex w-full items-center gap-2">
diff --git a/src/lib/components/CopyInput.svelte b/src/lib/components/CopyInput.svelte
new file mode 100644
index 00000000..e4068825
--- /dev/null
+++ b/src/lib/components/CopyInput.svelte
@@ -0,0 +1,51 @@
+<script lang="ts">
+  import { Button } from '$/components/ui/button';
+  import { Input } from '$/components/ui/input';
+  import type { InputType } from '$/types';
+  import { notify } from '$/util/notify';
+  import { copyToClipboard } from '$/util/util';
+  import { scale } from 'svelte/transition';
+  import CheckIcon from '~icons/material-symbols/check-rounded';
+  import CopyIcon from '~icons/material-symbols/content-copy-outline-rounded';
+
+  let {
+    value,
+    label = 'Copy',
+    type = 'url'
+  }: { value: string; label?: string; type?: InputType } = $props();
+
+  let showCheckIcon = $state(false);
+</script>
+
+<div class="flex w-full items-center gap-2">
+  <Input
+    {type}
+    {value}
+    onclick={(e) => {
+      e.currentTarget.setSelectionRange(0, e.currentTarget.value.length);
+    }} />
+  <Button
+    onclick={async () => {
+      if (await copyToClipboard(value)) {
+        showCheckIcon = true;
+        setTimeout(() => {
+          showCheckIcon = false;
+        }, 1000);
+      } else {
+        notify('Failed to copy');
+      }
+    }}>
+    <div class="grid">
+      {#key showCheckIcon}
+        <span transition:scale class="col-start-1 row-start-1">
+          {#if showCheckIcon}
+            <CheckIcon />
+          {:else}
+            <CopyIcon />
+          {/if}
+        </span>
+      {/key}
+    </div>
+    {label}
+  </Button>
+</div>
diff --git a/src/lib/components/MainMenu.svelte b/src/lib/components/MainMenu.svelte
index b0765d95..cf9035a0 100644
--- a/src/lib/components/MainMenu.svelte
+++ b/src/lib/components/MainMenu.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
   import * as Popover from '$/components/ui/popover';
   import { Switch } from '$/components/ui/switch';
+  import { env } from '$/util/env';
+  import { urlsStore } from '$/util/state';
   import { cn } from '$/utils';
   import { mode, setMode } from 'mode-watcher';
   import type { Component } from 'svelte';
@@ -62,12 +64,14 @@
           checked={$mode === 'dark'}
           onCheckedChange={(dark) => setMode(dark ? 'dark' : 'light')} />
       </div>
-      {@render menuItem({
-        label: 'Edit in Playground',
-        icon: PlaygroundIcon,
-        href: '/',
-        class: 'text-accent bg-background hover:bg-background/50'
-      })}
+      {#if env.isEnabledMermaidChartLinks}
+        {@render menuItem({
+          label: 'Edit in Playground',
+          icon: PlaygroundIcon,
+          href: $urlsStore.mermaidChart.playground,
+          class: 'text-accent bg-background hover:bg-background/50'
+        })}
+      {/if}
     </div>
   </Popover.Content>
 </Popover.Root>
diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte
index 4698603a..219b9c17 100644
--- a/src/lib/components/Navbar.svelte
+++ b/src/lib/components/Navbar.svelte
@@ -9,9 +9,9 @@
 <script lang="ts">
   import { Separator } from '$/components/ui/separator';
   import { Switch } from '$/components/ui/switch';
-  import { env } from '$lib/util/env';
+  import { env } from '$/util/env';
   import { dismissPromotion, getActivePromotion } from '$lib/util/promos/promo';
-  import { stateStore } from '$lib/util/state';
+  import { urlsStore } from '$lib/util/state';
   import { MCBaseURL } from '$lib/util/util';
   import type { ComponentProps, Snippet } from 'svelte';
   import GithubIcon from '~icons/fa-brands/github';
@@ -26,8 +26,6 @@
 
   let { children }: Props = $props();
 
-  const { isEnabledMermaidChartLinks } = env;
-
   const isReferral = document.referrer.includes(MCBaseURL);
 
   type Links = ComponentProps<typeof DropdownNavMenu>['links'];
@@ -104,7 +102,7 @@
         {/if}
         Live Editor
       </a>
-      {#if isEnabledMermaidChartLinks}
+      {#if env.isEnabledMermaidChartLinks}
         <div class=" hidden items-center justify-center gap-4 md:flex">
           <Separator orientation="vertical" />
           <Switch
@@ -116,7 +114,7 @@
               // Wait for the event to be logged
               setTimeout(() => {
                 window.open(
-                  `${MCBaseURL}/play#${$stateStore.serialized}`,
+                  $urlsStore.mermaidChart.playground,
                   '_self',
                   // Do not send referrer header, if the user already came from playground
                   isReferral ? 'noreferrer' : ''
@@ -124,7 +122,7 @@
               }, 100);
             }} />
 
-          <a href="{MCBaseURL}/play#{$stateStore.serialized}" class="whitespace-nowrap">
+          <a href={$urlsStore.mermaidChart.playground} class="whitespace-nowrap">
             Playground <span class="hidden text-sm opacity-50 lg:inline"
               >- more features, no account required</span>
           </a>
diff --git a/src/lib/components/Preset.svelte b/src/lib/components/Preset.svelte
index dd9121d5..78925faf 100644
--- a/src/lib/components/Preset.svelte
+++ b/src/lib/components/Preset.svelte
@@ -222,7 +222,7 @@ packet-beta
   ];
 </script>
 
-<Card title="Sample Diagrams" isStackable icon={{ component: ShapesIcon }}>
+<Card title="Sample Diagrams" isOpen isStackable icon={{ component: ShapesIcon }}>
   <div class="flex h-fit max-h-52 flex-wrap gap-2 overflow-y-auto p-2">
     {#each diagramOrder as sample}
       <Button
diff --git a/src/lib/components/Share.svelte b/src/lib/components/Share.svelte
new file mode 100644
index 00000000..94a54296
--- /dev/null
+++ b/src/lib/components/Share.svelte
@@ -0,0 +1,41 @@
+<script>
+  import { buttonVariants } from '$/components/ui/button';
+  import * as Dialog from '$/components/ui/dialog';
+  import { urlsStore } from '$/util/state';
+  import CopyInput from './CopyInput.svelte';
+  import { Separator } from './ui/separator';
+</script>
+
+<Dialog.Root>
+  <Dialog.Trigger class={buttonVariants({ size: 'sm' })}>Share</Dialog.Trigger>
+  <Dialog.Content>
+    <Dialog.Header>
+      <Dialog.Title class="flex items-center gap-2 text-xl">Shareable links</Dialog.Title>
+      <Dialog.Description>Share your diagrams with others.</Dialog.Description>
+    </Dialog.Header>
+
+    <div class="flex flex-col gap-4">
+      <div class="flex flex-col gap-2">
+        <h2 class="flex items-center gap-2">
+          <img class="size-4" src="./favicon.svg" alt="Mermaid Live Editor" /> Mermaid Live Editor
+        </h2>
+        <CopyInput value={window.location.href} />
+        <Dialog.Description>
+          The content of the diagrams you create never leaves your browser.
+        </Dialog.Description>
+      </div>
+      {#if env.isEnabledMermaidChartLinks}
+        <Separator />
+        <div class="flex flex-col gap-2">
+          <h2 class="flex items-center gap-2">
+            <img class="size-4" src="./mermaidchart-logo.svg" alt="Mermaid Chart" /> Mermaid Chart Playground
+          </h2>
+          <CopyInput value={$urlsStore.mermaidChart.playground} />
+          <Dialog.Description>
+            Opens the Mermaid Chart Playground with Mermaid AI, Visual Editor, and more.
+          </Dialog.Description>
+        </div>
+      {/if}
+    </div>
+  </Dialog.Content>
+</Dialog.Root>
diff --git a/src/lib/components/ui/input/input.svelte b/src/lib/components/ui/input/input.svelte
index 5363180e..5d1c70e3 100644
--- a/src/lib/components/ui/input/input.svelte
+++ b/src/lib/components/ui/input/input.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
-  import type { HTMLInputAttributes, HTMLInputTypeAttribute } from 'svelte/elements';
-  import type { WithElementRef } from 'bits-ui';
+  import type { InputType } from '$/types';
   import { cn } from '$lib/utils.js';
-
-  type InputType = Exclude<HTMLInputTypeAttribute, 'file'>;
+  import type { WithElementRef } from 'bits-ui';
+  import type { HTMLInputAttributes } from 'svelte/elements';
 
   type Props = WithElementRef<
     Omit<HTMLInputAttributes, 'type'> &
diff --git a/src/lib/types.d.ts b/src/lib/types.d.ts
index dadd1b17..72c6b2ad 100644
--- a/src/lib/types.d.ts
+++ b/src/lib/types.d.ts
@@ -1,4 +1,5 @@
 import type { Component } from 'svelte';
+import type { HTMLInputTypeAttribute } from 'svelte/elements';
 import 'unplugin-icons/types/svelte';
 
 export interface MarkerData {
@@ -90,3 +91,5 @@ export interface ErrorHash {
     last_column: number;
   };
 }
+
+export type InputType = Exclude<HTMLInputTypeAttribute, 'file'>;
diff --git a/src/lib/util/env.ts b/src/lib/util/env.ts
index c9961211..42795588 100644
--- a/src/lib/util/env.ts
+++ b/src/lib/util/env.ts
@@ -3,5 +3,5 @@ export const env = {
   krokiRendererUrl: import.meta.env.MERMAID_KROKI_RENDERER_URL ?? '',
   analyticsUrl: import.meta.env.MERMAID_ANALYTICS_URL ?? '',
   domain: import.meta.env.MERMAID_DOMAIN ?? '',
-  isEnabledMermaidChartLinks: import.meta.env.MERMAID_IS_ENABLED_MERMAID_CHART_LINKS == 'true'
+  isEnabledMermaidChartLinks: import.meta.env.MERMAID_IS_ENABLED_MERMAID_CHART_LINKS === 'true'
 } as const;
diff --git a/src/lib/util/state.ts b/src/lib/util/state.ts
index 69e6f190..f449b1d8 100644
--- a/src/lib/util/state.ts
+++ b/src/lib/util/state.ts
@@ -2,6 +2,7 @@ import type { ErrorHash, MarkerData, State, ValidatedState } from '$lib/types';
 import { debounce } from 'lodash-es';
 import type { MermaidConfig } from 'mermaid';
 import { derived, get, writable, type Readable } from 'svelte/store';
+import { env } from './env';
 import {
   extractErrorLineText,
   findMostRelevantLineNumber,
@@ -9,8 +10,8 @@ import {
 } from './errorHandling';
 import { parse } from './mermaid';
 import { localStorage, persist } from './persist';
-import { deserializeState, serializeState } from './serde';
-import { errorDebug, formatJSON } from './util';
+import { deserializeState, pakoSerde, serializeState } from './serde';
+import { errorDebug, formatJSON, MCBaseURL } from './util';
 
 export const defaultState: State = {
   code: `flowchart TD
@@ -119,6 +120,21 @@ export const stateStore: Readable<ValidatedState> = derived(
   currentState
 );
 
+export const urlsStore = derived([stateStore], ([{ code, serialized }]) => {
+  const { krokiRendererUrl, rendererUrl } = env;
+  const png = `${rendererUrl}/img/${serialized}?type=png`;
+  return {
+    png,
+    svg: `${rendererUrl}/svg/${serialized}`,
+    kroki: `${krokiRendererUrl}/mermaid/svg/${pakoSerde.serialize(code)}`,
+    mdCode: `[![](${png})](${window.location.protocol}//${window.location.host}${window.location.pathname}#${serialized})`,
+    mermaidChart: {
+      save: `${MCBaseURL}/app/plugin/save?state=${serialized}`,
+      playground: `${MCBaseURL}/play#${serialized}`
+    }
+  };
+});
+
 export const loadState = (data: string): void => {
   let state: State;
   console.log(`Loading '${data}'`);
diff --git a/src/lib/util/util.ts b/src/lib/util/util.ts
index 5c11b048..c2b0d8ec 100644
--- a/src/lib/util/util.ts
+++ b/src/lib/util/util.ts
@@ -1,3 +1,4 @@
+import { env } from './env';
 import { loadDataFromUrl } from './fileLoaders/loader';
 import { initLoading } from './loading';
 import { applyMigrations } from './migrations';
@@ -26,7 +27,9 @@ export const initHandler = async (): Promise<void> => {
 
 export const isMac = navigator.platform.toUpperCase().includes('MAC');
 export const cmdKey = isMac ? 'Cmd' : 'Ctrl';
-export const MCBaseURL = 'https://mermaidchart.com'; // 'http://localhost:5174'
+export const MCBaseURL = env.isEnabledMermaidChartLinks
+  ? 'https://mermaidchart.com' // 'http://localhost:5174'
+  : 'https://example.com';
 
 let count = 0;
 export const errorDebug = (limit = 1000) => {
@@ -47,3 +50,39 @@ export const fetchText = async (url: string): Promise<string> => {
   const res = await fetch(url);
   return res.text();
 };
+
+export const copyToClipboard = async (text: string) => {
+  if (!navigator.clipboard) {
+    return fallbackCopyToClipboard(text);
+  }
+  try {
+    await navigator.clipboard.writeText(text);
+    return true;
+  } catch {
+    return fallbackCopyToClipboard(text);
+  }
+};
+
+function fallbackCopyToClipboard(text: string) {
+  const textArea = document.createElement('textarea');
+  textArea.value = text;
+  // Make the textarea out of viewport
+  textArea.style.position = 'fixed';
+  textArea.style.left = '-999999px';
+  textArea.style.top = '-999999px';
+  document.body.append(textArea);
+
+  textArea.focus();
+  textArea.select();
+
+  let success = false;
+  try {
+    // The deprecated but widely supported method
+    success = document.execCommand('copy');
+  } catch (error) {
+    console.error('Failed to copy:', error);
+  }
+
+  textArea.remove();
+  return success;
+}
diff --git a/src/routes/edit/+page.svelte b/src/routes/edit/+page.svelte
index 42a60295..7ea8f80e 100644
--- a/src/routes/edit/+page.svelte
+++ b/src/routes/edit/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import History from '$/components/History/History.svelte';
   import PanZoomToolbar from '$/components/PanZoomToolbar.svelte';
+  import Share from '$/components/Share.svelte';
   import SyncRoughToolbar from '$/components/SyncRoughToolbar.svelte';
   import { Button } from '$/components/ui/button';
   import * as Resizable from '$/components/ui/resizable';
@@ -15,8 +16,8 @@
   import Preset from '$lib/components/Preset.svelte';
   import View from '$lib/components/View.svelte';
   import type { DocumentationConfig, EditorMode, Tab, ValidatedState } from '$lib/types';
-  import { stateStore, updateCodeStore } from '$lib/util/state';
-  import { initHandler, MCBaseURL } from '$lib/util/util';
+  import { stateStore, updateCodeStore, urlsStore } from '$lib/util/state';
+  import { initHandler } from '$lib/util/util';
   import { onMount } from 'svelte';
   import BookIcon from '~icons/material-symbols/book-2-outline-rounded';
   import CodeIcon from '~icons/material-symbols/code-blocks-outline';
@@ -136,13 +137,9 @@
     <Toggle bind:pressed={isHistoryOpen} size="sm">
       <HistoryIcon />
     </Toggle>
-    <Button size="sm" class="cursor-not-allowed">Share</Button>
+    <Share />
     {#if env.isEnabledMermaidChartLinks}
-      <Button
-        variant="accent"
-        size="sm"
-        href={`${MCBaseURL}/app/plugin/save?state=${$stateStore.serialized}`}
-        target="_blank">
+      <Button variant="accent" size="sm" href={$urlsStore.mermaidChart.save} target="_blank">
         <img class="size-4" src="./mermaidchart-logo.svg" alt="Mermaid Chart" />
         Save diagram
       </Button>