Skip to content

Commit 19d85ef

Browse files
ashishjain0512ashishjain0512
authored
Merge branch 'master' into release/11.14.0
2 parents 5f6d5e6 + d2b5b2b commit 19d85ef

2 files changed

Lines changed: 118 additions & 77 deletions

File tree

‎packages/mermaid/src/docs/.vitepress/components/EditorSelectionModal.vue‎

Lines changed: 117 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -7,19 +7,7 @@ interface Feature {
77
featureName: string;
88
}
99
10-
interface EditorColumn {
11-
id: string;
12-
title: string;
13-
description: string;
14-
redBarText?: string;
15-
buttonUrl: string;
16-
buttonText: string;
17-
buttonClasses: string;
18-
highlighted?: boolean;
19-
features: Feature[];
20-
}
21-
22-
const mermaidChartFeatures: Feature[] = [
10+
const mermaidPlusFeatures: Feature[] = [
2311
{ iconUrl: '/icons/whiteboard.svg', featureName: 'Visual editor' },
2412
{ iconUrl: '/icons/ai-diagram.svg', featureName: '300 AI credits' },
2513
{ iconUrl: '/icons/folder.svg', featureName: 'Unlimited diagram storage' },
@@ -34,33 +22,33 @@ const openSourceFeatures: Feature[] = [
3422
{ iconUrl: '/icons/version-history.svg', featureName: 'Version history' },
3523
];
3624
37-
const editorColumns: EditorColumn[] = [
38-
{
39-
id: 'mermaid-plus',
40-
title: 'Mermaid Plus',
41-
description: 'Unlock AI, storage and collaboration',
42-
highlighted: true,
43-
redBarText: 'Recommended',
44-
buttonText: 'Start free trial',
45-
buttonUrl:
46-
'https://mermaid.ai/app/sign-up?utm_source=mermaid_js&utm_medium=2_editor_selection&utm_campaign=start_plus&redirect=%2Fapp%2Fuser%2Fbilling%2Fcheckout%3FisFromMermaid%3Dtrue%26tier%3Dplus',
47-
buttonClasses: 'text-white bg-[#E0095F] hover:bg-[#B0134A]',
48-
features: mermaidChartFeatures,
49-
},
50-
{
51-
id: 'open-source',
52-
title: 'Open Source',
53-
description: 'Code only, no login',
54-
buttonText: 'Start free',
55-
buttonUrl: 'https://mermaid.live/edit',
56-
buttonClasses:
57-
'bg-[#BEDDE3] hover:bg-[#5CA3B4] text-[#1E1A2E] hover:text-white hover:shadow-md',
58-
features: openSourceFeatures,
59-
},
60-
];
61-
6225
const isVisible = ref(false);
6326
27+
const close = () => {
28+
isVisible.value = false;
29+
};
30+
31+
const handleStartTrial = () => {
32+
void trackPlausibleEvent('editor-pick', { props: { choice: 'mermaid-plus' } });
33+
close();
34+
window.open(
35+
'https://mermaid.ai/app/sign-up?utm_source=mermaid_js&utm_medium=2_editor_selection&utm_campaign=start_plus&redirect=%2Fapp%2Fuser%2Fbilling%2Fcheckout%3FisFromMermaid%3Dtrue%26tier%3Dplus',
36+
'_blank'
37+
);
38+
};
39+
40+
const handleStartFree = () => {
41+
void trackPlausibleEvent('editor-pick', { props: { choice: 'open-source' } });
42+
close();
43+
window.open('https://mermaid.live/edit', '_blank');
44+
};
45+
46+
const handleContinueToNewHome = () => {
47+
void trackPlausibleEvent('editor-pick', { props: { choice: 'new-home' } });
48+
close();
49+
window.open('https://mermaid.ai/live/edit', '_blank');
50+
};
51+
6452
const handleMouseDown = (e: MouseEvent) => {
6553
const target = e.target as HTMLElement;
6654
if (
@@ -86,56 +74,109 @@ onUnmounted(() => {
8674
<div
8775
v-if="isVisible"
8876
class="fixed top-0 left-0 z-50 flex h-screen w-screen backdrop-blur-sm items-center justify-center bg-[#8585A4]/40"
89-
@click.self="isVisible = false"
77+
@click.self="close"
9078
>
9179
<div
92-
class="flex flex-col sm:flex-row rounded-3xl shadow relative gap-5 pt-10 sm:pt-20 pb-10 px-4 sm:px-10 bg-[#F1F8FA] overflow-y-auto max-h-full"
80+
class="flex max-w-2xl flex-col gap-6 bg-[#FFF1F2] p-6 rounded-3xl shadow overflow-y-auto max-h-full"
9381
>
94-
<div
95-
v-for="column in editorColumns"
96-
:key="column.title"
97-
class="sm:w-96 flex relative flex-col justify-start items-center p-6 sm:p-8 text-gray-800 shadow w-full"
98-
:class="
99-
column.highlighted ? 'bg-white rounded-b-3xl mt-10 sm:mt-0' : 'bg-[#DCEEF1] rounded-3xl'
100-
"
101-
>
82+
<!-- Header -->
83+
<div class="text-center">
84+
<h2 class="text-2xl font-semibold text-[#1E1A2E]">Choose your editor</h2>
85+
</div>
86+
87+
<div class="grid gap-4 sm:grid-cols-2">
88+
<!-- Mermaid Plus Card -->
10289
<div
103-
v-if="column.highlighted"
104-
class="absolute -top-10 w-full rounded-t-3xl bg-[#E0095F] py-2 flex justify-center"
90+
class="relative flex flex-col overflow-hidden rounded-xl border-2 border-[#E0095F] bg-white shadow"
10591
>
106-
<p class="text-lg font-semibold text-white">{{ column.redBarText }}</p>
92+
<div class="bg-[#E0095F] px-6 py-2 text-center text-sm font-semibold text-white">
93+
Recommended
94+
</div>
95+
96+
<div class="flex flex-col gap-4 p-6">
97+
<div>
98+
<h3 class="text-xl font-bold text-[#1E1A2E]">Mermaid Plus</h3>
99+
<p class="text-sm text-[#6B7280]">Unlock AI, storage and collaboration</p>
100+
</div>
101+
102+
<div class="flex flex-col gap-2">
103+
<div class="flex justify-center">
104+
<span
105+
class="rounded-full bg-[#FCE7F3] px-3 py-0.5 text-xs font-semibold text-[#BE185D]"
106+
>
107+
10% off with code JS26
108+
</span>
109+
</div>
110+
111+
<button
112+
class="inline-flex w-full items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50 bg-[#E0095F] text-white hover:bg-[#B0134A] shadow-sm h-9 px-4 py-2 cursor-pointer"
113+
@click="handleStartTrial"
114+
>
115+
Start free trial
116+
</button>
117+
</div>
118+
119+
<ul class="space-y-3 text-sm text-[#1E1A2E]">
120+
<li
121+
v-for="{ iconUrl, featureName } in mermaidPlusFeatures"
122+
:key="featureName"
123+
class="flex items-center gap-2"
124+
>
125+
<img :src="iconUrl" :alt="featureName" class="size-4 shrink-0 opacity-60" />
126+
{{ featureName }}
127+
</li>
128+
</ul>
129+
</div>
107130
</div>
108131

109-
<header class="mb-6 w-full text-start space-y-1">
110-
<p class="text-2xl font-medium text-[#1E1A2E]">{{ column.title }}</p>
111-
<p class="text-sm text-gray-600">{{ column.description }}</p>
112-
</header>
132+
<!-- Open Source Card -->
133+
<div class="flex flex-col gap-4 rounded-xl border border-[#E5E7EB] bg-white p-6 shadow">
134+
<div class="flex flex-col pt-9">
135+
<h3 class="text-xl font-bold text-[#1E1A2E]">Open Source</h3>
136+
<p class="text-sm text-[#6B7280]">Code only, no login, always free</p>
137+
</div>
113138

139+
<div class="flex flex-col gap-2">
140+
<p class="mt-2 text-sm text-[#6B7280]">Mermaid has a new home</p>
141+
<button
142+
class="inline-flex w-full items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50 border-solid border border-[#E0095F] bg-white text-[#1E1A2E] hover:bg-[#E0095F] hover:text-white shadow-sm h-9 px-4 py-2 cursor-pointer"
143+
@click="handleContinueToNewHome"
144+
>
145+
Continue to mermaid.ai/live
146+
<svg class="size-4" viewBox="0 0 24 24" fill="currentColor">
147+
<path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z" />
148+
</svg>
149+
</button>
150+
<button
151+
class="inline-flex w-full items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50 border-solid border border-[#E5E7EB] bg-white text-[#1E1A2E] hover:bg-[#E0095F] hover:text-white shadow-md h-9 px-4 py-2 cursor-pointer"
152+
@click="handleStartFree"
153+
>
154+
Stay on mermaid.live
155+
</button>
156+
</div>
157+
158+
<ul class="space-y-3 text-sm text-[#1E1A2E]">
159+
<li
160+
v-for="{ iconUrl, featureName } in openSourceFeatures"
161+
:key="featureName"
162+
class="flex items-center gap-2"
163+
>
164+
<img :src="iconUrl" :alt="featureName" class="size-4 shrink-0 opacity-60" />
165+
{{ featureName }}
166+
</li>
167+
</ul>
168+
</div>
169+
</div>
170+
171+
<!-- Privacy Policy Link -->
172+
<div class="text-center">
114173
<a
115-
:href="column.buttonUrl"
174+
href="https://mermaid.ai/privacy-policy"
116175
target="_blank"
117-
:class="[
118-
'mb-6 flex h-10 w-full items-center justify-center rounded-xl',
119-
column.buttonClasses,
120-
'plausible-event-name=editorPick',
121-
`plausible-event-type=${column.id}`,
122-
]"
176+
class="text-sm text-[#1E1A2E] underline hover:text-[#E0095F]"
123177
>
124-
{{ column.buttonText }}
178+
mermaid.ai Privacy Policy
125179
</a>
126-
127-
<div class="h-px w-full bg-[#bedde3] mb-6"></div>
128-
129-
<ul class="w-full space-y-2">
130-
<li
131-
v-for="{ iconUrl, featureName } in column.features"
132-
:key="featureName"
133-
class="flex items-center gap-2"
134-
>
135-
<img :src="iconUrl" :alt="featureName" class="inline-block size-5" />
136-
<span>{{ featureName }}</span>
137-
</li>
138-
</ul>
139180
</div>
140181
</div>
141182
</div>

‎packages/mermaid/src/docs/index.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ hero:
2121
rel: external
2222
- theme: alt
2323
text: Get started
24-
link: /intro/
24+
link: https://mermaid.ai/open-source/intro/
2525

2626
features:
2727
- icon:

0 commit comments

Comments
 (0)