From 48e6e6075304cc2a69cce2df6747ce09c46bcac6 Mon Sep 17 00:00:00 2001
From: rajat-ht <rajat@mermaidchart.com>
Date: Tue, 20 May 2025 20:00:30 +0530
Subject: [PATCH 01/11] Feat: Add editor popup modal

---
 .../components/EditorSelectionModal.vue       | 173 ++++++++++++++++++
 .../src/docs/.vitepress/theme/index.ts        |   8 +-
 packages/mermaid/src/docs/index.md            |   3 -
 3 files changed, 178 insertions(+), 6 deletions(-)
 create mode 100644 packages/mermaid/src/docs/.vitepress/components/EditorSelectionModal.vue

diff --git a/packages/mermaid/src/docs/.vitepress/components/EditorSelectionModal.vue b/packages/mermaid/src/docs/.vitepress/components/EditorSelectionModal.vue
new file mode 100644
index 000000000..f41759f75
--- /dev/null
+++ b/packages/mermaid/src/docs/.vitepress/components/EditorSelectionModal.vue
@@ -0,0 +1,173 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref } from 'vue';
+
+interface Feature {
+  iconUrl: string;
+  featureName: string;
+}
+
+const featureColumns = ref<Feature[][]>([
+  [
+    {
+      iconUrl: 'https://static.mermaidchart.dev/assets/icon-public.svg',
+      featureName: 'Diagram stored in URL',
+    },
+    {
+      iconUrl: 'https://static.mermaidchart.dev/assets/icon-terminal.svg',
+      featureName: 'Code editor',
+    },
+    {
+      iconUrl: 'https://static.mermaidchart.dev/assets/icon-whiteboard.svg',
+      featureName: 'Whiteboard',
+    },
+  ],
+  [
+    {
+      iconUrl: 'https://static.mermaidchart.dev/assets/icon-folder.svg',
+      featureName: 'Storage',
+    },
+    {
+      iconUrl: 'https://static.mermaidchart.dev/assets/icon-terminal.svg',
+      featureName: 'Code editor',
+    },
+    {
+      iconUrl: 'https://static.mermaidchart.dev/assets/icon-ai-diagrams.svg',
+      featureName: 'AI diagram generator',
+    },
+    {
+      iconUrl: 'https://static.mermaidchart.dev/assets/icon-whiteboard.svg',
+      featureName: 'Whiteboard',
+    },
+    {
+      iconUrl: 'https://static.mermaidchart.dev/assets/icon-group.svg',
+      featureName: 'Teams',
+    },
+    {
+      iconUrl: 'https://static.mermaidchart.dev/assets/icon-multi-user-editing.svg',
+      featureName: 'Multi-user editing',
+    },
+    {
+      iconUrl: 'https://static.mermaidchart.dev/assets/icon-ai-repair.svg',
+      featureName: 'AI diagram repair',
+    },
+    {
+      iconUrl: 'https://static.mermaidchart.dev/assets/icon-version-history.svg',
+      featureName: 'Version history',
+    },
+    {
+      iconUrl: 'https://static.mermaidchart.dev/assets/icon-comments.svg',
+      featureName: 'Comments',
+    },
+    {
+      iconUrl: 'https://static.mermaidchart.dev/assets/icon-presentations.svg',
+      featureName: 'Presentations',
+    },
+    {
+      iconUrl: 'https://static.mermaidchart.dev/assets/icon-plugins.svg',
+      featureName: 'Advanced Plugins',
+    },
+  ],
+  [
+    {
+      iconUrl: 'https://static.mermaidchart.dev/assets/icon-public.svg',
+      featureName: 'Diagram stored in URL',
+    },
+    {
+      iconUrl: 'https://static.mermaidchart.dev/assets/icon-terminal.svg',
+      featureName: 'Code editor',
+    },
+    {
+      iconUrl: 'https://static.mermaidchart.dev/assets/icon-how-to-reg.svg',
+      featureName: 'Open source',
+    },
+  ],
+]);
+
+const isVisible = ref(true);
+
+const handleMouseDown = (e: MouseEvent) => {
+  const target = e.target as HTMLElement;
+  if (target.matches('a[class*="editorModal"]') || target.matches('button[class*="editorModal"]')) {
+    isVisible.value = !isVisible.value;
+  }
+};
+
+onMounted(() => {
+  document.addEventListener('mousedown', handleMouseDown);
+});
+
+onUnmounted(() => {
+  document.removeEventListener('mousedown', handleMouseDown);
+});
+</script>
+
+<template>
+  <div
+    v-if="isVisible"
+    class="fixed top-0 left-0 z-20 flex h-screen w-screen backdrop-blur-sm items-center justify-center"
+    @click.self="isVisible = false"
+  >
+    <div v-if="isVisible" class="flex flex-row relative top-[8%] gap-4 p-4">
+      <div
+        v-for="(column, index) in featureColumns"
+        :key="index"
+        class="w-80 flex relative flex-col items-center justify-start rounded-lg bg-[#dceef1] p-6 m-6 text-gray-800 shadow-sm"
+        :class="index === 1 ? 'bg-white' : 'bg-[#DCEEF1]'"
+      >
+        <div
+          v-if="index === 1"
+          class="absolute -top-8 w-full rounded-t-3xl bg-[#E0095F] py-2 flex items-center justify-center shadow-md"
+        >
+          <p class="text-sm font-semibold text-white">Best for collaboration</p>
+        </div>
+        <header class="mb-6 text-center space-y-1">
+          <p class="text-2xl font-medium capitalize text-[#1E1A2E]">
+            {{ ['Playground', 'Free', 'Open Source'][index] }}
+          </p>
+          <p class="text-sm text-gray-600">
+            {{
+              [
+                'Basic features, no login',
+                'Advanced features, free account',
+                'Code only, no login',
+              ][index]
+            }}
+          </p>
+        </header>
+        <a
+          :href="
+            [
+              'https://www.mermaidchart.com/play?utm_source=mermaid_js&utm_medium=editor_selection&utm_campaign=playground',
+              'https://www.mermaidchart.com/app/sign-up?utm_source=mermaid_js&utm_medium=editor_selection&utm_campaign=mermaid_chart',
+              'https://mermaid.live/edit?utm_source=mermaid_live_editor&utm_medium=editor_selection&utm_campaign=open_source',
+            ][index]
+          "
+          target="_blank"
+          class="mb-4 flex h-10 w-full items-center justify-center rounded-xl hover:bg-[#272040] hover:text-white"
+          :class="index === 1 ? 'bg-[#1e1a2e] text-[#BEDDE3]' : 'bg-[#BEDDE3] text-[#1E1A2E]'"
+        >
+          Start free
+        </a>
+        <div id="border-1"></div>
+        <ul class="w-full space-y-2">
+          <li
+            v-for="{ iconUrl, featureName } in column"
+            :key="featureName"
+            class="flex items-center"
+          >
+            <img :src="iconUrl" :alt="featureName" class="mr-2 inline-block h-5 w-5" />
+            <span>{{ featureName }}</span>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+#border-1 {
+  border-bottom: 1px solid #bedde3;
+  width: 100%;
+  margin-bottom: 16px;
+}
+</style>
diff --git a/packages/mermaid/src/docs/.vitepress/theme/index.ts b/packages/mermaid/src/docs/.vitepress/theme/index.ts
index 3996dde1a..574ce3e81 100644
--- a/packages/mermaid/src/docs/.vitepress/theme/index.ts
+++ b/packages/mermaid/src/docs/.vitepress/theme/index.ts
@@ -1,12 +1,13 @@
 /* eslint-disable no-console */
 import DefaultTheme from 'vitepress/theme';
-import './custom.css';
-import Mermaid from './Mermaid.vue';
-import Tooltip from './Tooltip.vue';
 import Contributors from '../components/Contributors.vue';
+import EditorSelectionModal from '../components/EditorSelectionModal.vue';
 import HomePage from '../components/HomePage.vue';
 import TopBar from '../components/TopBar.vue';
+import './custom.css';
+import Mermaid from './Mermaid.vue';
 import { getRedirect } from './redirect.js';
+import Tooltip from './Tooltip.vue';
 // @ts-ignore Type not available
 import 'uno.css';
 import type { EnhanceAppContext } from 'vitepress';
@@ -22,6 +23,7 @@ export default {
       'home-hero-before': () => h(TopBar),
       'doc-before': () => h(TopBar),
       'layout-bottom': () => h(Tooltip),
+      'home-hero-after': () => h(EditorSelectionModal),
     });
   },
   enhanceApp({ app, router }: EnhanceAppContext) {
diff --git a/packages/mermaid/src/docs/index.md b/packages/mermaid/src/docs/index.md
index 20f3cf281..5f409f7a0 100644
--- a/packages/mermaid/src/docs/index.md
+++ b/packages/mermaid/src/docs/index.md
@@ -17,9 +17,6 @@ hero:
   actions:
     - theme: brand
       text: Try Playground
-      link: https://www.mermaidchart.com/play
-      target: _blank
-      rel: external
     - theme: alt
       text: Get started
       link: /intro/

From f23a26e528ac2196c09a3cfa5bdd0a0de1f6f388 Mon Sep 17 00:00:00 2001
From: rajat-ht <rajat@mermaidchart.com>
Date: Wed, 21 May 2025 17:11:29 +0530
Subject: [PATCH 02/11] chore: add event listener for button.

---
 .../.vitepress/components/EditorSelectionModal.vue    | 11 +++++++----
 packages/mermaid/src/docs/.vitepress/config.ts        |  4 +---
 packages/mermaid/src/docs/index.md                    |  1 +
 3 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/packages/mermaid/src/docs/.vitepress/components/EditorSelectionModal.vue b/packages/mermaid/src/docs/.vitepress/components/EditorSelectionModal.vue
index f41759f75..a53e1c9e7 100644
--- a/packages/mermaid/src/docs/.vitepress/components/EditorSelectionModal.vue
+++ b/packages/mermaid/src/docs/.vitepress/components/EditorSelectionModal.vue
@@ -83,21 +83,24 @@ const featureColumns = ref<Feature[][]>([
   ],
 ]);
 
-const isVisible = ref(true);
+const isVisible = ref(false);
 
 const handleMouseDown = (e: MouseEvent) => {
   const target = e.target as HTMLElement;
-  if (target.matches('a[class*="editorModal"]') || target.matches('button[class*="editorModal"]')) {
+  if (
+    (target.tagName === 'A' && target.textContent?.trim() === 'Try Playground') ||
+    (target.tagName === 'SPAN' && target.textContent?.trim() === '💻 Open Editor')
+  ) {
     isVisible.value = !isVisible.value;
   }
 };
 
 onMounted(() => {
-  document.addEventListener('mousedown', handleMouseDown);
+  document.addEventListener('click', handleMouseDown);
 });
 
 onUnmounted(() => {
-  document.removeEventListener('mousedown', handleMouseDown);
+  document.removeEventListener('click', handleMouseDown);
 });
 </script>
 
diff --git a/packages/mermaid/src/docs/.vitepress/config.ts b/packages/mermaid/src/docs/.vitepress/config.ts
index cd66316a3..9771ae6f2 100644
--- a/packages/mermaid/src/docs/.vitepress/config.ts
+++ b/packages/mermaid/src/docs/.vitepress/config.ts
@@ -120,9 +120,7 @@ function nav() {
     },
     {
       text: '💻 Open Editor',
-      link: 'https://mermaid.live/edit',
-      target: '_blank',
-      rel: 'external',
+      link: '/',
     },
   ];
 }
diff --git a/packages/mermaid/src/docs/index.md b/packages/mermaid/src/docs/index.md
index 5f409f7a0..9b3a6f190 100644
--- a/packages/mermaid/src/docs/index.md
+++ b/packages/mermaid/src/docs/index.md
@@ -17,6 +17,7 @@ hero:
   actions:
     - theme: brand
       text: Try Playground
+      link: /
     - theme: alt
       text: Get started
       link: /intro/

From 3c03f289b48b251c72ca333a6393322a9e568672 Mon Sep 17 00:00:00 2001
From: rajat-ht <rajat@mermaidchart.com>
Date: Fri, 23 May 2025 15:49:12 +0530
Subject: [PATCH 03/11] chore: Update as per PR suggestion.

---
 docs/public/icons/icon-ai-diagram.svg         | 19 +++++
 docs/public/icons/icon-ai-repair.svg          | 19 +++++
 docs/public/icons/icon-comment.svg            | 19 +++++
 docs/public/icons/icon-folder.svg             | 11 +++
 docs/public/icons/icon-group.svg              | 11 +++
 docs/public/icons/icon-groups.svg             | 19 +++++
 docs/public/icons/icon-open-source.svg        | 11 +++
 docs/public/icons/icon-plugins.svg            | 19 +++++
 docs/public/icons/icon-presentation.svg       | 19 +++++
 docs/public/icons/icon-public.svg             | 11 +++
 docs/public/icons/icon-terminal.svg           | 11 +++
 docs/public/icons/icon-version-history.svg    | 19 +++++
 docs/public/icons/icon-whiteboard.svg         | 19 +++++
 .../components/EditorSelectionModal.vue       | 85 ++++++++++---------
 packages/mermaid/src/docs/index.md            |  2 +-
 .../src/docs/public/icons/icon-ai-diagram.svg | 19 +++++
 .../src/docs/public/icons/icon-ai-repair.svg  | 19 +++++
 .../src/docs/public/icons/icon-comment.svg    | 19 +++++
 .../src/docs/public/icons/icon-folder.svg     | 11 +++
 .../src/docs/public/icons/icon-group.svg      | 11 +++
 .../src/docs/public/icons/icon-groups.svg     | 19 +++++
 .../docs/public/icons/icon-open-source.svg    | 11 +++
 .../src/docs/public/icons/icon-plugins.svg    | 19 +++++
 .../docs/public/icons/icon-presentation.svg   | 19 +++++
 .../src/docs/public/icons/icon-public.svg     | 11 +++
 .../src/docs/public/icons/icon-terminal.svg   | 11 +++
 .../public/icons/icon-version-history.svg     | 19 +++++
 .../src/docs/public/icons/icon-whiteboard.svg | 19 +++++
 28 files changed, 460 insertions(+), 41 deletions(-)
 create mode 100644 docs/public/icons/icon-ai-diagram.svg
 create mode 100644 docs/public/icons/icon-ai-repair.svg
 create mode 100644 docs/public/icons/icon-comment.svg
 create mode 100644 docs/public/icons/icon-folder.svg
 create mode 100644 docs/public/icons/icon-group.svg
 create mode 100644 docs/public/icons/icon-groups.svg
 create mode 100644 docs/public/icons/icon-open-source.svg
 create mode 100644 docs/public/icons/icon-plugins.svg
 create mode 100644 docs/public/icons/icon-presentation.svg
 create mode 100644 docs/public/icons/icon-public.svg
 create mode 100644 docs/public/icons/icon-terminal.svg
 create mode 100644 docs/public/icons/icon-version-history.svg
 create mode 100644 docs/public/icons/icon-whiteboard.svg
 create mode 100644 packages/mermaid/src/docs/public/icons/icon-ai-diagram.svg
 create mode 100644 packages/mermaid/src/docs/public/icons/icon-ai-repair.svg
 create mode 100644 packages/mermaid/src/docs/public/icons/icon-comment.svg
 create mode 100644 packages/mermaid/src/docs/public/icons/icon-folder.svg
 create mode 100644 packages/mermaid/src/docs/public/icons/icon-group.svg
 create mode 100644 packages/mermaid/src/docs/public/icons/icon-groups.svg
 create mode 100644 packages/mermaid/src/docs/public/icons/icon-open-source.svg
 create mode 100644 packages/mermaid/src/docs/public/icons/icon-plugins.svg
 create mode 100644 packages/mermaid/src/docs/public/icons/icon-presentation.svg
 create mode 100644 packages/mermaid/src/docs/public/icons/icon-public.svg
 create mode 100644 packages/mermaid/src/docs/public/icons/icon-terminal.svg
 create mode 100644 packages/mermaid/src/docs/public/icons/icon-version-history.svg
 create mode 100644 packages/mermaid/src/docs/public/icons/icon-whiteboard.svg

diff --git a/docs/public/icons/icon-ai-diagram.svg b/docs/public/icons/icon-ai-diagram.svg
new file mode 100644
index 000000000..d3ff002f6
--- /dev/null
+++ b/docs/public/icons/icon-ai-diagram.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+  <mask
+    id="mask0_89_26528"
+    style="mask-type: alpha"
+    maskUnits="userSpaceOnUse"
+    x="0"
+    y="0"
+    width="20"
+    height="20"
+  >
+    <rect width="20" height="20" fill="currentColor" />
+  </mask>
+  <g mask="url(#mask0_89_26528)">
+    <path
+      d="M10.25 12.9792C11.2083 12.9792 12.0312 12.6667 12.7188 12.0417C13.4062 11.4167 13.75 10.6671 13.75 9.79292C13.75 9.01431 13.4965 8.35069 12.9896 7.80208C12.4826 7.25347 11.8747 6.97917 11.1656 6.97917C10.5248 6.97917 9.98285 7.1875 9.53979 7.60417C9.0966 8.02083 8.875 8.52083 8.875 9.10417C8.875 9.38194 8.92528 9.63847 9.02583 9.87375C9.12639 10.109 9.27056 10.3247 9.45833 10.5208L10.5208 9.45833C10.4722 9.41667 10.4358 9.36458 10.4115 9.30208C10.3872 9.23958 10.375 9.17687 10.375 9.11396C10.375 8.94076 10.4514 8.79167 10.6042 8.66667C10.7569 8.54167 10.9444 8.47917 11.1667 8.47917C11.4583 8.47917 11.7118 8.60806 11.9271 8.86583C12.1424 9.12361 12.25 9.43222 12.25 9.79167C12.25 10.25 12.0521 10.6458 11.6562 10.9792C11.2604 11.3125 10.7933 11.4792 10.255 11.4792C9.57111 11.4792 8.98264 11.191 8.48958 10.6146C7.99653 10.0382 7.75 9.35417 7.75 8.5625C7.75 8.13514 7.82986 7.72625 7.98958 7.33583C8.14931 6.94528 8.38194 6.59722 8.6875 6.29167L7.625 5.25C7.18056 5.69444 6.84028 6.20139 6.60417 6.77083C6.36806 7.34028 6.25 7.9375 6.25 8.5625C6.25 9.78472 6.63889 10.8264 7.41667 11.6875C8.19444 12.5486 9.13889 12.9792 10.25 12.9792ZM5.5 18V14.3542C4.70833 13.6875 4.09375 12.8849 3.65625 11.9465C3.21875 11.008 3 10.0189 3 8.97917C3 7.04056 3.68257 5.39271 5.04771 4.03563C6.41285 2.67854 8.07056 2 10.0208 2C11.5347 2 12.8958 2.40625 14.1042 3.21875C15.3125 4.03125 16.1111 5.09028 16.5 6.39583L17.875 11.0417C17.9444 11.2844 17.9062 11.5049 17.7604 11.7029C17.6146 11.901 17.4167 12 17.1667 12H16V14.5C16 14.9125 15.8531 15.2656 15.5594 15.5594C15.2656 15.8531 14.9125 16 14.5 16H12.5V18H11V14.5H14.5V10.5H16.1667L15.0833 6.89583C14.7778 5.89583 14.1562 5.07986 13.2188 4.44792C12.2812 3.81597 11.2153 3.5 10.0208 3.5C8.47917 3.5 7.17361 4.03215 6.10417 5.09646C5.03472 6.16076 4.5 7.455 4.5 8.97917C4.5 9.79764 4.67361 10.5751 5.02083 11.3117C5.36806 12.0483 5.85417 12.6806 6.47917 13.2083L7 13.6667V18H5.5Z"
+      fill="currentColor"
+    />
+  </g>
+</svg>
diff --git a/docs/public/icons/icon-ai-repair.svg b/docs/public/icons/icon-ai-repair.svg
new file mode 100644
index 000000000..1e255ac81
--- /dev/null
+++ b/docs/public/icons/icon-ai-repair.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+  <mask
+    id="mask0_89_26616"
+    style="mask-type: alpha"
+    maskUnits="userSpaceOnUse"
+    x="0"
+    y="0"
+    width="20"
+    height="20"
+  >
+    <rect width="20" height="20" fill="currentColor" />
+  </mask>
+  <g mask="url(#mask0_89_26616)">
+    <path
+      d="M4 16.9999V14.4999H5.875L4.4375 8.77077C3.99306 8.56244 3.64236 8.25341 3.38542 7.84369C3.12847 7.43396 3 6.98605 3 6.49993C3 5.7916 3.24306 5.19785 3.72917 4.71868C4.21528 4.23952 4.8125 3.99993 5.52083 3.99993C6.0625 3.99993 6.55208 4.15966 6.98958 4.4791C7.42708 4.79855 7.72222 5.22216 7.875 5.74993H9.5V4.74993C9.5 4.5416 9.57292 4.36452 9.71875 4.21868C9.86458 4.07285 10.0417 3.99993 10.25 3.99993C10.4583 3.99993 10.6354 4.07285 10.7812 4.21868C10.9271 4.36452 11 4.5416 11 4.74993V4.89577L13 3.18743C13.1111 3.09021 13.2361 3.03466 13.375 3.02077C13.5139 3.00688 13.6528 3.02771 13.7917 3.08327L16.5625 4.33327C16.7569 4.4166 16.8924 4.55202 16.9688 4.73952C17.0451 4.92702 17.0347 5.11799 16.9375 5.31243C16.8542 5.49299 16.7153 5.61799 16.5208 5.68743C16.3264 5.75688 16.1319 5.75688 15.9375 5.68743L13.6042 4.64577L11.4167 6.49993L13.6042 8.37494L15.9375 7.33327C16.1319 7.24993 16.3229 7.24299 16.5104 7.31244C16.6979 7.38188 16.8403 7.51382 16.9375 7.70827C17.0208 7.88882 17.0243 8.06938 16.9479 8.24994C16.8715 8.43049 16.7431 8.57632 16.5625 8.68744L13.7917 9.93744C13.6667 10.0069 13.5312 10.0312 13.3854 10.0104C13.2396 9.98952 13.1111 9.93049 13 9.83327L11 8.12494V8.24994C11 8.45827 10.9271 8.63535 10.7812 8.78119C10.6354 8.92702 10.4583 8.99994 10.25 8.99994C10.0417 8.99994 9.86458 8.92702 9.71875 8.78119C9.57292 8.63535 9.5 8.45827 9.5 8.24994V7.24994H7.875C7.81944 7.44438 7.73958 7.62146 7.63542 7.78119C7.53125 7.94091 7.40972 8.09716 7.27083 8.24994L10.8542 14.4999H14V16.9999H4ZM5.5 7.62494C5.81944 7.62494 6.08681 7.5173 6.30208 7.30202C6.51736 7.08674 6.625 6.81938 6.625 6.49993C6.625 6.19438 6.51736 5.93396 6.30208 5.71868C6.08681 5.50341 5.81944 5.39577 5.5 5.39577C5.18056 5.39577 4.91319 5.50341 4.69792 5.71868C4.48264 5.93396 4.375 6.19438 4.375 6.49993C4.375 6.81938 4.48264 7.08674 4.69792 7.30202C4.91319 7.5173 5.18056 7.62494 5.5 7.62494ZM7.41667 14.4999H9.125L6.08333 9.18744L7.41667 14.4999Z"
+      fill="currentColor"
+    />
+  </g>
+</svg>
diff --git a/docs/public/icons/icon-comment.svg b/docs/public/icons/icon-comment.svg
new file mode 100644
index 000000000..626bfd265
--- /dev/null
+++ b/docs/public/icons/icon-comment.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+  <mask
+    id="mask0_89_26596"
+    style="mask-type: alpha"
+    maskUnits="userSpaceOnUse"
+    x="0"
+    y="0"
+    width="20"
+    height="20"
+  >
+    <rect width="20" height="20" fill="currentColor" />
+  </mask>
+  <g mask="url(#mask0_89_26596)">
+    <path
+      d="M5 12H15V10.5H5V12ZM5 9.25H15V7.75H5V9.25ZM5 6.5H15V5H5V6.5ZM18 18L15 15H3.5C3.0875 15 2.73438 14.8531 2.44063 14.5594C2.14688 14.2656 2 13.9125 2 13.5V3.5C2 3.0875 2.14688 2.73438 2.44063 2.44063C2.73438 2.14688 3.0875 2 3.5 2H16.5C16.9125 2 17.2656 2.14688 17.5594 2.44063C17.8531 2.73438 18 3.0875 18 3.5V18ZM3.5 13.5H15.625L16.5 14.375V3.5H3.5V13.5Z"
+      fill="currentColor"
+    />
+  </g>
+</svg>
diff --git a/docs/public/icons/icon-folder.svg b/docs/public/icons/icon-folder.svg
new file mode 100644
index 000000000..a443f1699
--- /dev/null
+++ b/docs/public/icons/icon-folder.svg
@@ -0,0 +1,11 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  height="24px"
+  viewBox="0 -960 960 960"
+  width="24px"
+  fill="currentColor"
+>
+  <path
+    d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h240l80 80h320q33 0 56.5 23.5T880-640v400q0 33-23.5 56.5T800-160H160Zm0-80h640v-400H447l-80-80H160v480Zm0 0v-480 480Z"
+  />
+</svg>
diff --git a/docs/public/icons/icon-group.svg b/docs/public/icons/icon-group.svg
new file mode 100644
index 000000000..8a7443b6e
--- /dev/null
+++ b/docs/public/icons/icon-group.svg
@@ -0,0 +1,11 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  height="24px"
+  viewBox="0 -960 960 960"
+  width="24px"
+  fill="currentColor"
+>
+  <path
+    d="M40-160v-112q0-34 17.5-62.5T104-378q62-31 126-46.5T360-440q66 0 130 15.5T616-378q29 15 46.5 43.5T680-272v112H40Zm720 0v-120q0-44-24.5-84.5T666-434q51 6 96 20.5t84 35.5q36 20 55 44.5t19 53.5v120H760ZM360-480q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47Zm400-160q0 66-47 113t-113 47q-11 0-28-2.5t-28-5.5q27-32 41.5-71t14.5-81q0-42-14.5-81T544-792q14-5 28-6.5t28-1.5q66 0 113 47t47 113ZM120-240h480v-32q0-11-5.5-20T580-306q-54-27-109-40.5T360-360q-56 0-111 13.5T140-306q-9 5-14.5 14t-5.5 20v32Zm240-320q33 0 56.5-23.5T440-640q0-33-23.5-56.5T360-720q-33 0-56.5 23.5T280-640q0 33 23.5 56.5T360-560Zm0 320Zm0-400Z"
+  />
+</svg>
diff --git a/docs/public/icons/icon-groups.svg b/docs/public/icons/icon-groups.svg
new file mode 100644
index 000000000..c827bebc6
--- /dev/null
+++ b/docs/public/icons/icon-groups.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+  <mask
+    id="mask0_89_26621"
+    style="mask-type: alpha"
+    maskUnits="userSpaceOnUse"
+    x="0"
+    y="0"
+    width="20"
+    height="20"
+  >
+    <rect width="20" height="20" fill="currentColor" />
+  </mask>
+  <g mask="url(#mask0_89_26621)">
+    <path
+      d="M3.5 11.5L5.5 9.5L3.5 7.5L1.5 9.5L3.5 11.5ZM14.5 11.5L16.5 8L18.5 11.5H14.5ZM9.98958 10.5C9.30208 10.5 8.71528 10.2569 8.22917 9.77083C7.74306 9.28472 7.5 8.69444 7.5 8C7.5 7.30556 7.74306 6.71528 8.22917 6.22917C8.71528 5.74306 9.30556 5.5 10 5.5C10.6944 5.5 11.2847 5.74306 11.7708 6.22917C12.2569 6.71528 12.5 7.30903 12.5 8.01042C12.5 8.69792 12.2569 9.28472 11.7708 9.77083C11.2847 10.2569 10.691 10.5 9.98958 10.5ZM10 7C9.71667 7 9.47917 7.09583 9.2875 7.2875C9.09583 7.47917 9 7.71667 9 8C9 8.28333 9.09583 8.52083 9.2875 8.7125C9.47917 8.90417 9.71667 9 10 9C10.2833 9 10.5208 8.90417 10.7125 8.7125C10.9042 8.52083 11 8.28333 11 8C11 7.71667 10.9042 7.47917 10.7125 7.2875C10.5208 7.09583 10.2833 7 10 7ZM0 15.5V14.25C0 13.5139 0.34375 12.9722 1.03125 12.625C1.71875 12.2778 2.54167 12.1042 3.5 12.1042C3.70833 12.1042 3.91667 12.1146 4.125 12.1354C4.33333 12.1563 4.54167 12.1875 4.75 12.2292C4.5 12.4792 4.3125 12.7951 4.1875 13.1771C4.0625 13.559 4 13.9167 4 14.25V15.5H0ZM5 15.5V14.2604C5 13.434 5.42361 12.7674 6.27083 12.2604C7.11806 11.7535 8.36111 11.5 10 11.5C11.6389 11.5 12.8819 11.7528 13.7292 12.2585C14.5764 12.7644 15 13.4282 15 14.25V15.5H5ZM16.5 12.1042C17.4583 12.1042 18.2812 12.2778 18.9688 12.625C19.6562 12.9722 20 13.5139 20 14.25V15.5H16V14.25C16 13.9167 15.941 13.559 15.8229 13.1771C15.7049 12.7951 15.5139 12.4792 15.25 12.2292C15.4583 12.1875 15.6652 12.1563 15.8706 12.1354C16.0759 12.1146 16.2857 12.1042 16.5 12.1042ZM10 13C9.11111 13 8.40972 13.0799 7.89583 13.2396C7.38194 13.3993 6.93056 13.6528 6.54167 14H13.4583C13.0556 13.6528 12.6007 13.3993 12.0938 13.2396C11.5868 13.0799 10.8889 13 10 13Z"
+      fill="currentColor"
+    />
+  </g>
+</svg>
diff --git a/docs/public/icons/icon-open-source.svg b/docs/public/icons/icon-open-source.svg
new file mode 100644
index 000000000..4b121d0ab
--- /dev/null
+++ b/docs/public/icons/icon-open-source.svg
@@ -0,0 +1,11 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  height="24px"
+  viewBox="0 -960 960 960"
+  width="24px"
+  fill="currentColor"
+>
+  <path
+    d="M80-160v-112q0-33 17-62t47-44q51-26 115-44t141-18q30 0 58.5 3t55.5 9l-70 70q-11-2-21.5-2H400q-71 0-127.5 17T180-306q-9 5-14.5 14t-5.5 20v32h250l80 80H80Zm542 16L484-282l56-56 82 82 202-202 56 56-258 258ZM400-480q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47Zm10 240Zm-10-320q33 0 56.5-23.5T480-640q0-33-23.5-56.5T400-720q-33 0-56.5 23.5T320-640q0 33 23.5 56.5T400-560Zm0-80Z"
+  />
+</svg>
diff --git a/docs/public/icons/icon-plugins.svg b/docs/public/icons/icon-plugins.svg
new file mode 100644
index 000000000..fbf4a4800
--- /dev/null
+++ b/docs/public/icons/icon-plugins.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+  <mask
+    id="mask0_89_26548"
+    style="mask-type: alpha"
+    maskUnits="userSpaceOnUse"
+    x="0"
+    y="0"
+    width="20"
+    height="20"
+  >
+    <rect width="20" height="20" fill="currentColor" />
+  </mask>
+  <g mask="url(#mask0_89_26548)">
+    <path
+      d="M8 17H4.5C4.0875 17 3.73437 16.8531 3.44062 16.5594C3.14687 16.2656 3 15.9125 3 15.5V12C3.55556 11.9722 4.02778 11.7674 4.41667 11.3854C4.80556 11.0035 5 10.5417 5 10C5 9.45833 4.80556 8.99653 4.41667 8.61458C4.02778 8.23264 3.55556 8.02778 3 8V4.5C3 4.0875 3.14687 3.73438 3.44062 3.44063C3.73437 3.14688 4.0875 3 4.5 3H8C8 2.44444 8.19285 1.97222 8.57854 1.58333C8.96438 1.19444 9.4366 1 9.99521 1C10.554 1 11.0278 1.19333 11.4167 1.58C11.8056 1.96667 12 2.44 12 3H15.5C15.9125 3 16.2656 3.14688 16.5594 3.44063C16.8531 3.73438 17 4.0875 17 4.5V8C17.5556 8 18.0278 8.19285 18.4167 8.57854C18.8056 8.96438 19 9.4366 19 9.99521C19 10.554 18.8067 11.0278 18.42 11.4167C18.0333 11.8056 17.56 12 17 12V15.5C17 15.9125 16.8531 16.2656 16.5594 16.5594C16.2656 16.8531 15.9125 17 15.5 17H12C11.9722 16.4444 11.7682 15.9722 11.3879 15.5833C11.0076 15.1944 10.5458 15 10.0025 15C9.45917 15 8.99653 15.1944 8.61458 15.5833C8.23264 15.9722 8.02778 16.4444 8 17ZM4.5 15.5H6.83333C7.11111 14.875 7.53819 14.3854 8.11458 14.0312C8.69097 13.6771 9.31944 13.5 10 13.5C10.6806 13.5 11.309 13.6771 11.8854 14.0312C12.4618 14.3854 12.8889 14.875 13.1667 15.5H15.5V10.5H17C17.1333 10.5 17.25 10.45 17.35 10.35C17.45 10.25 17.5 10.1333 17.5 10C17.5 9.86667 17.45 9.75 17.35 9.65C17.25 9.55 17.1333 9.5 17 9.5H15.5V4.5H10.5V3C10.5 2.86667 10.45 2.75 10.35 2.65C10.25 2.55 10.1333 2.5 10 2.5C9.86667 2.5 9.75 2.55 9.65 2.65C9.55 2.75 9.5 2.86667 9.5 3V4.5H4.5V6.83333C5.125 7.11111 5.61458 7.53819 5.96875 8.11458C6.32292 8.69097 6.5 9.31944 6.5 10C6.5 10.6974 6.32292 11.3335 5.96875 11.9083C5.61458 12.4833 5.125 12.9028 4.5 13.1667V15.5Z"
+      fill="currentColor"
+    />
+  </g>
+</svg>
diff --git a/docs/public/icons/icon-presentation.svg b/docs/public/icons/icon-presentation.svg
new file mode 100644
index 000000000..4c679a19e
--- /dev/null
+++ b/docs/public/icons/icon-presentation.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+  <mask
+    id="mask0_89_26538"
+    style="mask-type: alpha"
+    maskUnits="userSpaceOnUse"
+    x="0"
+    y="0"
+    width="20"
+    height="20"
+  >
+    <rect width="20" height="20" fill="currentColor" />
+  </mask>
+  <g mask="url(#mask0_89_26538)">
+    <path
+      d="M8 13.5L13.5 10L8 6.5V13.5ZM4.5 17C4.0875 17 3.73437 16.8531 3.44062 16.5594C3.14687 16.2656 3 15.9125 3 15.5V4.5C3 4.0875 3.14687 3.73438 3.44062 3.44063C3.73437 3.14688 4.0875 3 4.5 3H15.5C15.9125 3 16.2656 3.14688 16.5594 3.44063C16.8531 3.73438 17 4.0875 17 4.5V15.5C17 15.9125 16.8531 16.2656 16.5594 16.5594C16.2656 16.8531 15.9125 17 15.5 17H4.5ZM4.5 15.5H15.5V4.5H4.5V15.5Z"
+      fill="currentColor"
+    />
+  </g>
+</svg>
diff --git a/docs/public/icons/icon-public.svg b/docs/public/icons/icon-public.svg
new file mode 100644
index 000000000..3d563baa1
--- /dev/null
+++ b/docs/public/icons/icon-public.svg
@@ -0,0 +1,11 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  height="24px"
+  viewBox="0 -960 960 960"
+  width="24px"
+  fill="currentColor"
+>
+  <path
+    d="M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm-40-82v-78q-33 0-56.5-23.5T360-320v-40L168-552q-3 18-5.5 36t-2.5 36q0 121 79.5 212T440-162Zm276-102q41-45 62.5-100.5T800-480q0-98-54.5-179T600-776v16q0 33-23.5 56.5T520-680h-80v80q0 17-11.5 28.5T400-560h-80v80h240q17 0 28.5 11.5T600-440v120h40q26 0 47 15.5t29 40.5Z"
+  />
+</svg>
diff --git a/docs/public/icons/icon-terminal.svg b/docs/public/icons/icon-terminal.svg
new file mode 100644
index 000000000..5af2408d4
--- /dev/null
+++ b/docs/public/icons/icon-terminal.svg
@@ -0,0 +1,11 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  height="24px"
+  viewBox="0 -960 960 960"
+  width="24px"
+  fill="currentColor"
+>
+  <path
+    d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm0-80h640v-400H160v400Zm140-40-56-56 103-104-104-104 57-56 160 160-160 160Zm180 0v-80h240v80H480Z"
+  />
+</svg>
diff --git a/docs/public/icons/icon-version-history.svg b/docs/public/icons/icon-version-history.svg
new file mode 100644
index 000000000..bacb28629
--- /dev/null
+++ b/docs/public/icons/icon-version-history.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+  <mask
+    id="mask0_89_26543"
+    style="mask-type: alpha"
+    maskUnits="userSpaceOnUse"
+    x="0"
+    y="0"
+    width="20"
+    height="20"
+  >
+    <rect width="20" height="20" fill="currentColor" />
+  </mask>
+  <g mask="url(#mask0_89_26543)">
+    <path
+      d="M10 17C8.05556 17 6.40278 16.3194 5.04167 14.9583C3.68056 13.5972 3 11.9444 3 10H4.5C4.5 11.5139 5.03819 12.809 6.11458 13.8854C7.19097 14.9618 8.48611 15.5 10 15.5C11.5139 15.5 12.809 14.9618 13.8854 13.8854C14.9618 12.809 15.5 11.5139 15.5 10C15.5 8.48611 14.9618 7.19097 13.8854 6.11458C12.809 5.03819 11.5139 4.5 10 4.5C9.13889 4.5 8.3434 4.67778 7.61354 5.03333C6.88382 5.38889 6.26958 5.87778 5.77083 6.5H8V8H3V3H4.5V5.70833C5.13889 4.875 5.93403 4.21528 6.88542 3.72917C7.83681 3.24306 8.875 3 10 3C10.9722 3 11.8828 3.18472 12.7319 3.55417C13.581 3.92361 14.3199 4.42271 14.9485 5.05146C15.5773 5.68007 16.0764 6.41896 16.4458 7.26813C16.8153 8.11715 17 9.02778 17 10C17 10.9722 16.8153 11.8828 16.4458 12.7319C16.0764 13.581 15.5773 14.3199 14.9485 14.9485C14.3199 15.5773 13.581 16.0764 12.7319 16.4458C11.8828 16.8153 10.9722 17 10 17ZM12.0833 12.8333L9.25 10V6H10.75V9.375L13.1458 11.7708L12.0833 12.8333Z"
+      fill="currentColor"
+    />
+  </g>
+</svg>
diff --git a/docs/public/icons/icon-whiteboard.svg b/docs/public/icons/icon-whiteboard.svg
new file mode 100644
index 000000000..9ac13652a
--- /dev/null
+++ b/docs/public/icons/icon-whiteboard.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+  <mask
+    id="mask0_89_26533"
+    style="mask-type: alpha"
+    maskUnits="userSpaceOnUse"
+    x="0"
+    y="0"
+    width="20"
+    height="20"
+  >
+    <rect width="20" height="20" fill="currentColor" />
+  </mask>
+  <g mask="url(#mask0_89_26533)">
+    <path
+      d="M6.54165 17L5.83332 16.2917L4.56249 17.5625C4.27082 17.8542 3.91665 18 3.49999 18C3.08332 18 2.72915 17.8542 2.43749 17.5625C2.15971 17.2569 2.01735 16.8993 2.0104 16.4896C2.00346 16.0799 2.14582 15.7292 2.43749 15.4375L3.70832 14.1667L2.99999 13.4583L13.0208 3.4375C13.3125 3.14583 13.6632 3 14.0729 3C14.4826 3 14.8403 3.14583 15.1458 3.4375L16.5625 4.85417C16.8542 5.13194 17 5.47917 17 5.89583C17 6.3125 16.8542 6.66667 16.5625 6.95833L6.54165 17ZM9.27082 9.33333L5.12499 13.4583L6.54165 14.875L10.6875 10.7292L9.27082 9.33333Z"
+      fill="#2B2542"
+    />
+  </g>
+</svg>
diff --git a/packages/mermaid/src/docs/.vitepress/components/EditorSelectionModal.vue b/packages/mermaid/src/docs/.vitepress/components/EditorSelectionModal.vue
index a53e1c9e7..84c49d35e 100644
--- a/packages/mermaid/src/docs/.vitepress/components/EditorSelectionModal.vue
+++ b/packages/mermaid/src/docs/.vitepress/components/EditorSelectionModal.vue
@@ -6,91 +6,108 @@ interface Feature {
   featureName: string;
 }
 
-const featureColumns = ref<Feature[][]>([
+const featureColumns: Feature[][] = [
   [
     {
-      iconUrl: 'https://static.mermaidchart.dev/assets/icon-public.svg',
+      iconUrl: '/icons/icon-public.svg',
       featureName: 'Diagram stored in URL',
     },
     {
-      iconUrl: 'https://static.mermaidchart.dev/assets/icon-terminal.svg',
+      iconUrl: '/icons/icon-terminal.svg',
       featureName: 'Code editor',
     },
     {
-      iconUrl: 'https://static.mermaidchart.dev/assets/icon-whiteboard.svg',
+      iconUrl: '/icons/icon-whiteboard.svg',
       featureName: 'Whiteboard',
     },
   ],
   [
     {
-      iconUrl: 'https://static.mermaidchart.dev/assets/icon-folder.svg',
+      iconUrl: '/icons/icon-folder.svg',
       featureName: 'Storage',
     },
     {
-      iconUrl: 'https://static.mermaidchart.dev/assets/icon-terminal.svg',
+      iconUrl: '/icons/icon-terminal.svg',
       featureName: 'Code editor',
     },
     {
-      iconUrl: 'https://static.mermaidchart.dev/assets/icon-ai-diagrams.svg',
+      iconUrl: '/icons/icon-ai-diagram.svg',
       featureName: 'AI diagram generator',
     },
     {
-      iconUrl: 'https://static.mermaidchart.dev/assets/icon-whiteboard.svg',
+      iconUrl: '/icons/icon-whiteboard.svg',
       featureName: 'Whiteboard',
     },
     {
-      iconUrl: 'https://static.mermaidchart.dev/assets/icon-group.svg',
+      iconUrl: '/icons/icon-group.svg',
       featureName: 'Teams',
     },
     {
-      iconUrl: 'https://static.mermaidchart.dev/assets/icon-multi-user-editing.svg',
+      iconUrl: '/icons/icon-groups.svg',
       featureName: 'Multi-user editing',
     },
     {
-      iconUrl: 'https://static.mermaidchart.dev/assets/icon-ai-repair.svg',
+      iconUrl: '/icons/icon-ai-repair.svg',
       featureName: 'AI diagram repair',
     },
     {
-      iconUrl: 'https://static.mermaidchart.dev/assets/icon-version-history.svg',
+      iconUrl: '/icons/icon-version-history.svg',
       featureName: 'Version history',
     },
     {
-      iconUrl: 'https://static.mermaidchart.dev/assets/icon-comments.svg',
+      iconUrl: '/icons/icon-comment.svg',
       featureName: 'Comments',
     },
     {
-      iconUrl: 'https://static.mermaidchart.dev/assets/icon-presentations.svg',
+      iconUrl: '/icons/icon-presentation.svg',
       featureName: 'Presentations',
     },
     {
-      iconUrl: 'https://static.mermaidchart.dev/assets/icon-plugins.svg',
+      iconUrl: '/icons/icon-plugins.svg',
       featureName: 'Advanced Plugins',
     },
   ],
   [
     {
-      iconUrl: 'https://static.mermaidchart.dev/assets/icon-public.svg',
+      iconUrl: '/icons/icon-public.svg',
       featureName: 'Diagram stored in URL',
     },
     {
-      iconUrl: 'https://static.mermaidchart.dev/assets/icon-terminal.svg',
+      iconUrl: '/icons/icon-terminal.svg',
       featureName: 'Code editor',
     },
     {
-      iconUrl: 'https://static.mermaidchart.dev/assets/icon-how-to-reg.svg',
+      iconUrl: '/icons/icon-open-source.svg',
       featureName: 'Open source',
     },
+    {
+      iconUrl: '/icons/icon-version-history.svg',
+      featureName: 'Version history',
+    },
   ],
-]);
+];
+
+const columnTitles = ['Playground', 'Free', 'Open Source'];
+const columnDescriptions = [
+  'Basic features, no login',
+  'Advanced features, free account',
+  'Code only, no login',
+];
+const redirectUrl = [
+  'https://www.mermaidchart.com/play?utm_source=mermaid_js&utm_medium=editor_selection&utm_campaign=playground',
+  'https://www.mermaidchart.com/app/sign-up?utm_source=mermaid_js&utm_medium=editor_selection&utm_campaign=mermaid_chart',
+  'https://mermaid.live/edit',
+];
 
 const isVisible = ref(false);
 
 const handleMouseDown = (e: MouseEvent) => {
   const target = e.target as HTMLElement;
   if (
-    (target.tagName === 'A' && target.textContent?.trim() === 'Try Playground') ||
+    (target.tagName === 'A' && target.textContent?.trim() === 'Try Editor') ||
     (target.tagName === 'SPAN' && target.textContent?.trim() === '💻 Open Editor')
   ) {
+    e.preventDefault();
     isVisible.value = !isVisible.value;
   }
 };
@@ -110,12 +127,12 @@ onUnmounted(() => {
     class="fixed top-0 left-0 z-20 flex h-screen w-screen backdrop-blur-sm items-center justify-center"
     @click.self="isVisible = false"
   >
-    <div v-if="isVisible" class="flex flex-row relative top-[8%] gap-4 p-4">
+    <div class="flex flex-row relative top-[8%] gap-4 p-4">
       <div
         v-for="(column, index) in featureColumns"
         :key="index"
-        class="w-80 flex relative flex-col items-center justify-start rounded-lg bg-[#dceef1] p-6 m-6 text-gray-800 shadow-sm"
-        :class="index === 1 ? 'bg-white' : 'bg-[#DCEEF1]'"
+        class="w-80 flex relative flex-col items-center justify-start bg-[#dceef1] p-6 m-6 text-gray-800 shadow-sm"
+        :class="index === 1 ? 'bg-white rounded-b-lg' : 'bg-[#DCEEF1] rounded-lg'"
       >
         <div
           v-if="index === 1"
@@ -125,26 +142,14 @@ onUnmounted(() => {
         </div>
         <header class="mb-6 text-center space-y-1">
           <p class="text-2xl font-medium capitalize text-[#1E1A2E]">
-            {{ ['Playground', 'Free', 'Open Source'][index] }}
+            {{ columnTitles[index] }}
           </p>
           <p class="text-sm text-gray-600">
-            {{
-              [
-                'Basic features, no login',
-                'Advanced features, free account',
-                'Code only, no login',
-              ][index]
-            }}
+            {{ columnDescriptions[index] }}
           </p>
         </header>
         <a
-          :href="
-            [
-              'https://www.mermaidchart.com/play?utm_source=mermaid_js&utm_medium=editor_selection&utm_campaign=playground',
-              'https://www.mermaidchart.com/app/sign-up?utm_source=mermaid_js&utm_medium=editor_selection&utm_campaign=mermaid_chart',
-              'https://mermaid.live/edit?utm_source=mermaid_live_editor&utm_medium=editor_selection&utm_campaign=open_source',
-            ][index]
-          "
+          :href="redirectUrl[index]"
           target="_blank"
           class="mb-4 flex h-10 w-full items-center justify-center rounded-xl hover:bg-[#272040] hover:text-white"
           :class="index === 1 ? 'bg-[#1e1a2e] text-[#BEDDE3]' : 'bg-[#BEDDE3] text-[#1E1A2E]'"
@@ -156,9 +161,9 @@ onUnmounted(() => {
           <li
             v-for="{ iconUrl, featureName } in column"
             :key="featureName"
-            class="flex items-center"
+            class="flex items-center gap-2"
           >
-            <img :src="iconUrl" :alt="featureName" class="mr-2 inline-block h-5 w-5" />
+            <img :src="iconUrl" :alt="featureName" class="inline-block size-5" />
             <span>{{ featureName }}</span>
           </li>
         </ul>
diff --git a/packages/mermaid/src/docs/index.md b/packages/mermaid/src/docs/index.md
index 9b3a6f190..f87b86b69 100644
--- a/packages/mermaid/src/docs/index.md
+++ b/packages/mermaid/src/docs/index.md
@@ -16,7 +16,7 @@ hero:
     alt: Mermaid diagram
   actions:
     - theme: brand
-      text: Try Playground
+      text: Try Editor
       link: /
     - theme: alt
       text: Get started
diff --git a/packages/mermaid/src/docs/public/icons/icon-ai-diagram.svg b/packages/mermaid/src/docs/public/icons/icon-ai-diagram.svg
new file mode 100644
index 000000000..d3ff002f6
--- /dev/null
+++ b/packages/mermaid/src/docs/public/icons/icon-ai-diagram.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+  <mask
+    id="mask0_89_26528"
+    style="mask-type: alpha"
+    maskUnits="userSpaceOnUse"
+    x="0"
+    y="0"
+    width="20"
+    height="20"
+  >
+    <rect width="20" height="20" fill="currentColor" />
+  </mask>
+  <g mask="url(#mask0_89_26528)">
+    <path
+      d="M10.25 12.9792C11.2083 12.9792 12.0312 12.6667 12.7188 12.0417C13.4062 11.4167 13.75 10.6671 13.75 9.79292C13.75 9.01431 13.4965 8.35069 12.9896 7.80208C12.4826 7.25347 11.8747 6.97917 11.1656 6.97917C10.5248 6.97917 9.98285 7.1875 9.53979 7.60417C9.0966 8.02083 8.875 8.52083 8.875 9.10417C8.875 9.38194 8.92528 9.63847 9.02583 9.87375C9.12639 10.109 9.27056 10.3247 9.45833 10.5208L10.5208 9.45833C10.4722 9.41667 10.4358 9.36458 10.4115 9.30208C10.3872 9.23958 10.375 9.17687 10.375 9.11396C10.375 8.94076 10.4514 8.79167 10.6042 8.66667C10.7569 8.54167 10.9444 8.47917 11.1667 8.47917C11.4583 8.47917 11.7118 8.60806 11.9271 8.86583C12.1424 9.12361 12.25 9.43222 12.25 9.79167C12.25 10.25 12.0521 10.6458 11.6562 10.9792C11.2604 11.3125 10.7933 11.4792 10.255 11.4792C9.57111 11.4792 8.98264 11.191 8.48958 10.6146C7.99653 10.0382 7.75 9.35417 7.75 8.5625C7.75 8.13514 7.82986 7.72625 7.98958 7.33583C8.14931 6.94528 8.38194 6.59722 8.6875 6.29167L7.625 5.25C7.18056 5.69444 6.84028 6.20139 6.60417 6.77083C6.36806 7.34028 6.25 7.9375 6.25 8.5625C6.25 9.78472 6.63889 10.8264 7.41667 11.6875C8.19444 12.5486 9.13889 12.9792 10.25 12.9792ZM5.5 18V14.3542C4.70833 13.6875 4.09375 12.8849 3.65625 11.9465C3.21875 11.008 3 10.0189 3 8.97917C3 7.04056 3.68257 5.39271 5.04771 4.03563C6.41285 2.67854 8.07056 2 10.0208 2C11.5347 2 12.8958 2.40625 14.1042 3.21875C15.3125 4.03125 16.1111 5.09028 16.5 6.39583L17.875 11.0417C17.9444 11.2844 17.9062 11.5049 17.7604 11.7029C17.6146 11.901 17.4167 12 17.1667 12H16V14.5C16 14.9125 15.8531 15.2656 15.5594 15.5594C15.2656 15.8531 14.9125 16 14.5 16H12.5V18H11V14.5H14.5V10.5H16.1667L15.0833 6.89583C14.7778 5.89583 14.1562 5.07986 13.2188 4.44792C12.2812 3.81597 11.2153 3.5 10.0208 3.5C8.47917 3.5 7.17361 4.03215 6.10417 5.09646C5.03472 6.16076 4.5 7.455 4.5 8.97917C4.5 9.79764 4.67361 10.5751 5.02083 11.3117C5.36806 12.0483 5.85417 12.6806 6.47917 13.2083L7 13.6667V18H5.5Z"
+      fill="currentColor"
+    />
+  </g>
+</svg>
diff --git a/packages/mermaid/src/docs/public/icons/icon-ai-repair.svg b/packages/mermaid/src/docs/public/icons/icon-ai-repair.svg
new file mode 100644
index 000000000..1e255ac81
--- /dev/null
+++ b/packages/mermaid/src/docs/public/icons/icon-ai-repair.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+  <mask
+    id="mask0_89_26616"
+    style="mask-type: alpha"
+    maskUnits="userSpaceOnUse"
+    x="0"
+    y="0"
+    width="20"
+    height="20"
+  >
+    <rect width="20" height="20" fill="currentColor" />
+  </mask>
+  <g mask="url(#mask0_89_26616)">
+    <path
+      d="M4 16.9999V14.4999H5.875L4.4375 8.77077C3.99306 8.56244 3.64236 8.25341 3.38542 7.84369C3.12847 7.43396 3 6.98605 3 6.49993C3 5.7916 3.24306 5.19785 3.72917 4.71868C4.21528 4.23952 4.8125 3.99993 5.52083 3.99993C6.0625 3.99993 6.55208 4.15966 6.98958 4.4791C7.42708 4.79855 7.72222 5.22216 7.875 5.74993H9.5V4.74993C9.5 4.5416 9.57292 4.36452 9.71875 4.21868C9.86458 4.07285 10.0417 3.99993 10.25 3.99993C10.4583 3.99993 10.6354 4.07285 10.7812 4.21868C10.9271 4.36452 11 4.5416 11 4.74993V4.89577L13 3.18743C13.1111 3.09021 13.2361 3.03466 13.375 3.02077C13.5139 3.00688 13.6528 3.02771 13.7917 3.08327L16.5625 4.33327C16.7569 4.4166 16.8924 4.55202 16.9688 4.73952C17.0451 4.92702 17.0347 5.11799 16.9375 5.31243C16.8542 5.49299 16.7153 5.61799 16.5208 5.68743C16.3264 5.75688 16.1319 5.75688 15.9375 5.68743L13.6042 4.64577L11.4167 6.49993L13.6042 8.37494L15.9375 7.33327C16.1319 7.24993 16.3229 7.24299 16.5104 7.31244C16.6979 7.38188 16.8403 7.51382 16.9375 7.70827C17.0208 7.88882 17.0243 8.06938 16.9479 8.24994C16.8715 8.43049 16.7431 8.57632 16.5625 8.68744L13.7917 9.93744C13.6667 10.0069 13.5312 10.0312 13.3854 10.0104C13.2396 9.98952 13.1111 9.93049 13 9.83327L11 8.12494V8.24994C11 8.45827 10.9271 8.63535 10.7812 8.78119C10.6354 8.92702 10.4583 8.99994 10.25 8.99994C10.0417 8.99994 9.86458 8.92702 9.71875 8.78119C9.57292 8.63535 9.5 8.45827 9.5 8.24994V7.24994H7.875C7.81944 7.44438 7.73958 7.62146 7.63542 7.78119C7.53125 7.94091 7.40972 8.09716 7.27083 8.24994L10.8542 14.4999H14V16.9999H4ZM5.5 7.62494C5.81944 7.62494 6.08681 7.5173 6.30208 7.30202C6.51736 7.08674 6.625 6.81938 6.625 6.49993C6.625 6.19438 6.51736 5.93396 6.30208 5.71868C6.08681 5.50341 5.81944 5.39577 5.5 5.39577C5.18056 5.39577 4.91319 5.50341 4.69792 5.71868C4.48264 5.93396 4.375 6.19438 4.375 6.49993C4.375 6.81938 4.48264 7.08674 4.69792 7.30202C4.91319 7.5173 5.18056 7.62494 5.5 7.62494ZM7.41667 14.4999H9.125L6.08333 9.18744L7.41667 14.4999Z"
+      fill="currentColor"
+    />
+  </g>
+</svg>
diff --git a/packages/mermaid/src/docs/public/icons/icon-comment.svg b/packages/mermaid/src/docs/public/icons/icon-comment.svg
new file mode 100644
index 000000000..626bfd265
--- /dev/null
+++ b/packages/mermaid/src/docs/public/icons/icon-comment.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+  <mask
+    id="mask0_89_26596"
+    style="mask-type: alpha"
+    maskUnits="userSpaceOnUse"
+    x="0"
+    y="0"
+    width="20"
+    height="20"
+  >
+    <rect width="20" height="20" fill="currentColor" />
+  </mask>
+  <g mask="url(#mask0_89_26596)">
+    <path
+      d="M5 12H15V10.5H5V12ZM5 9.25H15V7.75H5V9.25ZM5 6.5H15V5H5V6.5ZM18 18L15 15H3.5C3.0875 15 2.73438 14.8531 2.44063 14.5594C2.14688 14.2656 2 13.9125 2 13.5V3.5C2 3.0875 2.14688 2.73438 2.44063 2.44063C2.73438 2.14688 3.0875 2 3.5 2H16.5C16.9125 2 17.2656 2.14688 17.5594 2.44063C17.8531 2.73438 18 3.0875 18 3.5V18ZM3.5 13.5H15.625L16.5 14.375V3.5H3.5V13.5Z"
+      fill="currentColor"
+    />
+  </g>
+</svg>
diff --git a/packages/mermaid/src/docs/public/icons/icon-folder.svg b/packages/mermaid/src/docs/public/icons/icon-folder.svg
new file mode 100644
index 000000000..a443f1699
--- /dev/null
+++ b/packages/mermaid/src/docs/public/icons/icon-folder.svg
@@ -0,0 +1,11 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  height="24px"
+  viewBox="0 -960 960 960"
+  width="24px"
+  fill="currentColor"
+>
+  <path
+    d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h240l80 80h320q33 0 56.5 23.5T880-640v400q0 33-23.5 56.5T800-160H160Zm0-80h640v-400H447l-80-80H160v480Zm0 0v-480 480Z"
+  />
+</svg>
diff --git a/packages/mermaid/src/docs/public/icons/icon-group.svg b/packages/mermaid/src/docs/public/icons/icon-group.svg
new file mode 100644
index 000000000..8a7443b6e
--- /dev/null
+++ b/packages/mermaid/src/docs/public/icons/icon-group.svg
@@ -0,0 +1,11 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  height="24px"
+  viewBox="0 -960 960 960"
+  width="24px"
+  fill="currentColor"
+>
+  <path
+    d="M40-160v-112q0-34 17.5-62.5T104-378q62-31 126-46.5T360-440q66 0 130 15.5T616-378q29 15 46.5 43.5T680-272v112H40Zm720 0v-120q0-44-24.5-84.5T666-434q51 6 96 20.5t84 35.5q36 20 55 44.5t19 53.5v120H760ZM360-480q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47Zm400-160q0 66-47 113t-113 47q-11 0-28-2.5t-28-5.5q27-32 41.5-71t14.5-81q0-42-14.5-81T544-792q14-5 28-6.5t28-1.5q66 0 113 47t47 113ZM120-240h480v-32q0-11-5.5-20T580-306q-54-27-109-40.5T360-360q-56 0-111 13.5T140-306q-9 5-14.5 14t-5.5 20v32Zm240-320q33 0 56.5-23.5T440-640q0-33-23.5-56.5T360-720q-33 0-56.5 23.5T280-640q0 33 23.5 56.5T360-560Zm0 320Zm0-400Z"
+  />
+</svg>
diff --git a/packages/mermaid/src/docs/public/icons/icon-groups.svg b/packages/mermaid/src/docs/public/icons/icon-groups.svg
new file mode 100644
index 000000000..c827bebc6
--- /dev/null
+++ b/packages/mermaid/src/docs/public/icons/icon-groups.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+  <mask
+    id="mask0_89_26621"
+    style="mask-type: alpha"
+    maskUnits="userSpaceOnUse"
+    x="0"
+    y="0"
+    width="20"
+    height="20"
+  >
+    <rect width="20" height="20" fill="currentColor" />
+  </mask>
+  <g mask="url(#mask0_89_26621)">
+    <path
+      d="M3.5 11.5L5.5 9.5L3.5 7.5L1.5 9.5L3.5 11.5ZM14.5 11.5L16.5 8L18.5 11.5H14.5ZM9.98958 10.5C9.30208 10.5 8.71528 10.2569 8.22917 9.77083C7.74306 9.28472 7.5 8.69444 7.5 8C7.5 7.30556 7.74306 6.71528 8.22917 6.22917C8.71528 5.74306 9.30556 5.5 10 5.5C10.6944 5.5 11.2847 5.74306 11.7708 6.22917C12.2569 6.71528 12.5 7.30903 12.5 8.01042C12.5 8.69792 12.2569 9.28472 11.7708 9.77083C11.2847 10.2569 10.691 10.5 9.98958 10.5ZM10 7C9.71667 7 9.47917 7.09583 9.2875 7.2875C9.09583 7.47917 9 7.71667 9 8C9 8.28333 9.09583 8.52083 9.2875 8.7125C9.47917 8.90417 9.71667 9 10 9C10.2833 9 10.5208 8.90417 10.7125 8.7125C10.9042 8.52083 11 8.28333 11 8C11 7.71667 10.9042 7.47917 10.7125 7.2875C10.5208 7.09583 10.2833 7 10 7ZM0 15.5V14.25C0 13.5139 0.34375 12.9722 1.03125 12.625C1.71875 12.2778 2.54167 12.1042 3.5 12.1042C3.70833 12.1042 3.91667 12.1146 4.125 12.1354C4.33333 12.1563 4.54167 12.1875 4.75 12.2292C4.5 12.4792 4.3125 12.7951 4.1875 13.1771C4.0625 13.559 4 13.9167 4 14.25V15.5H0ZM5 15.5V14.2604C5 13.434 5.42361 12.7674 6.27083 12.2604C7.11806 11.7535 8.36111 11.5 10 11.5C11.6389 11.5 12.8819 11.7528 13.7292 12.2585C14.5764 12.7644 15 13.4282 15 14.25V15.5H5ZM16.5 12.1042C17.4583 12.1042 18.2812 12.2778 18.9688 12.625C19.6562 12.9722 20 13.5139 20 14.25V15.5H16V14.25C16 13.9167 15.941 13.559 15.8229 13.1771C15.7049 12.7951 15.5139 12.4792 15.25 12.2292C15.4583 12.1875 15.6652 12.1563 15.8706 12.1354C16.0759 12.1146 16.2857 12.1042 16.5 12.1042ZM10 13C9.11111 13 8.40972 13.0799 7.89583 13.2396C7.38194 13.3993 6.93056 13.6528 6.54167 14H13.4583C13.0556 13.6528 12.6007 13.3993 12.0938 13.2396C11.5868 13.0799 10.8889 13 10 13Z"
+      fill="currentColor"
+    />
+  </g>
+</svg>
diff --git a/packages/mermaid/src/docs/public/icons/icon-open-source.svg b/packages/mermaid/src/docs/public/icons/icon-open-source.svg
new file mode 100644
index 000000000..4b121d0ab
--- /dev/null
+++ b/packages/mermaid/src/docs/public/icons/icon-open-source.svg
@@ -0,0 +1,11 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  height="24px"
+  viewBox="0 -960 960 960"
+  width="24px"
+  fill="currentColor"
+>
+  <path
+    d="M80-160v-112q0-33 17-62t47-44q51-26 115-44t141-18q30 0 58.5 3t55.5 9l-70 70q-11-2-21.5-2H400q-71 0-127.5 17T180-306q-9 5-14.5 14t-5.5 20v32h250l80 80H80Zm542 16L484-282l56-56 82 82 202-202 56 56-258 258ZM400-480q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47Zm10 240Zm-10-320q33 0 56.5-23.5T480-640q0-33-23.5-56.5T400-720q-33 0-56.5 23.5T320-640q0 33 23.5 56.5T400-560Zm0-80Z"
+  />
+</svg>
diff --git a/packages/mermaid/src/docs/public/icons/icon-plugins.svg b/packages/mermaid/src/docs/public/icons/icon-plugins.svg
new file mode 100644
index 000000000..fbf4a4800
--- /dev/null
+++ b/packages/mermaid/src/docs/public/icons/icon-plugins.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+  <mask
+    id="mask0_89_26548"
+    style="mask-type: alpha"
+    maskUnits="userSpaceOnUse"
+    x="0"
+    y="0"
+    width="20"
+    height="20"
+  >
+    <rect width="20" height="20" fill="currentColor" />
+  </mask>
+  <g mask="url(#mask0_89_26548)">
+    <path
+      d="M8 17H4.5C4.0875 17 3.73437 16.8531 3.44062 16.5594C3.14687 16.2656 3 15.9125 3 15.5V12C3.55556 11.9722 4.02778 11.7674 4.41667 11.3854C4.80556 11.0035 5 10.5417 5 10C5 9.45833 4.80556 8.99653 4.41667 8.61458C4.02778 8.23264 3.55556 8.02778 3 8V4.5C3 4.0875 3.14687 3.73438 3.44062 3.44063C3.73437 3.14688 4.0875 3 4.5 3H8C8 2.44444 8.19285 1.97222 8.57854 1.58333C8.96438 1.19444 9.4366 1 9.99521 1C10.554 1 11.0278 1.19333 11.4167 1.58C11.8056 1.96667 12 2.44 12 3H15.5C15.9125 3 16.2656 3.14688 16.5594 3.44063C16.8531 3.73438 17 4.0875 17 4.5V8C17.5556 8 18.0278 8.19285 18.4167 8.57854C18.8056 8.96438 19 9.4366 19 9.99521C19 10.554 18.8067 11.0278 18.42 11.4167C18.0333 11.8056 17.56 12 17 12V15.5C17 15.9125 16.8531 16.2656 16.5594 16.5594C16.2656 16.8531 15.9125 17 15.5 17H12C11.9722 16.4444 11.7682 15.9722 11.3879 15.5833C11.0076 15.1944 10.5458 15 10.0025 15C9.45917 15 8.99653 15.1944 8.61458 15.5833C8.23264 15.9722 8.02778 16.4444 8 17ZM4.5 15.5H6.83333C7.11111 14.875 7.53819 14.3854 8.11458 14.0312C8.69097 13.6771 9.31944 13.5 10 13.5C10.6806 13.5 11.309 13.6771 11.8854 14.0312C12.4618 14.3854 12.8889 14.875 13.1667 15.5H15.5V10.5H17C17.1333 10.5 17.25 10.45 17.35 10.35C17.45 10.25 17.5 10.1333 17.5 10C17.5 9.86667 17.45 9.75 17.35 9.65C17.25 9.55 17.1333 9.5 17 9.5H15.5V4.5H10.5V3C10.5 2.86667 10.45 2.75 10.35 2.65C10.25 2.55 10.1333 2.5 10 2.5C9.86667 2.5 9.75 2.55 9.65 2.65C9.55 2.75 9.5 2.86667 9.5 3V4.5H4.5V6.83333C5.125 7.11111 5.61458 7.53819 5.96875 8.11458C6.32292 8.69097 6.5 9.31944 6.5 10C6.5 10.6974 6.32292 11.3335 5.96875 11.9083C5.61458 12.4833 5.125 12.9028 4.5 13.1667V15.5Z"
+      fill="currentColor"
+    />
+  </g>
+</svg>
diff --git a/packages/mermaid/src/docs/public/icons/icon-presentation.svg b/packages/mermaid/src/docs/public/icons/icon-presentation.svg
new file mode 100644
index 000000000..4c679a19e
--- /dev/null
+++ b/packages/mermaid/src/docs/public/icons/icon-presentation.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+  <mask
+    id="mask0_89_26538"
+    style="mask-type: alpha"
+    maskUnits="userSpaceOnUse"
+    x="0"
+    y="0"
+    width="20"
+    height="20"
+  >
+    <rect width="20" height="20" fill="currentColor" />
+  </mask>
+  <g mask="url(#mask0_89_26538)">
+    <path
+      d="M8 13.5L13.5 10L8 6.5V13.5ZM4.5 17C4.0875 17 3.73437 16.8531 3.44062 16.5594C3.14687 16.2656 3 15.9125 3 15.5V4.5C3 4.0875 3.14687 3.73438 3.44062 3.44063C3.73437 3.14688 4.0875 3 4.5 3H15.5C15.9125 3 16.2656 3.14688 16.5594 3.44063C16.8531 3.73438 17 4.0875 17 4.5V15.5C17 15.9125 16.8531 16.2656 16.5594 16.5594C16.2656 16.8531 15.9125 17 15.5 17H4.5ZM4.5 15.5H15.5V4.5H4.5V15.5Z"
+      fill="currentColor"
+    />
+  </g>
+</svg>
diff --git a/packages/mermaid/src/docs/public/icons/icon-public.svg b/packages/mermaid/src/docs/public/icons/icon-public.svg
new file mode 100644
index 000000000..3d563baa1
--- /dev/null
+++ b/packages/mermaid/src/docs/public/icons/icon-public.svg
@@ -0,0 +1,11 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  height="24px"
+  viewBox="0 -960 960 960"
+  width="24px"
+  fill="currentColor"
+>
+  <path
+    d="M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm-40-82v-78q-33 0-56.5-23.5T360-320v-40L168-552q-3 18-5.5 36t-2.5 36q0 121 79.5 212T440-162Zm276-102q41-45 62.5-100.5T800-480q0-98-54.5-179T600-776v16q0 33-23.5 56.5T520-680h-80v80q0 17-11.5 28.5T400-560h-80v80h240q17 0 28.5 11.5T600-440v120h40q26 0 47 15.5t29 40.5Z"
+  />
+</svg>
diff --git a/packages/mermaid/src/docs/public/icons/icon-terminal.svg b/packages/mermaid/src/docs/public/icons/icon-terminal.svg
new file mode 100644
index 000000000..5af2408d4
--- /dev/null
+++ b/packages/mermaid/src/docs/public/icons/icon-terminal.svg
@@ -0,0 +1,11 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  height="24px"
+  viewBox="0 -960 960 960"
+  width="24px"
+  fill="currentColor"
+>
+  <path
+    d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm0-80h640v-400H160v400Zm140-40-56-56 103-104-104-104 57-56 160 160-160 160Zm180 0v-80h240v80H480Z"
+  />
+</svg>
diff --git a/packages/mermaid/src/docs/public/icons/icon-version-history.svg b/packages/mermaid/src/docs/public/icons/icon-version-history.svg
new file mode 100644
index 000000000..bacb28629
--- /dev/null
+++ b/packages/mermaid/src/docs/public/icons/icon-version-history.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+  <mask
+    id="mask0_89_26543"
+    style="mask-type: alpha"
+    maskUnits="userSpaceOnUse"
+    x="0"
+    y="0"
+    width="20"
+    height="20"
+  >
+    <rect width="20" height="20" fill="currentColor" />
+  </mask>
+  <g mask="url(#mask0_89_26543)">
+    <path
+      d="M10 17C8.05556 17 6.40278 16.3194 5.04167 14.9583C3.68056 13.5972 3 11.9444 3 10H4.5C4.5 11.5139 5.03819 12.809 6.11458 13.8854C7.19097 14.9618 8.48611 15.5 10 15.5C11.5139 15.5 12.809 14.9618 13.8854 13.8854C14.9618 12.809 15.5 11.5139 15.5 10C15.5 8.48611 14.9618 7.19097 13.8854 6.11458C12.809 5.03819 11.5139 4.5 10 4.5C9.13889 4.5 8.3434 4.67778 7.61354 5.03333C6.88382 5.38889 6.26958 5.87778 5.77083 6.5H8V8H3V3H4.5V5.70833C5.13889 4.875 5.93403 4.21528 6.88542 3.72917C7.83681 3.24306 8.875 3 10 3C10.9722 3 11.8828 3.18472 12.7319 3.55417C13.581 3.92361 14.3199 4.42271 14.9485 5.05146C15.5773 5.68007 16.0764 6.41896 16.4458 7.26813C16.8153 8.11715 17 9.02778 17 10C17 10.9722 16.8153 11.8828 16.4458 12.7319C16.0764 13.581 15.5773 14.3199 14.9485 14.9485C14.3199 15.5773 13.581 16.0764 12.7319 16.4458C11.8828 16.8153 10.9722 17 10 17ZM12.0833 12.8333L9.25 10V6H10.75V9.375L13.1458 11.7708L12.0833 12.8333Z"
+      fill="currentColor"
+    />
+  </g>
+</svg>
diff --git a/packages/mermaid/src/docs/public/icons/icon-whiteboard.svg b/packages/mermaid/src/docs/public/icons/icon-whiteboard.svg
new file mode 100644
index 000000000..9ac13652a
--- /dev/null
+++ b/packages/mermaid/src/docs/public/icons/icon-whiteboard.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+  <mask
+    id="mask0_89_26533"
+    style="mask-type: alpha"
+    maskUnits="userSpaceOnUse"
+    x="0"
+    y="0"
+    width="20"
+    height="20"
+  >
+    <rect width="20" height="20" fill="currentColor" />
+  </mask>
+  <g mask="url(#mask0_89_26533)">
+    <path
+      d="M6.54165 17L5.83332 16.2917L4.56249 17.5625C4.27082 17.8542 3.91665 18 3.49999 18C3.08332 18 2.72915 17.8542 2.43749 17.5625C2.15971 17.2569 2.01735 16.8993 2.0104 16.4896C2.00346 16.0799 2.14582 15.7292 2.43749 15.4375L3.70832 14.1667L2.99999 13.4583L13.0208 3.4375C13.3125 3.14583 13.6632 3 14.0729 3C14.4826 3 14.8403 3.14583 15.1458 3.4375L16.5625 4.85417C16.8542 5.13194 17 5.47917 17 5.89583C17 6.3125 16.8542 6.66667 16.5625 6.95833L6.54165 17ZM9.27082 9.33333L5.12499 13.4583L6.54165 14.875L10.6875 10.7292L9.27082 9.33333Z"
+      fill="#2B2542"
+    />
+  </g>
+</svg>

From e2e3cd2bbd41b368e72d16346a171ccd9ef0f139 Mon Sep 17 00:00:00 2001
From: rajat-ht <rajat@mermaidchart.com>
Date: Fri, 23 May 2025 16:30:59 +0530
Subject: [PATCH 04/11] chore: code refactor

---
 .../components/EditorSelectionModal.vue       | 158 ++++++------------
 1 file changed, 54 insertions(+), 104 deletions(-)

diff --git a/packages/mermaid/src/docs/.vitepress/components/EditorSelectionModal.vue b/packages/mermaid/src/docs/.vitepress/components/EditorSelectionModal.vue
index 84c49d35e..8ef65549e 100644
--- a/packages/mermaid/src/docs/.vitepress/components/EditorSelectionModal.vue
+++ b/packages/mermaid/src/docs/.vitepress/components/EditorSelectionModal.vue
@@ -6,97 +6,55 @@ interface Feature {
   featureName: string;
 }
 
-const featureColumns: Feature[][] = [
-  [
-    {
-      iconUrl: '/icons/icon-public.svg',
-      featureName: 'Diagram stored in URL',
-    },
-    {
-      iconUrl: '/icons/icon-terminal.svg',
-      featureName: 'Code editor',
-    },
-    {
-      iconUrl: '/icons/icon-whiteboard.svg',
-      featureName: 'Whiteboard',
-    },
-  ],
-  [
-    {
-      iconUrl: '/icons/icon-folder.svg',
-      featureName: 'Storage',
-    },
-    {
-      iconUrl: '/icons/icon-terminal.svg',
-      featureName: 'Code editor',
-    },
-    {
-      iconUrl: '/icons/icon-ai-diagram.svg',
-      featureName: 'AI diagram generator',
-    },
-    {
-      iconUrl: '/icons/icon-whiteboard.svg',
-      featureName: 'Whiteboard',
-    },
-    {
-      iconUrl: '/icons/icon-group.svg',
-      featureName: 'Teams',
-    },
-    {
-      iconUrl: '/icons/icon-groups.svg',
-      featureName: 'Multi-user editing',
-    },
-    {
-      iconUrl: '/icons/icon-ai-repair.svg',
-      featureName: 'AI diagram repair',
-    },
-    {
-      iconUrl: '/icons/icon-version-history.svg',
-      featureName: 'Version history',
-    },
-    {
-      iconUrl: '/icons/icon-comment.svg',
-      featureName: 'Comments',
-    },
-    {
-      iconUrl: '/icons/icon-presentation.svg',
-      featureName: 'Presentations',
-    },
-    {
-      iconUrl: '/icons/icon-plugins.svg',
-      featureName: 'Advanced Plugins',
-    },
-  ],
-  [
-    {
-      iconUrl: '/icons/icon-public.svg',
-      featureName: 'Diagram stored in URL',
-    },
-    {
-      iconUrl: '/icons/icon-terminal.svg',
-      featureName: 'Code editor',
-    },
-    {
-      iconUrl: '/icons/icon-open-source.svg',
-      featureName: 'Open source',
-    },
-    {
-      iconUrl: '/icons/icon-version-history.svg',
-      featureName: 'Version history',
-    },
-  ],
-];
+interface EditorColumn {
+  title: string;
+  description: string;
+  redirectUrl: string;
+  features: Feature[];
+}
 
-const columnTitles = ['Playground', 'Free', 'Open Source'];
-const columnDescriptions = [
-  'Basic features, no login',
-  'Advanced features, free account',
-  'Code only, no login',
-];
-const redirectUrl = [
-  'https://www.mermaidchart.com/play?utm_source=mermaid_js&utm_medium=editor_selection&utm_campaign=playground',
-  'https://www.mermaidchart.com/app/sign-up?utm_source=mermaid_js&utm_medium=editor_selection&utm_campaign=mermaid_chart',
-  'https://mermaid.live/edit',
+const editorColumns: EditorColumn[] = [
+  {
+    title: 'Playground',
+    description: 'Basic features, no login',
+    redirectUrl:
+      'https://www.mermaidchart.com/play?utm_source=mermaid_js&utm_medium=editor_selection&utm_campaign=playground',
+    features: [
+      { iconUrl: '/icons/icon-public.svg', featureName: 'Diagram stored in URL' },
+      { iconUrl: '/icons/icon-terminal.svg', featureName: 'Code editor' },
+      { iconUrl: '/icons/icon-whiteboard.svg', featureName: 'Whiteboard' },
+    ],
+  },
+  {
+    title: 'Free',
+    description: 'Advanced features, free account',
+    redirectUrl:
+      'https://www.mermaidchart.com/app/sign-up?utm_source=mermaid_js&utm_medium=editor_selection&utm_campaign=mermaid_chart',
+    features: [
+      { iconUrl: '/icons/icon-folder.svg', featureName: 'Storage' },
+      { iconUrl: '/icons/icon-terminal.svg', featureName: 'Code editor' },
+      { iconUrl: '/icons/icon-ai-diagram.svg', featureName: 'AI diagram generator' },
+      { iconUrl: '/icons/icon-whiteboard.svg', featureName: 'Whiteboard' },
+      { iconUrl: '/icons/icon-group.svg', featureName: 'Teams' },
+      { iconUrl: '/icons/icon-groups.svg', featureName: 'Multi-user editing' },
+      { iconUrl: '/icons/icon-ai-repair.svg', featureName: 'AI diagram repair' },
+      { iconUrl: '/icons/icon-version-history.svg', featureName: 'Version history' },
+      { iconUrl: '/icons/icon-comment.svg', featureName: 'Comments' },
+      { iconUrl: '/icons/icon-presentation.svg', featureName: 'Presentations' },
+      { iconUrl: '/icons/icon-plugins.svg', featureName: 'Advanced Plugins' },
+    ],
+  },
+  {
+    title: 'Open Source',
+    description: 'Code only, no login',
+    redirectUrl: 'https://mermaid.live/edit',
+    features: [
+      { iconUrl: '/icons/icon-public.svg', featureName: 'Diagram stored in URL' },
+      { iconUrl: '/icons/icon-terminal.svg', featureName: 'Code editor' },
+      { iconUrl: '/icons/icon-open-source.svg', featureName: 'Open source' },
+      { iconUrl: '/icons/icon-version-history.svg', featureName: 'Version history' },
+    ],
+  },
 ];
 
 const isVisible = ref(false);
@@ -129,7 +87,7 @@ onUnmounted(() => {
   >
     <div class="flex flex-row relative top-[8%] gap-4 p-4">
       <div
-        v-for="(column, index) in featureColumns"
+        v-for="(column, index) in editorColumns"
         :key="index"
         class="w-80 flex relative flex-col items-center justify-start bg-[#dceef1] p-6 m-6 text-gray-800 shadow-sm"
         :class="index === 1 ? 'bg-white rounded-b-lg' : 'bg-[#DCEEF1] rounded-lg'"
@@ -142,24 +100,24 @@ onUnmounted(() => {
         </div>
         <header class="mb-6 text-center space-y-1">
           <p class="text-2xl font-medium capitalize text-[#1E1A2E]">
-            {{ columnTitles[index] }}
+            {{ column.title }}
           </p>
           <p class="text-sm text-gray-600">
-            {{ columnDescriptions[index] }}
+            {{ column.description }}
           </p>
         </header>
         <a
-          :href="redirectUrl[index]"
+          :href="column.redirectUrl"
           target="_blank"
           class="mb-4 flex h-10 w-full items-center justify-center rounded-xl hover:bg-[#272040] hover:text-white"
           :class="index === 1 ? 'bg-[#1e1a2e] text-[#BEDDE3]' : 'bg-[#BEDDE3] text-[#1E1A2E]'"
         >
           Start free
         </a>
-        <div id="border-1"></div>
+        <div class="h-px w-full bg-[#bedde3] mb-4"></div>
         <ul class="w-full space-y-2">
           <li
-            v-for="{ iconUrl, featureName } in column"
+            v-for="{ iconUrl, featureName } in column.features"
             :key="featureName"
             class="flex items-center gap-2"
           >
@@ -171,11 +129,3 @@ onUnmounted(() => {
     </div>
   </div>
 </template>
-
-<style>
-#border-1 {
-  border-bottom: 1px solid #bedde3;
-  width: 100%;
-  margin-bottom: 16px;
-}
-</style>

From 5fe0f53179f084111d35f923c0ed6b72c311c3ea Mon Sep 17 00:00:00 2001
From: rajat-ht <rajat@mermaidchart.com>
Date: Fri, 23 May 2025 16:53:06 +0530
Subject: [PATCH 05/11] chore: removed index and used flag

---
 .../.vitepress/components/EditorSelectionModal.vue  | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/packages/mermaid/src/docs/.vitepress/components/EditorSelectionModal.vue b/packages/mermaid/src/docs/.vitepress/components/EditorSelectionModal.vue
index 8ef65549e..c482e5556 100644
--- a/packages/mermaid/src/docs/.vitepress/components/EditorSelectionModal.vue
+++ b/packages/mermaid/src/docs/.vitepress/components/EditorSelectionModal.vue
@@ -10,6 +10,7 @@ interface EditorColumn {
   title: string;
   description: string;
   redirectUrl: string;
+  highlighted?: boolean;
   features: Feature[];
 }
 
@@ -30,6 +31,7 @@ const editorColumns: EditorColumn[] = [
     description: 'Advanced features, free account',
     redirectUrl:
       'https://www.mermaidchart.com/app/sign-up?utm_source=mermaid_js&utm_medium=editor_selection&utm_campaign=mermaid_chart',
+    highlighted: true,
     features: [
       { iconUrl: '/icons/icon-folder.svg', featureName: 'Storage' },
       { iconUrl: '/icons/icon-terminal.svg', featureName: 'Code editor' },
@@ -87,13 +89,12 @@ onUnmounted(() => {
   >
     <div class="flex flex-row relative top-[8%] gap-4 p-4">
       <div
-        v-for="(column, index) in editorColumns"
-        :key="index"
+        v-for="column in editorColumns"
         class="w-80 flex relative flex-col items-center justify-start bg-[#dceef1] p-6 m-6 text-gray-800 shadow-sm"
-        :class="index === 1 ? 'bg-white rounded-b-lg' : 'bg-[#DCEEF1] rounded-lg'"
+        :class="column.highlighted ? 'bg-white rounded-b-lg' : 'bg-[#DCEEF1] rounded-lg'"
       >
         <div
-          v-if="index === 1"
+          v-if="column.highlighted"
           class="absolute -top-8 w-full rounded-t-3xl bg-[#E0095F] py-2 flex items-center justify-center shadow-md"
         >
           <p class="text-sm font-semibold text-white">Best for collaboration</p>
@@ -110,7 +111,9 @@ onUnmounted(() => {
           :href="column.redirectUrl"
           target="_blank"
           class="mb-4 flex h-10 w-full items-center justify-center rounded-xl hover:bg-[#272040] hover:text-white"
-          :class="index === 1 ? 'bg-[#1e1a2e] text-[#BEDDE3]' : 'bg-[#BEDDE3] text-[#1E1A2E]'"
+          :class="
+            column.highlighted ? 'bg-[#1e1a2e] text-[#BEDDE3]' : 'bg-[#BEDDE3] text-[#1E1A2E]'
+          "
         >
           Start free
         </a>

From 0cabc6e8ed0e9cc81858254cea85492cb862e762 Mon Sep 17 00:00:00 2001
From: rajat-ht <rajat@mermaidchart.com>
Date: Fri, 23 May 2025 22:14:18 +0530
Subject: [PATCH 06/11] chore: Update UI design

---
 .../components/EditorSelectionModal.vue       | 20 ++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/packages/mermaid/src/docs/.vitepress/components/EditorSelectionModal.vue b/packages/mermaid/src/docs/.vitepress/components/EditorSelectionModal.vue
index c482e5556..48a886369 100644
--- a/packages/mermaid/src/docs/.vitepress/components/EditorSelectionModal.vue
+++ b/packages/mermaid/src/docs/.vitepress/components/EditorSelectionModal.vue
@@ -87,19 +87,19 @@ onUnmounted(() => {
     class="fixed top-0 left-0 z-20 flex h-screen w-screen backdrop-blur-sm items-center justify-center"
     @click.self="isVisible = false"
   >
-    <div class="flex flex-row relative top-[8%] gap-4 p-4">
+    <div class="flex flex-row rounded-xl relative top-[8%] gap-5 p-6 bg-[#F1F8FA]">
       <div
         v-for="column in editorColumns"
-        class="w-80 flex relative flex-col items-center justify-start bg-[#dceef1] p-6 m-6 text-gray-800 shadow-sm"
-        :class="column.highlighted ? 'bg-white rounded-b-lg' : 'bg-[#DCEEF1] rounded-lg'"
+        class="w-80 flex relative flex-col justify-start items-center bg-[#dceef1] p-8 mb-6 mt-16 text-gray-800 shadow-sm"
+        :class="column.highlighted ? 'bg-white rounded-b-3xl' : 'bg-[#DCEEF1] rounded-3xl'"
       >
         <div
           v-if="column.highlighted"
-          class="absolute -top-8 w-full rounded-t-3xl bg-[#E0095F] py-2 flex items-center justify-center shadow-md"
+          class="absolute -top-10 w-full rounded-t-3xl bg-[#E0095F] py-2 flex justify-center shadow-md"
         >
-          <p class="text-sm font-semibold text-white">Best for collaboration</p>
+          <p class="text-lg font-semibold text-white">Best for collaboration</p>
         </div>
-        <header class="mb-6 text-center space-y-1">
+        <header class="mb-6 w-full text-start space-y-1">
           <p class="text-2xl font-medium capitalize text-[#1E1A2E]">
             {{ column.title }}
           </p>
@@ -110,14 +110,16 @@ onUnmounted(() => {
         <a
           :href="column.redirectUrl"
           target="_blank"
-          class="mb-4 flex h-10 w-full items-center justify-center rounded-xl hover:bg-[#272040] hover:text-white"
+          class="mb-6 flex h-10 w-full items-center justify-center rounded-xl hover:bg-[#272040] hover:text-white"
           :class="
-            column.highlighted ? 'bg-[#1e1a2e] text-[#BEDDE3]' : 'bg-[#BEDDE3] text-[#1E1A2E]'
+            column.highlighted
+              ? 'bg-[#1e1a2e] text-[#BEDDE3] hover:text-[#5CA3B4]'
+              : 'bg-[#BEDDE3] hover:bg-[#5CA3B4] text-[#1E1A2E]'
           "
         >
           Start free
         </a>
-        <div class="h-px w-full bg-[#bedde3] mb-4"></div>
+        <div class="h-px w-full bg-[#bedde3] mb-6"></div>
         <ul class="w-full space-y-2">
           <li
             v-for="{ iconUrl, featureName } in column.features"

From 99048bfa019750ec4629499dd711f2031e7ddd0d Mon Sep 17 00:00:00 2001
From: rajat-ht <rajat@mermaidchart.com>
Date: Tue, 27 May 2025 18:34:32 +0530
Subject: [PATCH 07/11] chore: UI refactor

---
 .../{icon-ai-diagram.svg => ai-diagram.svg}   |  0
 .../{icon-ai-repair.svg => ai-repair.svg}     |  0
 .../icons/{icon-comment.svg => comment.svg}   |  0
 .../icons/{icon-folder.svg => folder.svg}     |  0
 .../icons/{icon-group.svg => group.svg}       |  0
 .../icons/{icon-groups.svg => groups.svg}     |  0
 docs/public/icons/icon-open-source.svg        | 11 -----
 docs/public/icons/open-source.svg             | 11 +++++
 .../icons/{icon-plugins.svg => plugins.svg}   |  0
 ...icon-presentation.svg => presentation.svg} |  0
 .../icons/{icon-public.svg => public.svg}     |  0
 .../icons/{icon-terminal.svg => terminal.svg} |  0
 ...ersion-history.svg => version-history.svg} |  0
 .../{icon-whiteboard.svg => whiteboard.svg}   |  0
 .../components/EditorSelectionModal.vue       | 42 +++++++++----------
 .../{icon-ai-diagram.svg => ai-diagram.svg}   |  0
 .../{icon-ai-repair.svg => ai-repair.svg}     |  0
 .../icons/{icon-comment.svg => comment.svg}   |  0
 .../icons/{icon-folder.svg => folder.svg}     |  0
 .../icons/{icon-group.svg => group.svg}       |  0
 .../icons/{icon-groups.svg => groups.svg}     |  0
 .../docs/public/icons/icon-open-source.svg    | 11 -----
 .../src/docs/public/icons/open-source.svg     | 11 +++++
 .../icons/{icon-plugins.svg => plugins.svg}   |  0
 ...icon-presentation.svg => presentation.svg} |  0
 .../icons/{icon-public.svg => public.svg}     |  0
 .../icons/{icon-terminal.svg => terminal.svg} |  0
 ...ersion-history.svg => version-history.svg} |  0
 .../{icon-whiteboard.svg => whiteboard.svg}   |  0
 29 files changed, 43 insertions(+), 43 deletions(-)
 rename docs/public/icons/{icon-ai-diagram.svg => ai-diagram.svg} (100%)
 rename docs/public/icons/{icon-ai-repair.svg => ai-repair.svg} (100%)
 rename docs/public/icons/{icon-comment.svg => comment.svg} (100%)
 rename docs/public/icons/{icon-folder.svg => folder.svg} (100%)
 rename docs/public/icons/{icon-group.svg => group.svg} (100%)
 rename docs/public/icons/{icon-groups.svg => groups.svg} (100%)
 delete mode 100644 docs/public/icons/icon-open-source.svg
 create mode 100644 docs/public/icons/open-source.svg
 rename docs/public/icons/{icon-plugins.svg => plugins.svg} (100%)
 rename docs/public/icons/{icon-presentation.svg => presentation.svg} (100%)
 rename docs/public/icons/{icon-public.svg => public.svg} (100%)
 rename docs/public/icons/{icon-terminal.svg => terminal.svg} (100%)
 rename docs/public/icons/{icon-version-history.svg => version-history.svg} (100%)
 rename docs/public/icons/{icon-whiteboard.svg => whiteboard.svg} (100%)
 rename packages/mermaid/src/docs/public/icons/{icon-ai-diagram.svg => ai-diagram.svg} (100%)
 rename packages/mermaid/src/docs/public/icons/{icon-ai-repair.svg => ai-repair.svg} (100%)
 rename packages/mermaid/src/docs/public/icons/{icon-comment.svg => comment.svg} (100%)
 rename packages/mermaid/src/docs/public/icons/{icon-folder.svg => folder.svg} (100%)
 rename packages/mermaid/src/docs/public/icons/{icon-group.svg => group.svg} (100%)
 rename packages/mermaid/src/docs/public/icons/{icon-groups.svg => groups.svg} (100%)
 delete mode 100644 packages/mermaid/src/docs/public/icons/icon-open-source.svg
 create mode 100644 packages/mermaid/src/docs/public/icons/open-source.svg
 rename packages/mermaid/src/docs/public/icons/{icon-plugins.svg => plugins.svg} (100%)
 rename packages/mermaid/src/docs/public/icons/{icon-presentation.svg => presentation.svg} (100%)
 rename packages/mermaid/src/docs/public/icons/{icon-public.svg => public.svg} (100%)
 rename packages/mermaid/src/docs/public/icons/{icon-terminal.svg => terminal.svg} (100%)
 rename packages/mermaid/src/docs/public/icons/{icon-version-history.svg => version-history.svg} (100%)
 rename packages/mermaid/src/docs/public/icons/{icon-whiteboard.svg => whiteboard.svg} (100%)

diff --git a/docs/public/icons/icon-ai-diagram.svg b/docs/public/icons/ai-diagram.svg
similarity index 100%
rename from docs/public/icons/icon-ai-diagram.svg
rename to docs/public/icons/ai-diagram.svg
diff --git a/docs/public/icons/icon-ai-repair.svg b/docs/public/icons/ai-repair.svg
similarity index 100%
rename from docs/public/icons/icon-ai-repair.svg
rename to docs/public/icons/ai-repair.svg
diff --git a/docs/public/icons/icon-comment.svg b/docs/public/icons/comment.svg
similarity index 100%
rename from docs/public/icons/icon-comment.svg
rename to docs/public/icons/comment.svg
diff --git a/docs/public/icons/icon-folder.svg b/docs/public/icons/folder.svg
similarity index 100%
rename from docs/public/icons/icon-folder.svg
rename to docs/public/icons/folder.svg
diff --git a/docs/public/icons/icon-group.svg b/docs/public/icons/group.svg
similarity index 100%
rename from docs/public/icons/icon-group.svg
rename to docs/public/icons/group.svg
diff --git a/docs/public/icons/icon-groups.svg b/docs/public/icons/groups.svg
similarity index 100%
rename from docs/public/icons/icon-groups.svg
rename to docs/public/icons/groups.svg
diff --git a/docs/public/icons/icon-open-source.svg b/docs/public/icons/icon-open-source.svg
deleted file mode 100644
index 4b121d0ab..000000000
--- a/docs/public/icons/icon-open-source.svg
+++ /dev/null
@@ -1,11 +0,0 @@
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  height="24px"
-  viewBox="0 -960 960 960"
-  width="24px"
-  fill="currentColor"
->
-  <path
-    d="M80-160v-112q0-33 17-62t47-44q51-26 115-44t141-18q30 0 58.5 3t55.5 9l-70 70q-11-2-21.5-2H400q-71 0-127.5 17T180-306q-9 5-14.5 14t-5.5 20v32h250l80 80H80Zm542 16L484-282l56-56 82 82 202-202 56 56-258 258ZM400-480q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47Zm10 240Zm-10-320q33 0 56.5-23.5T480-640q0-33-23.5-56.5T400-720q-33 0-56.5 23.5T320-640q0 33 23.5 56.5T400-560Zm0-80Z"
-  />
-</svg>
diff --git a/docs/public/icons/open-source.svg b/docs/public/icons/open-source.svg
new file mode 100644
index 000000000..d6c1f9843
--- /dev/null
+++ b/docs/public/icons/open-source.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
+  <!-- Icon from Tabler Icons by Paweł Kuna - https://github.com/tabler/tabler-icons/blob/master/LICENSE -->
+  <path
+    fill="none"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2"
+    d="M12 3a9 9 0 0 1 3.618 17.243l-2.193-5.602a3 3 0 1 0-2.849 0l-2.193 5.603A9 9 0 0 1 12 3"
+  />
+</svg>
diff --git a/docs/public/icons/icon-plugins.svg b/docs/public/icons/plugins.svg
similarity index 100%
rename from docs/public/icons/icon-plugins.svg
rename to docs/public/icons/plugins.svg
diff --git a/docs/public/icons/icon-presentation.svg b/docs/public/icons/presentation.svg
similarity index 100%
rename from docs/public/icons/icon-presentation.svg
rename to docs/public/icons/presentation.svg
diff --git a/docs/public/icons/icon-public.svg b/docs/public/icons/public.svg
similarity index 100%
rename from docs/public/icons/icon-public.svg
rename to docs/public/icons/public.svg
diff --git a/docs/public/icons/icon-terminal.svg b/docs/public/icons/terminal.svg
similarity index 100%
rename from docs/public/icons/icon-terminal.svg
rename to docs/public/icons/terminal.svg
diff --git a/docs/public/icons/icon-version-history.svg b/docs/public/icons/version-history.svg
similarity index 100%
rename from docs/public/icons/icon-version-history.svg
rename to docs/public/icons/version-history.svg
diff --git a/docs/public/icons/icon-whiteboard.svg b/docs/public/icons/whiteboard.svg
similarity index 100%
rename from docs/public/icons/icon-whiteboard.svg
rename to docs/public/icons/whiteboard.svg
diff --git a/packages/mermaid/src/docs/.vitepress/components/EditorSelectionModal.vue b/packages/mermaid/src/docs/.vitepress/components/EditorSelectionModal.vue
index 48a886369..612be4fa4 100644
--- a/packages/mermaid/src/docs/.vitepress/components/EditorSelectionModal.vue
+++ b/packages/mermaid/src/docs/.vitepress/components/EditorSelectionModal.vue
@@ -21,9 +21,9 @@ const editorColumns: EditorColumn[] = [
     redirectUrl:
       'https://www.mermaidchart.com/play?utm_source=mermaid_js&utm_medium=editor_selection&utm_campaign=playground',
     features: [
-      { iconUrl: '/icons/icon-public.svg', featureName: 'Diagram stored in URL' },
-      { iconUrl: '/icons/icon-terminal.svg', featureName: 'Code editor' },
-      { iconUrl: '/icons/icon-whiteboard.svg', featureName: 'Whiteboard' },
+      { iconUrl: '/icons/public.svg', featureName: 'Diagram stored in URL' },
+      { iconUrl: '/icons/terminal.svg', featureName: 'Code editor' },
+      { iconUrl: '/icons/whiteboard.svg', featureName: 'Whiteboard' },
     ],
   },
   {
@@ -33,17 +33,17 @@ const editorColumns: EditorColumn[] = [
       'https://www.mermaidchart.com/app/sign-up?utm_source=mermaid_js&utm_medium=editor_selection&utm_campaign=mermaid_chart',
     highlighted: true,
     features: [
-      { iconUrl: '/icons/icon-folder.svg', featureName: 'Storage' },
-      { iconUrl: '/icons/icon-terminal.svg', featureName: 'Code editor' },
-      { iconUrl: '/icons/icon-ai-diagram.svg', featureName: 'AI diagram generator' },
-      { iconUrl: '/icons/icon-whiteboard.svg', featureName: 'Whiteboard' },
-      { iconUrl: '/icons/icon-group.svg', featureName: 'Teams' },
-      { iconUrl: '/icons/icon-groups.svg', featureName: 'Multi-user editing' },
-      { iconUrl: '/icons/icon-ai-repair.svg', featureName: 'AI diagram repair' },
-      { iconUrl: '/icons/icon-version-history.svg', featureName: 'Version history' },
-      { iconUrl: '/icons/icon-comment.svg', featureName: 'Comments' },
-      { iconUrl: '/icons/icon-presentation.svg', featureName: 'Presentations' },
-      { iconUrl: '/icons/icon-plugins.svg', featureName: 'Advanced Plugins' },
+      { iconUrl: '/icons/folder.svg', featureName: 'Storage' },
+      { iconUrl: '/icons/terminal.svg', featureName: 'Code editor' },
+      { iconUrl: '/icons/ai-diagram.svg', featureName: 'AI diagram generator' },
+      { iconUrl: '/icons/whiteboard.svg', featureName: 'Whiteboard' },
+      { iconUrl: '/icons/group.svg', featureName: 'Teams' },
+      { iconUrl: '/icons/groups.svg', featureName: 'Multi-user editing' },
+      { iconUrl: '/icons/ai-repair.svg', featureName: 'AI diagram repair' },
+      { iconUrl: '/icons/version-history.svg', featureName: 'Version history' },
+      { iconUrl: '/icons/comment.svg', featureName: 'Comments' },
+      { iconUrl: '/icons/presentation.svg', featureName: 'Presentations' },
+      { iconUrl: '/icons/plugins.svg', featureName: 'Advanced Plugins' },
     ],
   },
   {
@@ -51,10 +51,10 @@ const editorColumns: EditorColumn[] = [
     description: 'Code only, no login',
     redirectUrl: 'https://mermaid.live/edit',
     features: [
-      { iconUrl: '/icons/icon-public.svg', featureName: 'Diagram stored in URL' },
-      { iconUrl: '/icons/icon-terminal.svg', featureName: 'Code editor' },
-      { iconUrl: '/icons/icon-open-source.svg', featureName: 'Open source' },
-      { iconUrl: '/icons/icon-version-history.svg', featureName: 'Version history' },
+      { iconUrl: '/icons/public.svg', featureName: 'Diagram stored in URL' },
+      { iconUrl: '/icons/terminal.svg', featureName: 'Code editor' },
+      { iconUrl: '/icons/open-source.svg', featureName: 'Open source' },
+      { iconUrl: '/icons/version-history.svg', featureName: 'Version history' },
     ],
   },
 ];
@@ -84,13 +84,13 @@ onUnmounted(() => {
 <template>
   <div
     v-if="isVisible"
-    class="fixed top-0 left-0 z-20 flex h-screen w-screen backdrop-blur-sm items-center justify-center"
+    class="fixed top-0 left-0 z-50 flex h-screen w-screen backdrop-blur-sm items-center justify-center"
     @click.self="isVisible = false"
   >
-    <div class="flex flex-row rounded-xl relative top-[8%] gap-5 p-6 bg-[#F1F8FA]">
+    <div class="flex flex-row rounded-xl relative gap-5 pt-20 pb-10 px-10 bg-[#F1F8FA]">
       <div
         v-for="column in editorColumns"
-        class="w-80 flex relative flex-col justify-start items-center bg-[#dceef1] p-8 mb-6 mt-16 text-gray-800 shadow-sm"
+        class="w-80 flex relative flex-col justify-start items-center bg-[#dceef1] p-8 text-gray-800 shadow-sm"
         :class="column.highlighted ? 'bg-white rounded-b-3xl' : 'bg-[#DCEEF1] rounded-3xl'"
       >
         <div
diff --git a/packages/mermaid/src/docs/public/icons/icon-ai-diagram.svg b/packages/mermaid/src/docs/public/icons/ai-diagram.svg
similarity index 100%
rename from packages/mermaid/src/docs/public/icons/icon-ai-diagram.svg
rename to packages/mermaid/src/docs/public/icons/ai-diagram.svg
diff --git a/packages/mermaid/src/docs/public/icons/icon-ai-repair.svg b/packages/mermaid/src/docs/public/icons/ai-repair.svg
similarity index 100%
rename from packages/mermaid/src/docs/public/icons/icon-ai-repair.svg
rename to packages/mermaid/src/docs/public/icons/ai-repair.svg
diff --git a/packages/mermaid/src/docs/public/icons/icon-comment.svg b/packages/mermaid/src/docs/public/icons/comment.svg
similarity index 100%
rename from packages/mermaid/src/docs/public/icons/icon-comment.svg
rename to packages/mermaid/src/docs/public/icons/comment.svg
diff --git a/packages/mermaid/src/docs/public/icons/icon-folder.svg b/packages/mermaid/src/docs/public/icons/folder.svg
similarity index 100%
rename from packages/mermaid/src/docs/public/icons/icon-folder.svg
rename to packages/mermaid/src/docs/public/icons/folder.svg
diff --git a/packages/mermaid/src/docs/public/icons/icon-group.svg b/packages/mermaid/src/docs/public/icons/group.svg
similarity index 100%
rename from packages/mermaid/src/docs/public/icons/icon-group.svg
rename to packages/mermaid/src/docs/public/icons/group.svg
diff --git a/packages/mermaid/src/docs/public/icons/icon-groups.svg b/packages/mermaid/src/docs/public/icons/groups.svg
similarity index 100%
rename from packages/mermaid/src/docs/public/icons/icon-groups.svg
rename to packages/mermaid/src/docs/public/icons/groups.svg
diff --git a/packages/mermaid/src/docs/public/icons/icon-open-source.svg b/packages/mermaid/src/docs/public/icons/icon-open-source.svg
deleted file mode 100644
index 4b121d0ab..000000000
--- a/packages/mermaid/src/docs/public/icons/icon-open-source.svg
+++ /dev/null
@@ -1,11 +0,0 @@
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  height="24px"
-  viewBox="0 -960 960 960"
-  width="24px"
-  fill="currentColor"
->
-  <path
-    d="M80-160v-112q0-33 17-62t47-44q51-26 115-44t141-18q30 0 58.5 3t55.5 9l-70 70q-11-2-21.5-2H400q-71 0-127.5 17T180-306q-9 5-14.5 14t-5.5 20v32h250l80 80H80Zm542 16L484-282l56-56 82 82 202-202 56 56-258 258ZM400-480q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47Zm10 240Zm-10-320q33 0 56.5-23.5T480-640q0-33-23.5-56.5T400-720q-33 0-56.5 23.5T320-640q0 33 23.5 56.5T400-560Zm0-80Z"
-  />
-</svg>
diff --git a/packages/mermaid/src/docs/public/icons/open-source.svg b/packages/mermaid/src/docs/public/icons/open-source.svg
new file mode 100644
index 000000000..d6c1f9843
--- /dev/null
+++ b/packages/mermaid/src/docs/public/icons/open-source.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
+  <!-- Icon from Tabler Icons by Paweł Kuna - https://github.com/tabler/tabler-icons/blob/master/LICENSE -->
+  <path
+    fill="none"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2"
+    d="M12 3a9 9 0 0 1 3.618 17.243l-2.193-5.602a3 3 0 1 0-2.849 0l-2.193 5.603A9 9 0 0 1 12 3"
+  />
+</svg>
diff --git a/packages/mermaid/src/docs/public/icons/icon-plugins.svg b/packages/mermaid/src/docs/public/icons/plugins.svg
similarity index 100%
rename from packages/mermaid/src/docs/public/icons/icon-plugins.svg
rename to packages/mermaid/src/docs/public/icons/plugins.svg
diff --git a/packages/mermaid/src/docs/public/icons/icon-presentation.svg b/packages/mermaid/src/docs/public/icons/presentation.svg
similarity index 100%
rename from packages/mermaid/src/docs/public/icons/icon-presentation.svg
rename to packages/mermaid/src/docs/public/icons/presentation.svg
diff --git a/packages/mermaid/src/docs/public/icons/icon-public.svg b/packages/mermaid/src/docs/public/icons/public.svg
similarity index 100%
rename from packages/mermaid/src/docs/public/icons/icon-public.svg
rename to packages/mermaid/src/docs/public/icons/public.svg
diff --git a/packages/mermaid/src/docs/public/icons/icon-terminal.svg b/packages/mermaid/src/docs/public/icons/terminal.svg
similarity index 100%
rename from packages/mermaid/src/docs/public/icons/icon-terminal.svg
rename to packages/mermaid/src/docs/public/icons/terminal.svg
diff --git a/packages/mermaid/src/docs/public/icons/icon-version-history.svg b/packages/mermaid/src/docs/public/icons/version-history.svg
similarity index 100%
rename from packages/mermaid/src/docs/public/icons/icon-version-history.svg
rename to packages/mermaid/src/docs/public/icons/version-history.svg
diff --git a/packages/mermaid/src/docs/public/icons/icon-whiteboard.svg b/packages/mermaid/src/docs/public/icons/whiteboard.svg
similarity index 100%
rename from packages/mermaid/src/docs/public/icons/icon-whiteboard.svg
rename to packages/mermaid/src/docs/public/icons/whiteboard.svg

From 646cdf0d32bddd678a15775b2751cbc002c3ca45 Mon Sep 17 00:00:00 2001
From: rajat-ht <rajat@mermaidchart.com>
Date: Wed, 28 May 2025 02:32:32 +0530
Subject: [PATCH 08/11] chore: Update URL

---
 .../src/docs/.vitepress/components/EditorSelectionModal.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/mermaid/src/docs/.vitepress/components/EditorSelectionModal.vue b/packages/mermaid/src/docs/.vitepress/components/EditorSelectionModal.vue
index 612be4fa4..98c5f8a61 100644
--- a/packages/mermaid/src/docs/.vitepress/components/EditorSelectionModal.vue
+++ b/packages/mermaid/src/docs/.vitepress/components/EditorSelectionModal.vue
@@ -30,7 +30,7 @@ const editorColumns: EditorColumn[] = [
     title: 'Free',
     description: 'Advanced features, free account',
     redirectUrl:
-      'https://www.mermaidchart.com/app/sign-up?utm_source=mermaid_js&utm_medium=editor_selection&utm_campaign=mermaid_chart',
+      'https://www.mermaidchart.com/app/sign-up?utm_source=mermaid_js&utm_medium=editor_selection&utm_campaign=mermaid_chart&redirect=%2Fapp%2Fdiagrams%2Fnew',
     highlighted: true,
     features: [
       { iconUrl: '/icons/folder.svg', featureName: 'Storage' },
@@ -87,7 +87,9 @@ onUnmounted(() => {
     class="fixed top-0 left-0 z-50 flex h-screen w-screen backdrop-blur-sm items-center justify-center"
     @click.self="isVisible = false"
   >
-    <div class="flex flex-row rounded-xl relative gap-5 pt-20 pb-10 px-10 bg-[#F1F8FA]">
+    <div
+      class="flex flex-row rounded-xl relative gap-5 pt-20 pb-10 px-10 @dark:bg-red:50 bg-[#F1F8FA]"
+    >
       <div
         v-for="column in editorColumns"
         class="w-80 flex relative flex-col justify-start items-center bg-[#dceef1] p-8 text-gray-800 shadow-sm"

From a3552e79369af4e5ca02b32ea0dc4def7f503cc8 Mon Sep 17 00:00:00 2001
From: rajat-ht <rajat@mermaidchart.com>
Date: Wed, 28 May 2025 21:27:55 +0530
Subject: [PATCH 09/11] chore : fix UI

---
 .../src/docs/.vitepress/components/EditorSelectionModal.vue   | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/mermaid/src/docs/.vitepress/components/EditorSelectionModal.vue b/packages/mermaid/src/docs/.vitepress/components/EditorSelectionModal.vue
index 98c5f8a61..8e4dc540e 100644
--- a/packages/mermaid/src/docs/.vitepress/components/EditorSelectionModal.vue
+++ b/packages/mermaid/src/docs/.vitepress/components/EditorSelectionModal.vue
@@ -87,9 +87,7 @@ onUnmounted(() => {
     class="fixed top-0 left-0 z-50 flex h-screen w-screen backdrop-blur-sm items-center justify-center"
     @click.self="isVisible = false"
   >
-    <div
-      class="flex flex-row rounded-xl relative gap-5 pt-20 pb-10 px-10 @dark:bg-red:50 bg-[#F1F8FA]"
-    >
+    <div class="flex flex-row rounded-xl relative gap-5 pt-20 pb-10 px-10 bg-[#F1F8FA]">
       <div
         v-for="column in editorColumns"
         class="w-80 flex relative flex-col justify-start items-center bg-[#dceef1] p-8 text-gray-800 shadow-sm"

From 8e84a1a8afb8593e78080dabe63009befa92ef49 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Wed, 28 May 2025 21:47:21 +0530
Subject: [PATCH 10/11] chore: Tweak shadows

---
 .../.vitepress/components/EditorSelectionModal.vue   | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/mermaid/src/docs/.vitepress/components/EditorSelectionModal.vue b/packages/mermaid/src/docs/.vitepress/components/EditorSelectionModal.vue
index 8e4dc540e..e41a7096d 100644
--- a/packages/mermaid/src/docs/.vitepress/components/EditorSelectionModal.vue
+++ b/packages/mermaid/src/docs/.vitepress/components/EditorSelectionModal.vue
@@ -87,15 +87,17 @@ onUnmounted(() => {
     class="fixed top-0 left-0 z-50 flex h-screen w-screen backdrop-blur-sm items-center justify-center"
     @click.self="isVisible = false"
   >
-    <div class="flex flex-row rounded-xl relative gap-5 pt-20 pb-10 px-10 bg-[#F1F8FA]">
+    <div class="flex flex-row rounded-3xl shadow relative gap-5 pt-20 pb-10 px-10 bg-[#F1F8FA]">
       <div
         v-for="column in editorColumns"
-        class="w-80 flex relative flex-col justify-start items-center bg-[#dceef1] p-8 text-gray-800 shadow-sm"
-        :class="column.highlighted ? 'bg-white rounded-b-3xl' : 'bg-[#DCEEF1] rounded-3xl'"
+        class="w-80 flex relative flex-col justify-start items-center bg-[#dceef1] p-8 text-gray-800 shadow"
+        :class="
+          column.highlighted ? 'bg-white rounded-b-3xl shadow-xl' : 'bg-[#DCEEF1] rounded-3xl'
+        "
       >
         <div
           v-if="column.highlighted"
-          class="absolute -top-10 w-full rounded-t-3xl bg-[#E0095F] py-2 flex justify-center shadow-md"
+          class="absolute -top-10 w-full rounded-t-3xl bg-[#E0095F] py-2 flex justify-center"
         >
           <p class="text-lg font-semibold text-white">Best for collaboration</p>
         </div>
@@ -110,7 +112,7 @@ onUnmounted(() => {
         <a
           :href="column.redirectUrl"
           target="_blank"
-          class="mb-6 flex h-10 w-full items-center justify-center rounded-xl hover:bg-[#272040] hover:text-white"
+          class="mb-6 flex h-10 w-full items-center justify-center rounded-xl hover:bg-[#272040] hover:text-white hover:shadow-md"
           :class="
             column.highlighted
               ? 'bg-[#1e1a2e] text-[#BEDDE3] hover:text-[#5CA3B4]'

From ef449a601b5bc5bcdffd061b54c5d5f851e8bd2c Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Wed, 28 May 2025 21:53:24 +0530
Subject: [PATCH 11/11] chore: Use mermaid.live as fallback links in button

---
 packages/mermaid/src/docs/.vitepress/config.ts | 4 +++-
 packages/mermaid/src/docs/index.md             | 4 +++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/mermaid/src/docs/.vitepress/config.ts b/packages/mermaid/src/docs/.vitepress/config.ts
index 9771ae6f2..cd66316a3 100644
--- a/packages/mermaid/src/docs/.vitepress/config.ts
+++ b/packages/mermaid/src/docs/.vitepress/config.ts
@@ -120,7 +120,9 @@ function nav() {
     },
     {
       text: '💻 Open Editor',
-      link: '/',
+      link: 'https://mermaid.live/edit',
+      target: '_blank',
+      rel: 'external',
     },
   ];
 }
diff --git a/packages/mermaid/src/docs/index.md b/packages/mermaid/src/docs/index.md
index f87b86b69..f160f7d8a 100644
--- a/packages/mermaid/src/docs/index.md
+++ b/packages/mermaid/src/docs/index.md
@@ -17,7 +17,9 @@ hero:
   actions:
     - theme: brand
       text: Try Editor
-      link: /
+      link: https://mermaid.live/edit
+      target: _blank
+      rel: external
     - theme: alt
       text: Get started
       link: /intro/