diff --git a/packages/mermaid/src/docs/.vitepress/theme/index.ts b/packages/mermaid/src/docs/.vitepress/theme/index.ts
index 3ec200937..383291799 100644
--- a/packages/mermaid/src/docs/.vitepress/theme/index.ts
+++ b/packages/mermaid/src/docs/.vitepress/theme/index.ts
@@ -17,6 +17,81 @@ import Theme from 'vitepress/theme';
import { h } from 'vue';
import '../style/main.css';
+// Add tooltips to Mermaid Chart buttons
+const addMermaidChartTooltips = () => {
+ const tooltipStyle = document.createElement('style');
+ tooltipStyle.textContent = `
+ .mermaid-chart-tooltip {
+ position: absolute;
+ background: black;
+ color: white;
+ padding: 0.3rem 0.6rem;
+ border-radius: 0.5rem;
+ font-size: 1rem;
+ pointer-events: none;
+ z-index: 1000;
+ max-width: 20rem;
+ text-align: center;
+ opacity: 0;
+ transition: opacity 0.3s ease, transform 0.3s ease;
+ transform: translateY(-90%);
+ margin-top: -0.5rem;
+ display: flex;
+ align-items: center;
+ gap: 0.375rem;
+ }
+ .mermaid-chart-tooltip.visible {
+ opacity: 1;
+ transform: translateY(-100%);
+ }
+ .mermaid-chart-tooltip svg {
+ width: 1.25rem;
+ height: 1.25rem;
+ fill: currentColor;
+ }
+ `;
+ document.head.appendChild(tooltipStyle);
+
+ const tooltip = document.createElement('div');
+ tooltip.className = 'mermaid-chart-tooltip';
+ document.body.appendChild(tooltip);
+
+ let currentTarget: HTMLElement | null = null;
+
+ const showTooltip = (target: HTMLElement) => {
+ currentTarget = target;
+ const rect = target.getBoundingClientRect();
+ tooltip.innerHTML = `
+
+ Opens in MermaidChart.com
+ `;
+ tooltip.style.left = rect.left + rect.width / 2 - tooltip.offsetWidth / 2 + 'px';
+ tooltip.style.top = rect.top + 'px';
+ tooltip.classList.add('visible');
+ };
+
+ const hideTooltip = () => {
+ currentTarget = null;
+ tooltip.classList.remove('visible');
+ };
+
+ document.addEventListener('mouseover', (e) => {
+ const target = e.target as HTMLElement;
+ if (
+ target.matches('a[href*="mermaidchart.com"]') ||
+ target.matches('button[onclick*="mermaidchart.com"]')
+ ) {
+ showTooltip(target);
+ }
+ });
+
+ document.addEventListener('mouseout', (e) => {
+ if (!currentTarget?.contains(e.relatedTarget as HTMLElement)) {
+ hideTooltip();
+ }
+ });
+};
+
export default {
...DefaultTheme,
Layout() {
@@ -31,6 +106,14 @@ export default {
// register global components
app.component('Mermaid', Mermaid);
app.component('Contributors', Contributors);
+
+ // Add tooltips after app is mounted
+ app.mixin({
+ mounted() {
+ addMermaidChartTooltips();
+ },
+ });
+
router.onBeforeRouteChange = (to) => {
try {
const url = new URL(window.location.origin + to);
From ff786b4ef8267fd1dbb962328c2f4e6da9085b05 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod
Date: Wed, 9 Apr 2025 15:25:02 +0530
Subject: [PATCH 08/14] docs: Update homepage links
---
packages/mermaid/src/docs/index.md | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/packages/mermaid/src/docs/index.md b/packages/mermaid/src/docs/index.md
index 65ce6a2a9..c9b83bdf7 100644
--- a/packages/mermaid/src/docs/index.md
+++ b/packages/mermaid/src/docs/index.md
@@ -20,13 +20,13 @@ hero:
link: https://www.mermaidchart.com/play
- theme: alt
text: Get started
- link: https://docs.mermaidchart.com/mermaid/intro
+ link: /intro
features:
- icon:
src: /1-Callout-Easy.svg
title: Easy to use
- details: Easily create diagrams and charts with the Mermaid Editor.
+ details: Easily create diagrams and charts with the Mermaid Live Editor.
link: https://mermaid.live/
- icon:
src: /2-Callout-Integrations.svg
From 7ce9dbcece6e28445e297db80d948adb155ef960 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod
Date: Wed, 9 Apr 2025 15:27:53 +0530
Subject: [PATCH 09/14] docs: Add target to external link
---
packages/mermaid/src/docs/index.md | 2 ++
1 file changed, 2 insertions(+)
diff --git a/packages/mermaid/src/docs/index.md b/packages/mermaid/src/docs/index.md
index c9b83bdf7..6896296b1 100644
--- a/packages/mermaid/src/docs/index.md
+++ b/packages/mermaid/src/docs/index.md
@@ -18,6 +18,8 @@ hero:
- theme: brand
text: Try Playground
link: https://www.mermaidchart.com/play
+ target: _blank
+ rel: external
- theme: alt
text: Get started
link: /intro
From 5c865e7b712344964015cf3a26f93d29fba36da9 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod
Date: Wed, 9 Apr 2025 15:29:08 +0530
Subject: [PATCH 10/14] chore: Remove duplicate cspell
---
.cspell/mermaid-terms.txt | 1 -
1 file changed, 1 deletion(-)
diff --git a/.cspell/mermaid-terms.txt b/.cspell/mermaid-terms.txt
index 69d2c3eb9..b0cfa0a1d 100644
--- a/.cspell/mermaid-terms.txt
+++ b/.cspell/mermaid-terms.txt
@@ -17,7 +17,6 @@ marginx
marginy
Markdownish
mermaidchart
-mermaidchart
mermaidjs
mindmap
mindmaps
From 208d29e3d6a47f9634a25b295ad88aaf2281eda4 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod
Date: Wed, 9 Apr 2025 15:31:25 +0530
Subject: [PATCH 11/14] chore: Update live editor link
---
packages/mermaid/src/docs/.vitepress/config.ts | 4 +++-
1 file changed, 3 insertions(+), 1 deletion(-)
diff --git a/packages/mermaid/src/docs/.vitepress/config.ts b/packages/mermaid/src/docs/.vitepress/config.ts
index 934df743e..da770b71b 100644
--- a/packages/mermaid/src/docs/.vitepress/config.ts
+++ b/packages/mermaid/src/docs/.vitepress/config.ts
@@ -105,7 +105,9 @@ function nav() {
},
{
text: '💻 Open Editor',
- link: 'https://mermaid.live/',
+ link: 'https://mermaid.live/edit',
+ target: '_blank',
+ rel: 'external',
},
];
}
From 963b1e3ec58ff434258c09b8389ec7305703c6de Mon Sep 17 00:00:00 2001
From: Sidharth Vinod
Date: Wed, 9 Apr 2025 15:32:31 +0530
Subject: [PATCH 12/14] chore: Fix intro link
---
packages/mermaid/src/docs/index.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/mermaid/src/docs/index.md b/packages/mermaid/src/docs/index.md
index 6896296b1..8caa10153 100644
--- a/packages/mermaid/src/docs/index.md
+++ b/packages/mermaid/src/docs/index.md
@@ -22,7 +22,7 @@ hero:
rel: external
- theme: alt
text: Get started
- link: /intro
+ link: /intro/
features:
- icon:
From 9a90aca8e629df90997215997b813c75fff33c4c Mon Sep 17 00:00:00 2001
From: Sidharth Vinod
Date: Wed, 9 Apr 2025 15:35:58 +0530
Subject: [PATCH 13/14] chore: Add mermaid logo
---
packages/mermaid/src/docs/.vitepress/config.ts | 1 +
1 file changed, 1 insertion(+)
diff --git a/packages/mermaid/src/docs/.vitepress/config.ts b/packages/mermaid/src/docs/.vitepress/config.ts
index da770b71b..baa1f8003 100644
--- a/packages/mermaid/src/docs/.vitepress/config.ts
+++ b/packages/mermaid/src/docs/.vitepress/config.ts
@@ -38,6 +38,7 @@ export default defineConfig({
],
],
themeConfig: {
+ logo: '/favicon.svg',
nav: nav(),
editLink: {
pattern: ({ filePath, frontmatter }) => {
From a3cf9de01b507c6f1ec183d021706e0181395148 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod
Date: Wed, 9 Apr 2025 15:50:27 +0530
Subject: [PATCH 14/14] fix: Move Tooltip as vue component
---
.../src/docs/.vitepress/theme/Tooltip.vue | 88 ++++++++++++++++++
.../src/docs/.vitepress/theme/index.ts | 91 +------------------
2 files changed, 91 insertions(+), 88 deletions(-)
create mode 100644 packages/mermaid/src/docs/.vitepress/theme/Tooltip.vue
diff --git a/packages/mermaid/src/docs/.vitepress/theme/Tooltip.vue b/packages/mermaid/src/docs/.vitepress/theme/Tooltip.vue
new file mode 100644
index 000000000..75708ec2f
--- /dev/null
+++ b/packages/mermaid/src/docs/.vitepress/theme/Tooltip.vue
@@ -0,0 +1,88 @@
+
+
+
+ Opens in MermaidChart.com
+
+
+
+
+
+
diff --git a/packages/mermaid/src/docs/.vitepress/theme/index.ts b/packages/mermaid/src/docs/.vitepress/theme/index.ts
index 383291799..3996dde1a 100644
--- a/packages/mermaid/src/docs/.vitepress/theme/index.ts
+++ b/packages/mermaid/src/docs/.vitepress/theme/index.ts
@@ -1,13 +1,10 @@
/* eslint-disable no-console */
import DefaultTheme from 'vitepress/theme';
import './custom.css';
-// @ts-ignore Type not available
import Mermaid from './Mermaid.vue';
-// @ts-ignore Type not available
+import Tooltip from './Tooltip.vue';
import Contributors from '../components/Contributors.vue';
-// @ts-ignore Type not available
import HomePage from '../components/HomePage.vue';
-// @ts-ignore Type not available
import TopBar from '../components/TopBar.vue';
import { getRedirect } from './redirect.js';
// @ts-ignore Type not available
@@ -17,89 +14,14 @@ import Theme from 'vitepress/theme';
import { h } from 'vue';
import '../style/main.css';
-// Add tooltips to Mermaid Chart buttons
-const addMermaidChartTooltips = () => {
- const tooltipStyle = document.createElement('style');
- tooltipStyle.textContent = `
- .mermaid-chart-tooltip {
- position: absolute;
- background: black;
- color: white;
- padding: 0.3rem 0.6rem;
- border-radius: 0.5rem;
- font-size: 1rem;
- pointer-events: none;
- z-index: 1000;
- max-width: 20rem;
- text-align: center;
- opacity: 0;
- transition: opacity 0.3s ease, transform 0.3s ease;
- transform: translateY(-90%);
- margin-top: -0.5rem;
- display: flex;
- align-items: center;
- gap: 0.375rem;
- }
- .mermaid-chart-tooltip.visible {
- opacity: 1;
- transform: translateY(-100%);
- }
- .mermaid-chart-tooltip svg {
- width: 1.25rem;
- height: 1.25rem;
- fill: currentColor;
- }
- `;
- document.head.appendChild(tooltipStyle);
-
- const tooltip = document.createElement('div');
- tooltip.className = 'mermaid-chart-tooltip';
- document.body.appendChild(tooltip);
-
- let currentTarget: HTMLElement | null = null;
-
- const showTooltip = (target: HTMLElement) => {
- currentTarget = target;
- const rect = target.getBoundingClientRect();
- tooltip.innerHTML = `
-
- Opens in MermaidChart.com
- `;
- tooltip.style.left = rect.left + rect.width / 2 - tooltip.offsetWidth / 2 + 'px';
- tooltip.style.top = rect.top + 'px';
- tooltip.classList.add('visible');
- };
-
- const hideTooltip = () => {
- currentTarget = null;
- tooltip.classList.remove('visible');
- };
-
- document.addEventListener('mouseover', (e) => {
- const target = e.target as HTMLElement;
- if (
- target.matches('a[href*="mermaidchart.com"]') ||
- target.matches('button[onclick*="mermaidchart.com"]')
- ) {
- showTooltip(target);
- }
- });
-
- document.addEventListener('mouseout', (e) => {
- if (!currentTarget?.contains(e.relatedTarget as HTMLElement)) {
- hideTooltip();
- }
- });
-};
-
export default {
...DefaultTheme,
Layout() {
return h(Theme.Layout, null, {
- // Keeping this as comment as it took a lot of time to figure out how to add a component to the top bar.
- 'home-hero-before': () => h(TopBar),
'home-features-after': () => h(HomePage),
+ 'home-hero-before': () => h(TopBar),
'doc-before': () => h(TopBar),
+ 'layout-bottom': () => h(Tooltip),
});
},
enhanceApp({ app, router }: EnhanceAppContext) {
@@ -107,13 +29,6 @@ export default {
app.component('Mermaid', Mermaid);
app.component('Contributors', Contributors);
- // Add tooltips after app is mounted
- app.mixin({
- mounted() {
- addMermaidChartTooltips();
- },
- });
-
router.onBeforeRouteChange = (to) => {
try {
const url = new URL(window.location.origin + to);