From dc30a468cafb604cfe13799e6dc389b3049b4b15 Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Fri, 13 Feb 2026 16:46:49 +0100 Subject: [PATCH 01/20] Updating the Hero on the docs side --- .../mermaid/src/docs/.vitepress/config.ts | 6 +- .../docs/.vitepress/homepageHeroCopy.spec.ts | 68 +++++++++++++++++++ .../src/docs/.vitepress/homepageHeroCopy.ts | 32 +++++++++ .../src/docs/.vitepress/style/main.css | 6 ++ packages/mermaid/src/docs/index.md | 6 +- 5 files changed, 114 insertions(+), 4 deletions(-) create mode 100644 packages/mermaid/src/docs/.vitepress/homepageHeroCopy.spec.ts create mode 100644 packages/mermaid/src/docs/.vitepress/homepageHeroCopy.ts diff --git a/packages/mermaid/src/docs/.vitepress/config.ts b/packages/mermaid/src/docs/.vitepress/config.ts index d2e99c0c6ff..63c86bf56a2 100644 --- a/packages/mermaid/src/docs/.vitepress/config.ts +++ b/packages/mermaid/src/docs/.vitepress/config.ts @@ -3,6 +3,7 @@ import { defineConfig } from 'vitepress'; import packageJson from '../../../package.json' assert { type: 'json' }; import { addCanonicalUrls } from './canonical-urls.js'; import { getHeaderLogo, getHeaderLogoLink, withConditionalHomeNav } from './headerDomainRules.js'; +import { applyHomePageHeroCopy } from './homepageHeroCopy.js'; import MermaidExample from './mermaid-markdown-all.js'; const allMarkdownTransformers: MarkdownOptions = { @@ -27,7 +28,10 @@ export default defineConfig({ // ignore all localhost links /^https?:\/\/localhost/, ], - transformPageData: addCanonicalUrls, + transformPageData: (pageData) => { + addCanonicalUrls(pageData); + applyHomePageHeroCopy(pageData, docsHostname()); + }, head: [ ['link', { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }], ['meta', { property: 'og:title', content: 'Mermaid' }], diff --git a/packages/mermaid/src/docs/.vitepress/homepageHeroCopy.spec.ts b/packages/mermaid/src/docs/.vitepress/homepageHeroCopy.spec.ts new file mode 100644 index 00000000000..a68722c081c --- /dev/null +++ b/packages/mermaid/src/docs/.vitepress/homepageHeroCopy.spec.ts @@ -0,0 +1,68 @@ +import { describe, expect, it, vi } from 'vitest'; + +import { applyHomePageHeroCopy } from './homepageHeroCopy.ts'; + +describe('homepageHeroCopy', () => { + it('does nothing for non-homepage pages', () => { + const pageData: any = { + relativePath: 'intro/index.md', + frontmatter: { + hero: { + text: 'Diagramming and charting tool', + tagline: + 'JavaScript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.', + }, + }, + }; + + applyHomePageHeroCopy(pageData, 'mermaid.ai'); + expect(pageData.frontmatter.hero.text).toBe('Diagramming and charting tool'); + }); + + it('keeps hero copy unchanged on mermaid.js.org', () => { + const pageData: any = { + relativePath: 'index.md', + frontmatter: { + hero: { + text: 'Diagramming and charting tool', + tagline: + 'JavaScript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.', + }, + }, + }; + + const logSpy = vi.spyOn(console, 'info').mockImplementation(() => undefined); + + applyHomePageHeroCopy(pageData, 'mermaid.js.org'); + expect(pageData.frontmatter.hero.text).toBe('Diagramming and charting tool'); + expect(pageData.frontmatter.hero.tagline).toMatch(/^JavaScript based diagramming/); + expect(logSpy).not.toHaveBeenCalled(); + + logSpy.mockRestore(); + }); + + it('overrides hero copy on mermaid.ai', () => { + const pageData: any = { + relativePath: 'index.md', + frontmatter: { + hero: { + text: 'Diagramming and charting tool', + tagline: + 'JavaScript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.', + }, + }, + }; + + const logSpy = vi.spyOn(console, 'info').mockImplementation(() => undefined); + + applyHomePageHeroCopy(pageData, 'mermaid.ai'); + expect(pageData.frontmatter.hero.text).not.toBe('Diagramming and charting tool'); + expect(pageData.frontmatter.hero.tagline).not.toMatch(/^JavaScript based diagramming/); + expect(logSpy).toHaveBeenCalledWith( + expect.stringMatching(/^\[MMD_DOCS_HERO]/), + expect.anything() + ); + + logSpy.mockRestore(); + }); +}); diff --git a/packages/mermaid/src/docs/.vitepress/homepageHeroCopy.ts b/packages/mermaid/src/docs/.vitepress/homepageHeroCopy.ts new file mode 100644 index 00000000000..c7ea2dfb0f7 --- /dev/null +++ b/packages/mermaid/src/docs/.vitepress/homepageHeroCopy.ts @@ -0,0 +1,32 @@ +import { isMermaidJsOrgHostname } from './headerDomainRules.js'; + +const LOG_PREFIX = '[MMD_DOCS_HERO]'; + +/** + * Build-time override of the homepage hero copy based on DOCS_HOSTNAME. + * + * Note: index.md frontmatter is static, so this is applied via VitePress transformPageData. + */ +export function applyHomePageHeroCopy(pageData: any, hostname: string): void { + if (!pageData || pageData.relativePath !== 'index.md') { + return; + } + + if (isMermaidJsOrgHostname(hostname)) { + return; + } + + // Ensure objects exist + pageData.frontmatter = pageData.frontmatter ?? {}; + pageData.frontmatter.hero = pageData.frontmatter.hero ?? {}; + + const hero = pageData.frontmatter.hero as Record; + const before = { text: hero.text, tagline: hero.tagline }; + + // Placeholder copy for mermaid.ai builds (can be refined later) + hero.text = 'Starts Here'; + hero.tagline = + 'The home of Mermaid - the open-source diagramming library and, the collaborative platform built on top of it. Docs, live editor, integrations, and team features — all in one place.'; + + // console.info(LOG_PREFIX, { hostname, before, after: { text: hero.text, tagline: hero.tagline } }); +} diff --git a/packages/mermaid/src/docs/.vitepress/style/main.css b/packages/mermaid/src/docs/.vitepress/style/main.css index a6a31f3dab0..950371e2cf3 100644 --- a/packages/mermaid/src/docs/.vitepress/style/main.css +++ b/packages/mermaid/src/docs/.vitepress/style/main.css @@ -75,3 +75,9 @@ img.resizable-img { min-height: unset; } } + +a.link-home { + text-decoration: underline; + color: var(--vp-c-brand-1); + font-size: larger; +} diff --git a/packages/mermaid/src/docs/index.md b/packages/mermaid/src/docs/index.md index f160f7d8a6b..ed8e9b392fb 100644 --- a/packages/mermaid/src/docs/index.md +++ b/packages/mermaid/src/docs/index.md @@ -6,9 +6,9 @@ title: Mermaid titleTemplate: Diagramming and charting tool hero: - name: Mermaid - text: Diagramming and charting tool - tagline: JavaScript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically. + name: Mermaid + text: Has a New Home + tagline: The Mermaid ecosystem — including the open-source diagramming library and our commercial platform for teams — now lives at mermaid.ai. This legacy site will remain available. image: light: /hero-chart.svg From ea4640750ace537133ecd490c16b155915b7264a Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Fri, 13 Feb 2026 17:04:27 +0100 Subject: [PATCH 02/20] Update link with source --- packages/mermaid/src/docs/index.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/mermaid/src/docs/index.md b/packages/mermaid/src/docs/index.md index ed8e9b392fb..4c61a8b8ca1 100644 --- a/packages/mermaid/src/docs/index.md +++ b/packages/mermaid/src/docs/index.md @@ -4,11 +4,11 @@ sidebar: false title: Mermaid titleTemplate: Diagramming and charting tool - +https://mermaid.ai/?utm_medium=banner_ad&utm_campaign=variant_a&utm_source=mermaid_js hero: - name: Mermaid + name: Mermaid text: Has a New Home - tagline: The Mermaid ecosystem — including the open-source diagramming library and our commercial platform for teams — now lives at mermaid.ai. This legacy site will remain available. + tagline: The Mermaid ecosystem — including the open-source diagramming library and our commercial platform for teams — now lives at mermaid.ai. This legacy site will remain available. image: light: /hero-chart.svg From a4acd4dc0acc0ae0c24768486c9ecca983f1227a Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Mon, 16 Feb 2026 16:36:19 +0530 Subject: [PATCH 03/20] chore: Update banner with coupon --- .../src/docs/.vitepress/components/TopBar.vue | 17 +++++------------ 1 file changed, 5 insertions(+), 12 deletions(-) diff --git a/packages/mermaid/src/docs/.vitepress/components/TopBar.vue b/packages/mermaid/src/docs/.vitepress/components/TopBar.vue index 268813c264e..95c2095fdce 100644 --- a/packages/mermaid/src/docs/.vitepress/components/TopBar.vue +++ b/packages/mermaid/src/docs/.vitepress/components/TopBar.vue @@ -6,23 +6,15 @@ interface Taglines { label: string; campaign: string; button: string; + params?: Record; } const taglines: Taglines[] = [ - { - label: 'Use code NEWYEAR for 10% off Mermaid Advanced Editor (limited time)', - campaign: 'variant_a', - button: 'Try now', - }, { label: 'Limited time: 10% off Mermaid Advanced Editor with code NEWYEAR', - campaign: 'variant_b', + campaign: 'newyear', button: 'Claim Discount', - }, - { - label: 'Try Mermaid Advanced Editor — get 10% off with code NEWYEAR', - campaign: 'variant_c', - button: 'Get started', + params: { coupon: 'dmIuNbqx' }, }, ]; @@ -42,8 +34,9 @@ const currentUrl = computed(() => { utm_medium: 'banner_ad', utm_campaign: taglines[index.value].campaign, utm_source: isMermaidAi ? 'ai_open_source' : 'mermaid_js', + ...taglines[index.value].params, }); - return `https://mermaid.ai/?${params.toString()}`; + return `https://mermaid.ai/app/user/billing/checkout?${params.toString()}`; }); onMounted(() => { From 56ecd66ff72ddbc634b2e61e420b2582d2bdaa57 Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Mon, 16 Feb 2026 17:11:42 +0100 Subject: [PATCH 04/20] Fixed issue with hero text --- .../src/docs/.vitepress/homepageHeroCopy.spec.ts | 15 +-------------- .../src/docs/.vitepress/homepageHeroCopy.ts | 5 ++++- packages/mermaid/src/docs/index.md | 1 - 3 files changed, 5 insertions(+), 16 deletions(-) diff --git a/packages/mermaid/src/docs/.vitepress/homepageHeroCopy.spec.ts b/packages/mermaid/src/docs/.vitepress/homepageHeroCopy.spec.ts index a68722c081c..2bbf5381240 100644 --- a/packages/mermaid/src/docs/.vitepress/homepageHeroCopy.spec.ts +++ b/packages/mermaid/src/docs/.vitepress/homepageHeroCopy.spec.ts @@ -1,4 +1,4 @@ -import { describe, expect, it, vi } from 'vitest'; +import { describe, expect, it } from 'vitest'; import { applyHomePageHeroCopy } from './homepageHeroCopy.ts'; @@ -31,14 +31,9 @@ describe('homepageHeroCopy', () => { }, }; - const logSpy = vi.spyOn(console, 'info').mockImplementation(() => undefined); - applyHomePageHeroCopy(pageData, 'mermaid.js.org'); expect(pageData.frontmatter.hero.text).toBe('Diagramming and charting tool'); expect(pageData.frontmatter.hero.tagline).toMatch(/^JavaScript based diagramming/); - expect(logSpy).not.toHaveBeenCalled(); - - logSpy.mockRestore(); }); it('overrides hero copy on mermaid.ai', () => { @@ -53,16 +48,8 @@ describe('homepageHeroCopy', () => { }, }; - const logSpy = vi.spyOn(console, 'info').mockImplementation(() => undefined); - applyHomePageHeroCopy(pageData, 'mermaid.ai'); expect(pageData.frontmatter.hero.text).not.toBe('Diagramming and charting tool'); expect(pageData.frontmatter.hero.tagline).not.toMatch(/^JavaScript based diagramming/); - expect(logSpy).toHaveBeenCalledWith( - expect.stringMatching(/^\[MMD_DOCS_HERO]/), - expect.anything() - ); - - logSpy.mockRestore(); }); }); diff --git a/packages/mermaid/src/docs/.vitepress/homepageHeroCopy.ts b/packages/mermaid/src/docs/.vitepress/homepageHeroCopy.ts index c7ea2dfb0f7..6f8f79d2019 100644 --- a/packages/mermaid/src/docs/.vitepress/homepageHeroCopy.ts +++ b/packages/mermaid/src/docs/.vitepress/homepageHeroCopy.ts @@ -1,5 +1,7 @@ import { isMermaidJsOrgHostname } from './headerDomainRules.js'; +import { log } from '../../logger.js'; + const LOG_PREFIX = '[MMD_DOCS_HERO]'; /** @@ -24,9 +26,10 @@ export function applyHomePageHeroCopy(pageData: any, hostname: string): void { const before = { text: hero.text, tagline: hero.tagline }; // Placeholder copy for mermaid.ai builds (can be refined later) + hero.name = 'Mermaid'; hero.text = 'Starts Here'; hero.tagline = 'The home of Mermaid - the open-source diagramming library and, the collaborative platform built on top of it. Docs, live editor, integrations, and team features — all in one place.'; - // console.info(LOG_PREFIX, { hostname, before, after: { text: hero.text, tagline: hero.tagline } }); + log.info(LOG_PREFIX, { hostname, before, after: { text: hero.text, tagline: hero.tagline } }); } diff --git a/packages/mermaid/src/docs/index.md b/packages/mermaid/src/docs/index.md index 4c61a8b8ca1..c5991d6a7cf 100644 --- a/packages/mermaid/src/docs/index.md +++ b/packages/mermaid/src/docs/index.md @@ -4,7 +4,6 @@ sidebar: false title: Mermaid titleTemplate: Diagramming and charting tool -https://mermaid.ai/?utm_medium=banner_ad&utm_campaign=variant_a&utm_source=mermaid_js hero: name: Mermaid text: Has a New Home From 69fccd2d40e30e50fd12fefde9e4da26390b5d50 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Mon, 16 Feb 2026 16:14:45 +0000 Subject: [PATCH 05/20] Version Packages --- .changeset/shiny-coats-stay.md | 22 ---------------------- packages/mermaid/CHANGELOG.md | 7 +++++++ packages/mermaid/package.json | 2 +- packages/parser/CHANGELOG.md | 22 ++++++++++++++++++++++ packages/parser/package.json | 2 +- packages/tiny/CHANGELOG.md | 7 +++++++ packages/tiny/package.json | 2 +- 7 files changed, 39 insertions(+), 25 deletions(-) delete mode 100644 .changeset/shiny-coats-stay.md diff --git a/.changeset/shiny-coats-stay.md b/.changeset/shiny-coats-stay.md deleted file mode 100644 index 6bd8f91982e..00000000000 --- a/.changeset/shiny-coats-stay.md +++ /dev/null @@ -1,22 +0,0 @@ ---- -'@mermaid-js/parser': major ---- - -chore: upgrade to Langium v4 - -Upgrade `@mermaid-js/parser` to use Langium v4, -see https://github.com/eclipse-langium/langium/releases/tag/v4.0.0 -for more details. - -The major breaking changes that impact consumers of this package are: - -- Due to various type-related changes, `langium` now requires version `>= 5.8.0` - of TypeScript. -- The generated type names from `ast.ts` have been moved from `` to - `.$type` - ([langium#1942](https://github.com/eclipse-langium/langium/pull/1942)). - -This also removes a transitive dependency on lodash versions that are vulnerable -to CVE-2025-13465, although -[chevrotain doesn't use the affected functions](https://github.com/Chevrotain/chevrotain/blob/21f20cd9754f8d5e85243fd9286d1fff397363ab/packages/website/docs/changes/CHANGELOG.md?plain=1#L5-L8), -so this is only to silence security scanners. diff --git a/packages/mermaid/CHANGELOG.md b/packages/mermaid/CHANGELOG.md index 2febfed7259..3fcc81da02a 100644 --- a/packages/mermaid/CHANGELOG.md +++ b/packages/mermaid/CHANGELOG.md @@ -1,5 +1,12 @@ # mermaid +## 11.12.3 + +### Patch Changes + +- Updated dependencies [[`7243340`](https://github.com/mermaid-js/mermaid/commit/72433401a8c9d90d6753b7592d556122ecb953ca)]: + - @mermaid-js/parser@1.0.0 + ## 11.12.2 ### Patch Changes diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json index 992c59fa566..eca6e3d4714 100644 --- a/packages/mermaid/package.json +++ b/packages/mermaid/package.json @@ -1,6 +1,6 @@ { "name": "mermaid", - "version": "11.12.2", + "version": "11.12.3", "description": "Markdown-ish syntax for generating flowcharts, mindmaps, sequence diagrams, class diagrams, gantt charts, git graphs and more.", "type": "module", "module": "./dist/mermaid.core.mjs", diff --git a/packages/parser/CHANGELOG.md b/packages/parser/CHANGELOG.md index 4659e1dd34e..4820a129276 100644 --- a/packages/parser/CHANGELOG.md +++ b/packages/parser/CHANGELOG.md @@ -1,5 +1,27 @@ # @mermaid-js/parser +## 1.0.0 + +### Major Changes + +- [#7377](https://github.com/mermaid-js/mermaid/pull/7377) [`7243340`](https://github.com/mermaid-js/mermaid/commit/72433401a8c9d90d6753b7592d556122ecb953ca) Thanks [@aloisklink](https://github.com/aloisklink)! - chore: upgrade to Langium v4 + + Upgrade `@mermaid-js/parser` to use Langium v4, + see https://github.com/eclipse-langium/langium/releases/tag/v4.0.0 + for more details. + + The major breaking changes that impact consumers of this package are: + - Due to various type-related changes, `langium` now requires version `>= 5.8.0` + of TypeScript. + - The generated type names from `ast.ts` have been moved from `` to + `.$type` + ([langium#1942](https://github.com/eclipse-langium/langium/pull/1942)). + + This also removes a transitive dependency on lodash versions that are vulnerable + to CVE-2025-13465, although + [chevrotain doesn't use the affected functions](https://github.com/Chevrotain/chevrotain/blob/21f20cd9754f8d5e85243fd9286d1fff397363ab/packages/website/docs/changes/CHANGELOG.md?plain=1#L5-L8), + so this is only to silence security scanners. + ## 0.6.3 ### Patch Changes diff --git a/packages/parser/package.json b/packages/parser/package.json index 9d0a726b8ce..a1e63f2eae0 100644 --- a/packages/parser/package.json +++ b/packages/parser/package.json @@ -1,6 +1,6 @@ { "name": "@mermaid-js/parser", - "version": "0.6.3", + "version": "1.0.0", "description": "MermaidJS parser", "author": "Yokozuna59", "contributors": [ diff --git a/packages/tiny/CHANGELOG.md b/packages/tiny/CHANGELOG.md index 2febfed7259..3fcc81da02a 100644 --- a/packages/tiny/CHANGELOG.md +++ b/packages/tiny/CHANGELOG.md @@ -1,5 +1,12 @@ # mermaid +## 11.12.3 + +### Patch Changes + +- Updated dependencies [[`7243340`](https://github.com/mermaid-js/mermaid/commit/72433401a8c9d90d6753b7592d556122ecb953ca)]: + - @mermaid-js/parser@1.0.0 + ## 11.12.2 ### Patch Changes diff --git a/packages/tiny/package.json b/packages/tiny/package.json index 2a83e5fc393..7d16d2828f3 100644 --- a/packages/tiny/package.json +++ b/packages/tiny/package.json @@ -1,6 +1,6 @@ { "name": "@mermaid-js/tiny", - "version": "11.12.2", + "version": "11.12.3", "description": "Tiny version of mermaid", "type": "commonjs", "main": "./dist/mermaid.tiny.js", From 4c59f9e0e1f6f776fe9302c2e1bb0fb98f5c1bfa Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Thu, 26 Feb 2026 13:46:34 +0100 Subject: [PATCH 06/20] Updated Hero text --- .../src/docs/.vitepress/ossHeroClass.spec.ts | 124 ++++++++++++++++++ .../src/docs/.vitepress/ossHeroClass.ts | 46 +++++++ .../src/docs/.vitepress/style/main.css | 9 +- .../theme/OssHomeHeroNameClipApplier.ts | 35 +++++ .../src/docs/.vitepress/theme/index.ts | 2 + packages/mermaid/src/docs/index.md | 6 +- packages/mermaid/src/docs/vite.config.ts | 3 + 7 files changed, 220 insertions(+), 5 deletions(-) create mode 100644 packages/mermaid/src/docs/.vitepress/ossHeroClass.spec.ts create mode 100644 packages/mermaid/src/docs/.vitepress/ossHeroClass.ts create mode 100644 packages/mermaid/src/docs/.vitepress/theme/OssHomeHeroNameClipApplier.ts diff --git a/packages/mermaid/src/docs/.vitepress/ossHeroClass.spec.ts b/packages/mermaid/src/docs/.vitepress/ossHeroClass.spec.ts new file mode 100644 index 00000000000..d86c9752154 --- /dev/null +++ b/packages/mermaid/src/docs/.vitepress/ossHeroClass.spec.ts @@ -0,0 +1,124 @@ +import { describe, expect, it } from 'vitest'; +import { JSDOM } from 'jsdom'; + +import { applyOssHomeHeroNameClipClass, OSS_HOME_HERO_NAME_CLIP_CLASS } from './ossHeroClass.ts'; + +describe('ossHeroClass', () => { + it('adds oss-home-name-clip to the hero name clip span when DOCS_HOSTNAME is not mermaid.ai', () => { + const { window } = new JSDOM(` +
+
+

+ Mermaid.js now lives +

+
+
+ `); + + const added = applyOssHomeHeroNameClipClass({ + doc: window.document, + hostname: 'mermaid.js.org', + pathname: '/', + }); + + expect(added).toBe(1); + expect( + window.document.querySelector('.name.clip')?.classList.contains(OSS_HOME_HERO_NAME_CLIP_CLASS) + ).toBe(true); + }); + + it('also adds the class for other non-mermaid.ai DOCS_HOSTNAME values (e.g. localhost)', () => { + const { window } = new JSDOM(` +
+

X

+
+ `); + + const added = applyOssHomeHeroNameClipClass({ + doc: window.document, + hostname: 'localhost', + pathname: '/', + }); + + expect(added).toBe(1); + expect( + window.document.querySelector('.name.clip')?.classList.contains(OSS_HOME_HERO_NAME_CLIP_CLASS) + ).toBe(true); + }); + + it('does nothing when hostname is mermaid.ai', () => { + const { window } = new JSDOM(` +
+

X

+
+ `); + + const added = applyOssHomeHeroNameClipClass({ + doc: window.document, + hostname: 'mermaid.ai', + pathname: '/', + }); + + expect(added).toBe(0); + expect( + window.document.querySelector('.name.clip')?.classList.contains(OSS_HOME_HERO_NAME_CLIP_CLASS) + ).toBe(false); + }); + + it('does nothing when hostname is a mermaid.ai subdomain', () => { + const { window } = new JSDOM(` +
+

X

+
+ `); + + const added = applyOssHomeHeroNameClipClass({ + doc: window.document, + hostname: 'www.mermaid.ai', + pathname: '/', + }); + + expect(added).toBe(0); + expect( + window.document.querySelector('.name.clip')?.classList.contains(OSS_HOME_HERO_NAME_CLIP_CLASS) + ).toBe(false); + }); + + it('does nothing off the homepage path', () => { + const { window } = new JSDOM(` +
+

X

+
+ `); + + const added = applyOssHomeHeroNameClipClass({ + doc: window.document, + hostname: 'mermaid.js.org', + pathname: '/intro/', + }); + + expect(added).toBe(0); + }); + + it('is idempotent (does not report changes when class already exists)', () => { + const { window } = new JSDOM(` +
+

X

+
+ `); + + const first = applyOssHomeHeroNameClipClass({ + doc: window.document, + hostname: 'mermaid.js.org', + pathname: '/', + }); + const second = applyOssHomeHeroNameClipClass({ + doc: window.document, + hostname: 'mermaid.js.org', + pathname: '/', + }); + + expect(first).toBe(1); + expect(second).toBe(0); + }); +}); diff --git a/packages/mermaid/src/docs/.vitepress/ossHeroClass.ts b/packages/mermaid/src/docs/.vitepress/ossHeroClass.ts new file mode 100644 index 00000000000..e3a057232b4 --- /dev/null +++ b/packages/mermaid/src/docs/.vitepress/ossHeroClass.ts @@ -0,0 +1,46 @@ +export const OSS_HOME_HERO_NAME_CLIP_CLASS = 'oss-home-name-clip'; + +const HOME_PATHS = new Set(['', '/', '/index.html']); +const HERO_NAME_CLIP_SELECTOR = '.VPHomeHero .heading .name.clip'; + +function isMermaidAiHostname(hostname: string): boolean { + const hn = hostname.toLowerCase(); + return hn === 'mermaid.ai' || hn.endsWith('.mermaid.ai'); +} + +/** + * Adds an extra class to the VitePress homepage hero name clip span. + * + * This is intentionally implemented as a small DOM helper so it can be unit tested. + */ +export function applyOssHomeHeroNameClipClass({ + doc, + hostname, + pathname, + className = OSS_HOME_HERO_NAME_CLIP_CLASS, +}: { + doc: Document; + hostname: string; + pathname: string; + className?: string; +}): number { + // Enabled on all deployments except mermaid.ai (and subdomains). + if (isMermaidAiHostname(hostname)) { + return 0; + } + + if (!HOME_PATHS.has(pathname)) { + return 0; + } + + const els = doc.querySelectorAll(HERO_NAME_CLIP_SELECTOR); + let added = 0; + for (const el of els) { + if (!el.classList.contains(className)) { + el.classList.add(className); + added++; + } + } + + return added; +} diff --git a/packages/mermaid/src/docs/.vitepress/style/main.css b/packages/mermaid/src/docs/.vitepress/style/main.css index 950371e2cf3..a846127574d 100644 --- a/packages/mermaid/src/docs/.vitepress/style/main.css +++ b/packages/mermaid/src/docs/.vitepress/style/main.css @@ -76,8 +76,13 @@ img.resizable-img { } } -a.link-home { +a.home-link { text-decoration: underline; color: var(--vp-c-brand-1); - font-size: larger; +} + +.VPHomeHero .heading .name.clip.oss-home-name-clip { + --vp-home-hero-name-color: var(--vp-c-text-1); + --vp-home-hero-name-background: none; + color: var(--vp-c-text-1); } diff --git a/packages/mermaid/src/docs/.vitepress/theme/OssHomeHeroNameClipApplier.ts b/packages/mermaid/src/docs/.vitepress/theme/OssHomeHeroNameClipApplier.ts new file mode 100644 index 00000000000..3b18f8d8cf4 --- /dev/null +++ b/packages/mermaid/src/docs/.vitepress/theme/OssHomeHeroNameClipApplier.ts @@ -0,0 +1,35 @@ +import { defineComponent, nextTick, onMounted } from 'vue'; + +import { applyOssHomeHeroNameClipClass } from '../ossHeroClass.js'; + +/** + * Option B: a small Home-only component that applies `oss-home-name-clip` + * to VitePress' hero name wrapper after mount. + */ +export default defineComponent({ + name: 'OssHomeHeroNameClipApplier', + setup() { + const run = async () => { + // Client-only. + if (typeof window === 'undefined') { + return; + } + + // Ensure DOM is flushed. + await nextTick(); + + applyOssHomeHeroNameClipClass({ + doc: document, + hostname: window.location.hostname, + pathname: window.location.pathname, + }); + }; + + onMounted(() => { + void run(); + }); + + // No markup needed. + return () => null; + }, +}); diff --git a/packages/mermaid/src/docs/.vitepress/theme/index.ts b/packages/mermaid/src/docs/.vitepress/theme/index.ts index 6eaad7dd1c8..b8010d3a4b8 100644 --- a/packages/mermaid/src/docs/.vitepress/theme/index.ts +++ b/packages/mermaid/src/docs/.vitepress/theme/index.ts @@ -6,6 +6,7 @@ import HomePage from '../components/HomePage.vue'; import TopBar from '../components/TopBar.vue'; import './custom.css'; import Mermaid from './Mermaid.vue'; +import OssHomeHeroNameClipApplier from './OssHomeHeroNameClipApplier.js'; import { getRedirect } from './redirect.js'; import Tooltip from './Tooltip.vue'; // @ts-ignore Type not available @@ -21,6 +22,7 @@ export default { return h(Theme.Layout, null, { 'home-features-after': () => h(HomePage), 'home-hero-before': () => h(TopBar), + 'home-hero-after': () => h(OssHomeHeroNameClipApplier), 'doc-before': () => h(TopBar), 'layout-bottom': () => h(Tooltip), 'layout-top': () => h(EditorSelectionModal), diff --git a/packages/mermaid/src/docs/index.md b/packages/mermaid/src/docs/index.md index c5991d6a7cf..63f14d4b0ad 100644 --- a/packages/mermaid/src/docs/index.md +++ b/packages/mermaid/src/docs/index.md @@ -5,9 +5,9 @@ sidebar: false title: Mermaid titleTemplate: Diagramming and charting tool hero: - name: Mermaid - text: Has a New Home - tagline: The Mermaid ecosystem — including the open-source diagramming library and our commercial platform for teams — now lives at mermaid.ai. This legacy site will remain available. + name: Mermaid.js now lives + text: at mermaid.ai + tagline: One home for the open-source library and the platform built around it. More resources for the project, a clearer path for contributors, and a team committed to keeping Mermaid open, always. image: light: /hero-chart.svg diff --git a/packages/mermaid/src/docs/vite.config.ts b/packages/mermaid/src/docs/vite.config.ts index 9a1e0cc5956..6bbef539ca1 100644 --- a/packages/mermaid/src/docs/vite.config.ts +++ b/packages/mermaid/src/docs/vite.config.ts @@ -13,6 +13,9 @@ const virtualModuleId = 'virtual:mermaid-config'; const resolvedVirtualModuleId = '\0' + virtualModuleId; export default defineConfig({ + define: { + __DOCS_HOSTNAME__: JSON.stringify(process.env.DOCS_HOSTNAME ?? 'mermaid.js.org'), + }, build: { // Vite v7 changes the default target and drops old browser support target: 'modules', From 6087d997d45738a0e23b01416fcaaaf54f2d5191 Mon Sep 17 00:00:00 2001 From: Ashish Jain Date: Tue, 3 Mar 2026 10:06:02 +0100 Subject: [PATCH 07/20] fix: correct package name in changeset slow-lemons-know --- .changeset/slow-lemons-know.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/slow-lemons-know.md b/.changeset/slow-lemons-know.md index 49eb48543f9..0d9445babd3 100644 --- a/.changeset/slow-lemons-know.md +++ b/.changeset/slow-lemons-know.md @@ -1,5 +1,5 @@ --- -'@mermaid': patch +'mermaid': patch --- fix: Mindmap breaking in ELK layout From 0b933528b59649a8b62593b638ff1b7813456ce4 Mon Sep 17 00:00:00 2001 From: Ashish Jain Date: Tue, 3 Mar 2026 10:13:19 +0100 Subject: [PATCH 08/20] chore: replace MERMAID_RELEASE_VERSION placeholders with current version --- docs/config/directives.md | 2 +- docs/syntax/ishikawa.md | 2 +- docs/syntax/sequenceDiagram.md | 2 +- docs/syntax/venn.md | 2 +- packages/mermaid/src/docs/config/directives.md | 2 +- packages/mermaid/src/docs/syntax/ishikawa.md | 2 +- packages/mermaid/src/docs/syntax/sequenceDiagram.md | 2 +- packages/mermaid/src/docs/syntax/venn.md | 2 +- 8 files changed, 8 insertions(+), 8 deletions(-) diff --git a/docs/config/directives.md b/docs/config/directives.md index be77b3b0170..1b37a10c08f 100644 --- a/docs/config/directives.md +++ b/docs/config/directives.md @@ -253,7 +253,7 @@ The following code snippet changes flowchart config: Here we are overriding only the flowchart config, and not the general config, setting `htmlLabels` to `true` and `curve` to `linear`. > **Warning** -> **Deprecated:** `flowchart.htmlLabels` has been deprecated from (v\+). Use the global `htmlLabels` configuration instead. For example, instead of `"flowchart": { "htmlLabels": true }`, use `"htmlLabels": true` at the top level. +> **Deprecated:** `flowchart.htmlLabels` has been deprecated from (v11.12.3+). Use the global `htmlLabels` configuration instead. For example, instead of `"flowchart": { "htmlLabels": true }`, use `"htmlLabels": true` at the top level. ```mermaid-example %%{init: { "flowchart": { "htmlLabels": true, "curve": "linear" } } }%% diff --git a/docs/syntax/ishikawa.md b/docs/syntax/ishikawa.md index 778d73d3525..d5bbf576b6d 100644 --- a/docs/syntax/ishikawa.md +++ b/docs/syntax/ishikawa.md @@ -4,7 +4,7 @@ > > ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/ishikawa.md](../../packages/mermaid/src/docs/syntax/ishikawa.md). -# Ishikawa diagram (v\+) +# Ishikawa diagram (v11.12.3+) Ishikawa diagrams are used to represent causes of a specific event (or a problem). They are also known as fishbone diagrams, herringbone diagrams or cause-and-effect diagrams. diff --git a/docs/syntax/sequenceDiagram.md b/docs/syntax/sequenceDiagram.md index ef4637817a4..04f74a5e443 100644 --- a/docs/syntax/sequenceDiagram.md +++ b/docs/syntax/sequenceDiagram.md @@ -424,7 +424,7 @@ Lines can be solid or dotted, and can end with various types of arrowheads, cros | `-)` | Solid line with an open arrow at the end (async) | | `--)` | Dotted line with a open arrow at the end (async) | -**Half-Arrows (v\+)** +**Half-Arrows (v11.12.3+)** The following half-arrow types are supported for more expressive sequence diagrams. Both solid and dotted variants are available by increasing the number of dashes (`-` → `--`). diff --git a/docs/syntax/venn.md b/docs/syntax/venn.md index 219360b922f..309117b41a8 100644 --- a/docs/syntax/venn.md +++ b/docs/syntax/venn.md @@ -4,7 +4,7 @@ > > ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/venn.md](../../packages/mermaid/src/docs/syntax/venn.md). -# Venn diagrams (v\+) +# Venn diagrams (v\11.12.3+) Venn diagrams show relationships between sets using overlapping circles. diff --git a/packages/mermaid/src/docs/config/directives.md b/packages/mermaid/src/docs/config/directives.md index e1ed6850ed0..d71ecb9aeb2 100644 --- a/packages/mermaid/src/docs/config/directives.md +++ b/packages/mermaid/src/docs/config/directives.md @@ -202,7 +202,7 @@ The following code snippet changes flowchart config: Here we are overriding only the flowchart config, and not the general config, setting `htmlLabels` to `true` and `curve` to `linear`. ```warning -**Deprecated:** `flowchart.htmlLabels` has been deprecated from (v+). Use the global `htmlLabels` configuration instead. For example, instead of `"flowchart": { "htmlLabels": true }`, use `"htmlLabels": true` at the top level. +**Deprecated:** `flowchart.htmlLabels` has been deprecated from (v11.12.3+). Use the global `htmlLabels` configuration instead. For example, instead of `"flowchart": { "htmlLabels": true }`, use `"htmlLabels": true` at the top level. ``` ```mermaid-example diff --git a/packages/mermaid/src/docs/syntax/ishikawa.md b/packages/mermaid/src/docs/syntax/ishikawa.md index 0cd1eafc7a3..34353ab197f 100644 --- a/packages/mermaid/src/docs/syntax/ishikawa.md +++ b/packages/mermaid/src/docs/syntax/ishikawa.md @@ -1,4 +1,4 @@ -# Ishikawa diagram (v+) +# Ishikawa diagram (v11.12.3+) Ishikawa diagrams are used to represent causes of a specific event (or a problem). They are also known as fishbone diagrams, herringbone diagrams or cause-and-effect diagrams. diff --git a/packages/mermaid/src/docs/syntax/sequenceDiagram.md b/packages/mermaid/src/docs/syntax/sequenceDiagram.md index 52bb1c92bcc..a20cfafb62d 100644 --- a/packages/mermaid/src/docs/syntax/sequenceDiagram.md +++ b/packages/mermaid/src/docs/syntax/sequenceDiagram.md @@ -281,7 +281,7 @@ Lines can be solid or dotted, and can end with various types of arrowheads, cros | `-)` | Solid line with an open arrow at the end (async) | | `--)` | Dotted line with a open arrow at the end (async) | -**Half-Arrows (v+)** +**Half-Arrows (v11.12.3+)** The following half-arrow types are supported for more expressive sequence diagrams. Both solid and dotted variants are available by increasing the number of dashes (`-` → `--`). diff --git a/packages/mermaid/src/docs/syntax/venn.md b/packages/mermaid/src/docs/syntax/venn.md index fefe74bb4cf..4b4424e6798 100644 --- a/packages/mermaid/src/docs/syntax/venn.md +++ b/packages/mermaid/src/docs/syntax/venn.md @@ -1,4 +1,4 @@ -# Venn diagrams (v\+) +# Venn diagrams (v\11.12.3+) Venn diagrams show relationships between sets using overlapping circles. From 1036018e04af91349b09131822e552f624bc37b4 Mon Sep 17 00:00:00 2001 From: Ashish Jain Date: Tue, 3 Mar 2026 10:16:17 +0100 Subject: [PATCH 09/20] fix: update broken docsy link and exclude bot-blocked domains from link checker --- .github/lychee.toml | 17 ++++++++++++++++- docs/ecosystem/integrations-community.md | 2 +- .../docs/ecosystem/integrations-community.md | 2 +- 3 files changed, 18 insertions(+), 3 deletions(-) diff --git a/.github/lychee.toml b/.github/lychee.toml index 06b3aa707ec..c30bc7078d2 100644 --- a/.github/lychee.toml +++ b/.github/lychee.toml @@ -60,7 +60,22 @@ exclude = [ "https://foswiki.org", "https://www.gnu.org", "https://redmine.org", -"https://mermaid-preview.com" +"https://mermaid-preview.com", + +# npmjs.com 403 +"https://(www.)?npmjs.com", + +# dokuwiki.org 402 +"https://(www.)?dokuwiki.org", + +# medium.com 403 +"https://medium.com", + +# appsource.microsoft.com 403 +"https://appsource.microsoft.com", + +# mermaid.ai 403 +"https://mermaid.ai" ] # Exclude all private IPs from checking. diff --git a/docs/ecosystem/integrations-community.md b/docs/ecosystem/integrations-community.md index ce433dd8550..5e239f04c67 100644 --- a/docs/ecosystem/integrations-community.md +++ b/docs/ecosystem/integrations-community.md @@ -219,7 +219,7 @@ Communication tools and platforms - [Adding diagrams to your Astro site with MermaidJS and Playwright](https://agramont.net/blog/diagraming-with-mermaidjs-astro/) - [Codedoc](https://codedoc.cc/) - [codedoc-mermaid-plugin](https://www.npmjs.com/package/codedoc-mermaid-plugin) -- [Docsy Hugo Theme](https://www.docsy.dev/docs/adding-content/lookandfeel/#diagrams-with-mermaid) ✅ +- [Docsy Hugo Theme](https://www.docsy.dev/docs/content/diagrams-and-formulae/) ✅ - [Docusaurus](https://docusaurus.io/docs/markdown-features/diagrams) ✅ - [Gatsby](https://www.gatsbyjs.com/) - [gatsby-remark-mermaid](https://github.com/remcohaszing/gatsby-remark-mermaid) diff --git a/packages/mermaid/src/docs/ecosystem/integrations-community.md b/packages/mermaid/src/docs/ecosystem/integrations-community.md index c72f30af44d..558c964310c 100644 --- a/packages/mermaid/src/docs/ecosystem/integrations-community.md +++ b/packages/mermaid/src/docs/ecosystem/integrations-community.md @@ -214,7 +214,7 @@ Communication tools and platforms - [Adding diagrams to your Astro site with MermaidJS and Playwright](https://agramont.net/blog/diagraming-with-mermaidjs-astro/) - [Codedoc](https://codedoc.cc/) - [codedoc-mermaid-plugin](https://www.npmjs.com/package/codedoc-mermaid-plugin) -- [Docsy Hugo Theme](https://www.docsy.dev/docs/adding-content/lookandfeel/#diagrams-with-mermaid) ✅ +- [Docsy Hugo Theme](https://www.docsy.dev/docs/content/diagrams-and-formulae/) ✅ - [Docusaurus](https://docusaurus.io/docs/markdown-features/diagrams) ✅ - [Gatsby](https://www.gatsbyjs.com/) - [gatsby-remark-mermaid](https://github.com/remcohaszing/gatsby-remark-mermaid) From 6cac98b48b04c124afb19a76b1dc4c4372f8fcd4 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Fri, 6 Mar 2026 00:27:59 +0530 Subject: [PATCH 10/20] chore: Track editor picker selection --- .../components/EditorSelectionModal.vue | 39 +++++++++---------- 1 file changed, 18 insertions(+), 21 deletions(-) diff --git a/packages/mermaid/src/docs/.vitepress/components/EditorSelectionModal.vue b/packages/mermaid/src/docs/.vitepress/components/EditorSelectionModal.vue index 26fe156bec6..a3498e5de74 100644 --- a/packages/mermaid/src/docs/.vitepress/components/EditorSelectionModal.vue +++ b/packages/mermaid/src/docs/.vitepress/components/EditorSelectionModal.vue @@ -7,16 +7,15 @@ interface Feature { } interface EditorColumn { + id: string; title: string; description: string; redBarText?: string; - redirectUrl?: string; - buttonText?: string; + buttonUrl: string; + buttonText: string; + buttonClasses: string; highlighted?: boolean; - proTrialUrl?: string; - proTrialButtonText?: string; features: Feature[]; - isButtonMargined?: boolean; } const mermaidChartFeatures: Feature[] = [ @@ -36,20 +35,24 @@ const openSourceFeatures: Feature[] = [ const editorColumns: EditorColumn[] = [ { + id: 'mermaid-plus', title: 'Mermaid Plus', description: 'Unlock AI, storage and collaboration', highlighted: true, redBarText: 'Recommended', - proTrialButtonText: 'Start free trial', - proTrialUrl: + buttonText: 'Start free trial', + buttonUrl: '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', + buttonClasses: 'text-white bg-[#E0095F] hover:bg-[#B0134A]', features: mermaidChartFeatures, }, { + id: 'open-source', title: 'Open Source', description: 'Code only, no login', buttonText: 'Start free', - redirectUrl: 'https://mermaid.live/edit', + buttonUrl: 'https://mermaid.live/edit', + buttonClasses: 'bg-[#BEDDE3] hover:bg-[#5CA3B4] text-[#1E1A2E] hover:text-white hover:shadow-md', features: openSourceFeatures, }, ]; @@ -106,24 +109,18 @@ onUnmounted(() => { {{ column.buttonText }} - - {{ column.proTrialButtonText || 'Start Pro trial' }} - -
    From e914676d8195d59472bd46617444b6cf62f60852 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Fri, 6 Mar 2026 00:33:14 +0530 Subject: [PATCH 11/20] chore: Update release version in docs --- docs/syntax/sequenceDiagram.md | 2 +- packages/mermaid/src/docs/syntax/sequenceDiagram.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/syntax/sequenceDiagram.md b/docs/syntax/sequenceDiagram.md index 04f74a5e443..87992203fc0 100644 --- a/docs/syntax/sequenceDiagram.md +++ b/docs/syntax/sequenceDiagram.md @@ -449,7 +449,7 @@ The following half-arrow types are supported for more expressive sequence diagra | `\\-` | Solid line with reverse bottom stick half arrowhead | | `\\--` | Dotted line with reverse bottom stick half arrowhead | -## Central Connections (v\+) +## Central Connections (v11.12.3+) Mermaid sequence diagrams support **central lifeline connections** using a `()`. This is useful to represent messages or signals that connect to a central point, rather than from one actor directly to another. diff --git a/packages/mermaid/src/docs/syntax/sequenceDiagram.md b/packages/mermaid/src/docs/syntax/sequenceDiagram.md index a20cfafb62d..cc1d611e7e6 100644 --- a/packages/mermaid/src/docs/syntax/sequenceDiagram.md +++ b/packages/mermaid/src/docs/syntax/sequenceDiagram.md @@ -306,7 +306,7 @@ The following half-arrow types are supported for more expressive sequence diagra | `\\-` | Solid line with reverse bottom stick half arrowhead | | `\\--` | Dotted line with reverse bottom stick half arrowhead | -## Central Connections (v+) +## Central Connections (v11.12.3+) Mermaid sequence diagrams support **central lifeline connections** using a `()`. This is useful to represent messages or signals that connect to a central point, rather than from one actor directly to another. From fcdd95b61fa4e5c667fc6109b2489f5a5e7affc1 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Fri, 6 Mar 2026 01:19:23 +0530 Subject: [PATCH 12/20] chore: Update plausible --- .../components/EditorSelectionModal.vue | 9 +- .../mermaid/src/docs/.vitepress/config.ts | 9 - .../src/docs/.vitepress/theme/index.ts | 13 + packages/mermaid/src/docs/package.json | 1 + pnpm-lock.yaml | 280 +----------------- 5 files changed, 28 insertions(+), 284 deletions(-) diff --git a/packages/mermaid/src/docs/.vitepress/components/EditorSelectionModal.vue b/packages/mermaid/src/docs/.vitepress/components/EditorSelectionModal.vue index a3498e5de74..5eec91b92cc 100644 --- a/packages/mermaid/src/docs/.vitepress/components/EditorSelectionModal.vue +++ b/packages/mermaid/src/docs/.vitepress/components/EditorSelectionModal.vue @@ -1,5 +1,6 @@