Repository: mermaid-js/mermaid
Pull request #6609: Feat: Add editor popup modal
Author: login: rajat-ht
Created: 2025-05-21T11:52:34Z | Merged: 2025-05-28T16:24:21Z

## :bookmark_tabs: Summary

This PR contains adds Editor popup modal.

## :straight_ruler: Design Decisions

Design decisions made by the Mermaid Chart team.

### :clipboard: Tasks

Make sure you

- [X] :book: have read the [contribution guidelines](https://mermaid.js.org/community/contributing.html)
- [ ] :computer: have added necessary unit/e2e tests.
- [ ] :notebook: have added documentation. Make sure [`MERMAID_RELEASE_VERSION`](https://mermaid.js.org/community/contributing.html#update-documentation) is used for all new features.
- [ ] :butterfly: If your PR makes a change that should be noted in one or more packages' changelogs, generate a changeset by running `pnpm changeset` and following the prompts. Changesets that add features should be `minor` and those that fix bugs should be `patch`. Please prefix changeset messages with `feat:`, `fix:`, or `chore:`.



Diff:
diff --git a/docs/public/icons/ai-diagram.svg b/docs/public/icons/ai-diagram.svg
new file mode 100644
index 00000000000..d3ff002f63b
--- /dev/null
+++ b/docs/public/icons/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/ai-repair.svg b/docs/public/icons/ai-repair.svg
new file mode 100644
index 00000000000..1e255ac81ab
--- /dev/null
+++ b/docs/public/icons/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/comment.svg b/docs/public/icons/comment.svg
new file mode 100644
index 00000000000..626bfd265e7
--- /dev/null
+++ b/docs/public/icons/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/folder.svg b/docs/public/icons/folder.svg
new file mode 100644
index 00000000000..a443f1699b2
--- /dev/null
+++ b/docs/public/icons/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/group.svg b/docs/public/icons/group.svg
new file mode 100644
index 00000000000..8a7443b6eb4
--- /dev/null
+++ b/docs/public/icons/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/groups.svg b/docs/public/icons/groups.svg
new file mode 100644
index 00000000000..c827bebc68a
--- /dev/null
+++ b/docs/public/icons/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/open-source.svg b/docs/public/icons/open-source.svg
new file mode 100644
index 00000000000..d6c1f9843ca
--- /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/plugins.svg b/docs/public/icons/plugins.svg
new file mode 100644
index 00000000000..fbf4a4800c3
--- /dev/null
+++ b/docs/public/icons/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/presentation.svg b/docs/public/icons/presentation.svg
new file mode 100644
index 00000000000..4c679a19ecf
--- /dev/null
+++ b/docs/public/icons/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/public.svg b/docs/public/icons/public.svg
new file mode 100644
index 00000000000..3d563baa1b4
--- /dev/null
+++ b/docs/public/icons/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/terminal.svg b/docs/public/icons/terminal.svg
new file mode 100644
index 00000000000..5af2408d459
--- /dev/null
+++ b/docs/public/icons/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/version-history.svg b/docs/public/icons/version-history.svg
new file mode 100644
index 00000000000..bacb28629dc
--- /dev/null
+++ b/docs/public/icons/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/whiteboard.svg b/docs/public/icons/whiteboard.svg
new file mode 100644
index 00000000000..9ac13652a9c
--- /dev/null
+++ b/docs/public/icons/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
new file mode 100644
index 00000000000..e41a7096dcd
--- /dev/null
+++ b/packages/mermaid/src/docs/.vitepress/components/EditorSelectionModal.vue
@@ -0,0 +1,138 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref } from 'vue';
+
+interface Feature {
+  iconUrl: string;
+  featureName: string;
+}
+
+interface EditorColumn {
+  title: string;
+  description: string;
+  redirectUrl: string;
+  highlighted?: boolean;
+  features: Feature[];
+}
+
+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/public.svg', featureName: 'Diagram stored in URL' },
+      { iconUrl: '/icons/terminal.svg', featureName: 'Code editor' },
+      { iconUrl: '/icons/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&redirect=%2Fapp%2Fdiagrams%2Fnew',
+    highlighted: true,
+    features: [
+      { 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' },
+    ],
+  },
+  {
+    title: 'Open Source',
+    description: 'Code only, no login',
+    redirectUrl: 'https://mermaid.live/edit',
+    features: [
+      { 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' },
+    ],
+  },
+];
+
+const isVisible = ref(false);
+
+const handleMouseDown = (e: MouseEvent) => {
+  const target = e.target as HTMLElement;
+  if (
+    (target.tagName === 'A' && target.textContent?.trim() === 'Try Editor') ||
+    (target.tagName === 'SPAN' && target.textContent?.trim() === '💻 Open Editor')
+  ) {
+    e.preventDefault();
+    isVisible.value = !isVisible.value;
+  }
+};
+
+onMounted(() => {
+  document.addEventListener('click', handleMouseDown);
+});
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleMouseDown);
+});
+</script>
+
+<template>
+  <div
+    v-if="isVisible"
+    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-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"
+        :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"
+        >
+          <p class="text-lg font-semibold text-white">Best for collaboration</p>
+        </div>
+        <header class="mb-6 w-full text-start space-y-1">
+          <p class="text-2xl font-medium capitalize text-[#1E1A2E]">
+            {{ column.title }}
+          </p>
+          <p class="text-sm text-gray-600">
+            {{ column.description }}
+          </p>
+        </header>
+        <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 hover:shadow-md"
+          :class="
+            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-6"></div>
+        <ul class="w-full space-y-2">
+          <li
+            v-for="{ iconUrl, featureName } in column.features"
+            :key="featureName"
+            class="flex items-center gap-2"
+          >
+            <img :src="iconUrl" :alt="featureName" class="inline-block size-5" />
+            <span>{{ featureName }}</span>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/packages/mermaid/src/docs/.vitepress/theme/index.ts b/packages/mermaid/src/docs/.vitepress/theme/index.ts
index 3996dde1aa1..574ce3e81c2 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 f90262f0693..f160f7d8a6b 100644
--- a/packages/mermaid/src/docs/index.md
+++ b/packages/mermaid/src/docs/index.md
@@ -16,8 +16,8 @@ hero:
     alt: Mermaid diagram
   actions:
     - theme: brand
-      text: Try Playground
-      link: https://www.mermaidchart.com/play?utm_source=mermaid_js&utm_medium=button&utm_campaign=try_playground
+      text: Try Editor
+      link: https://mermaid.live/edit
       target: _blank
       rel: external
     - theme: alt
diff --git a/packages/mermaid/src/docs/public/icons/ai-diagram.svg b/packages/mermaid/src/docs/public/icons/ai-diagram.svg
new file mode 100644
index 00000000000..d3ff002f63b
--- /dev/null
+++ b/packages/mermaid/src/docs/public/icons/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/ai-repair.svg b/packages/mermaid/src/docs/public/icons/ai-repair.svg
new file mode 100644
index 00000000000..1e255ac81ab
--- /dev/null
+++ b/packages/mermaid/src/docs/public/icons/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/comment.svg b/packages/mermaid/src/docs/public/icons/comment.svg
new file mode 100644
index 00000000000..626bfd265e7
--- /dev/null
+++ b/packages/mermaid/src/docs/public/icons/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/folder.svg b/packages/mermaid/src/docs/public/icons/folder.svg
new file mode 100644
index 00000000000..a443f1699b2
--- /dev/null
+++ b/packages/mermaid/src/docs/public/icons/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/group.svg b/packages/mermaid/src/docs/public/icons/group.svg
new file mode 100644
index 00000000000..8a7443b6eb4
--- /dev/null
+++ b/packages/mermaid/src/docs/public/icons/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/groups.svg b/packages/mermaid/src/docs/public/icons/groups.svg
new file mode 100644
index 00000000000..c827bebc68a
--- /dev/null
+++ b/packages/mermaid/src/docs/public/icons/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/open-source.svg b/packages/mermaid/src/docs/public/icons/open-source.svg
new file mode 100644
index 00000000000..d6c1f9843ca
--- /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/plugins.svg b/packages/mermaid/src/docs/public/icons/plugins.svg
new file mode 100644
index 00000000000..fbf4a4800c3
--- /dev/null
+++ b/packages/mermaid/src/docs/public/icons/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/presentation.svg b/packages/mermaid/src/docs/public/icons/presentation.svg
new file mode 100644
index 00000000000..4c679a19ecf
--- /dev/null
+++ b/packages/mermaid/src/docs/public/icons/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/public.svg b/packages/mermaid/src/docs/public/icons/public.svg
new file mode 100644
index 00000000000..3d563baa1b4
--- /dev/null
+++ b/packages/mermaid/src/docs/public/icons/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/terminal.svg b/packages/mermaid/src/docs/public/icons/terminal.svg
new file mode 100644
index 00000000000..5af2408d459
--- /dev/null
+++ b/packages/mermaid/src/docs/public/icons/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/version-history.svg b/packages/mermaid/src/docs/public/icons/version-history.svg
new file mode 100644
index 00000000000..bacb28629dc
--- /dev/null
+++ b/packages/mermaid/src/docs/public/icons/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/whiteboard.svg b/packages/mermaid/src/docs/public/icons/whiteboard.svg
new file mode 100644
index 00000000000..9ac13652a9c
--- /dev/null
+++ b/packages/mermaid/src/docs/public/icons/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>


Reviews:
user: login: sidharthv96
state: CHANGES_REQUESTED
author_association: MEMBER
submitted_at: 2025-05-21T17:52:39Z
user: login: rajat-ht
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-23T10:06:23Z
user: login: rajat-ht
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-23T10:21:42Z
user: login: rajat-ht
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-23T10:21:50Z
user: login: rajat-ht
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-23T10:21:58Z
user: login: rajat-ht
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-23T10:22:05Z
user: login: rajat-ht
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-23T10:22:11Z
user: login: rajat-ht
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-23T10:22:27Z
user: login: rajat-ht
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-23T10:22:44Z
user: login: rajat-ht
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-23T10:23:22Z
user: login: rajat-ht
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-23T10:23:29Z
user: login: sidharthv96
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-05-23T11:09:17Z
user: login: rajat-ht
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-23T11:24:44Z

Review comments:
diff_hunk: @@ -0,0 +1,176 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref } from 'vue';
+
+interface Feature {
+  iconUrl: string;
+  featureName: string;
+}
+
+const featureColumns = ref<Feature[][]>([
path: packages/mermaid/src/docs/.vitepress/components/EditorSelectionModal.vue
user: login: sidharthv96
body: This data does not change, so why do we need a ref?
created_at: 2025-05-21T17:44:22Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,176 @@
+<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(false);
+
+const handleMouseDown = (e: MouseEvent) => {
+  const target = e.target as HTMLElement;
+  if (
+    (target.tagName === 'A' && target.textContent?.trim() === 'Try Playground') ||
path: packages/mermaid/src/docs/.vitepress/components/EditorSelectionModal.vue
user: login: sidharthv96
body: The ticket mentions Try Playground will change to something else as well. 
created_at: 2025-05-21T17:45:22Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,176 @@
+<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(false);
+
+const handleMouseDown = (e: MouseEvent) => {
+  const target = e.target as HTMLElement;
+  if (
+    (target.tagName === 'A' && target.textContent?.trim() === 'Try Playground') ||
+    (target.tagName === 'SPAN' && target.textContent?.trim() === '💻 Open Editor')
+  ) {
+    isVisible.value = !isVisible.value;
path: packages/mermaid/src/docs/.vitepress/components/EditorSelectionModal.vue
user: login: sidharthv96
body: Don't we need e.preventDefault() or stopPropogation ?
created_at: 2025-05-21T17:46:06Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,176 @@
+<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(false);
+
+const handleMouseDown = (e: MouseEvent) => {
+  const target = e.target as HTMLElement;
+  if (
+    (target.tagName === 'A' && target.textContent?.trim() === 'Try Playground') ||
+    (target.tagName === 'SPAN' && target.textContent?.trim() === '💻 Open Editor')
+  ) {
+    isVisible.value = !isVisible.value;
+  }
+};
+
+onMounted(() => {
+  document.addEventListener('click', handleMouseDown);
+});
+
+onUnmounted(() => {
+  document.removeEventListener('click', 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">
path: packages/mermaid/src/docs/.vitepress/components/EditorSelectionModal.vue
user: login: sidharthv96
body: Why do we need this v-if?
created_at: 2025-05-21T17:46:30Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,176 @@
+<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(false);
+
+const handleMouseDown = (e: MouseEvent) => {
+  const target = e.target as HTMLElement;
+  if (
+    (target.tagName === 'A' && target.textContent?.trim() === 'Try Playground') ||
+    (target.tagName === 'SPAN' && target.textContent?.trim() === '💻 Open Editor')
+  ) {
+    isVisible.value = !isVisible.value;
+  }
+};
+
+onMounted(() => {
+  document.addEventListener('click', handleMouseDown);
+});
+
+onUnmounted(() => {
+  document.removeEventListener('click', 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]
+            }}
path: packages/mermaid/src/docs/.vitepress/components/EditorSelectionModal.vue
user: login: sidharthv96
body: Please move all the data into the script
created_at: 2025-05-21T17:47:17Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,176 @@
+<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(false);
+
+const handleMouseDown = (e: MouseEvent) => {
+  const target = e.target as HTMLElement;
+  if (
+    (target.tagName === 'A' && target.textContent?.trim() === 'Try Playground') ||
+    (target.tagName === 'SPAN' && target.textContent?.trim() === '💻 Open Editor')
+  ) {
+    isVisible.value = !isVisible.value;
+  }
+};
+
+onMounted(() => {
+  document.addEventListener('click', handleMouseDown);
+});
+
+onUnmounted(() => {
+  document.removeEventListener('click', 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>
path: packages/mermaid/src/docs/.vitepress/components/EditorSelectionModal.vue
user: login: sidharthv96
body: Why are we mixing tailwind and css?
created_at: 2025-05-21T17:48:05Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,176 @@
+<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',
+    },
path: packages/mermaid/src/docs/.vitepress/components/EditorSelectionModal.vue
user: login: sidharthv96
body: The icons should be part of this repo, not directly linked to an external site
created_at: 2025-05-21T17:49:22Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,176 @@
+<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(false);
+
+const handleMouseDown = (e: MouseEvent) => {
+  const target = e.target as HTMLElement;
+  if (
+    (target.tagName === 'A' && target.textContent?.trim() === 'Try Playground') ||
+    (target.tagName === 'SPAN' && target.textContent?.trim() === '💻 Open Editor')
+  ) {
+    isVisible.value = !isVisible.value;
+  }
+};
+
+onMounted(() => {
+  document.addEventListener('click', handleMouseDown);
+});
+
+onUnmounted(() => {
+  document.removeEventListener('click', 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',
path: packages/mermaid/src/docs/.vitepress/components/EditorSelectionModal.vue
user: login: sidharthv96
body: Live editor uses the URL to store diagram, we don't want it to be polluted with tracking data. 

```suggestion
              'https://mermaid.live/edit',
```
created_at: 2025-05-21T17:50:59Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,176 @@
+<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(false);
+
+const handleMouseDown = (e: MouseEvent) => {
+  const target = e.target as HTMLElement;
+  if (
+    (target.tagName === 'A' && target.textContent?.trim() === 'Try Playground') ||
+    (target.tagName === 'SPAN' && target.textContent?.trim() === '💻 Open Editor')
+  ) {
+    isVisible.value = !isVisible.value;
+  }
+};
+
+onMounted(() => {
+  document.addEventListener('click', handleMouseDown);
+});
+
+onUnmounted(() => {
+  document.removeEventListener('click', 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" />
path: packages/mermaid/src/docs/.vitepress/components/EditorSelectionModal.vue
user: login: sidharthv96
body: ```suggestion
            <img :src="iconUrl" :alt="featureName" class="mr-2 inline-block size-5" />
```
created_at: 2025-05-21T17:51:40Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,176 @@
+<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(false);
+
+const handleMouseDown = (e: MouseEvent) => {
+  const target = e.target as HTMLElement;
+  if (
+    (target.tagName === 'A' && target.textContent?.trim() === 'Try Playground') ||
+    (target.tagName === 'SPAN' && target.textContent?.trim() === '💻 Open Editor')
+  ) {
+    isVisible.value = !isVisible.value;
+  }
+};
+
+onMounted(() => {
+  document.addEventListener('click', handleMouseDown);
+});
+
+onUnmounted(() => {
+  document.removeEventListener('click', 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>
path: packages/mermaid/src/docs/.vitepress/components/EditorSelectionModal.vue
user: login: sidharthv96
body: Avoid using mr-2, mb-4, etc. Use flex and gaps as necessary. 

```suggestion
          <li
            v-for="{ iconUrl, featureName } in column"
            :key="featureName"
            class="flex gap-2 items-center"
          >
            <img :src="iconUrl" :alt="featureName" class="inline-block h-5 w-5" />
            <span>{{ featureName }}</span>
          </li>
```
created_at: 2025-05-21T17:52:22Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,176 @@
+<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(false);
+
+const handleMouseDown = (e: MouseEvent) => {
+  const target = e.target as HTMLElement;
+  if (
+    (target.tagName === 'A' && target.textContent?.trim() === 'Try Playground') ||
+    (target.tagName === 'SPAN' && target.textContent?.trim() === '💻 Open Editor')
+  ) {
+    isVisible.value = !isVisible.value;
+  }
+};
+
+onMounted(() => {
+  document.addEventListener('click', handleMouseDown);
+});
+
+onUnmounted(() => {
+  document.removeEventListener('click', 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>
path: packages/mermaid/src/docs/.vitepress/components/EditorSelectionModal.vue
user: login: rajat-ht
body: I am not sure why but tailwind was not getting applied to the border.
created_at: 2025-05-23T10:06:22Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,176 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref } from 'vue';
+
+interface Feature {
+  iconUrl: string;
+  featureName: string;
+}
+
+const featureColumns = ref<Feature[][]>([
path: packages/mermaid/src/docs/.vitepress/components/EditorSelectionModal.vue
user: login: rajat-ht
body: Updated in https://github.com/mermaid-js/mermaid/pull/6609/commits/3c03f289b48b251c72ca333a6393322a9e568672
created_at: 2025-05-23T10:21:42Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,176 @@
+<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(false);
+
+const handleMouseDown = (e: MouseEvent) => {
+  const target = e.target as HTMLElement;
+  if (
+    (target.tagName === 'A' && target.textContent?.trim() === 'Try Playground') ||
path: packages/mermaid/src/docs/.vitepress/components/EditorSelectionModal.vue
user: login: rajat-ht
body: Updated in https://github.com/mermaid-js/mermaid/pull/6609/commits/3c03f289b48b251c72ca333a6393322a9e568672
created_at: 2025-05-23T10:21:50Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,176 @@
+<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(false);
+
+const handleMouseDown = (e: MouseEvent) => {
+  const target = e.target as HTMLElement;
+  if (
+    (target.tagName === 'A' && target.textContent?.trim() === 'Try Playground') ||
+    (target.tagName === 'SPAN' && target.textContent?.trim() === '💻 Open Editor')
+  ) {
+    isVisible.value = !isVisible.value;
path: packages/mermaid/src/docs/.vitepress/components/EditorSelectionModal.vue
user: login: rajat-ht
body: Updated in https://github.com/mermaid-js/mermaid/pull/6609/commits/3c03f289b48b251c72ca333a6393322a9e568672
created_at: 2025-05-23T10:21:58Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,176 @@
+<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(false);
+
+const handleMouseDown = (e: MouseEvent) => {
+  const target = e.target as HTMLElement;
+  if (
+    (target.tagName === 'A' && target.textContent?.trim() === 'Try Playground') ||
+    (target.tagName === 'SPAN' && target.textContent?.trim() === '💻 Open Editor')
+  ) {
+    isVisible.value = !isVisible.value;
+  }
+};
+
+onMounted(() => {
+  document.addEventListener('click', handleMouseDown);
+});
+
+onUnmounted(() => {
+  document.removeEventListener('click', 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">
path: packages/mermaid/src/docs/.vitepress/components/EditorSelectionModal.vue
user: login: rajat-ht
body: Updated in https://github.com/mermaid-js/mermaid/pull/6609/commits/3c03f289b48b251c72ca333a6393322a9e568672
created_at: 2025-05-23T10:22:04Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,176 @@
+<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(false);
+
+const handleMouseDown = (e: MouseEvent) => {
+  const target = e.target as HTMLElement;
+  if (
+    (target.tagName === 'A' && target.textContent?.trim() === 'Try Playground') ||
+    (target.tagName === 'SPAN' && target.textContent?.trim() === '💻 Open Editor')
+  ) {
+    isVisible.value = !isVisible.value;
+  }
+};
+
+onMounted(() => {
+  document.addEventListener('click', handleMouseDown);
+});
+
+onUnmounted(() => {
+  document.removeEventListener('click', 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]
+            }}
path: packages/mermaid/src/docs/.vitepress/components/EditorSelectionModal.vue
user: login: rajat-ht
body: Updated in https://github.com/mermaid-js/mermaid/pull/6609/commits/3c03f289b48b251c72ca333a6393322a9e568672
created_at: 2025-05-23T10:22:11Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,176 @@
+<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',
+    },
path: packages/mermaid/src/docs/.vitepress/components/EditorSelectionModal.vue
user: login: rajat-ht
body: Updated in https://github.com/mermaid-js/mermaid/pull/6609/commits/3c03f289b48b251c72ca333a6393322a9e568672
created_at: 2025-05-23T10:22:27Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,176 @@
+<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(false);
+
+const handleMouseDown = (e: MouseEvent) => {
+  const target = e.target as HTMLElement;
+  if (
+    (target.tagName === 'A' && target.textContent?.trim() === 'Try Playground') ||
+    (target.tagName === 'SPAN' && target.textContent?.trim() === '💻 Open Editor')
+  ) {
+    isVisible.value = !isVisible.value;
+  }
+};
+
+onMounted(() => {
+  document.addEventListener('click', handleMouseDown);
+});
+
+onUnmounted(() => {
+  document.removeEventListener('click', 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',
path: packages/mermaid/src/docs/.vitepress/components/EditorSelectionModal.vue
user: login: rajat-ht
body: Updated in https://github.com/mermaid-js/mermaid/pull/6609/commits/3c03f289b48b251c72ca333a6393322a9e568672
created_at: 2025-05-23T10:22:44Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,176 @@
+<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(false);
+
+const handleMouseDown = (e: MouseEvent) => {
+  const target = e.target as HTMLElement;
+  if (
+    (target.tagName === 'A' && target.textContent?.trim() === 'Try Playground') ||
+    (target.tagName === 'SPAN' && target.textContent?.trim() === '💻 Open Editor')
+  ) {
+    isVisible.value = !isVisible.value;
+  }
+};
+
+onMounted(() => {
+  document.addEventListener('click', handleMouseDown);
+});
+
+onUnmounted(() => {
+  document.removeEventListener('click', 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" />
path: packages/mermaid/src/docs/.vitepress/components/EditorSelectionModal.vue
user: login: rajat-ht
body: Updated in https://github.com/mermaid-js/mermaid/pull/6609/commits/3c03f289b48b251c72ca333a6393322a9e568672
created_at: 2025-05-23T10:23:21Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,176 @@
+<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(false);
+
+const handleMouseDown = (e: MouseEvent) => {
+  const target = e.target as HTMLElement;
+  if (
+    (target.tagName === 'A' && target.textContent?.trim() === 'Try Playground') ||
+    (target.tagName === 'SPAN' && target.textContent?.trim() === '💻 Open Editor')
+  ) {
+    isVisible.value = !isVisible.value;
+  }
+};
+
+onMounted(() => {
+  document.addEventListener('click', handleMouseDown);
+});
+
+onUnmounted(() => {
+  document.removeEventListener('click', 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>
path: packages/mermaid/src/docs/.vitepress/components/EditorSelectionModal.vue
user: login: rajat-ht
body: Updated in https://github.com/mermaid-js/mermaid/pull/6609/commits/3c03f289b48b251c72ca333a6393322a9e568672
created_at: 2025-05-23T10:23:29Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,131 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref } from 'vue';
+
+interface Feature {
+  iconUrl: string;
+  featureName: string;
+}
+
+interface EditorColumn {
+  title: string;
+  description: string;
+  redirectUrl: string;
+  features: Feature[];
+}
+
+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);
+
+const handleMouseDown = (e: MouseEvent) => {
+  const target = e.target as HTMLElement;
+  if (
+    (target.tagName === 'A' && target.textContent?.trim() === 'Try Editor') ||
+    (target.tagName === 'SPAN' && target.textContent?.trim() === '💻 Open Editor')
+  ) {
+    e.preventDefault();
+    isVisible.value = !isVisible.value;
+  }
+};
+
+onMounted(() => {
+  document.addEventListener('click', handleMouseDown);
+});
+
+onUnmounted(() => {
+  document.removeEventListener('click', 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 class="flex flex-row relative top-[8%] gap-4 p-4">
+      <div
+        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'"
path: packages/mermaid/src/docs/.vitepress/components/EditorSelectionModal.vue
user: login: sidharthv96
body: Instead of using index here, use a boolean flag in the column object, like `highlighted: true`.
Remove all the use of index. 
created_at: 2025-05-23T11:09:17Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,131 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref } from 'vue';
+
+interface Feature {
+  iconUrl: string;
+  featureName: string;
+}
+
+interface EditorColumn {
+  title: string;
+  description: string;
+  redirectUrl: string;
+  features: Feature[];
+}
+
+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);
+
+const handleMouseDown = (e: MouseEvent) => {
+  const target = e.target as HTMLElement;
+  if (
+    (target.tagName === 'A' && target.textContent?.trim() === 'Try Editor') ||
+    (target.tagName === 'SPAN' && target.textContent?.trim() === '💻 Open Editor')
+  ) {
+    e.preventDefault();
+    isVisible.value = !isVisible.value;
+  }
+};
+
+onMounted(() => {
+  document.addEventListener('click', handleMouseDown);
+});
+
+onUnmounted(() => {
+  document.removeEventListener('click', 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 class="flex flex-row relative top-[8%] gap-4 p-4">
+      <div
+        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'"
path: packages/mermaid/src/docs/.vitepress/components/EditorSelectionModal.vue
user: login: rajat-ht
body: Updated in https://github.com/mermaid-js/mermaid/pull/6609/commits/5fe0f53179f084111d35f923c0ed6b72c311c3ea
created_at: 2025-05-23T11:24:44Z
author_association: CONTRIBUTOR

PR comments:
user: login: changeset-bot[bot]
created_at: 2025-05-21T11:52:38Z
body: ###  ⚠️  No Changeset found

Latest commit: ef449a601b5bc5bcdffd061b54c5d5f851e8bd2c

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. **If these changes should result in a version bump, you need to add a changeset.**

<details><summary>This PR includes no changesets</summary>

  When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

</details>

[Click here to learn what changesets are, and how to add one](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md).

[Click here if you're a maintainer who wants to add a changeset to this PR](https://github.com/mermaid-js/mermaid/new/rajat-ht/feat-add-editor-popup-modal?filename=.changeset/twenty-hairs-grin.md&value=---%0A%22mermaid%22%3A%20patch%0A%22%40mermaid-js%2Fdocs%22%3A%20patch%0A---%0A%0AFeat%3A%20Add%20editor%20popup%20modal%0A)


author_association: NONE
user: login: codecov[bot]
created_at: 2025-05-21T11:55:24Z
body: ## [Codecov](https://app.codecov.io/gh/mermaid-js/mermaid/pull/6609?dropdown=coverage&src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=mermaid-js) Report
Attention: Patch coverage is `0%` with `143 lines` in your changes missing coverage. Please review.
> Project coverage is 3.84%. Comparing base [(`f23a26e`)](https://app.codecov.io/gh/mermaid-js/mermaid/commit/f23a26e528ac2196c09a3cfa5bdd0a0de1f6f388?dropdown=coverage&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=mermaid-js) to head [(`ef449a6`)](https://app.codecov.io/gh/mermaid-js/mermaid/commit/ef449a601b5bc5bcdffd061b54c5d5f851e8bd2c?dropdown=coverage&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=mermaid-js).
> Report is 17 commits behind head on master.

| [Files with missing lines](https://app.codecov.io/gh/mermaid-js/mermaid/pull/6609?dropdown=coverage&src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=mermaid-js) | Patch % | Lines |
|---|---|---|
| [...ocs/.vitepress/components/EditorSelectionModal.vue](https://app.codecov.io/gh/mermaid-js/mermaid/pull/6609?src=pr&el=tree&filepath=packages%2Fmermaid%2Fsrc%2Fdocs%2F.vitepress%2Fcomponents%2FEditorSelectionModal.vue&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=mermaid-js#diff-cGFja2FnZXMvbWVybWFpZC9zcmMvZG9jcy8udml0ZXByZXNzL2NvbXBvbmVudHMvRWRpdG9yU2VsZWN0aW9uTW9kYWwudnVl) | 0.00% | [138 Missing :warning: ](https://app.codecov.io/gh/mermaid-js/mermaid/pull/6609?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=mermaid-js) |
| [...ackages/mermaid/src/docs/.vitepress/theme/index.ts](https://app.codecov.io/gh/mermaid-js/mermaid/pull/6609?src=pr&el=tree&filepath=packages%2Fmermaid%2Fsrc%2Fdocs%2F.vitepress%2Ftheme%2Findex.ts&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=mermaid-js#diff-cGFja2FnZXMvbWVybWFpZC9zcmMvZG9jcy8udml0ZXByZXNzL3RoZW1lL2luZGV4LnRz) | 0.00% | [5 Missing :warning: ](https://app.codecov.io/gh/mermaid-js/mermaid/pull/6609?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=mermaid-js) |

<details><summary>Additional details and impacted files</summary>


[![Impacted file tree graph](https://app.codecov.io/gh/mermaid-js/mermaid/pull/6609/graphs/tree.svg?width=650&height=150&src=pr&token=BaET4V1BdM&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=mermaid-js)](https://app.codecov.io/gh/mermaid-js/mermaid/pull/6609?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=mermaid-js)

```diff
@@            Coverage Diff            @@
##           master   #6609      +/-   ##
=========================================
- Coverage    3.84%   3.84%   -0.01%     
=========================================
  Files         413     414       +1     
  Lines       43399   43407       +8     
  Branches      666     666              
=========================================
  Hits         1670    1670              
- Misses      41729   41737       +8     
```

| [Flag](https://app.codecov.io/gh/mermaid-js/mermaid/pull/6609/flags?src=pr&el=flags&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=mermaid-js) | Coverage Δ | |
|---|---|---|
| [unit](https://app.codecov.io/gh/mermaid-js/mermaid/pull/6609/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=mermaid-js) | `3.84% <0.00%> (-0.01%)` | :arrow_down: |

Flags with carried forward coverage won't be shown. [Click here](https://docs.codecov.io/docs/carryforward-flags?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=mermaid-js#carryforward-flags-in-the-pull-request-comment) to find out more.

| [Files with missing lines](https://app.codecov.io/gh/mermaid-js/mermaid/pull/6609?dropdown=coverage&src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=mermaid-js) | Coverage Δ | |
|---|---|---|
| [...ackages/mermaid/src/docs/.vitepress/theme/index.ts](https://app.codecov.io/gh/mermaid-js/mermaid/pull/6609?src=pr&el=tree&filepath=packages%2Fmermaid%2Fsrc%2Fdocs%2F.vitepress%2Ftheme%2Findex.ts&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=mermaid-js#diff-cGFja2FnZXMvbWVybWFpZC9zcmMvZG9jcy8udml0ZXByZXNzL3RoZW1lL2luZGV4LnRz) | `2.38% <0.00%> (ø)` | |
| [...ocs/.vitepress/components/EditorSelectionModal.vue](https://app.codecov.io/gh/mermaid-js/mermaid/pull/6609?src=pr&el=tree&filepath=packages%2Fmermaid%2Fsrc%2Fdocs%2F.vitepress%2Fcomponents%2FEditorSelectionModal.vue&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=mermaid-js#diff-cGFja2FnZXMvbWVybWFpZC9zcmMvZG9jcy8udml0ZXByZXNzL2NvbXBvbmVudHMvRWRpdG9yU2VsZWN0aW9uTW9kYWwudnVl) | `0.00% <0.00%> (ø)` | |

... and [1 file with indirect coverage changes](https://app.codecov.io/gh/mermaid-js/mermaid/pull/6609/indirect-changes?src=pr&el=tree-more&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=mermaid-js)

</details>
<details><summary> :rocket: New features to boost your workflow: </summary>

- :snowflake: [Test Analytics](https://docs.codecov.com/docs/test-analytics): Detect flaky tests, report on failures, and find test suite problems.
- :package: [JS Bundle Analysis](https://docs.codecov.com/docs/javascript-bundle-analysis): Save yourself from yourself by tracking and limiting bundle sizes in JS merges.
</details>
author_association: NONE
user: login: argos-ci[bot]
created_at: 2025-05-21T12:00:25Z
body: **The latest updates on your projects.** Learn more about [Argos notifications ↗︎](https://argos-ci.com/docs/notifications)

| Build | Status | Details | Updated (UTC) |
| :---- | :----- | :------ | :------------ |
| **default** ([Inspect](https://app.argos-ci.com/mermaid/mermaid/builds/4193)) | ✅ No changes detected | - | May 28, 2025, 4:37 PM |
author_association: NONE