MC Playground Toggle

.env

@@ -1,5 +1,7 @@
-  MERMAID_DOMAIN=''
-  MERMAID_ANALYTICS_URL=''
-  MERMAID_RENDERER_URL='https://mermaid.ink'
-  MERMAID_KROKI_RENDERER='https://kroki.io'
-  MERMAID_IS_ENABLED_MERMAID_CHART_LINKS=''
+MERMAID_DOMAIN=''
+MERMAID_ANALYTICS_URL=''
+MERMAID_RENDERER_URL='https://mermaid.ink'
+MERMAID_KROKI_RENDERER='https://kroki.io'
+MERMAID_IS_ENABLED_MERMAID_CHART_LINKS=''
+
+# cp .env .env.local to make local changes

.gitignore

@@ -11,4 +11,5 @@ yarn-error.log
 /snapshots.js
 /cypress/downloads
 /cypress/videos
-/cypress/screenshots
+/cypress/screenshots
+.env.local

cypress/snapshots.js

@@ -1,7 +1,7 @@
 module.exports = {
   "Site Loads": {
     "Check Home page load": {
-      "1": "{\"code\":\"flowchart TD\\n    A[Christmas] -->|Get money| B(Go shopping)\\n    B --> C{Let me think}\\n    C -->|One| D[Laptop]\\n    C -->|Two| E[iPhone]\\n    C -->|Three| F[fa:fa-car Car]\\n  \",\"mermaid\":\"{\\n  \\\"theme\\\": \\\"default\\\"\\n}\",\"autoSync\":true,\"updateDiagram\":true}"
+      "1": "{\"code\":\"flowchart TD\\n    A[Christmas] -->|Get money| B(Go shopping)\\n    B --> C{Let me think}\\n    C -->|One| D[Laptop]\\n    C -->|Two| E[iPhone]\\n    C -->|Three| F[fa:fa-car Car]\\n  \",\"mermaid\":\"{\\n  \\\"theme\\\": \\\"default\\\"\\n}\",\"autoSync\":true,\"rough\":false,\"updateDiagram\":true,\"panZoom\":false}"
     },
     "Check Redirect from old URL": {
       "1": "{\"code\":\"graph TD\\n    A[Christmas] -->|Get money| B(Go shopping)\\n    B --> C{Let me think}\\n    C -->|One| D[Laptop]\\n    C -->|Two| E[iPhone]\\n    C -->|Three| F[fa:fa-car Car]\",\"mermaid\":\"{\\n  \\\"theme\\\": \\\"default\\\"\\n}\",\"autoSync\":true,\"updateDiagram\":true}"
@@ -19,10 +19,10 @@ module.exports = {
   "__version": "12.17.4",
   "Auto sync tests": {
     "should dim diagram when code is edited": {
-      "1": "{\"code\":\"flowchart TD\\n    A[Christmas] -->|Get money| B(Go shopping)\\n    B --> C{Let me think}\\n    C -->|One| D[Laptop]\\n    C -->|Two| E[iPhone]\\n    C -->|Three| F[fa:fa-car Car]\\n    C --> Test\",\"mermaid\":\"{\\n  \\\"theme\\\": \\\"default\\\"\\n}\",\"autoSync\":false,\"updateDiagram\":false}"
+      "1": "{\"code\":\"flowchart TD\\n    A[Christmas] -->|Get money| B(Go shopping)\\n    B --> C{Let me think}\\n    C -->|One| D[Laptop]\\n    C -->|Two| E[iPhone]\\n    C -->|Three| F[fa:fa-car Car]\\n    C --> Test\",\"mermaid\":\"{\\n  \\\"theme\\\": \\\"default\\\"\\n}\",\"autoSync\":false,\"rough\":false,\"updateDiagram\":false,\"panZoom\":false}"
     },
     "should not dim diagram when code is in sync": {
-      "1": "{\"code\":\"flowchart TD\\n    A[Christmas] -->|Get money| B(Go shopping)\\n    B --> C{Let me think}\\n    C -->|One| D[Laptop]\\n    C -->|Two| E[iPhone]\\n    C -->|Three| F[fa:fa-car Car]\\n    C --> Testing\",\"mermaid\":\"{\\n  \\\"theme\\\": \\\"default\\\"\\n}\",\"autoSync\":true,\"updateDiagram\":false}"
+      "1": "{\"code\":\"flowchart TD\\n    A[Christmas] -->|Get money| B(Go shopping)\\n    B --> C{Let me think}\\n    C -->|One| D[Laptop]\\n    C -->|Two| E[iPhone]\\n    C -->|Three| F[fa:fa-car Car]\\n    C --> Testing\",\"mermaid\":\"{\\n  \\\"theme\\\": \\\"default\\\"\\n}\",\"autoSync\":true,\"rough\":false,\"updateDiagram\":false,\"panZoom\":false}"
     }
   },
   "Test themes": {

src/lib/components/DropdownNavMenu.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  interface Props {
+    links: { title: string; href: string }[];
+    label?: string;
+    icon?: string;
+  }
+
+  let { links, label, icon }: Props = $props();
+</script>
+
+<div class="dropdown dropdown-end">
+  <button class="btn btn-ghost">
+    {#if icon}
+      <i class={icon}></i>
+    {/if}
+    {#if label}
+      <span>{label}</span>
+    {/if}
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 1792 1792"
+      class="ml-1 inline-block h-4 w-4 fill-current"
+      ><path
+        d="M1395 736q0 13-10 23l-466 466q-10 10-23 10t-23-10l-466-466q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l393 393 393-393q10-10 23-10t23 10l50 50q10 10 10 23z" /></svg>
+  </button>
+  <div
+    class="dropdown-content menu top-14 size-fit overflow-y-auto bg-base-200 text-base-content shadow-2xl">
+    <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+    <ul tabindex="0" class="menu compact p-4">
+      {#each links as { href, title }}
+        <li>
+          <a
+            role="menuitem"
+            tabindex="0"
+            class="whitespace-nowrap underline"
+            target="_blank"
+            {href}>
+            {title}
+          </a>
+        </li>
+      {/each}
+    </ul>
+  </div>
+</div>

src/lib/components/Navbar.svelte

@@ -9,53 +9,43 @@
 <script lang="ts">
   import { env } from '$lib/util/env';
   import { dismissPromotion, getActivePromotion } from '$lib/util/promos/promo';
+  import { stateStore } from '$lib/util/state';
+  import { MCBaseURL } from '$lib/util/util';
+  import type { ComponentProps } from 'svelte';
+  import DropdownNavMenu from './DropdownNavMenu.svelte';
   import Privacy from './Privacy.svelte';
   import Theme from './Theme.svelte';
 
   const { isEnabledMermaidChartLinks } = env;
 
   let isMenuOpen = $state(false);
-
+  const isReferral = document.referrer.includes(MCBaseURL);
   function toggleMenu() {
     isMenuOpen = !isMenuOpen;
   }
 
-  interface Link {
-    href: string;
-    title?: string;
-    icon?: string;
-    img?: string;
-  }
+  type Links = ComponentProps<typeof DropdownNavMenu>['links'];
 
-  let links: Link[] = [
-    {
-      title: 'Documentation',
-      href: 'https://mermaid.js.org/intro/getting-started.html'
-    },
+  const githubLinks: Links = [
+    { title: 'Mermaid JS', href: 'https://github.com/mermaid-js/mermaid' },
     {
-      title: 'Tutorial',
-      href: 'https://mermaid.js.org/ecosystem/tutorials.html'
+      title: 'Mermaid Live Editor',
+      href: 'https://github.com/mermaid-js/mermaid-live-editor'
     },
     {
-      title: 'Mermaid',
-      href: 'https://github.com/mermaid-js/mermaid'
-    },
-    {
-      title: 'CLI',
+      title: 'Mermaid CLI',
       href: 'https://github.com/mermaid-js/mermaid-cli'
-    },
-    {
-      href: 'https://github.com/mermaid-js/mermaid-live-editor',
-      icon: 'fab fa-github fa-lg'
     }
   ];
 
-  if (isEnabledMermaidChartLinks) {
-    links.push({
-      href: 'https://mermaidchart.com',
-      img: './mermaidchart-logo.svg'
-    });
-  }
+  const documentationLinks: Links = [
+    { title: 'Getting started', href: 'https://mermaid.js.org/intro/getting-started.html' },
+    { title: 'Tutorials', href: 'https://mermaid.js.org/ecosystem/tutorials.html' },
+    {
+      title: 'Integrations',
+      href: 'https://mermaid.js.org/ecosystem/integrations-community.html'
+    }
+  ];
 
   let activePromotion = $state(getActivePromotion());
 
@@ -93,11 +83,37 @@
   </div>
 {/if}
 
-<div class="navbar bg-primary p-0 shadow-lg">
-  <div class="mx-2 flex-1 px-2">
-    <span class="text-lg font-bold">
-      <a href="/">Mermaid<span class="text-xs font-thin">v{version}</span> Live Editor</a>
-    </span>
+<div class="navbar z-50 bg-primary p-0 shadow-lg">
+  <div class="mx-2 flex flex-1 gap-2 px-2">
+    <a href="/"><img class="size-6" src="./favicon.svg" alt="Mermaid Live Editor" /></a>
+    <div
+      id="switcher"
+      class="flex items-center justify-center gap-2 font-bold"
+      class:flex-row-reverse={isReferral}>
+      <a href="/">
+        {#if !isReferral}
+          Mermaid
+        {/if}
+        Live Editor
+      </a>
+      {#if isEnabledMermaidChartLinks}
+        <input
+          type="checkbox"
+          class="toggle toggle-primary"
+          id="editorMode"
+          checked={isReferral}
+          onclick={() => {
+            logEvent('playgroundToggle', { isReferred: isReferral });
+            window.open(
+              `${MCBaseURL}/play#${$stateStore.serialized}`,
+              '_self',
+              // Do not send referrer header, if the user already came from playground
+              isReferral ? 'noreferrer' : ''
+            );
+          }} />
+        <a href="{MCBaseURL}/play#{$stateStore.serialized}">Playground</a>
+      {/if}
+    </div>
   </div>
 
   <label
@@ -140,25 +156,28 @@
     onclick={toggleMenu} />
 
   <div class="hidden w-full lg:flex lg:w-auto lg:items-center" id="menu">
-    <Theme />
+    <span class="text-sm">v{version}</span>
     <ul class="items-center justify-between pt-4 text-base lg:flex lg:pt-0">
       <li>
         <Privacy />
       </li>
-      {#each links as { title, href, icon, img }}
+      <li>
+        <Theme />
+      </li>
+      <li>
+        <DropdownNavMenu label="Documentation" links={documentationLinks} />
+      </li>
+      <li>
+        <DropdownNavMenu icon="fab fa-github fa-lg" links={githubLinks} />
+      </li>
+
+      {#if isEnabledMermaidChartLinks}
         <li>
-          <a class="btn btn-ghost" target="_blank" {href}>
-            {#if icon}
-              <i class={icon}></i>
-            {:else if img}
-              <img src={img} alt={title} />
-            {/if}
-            {#if title}
-              {title}
-            {/if}
+          <a class="btn btn-ghost" target="_blank" href="https://mermaidchart.com">
+            <img class="size-6" src="./mermaidchart-logo.svg" alt="Mermaid Chart" />
           </a>
         </li>
-      {/each}
+      {/if}
     </ul>
   </div>
 </div>
@@ -171,13 +190,4 @@
     background: #661ae6;
     display: flex;
   }
-
-  .navbar {
-    z-index: 10000;
-  }
-
-  img {
-    width: 1.5rem;
-    height: 1.5rem;
-  }
 </style>

src/lib/util/stats.ts

@@ -104,6 +104,7 @@ const defaultDelay = minutesToMilliSeconds(1);
 const delaysPerEvent = {
   render: minutesToMilliSeconds(5),
   panZoom: minutesToMilliSeconds(10),
+  playgroundToggle: defaultDelay,
   copyClipboard: defaultDelay,
   download: defaultDelay,
   copyMarkdown: defaultDelay,

src/lib/util/util.ts

@@ -1,8 +1,8 @@
-import { initURLSubscription, loadState, updateCodeStore } from './state';
-import { plausible, initAnalytics } from './stats';
 import { loadDataFromUrl } from './fileLoaders/loader';
 import { initLoading } from './loading';
 import { applyMigrations } from './migrations';
+import { initURLSubscription, loadState, updateCodeStore } from './state';
+import { initAnalytics, plausible } from './stats';
 
 export const loadStateFromURL = (): void => {
   loadState(window.location.hash.slice(1));
@@ -26,6 +26,7 @@ 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'
 
 let count = 0;
 export const errorDebug = (limit = 1000) => {

src/routes/edit/+page.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { dev } from '$app/environment';
   import { base } from '$app/paths';
   import Actions from '$lib/components/Actions.svelte';
   import Card from '$lib/components/Card/Card.svelte';
@@ -11,10 +10,9 @@
   import type { DocumentationConfig, EditorMode, Tab, ValidatedState } from '$lib/types';
   import { env } from '$lib/util/env';
   import { inputStateStore, stateStore, updateCodeStore } from '$lib/util/state';
-  import { cmdKey, initHandler, syncDiagram } from '$lib/util/util';
+  import { cmdKey, initHandler, MCBaseURL, syncDiagram } from '$lib/util/util';
   import { onMount } from 'svelte';
 
-  const MCBaseURL = dev ? 'http://localhost:5174' : 'https://mermaidchart.com';
   const docURLBase = 'https://mermaid.js.org';
   const docMap: DocumentationConfig = {
     graph: {

src/tests/setup.ts

@@ -5,6 +5,7 @@ import 'vitest-dom/extend-expect';
 // TODO: Remove once https://github.com/sveltejs/kit/issues/6259 is closed.
 beforeAll(() => {
   vi.mock('$app/environment', () => ({
-    browser: 'window' in globalThis
+    browser: 'window' in globalThis,
+    dev: true
   }));
 });