-
+
{{ taglines[index].label }}
-
diff --git a/packages/mermaid/src/docs/.vitepress/config.ts b/packages/mermaid/src/docs/.vitepress/config.ts
index a07d1aea3..0fade86da 100644
--- a/packages/mermaid/src/docs/.vitepress/config.ts
+++ b/packages/mermaid/src/docs/.vitepress/config.ts
@@ -2,6 +2,7 @@ import type { MarkdownOptions } from 'vitepress';
import { defineConfig } from 'vitepress';
import packageJson from '../../../package.json' assert { type: 'json' };
import MermaidExample from './mermaid-markdown-all.js';
+import { addCanonicalUrls } from './canonical-urls.js';
const allMarkdownTransformers: MarkdownOptions = {
// the shiki theme to highlight code blocks
@@ -25,8 +26,23 @@ export default defineConfig({
// ignore all localhost links
/^https?:\/\/localhost/,
],
+ transformPageData: addCanonicalUrls,
head: [
['link', { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
+ ['meta', { property: 'og:title', content: 'Mermaid' }],
+ [
+ 'meta',
+ {
+ property: 'og:description',
+ content: 'Create diagrams and visualizations using text and code.',
+ },
+ ],
+ ['meta', { property: 'og:type', content: 'website' }],
+ ['meta', { property: 'og:url', content: 'https://mermaid.js.org' }],
+ [
+ 'meta',
+ { property: 'og:image', content: 'https://mermaid.js.org/mermaid-logo-horizontal.svg' },
+ ],
[
'script',
{
@@ -38,6 +54,7 @@ export default defineConfig({
],
],
themeConfig: {
+ logo: '/favicon.svg',
nav: nav(),
editLink: {
pattern: ({ filePath, frontmatter }) => {
@@ -104,8 +121,10 @@ function nav() {
],
},
{
- text: '💻 Live Editor',
- link: 'https://mermaid.live',
+ text: '💻 Open Editor',
+ link: 'https://mermaid.live/edit',
+ target: '_blank',
+ rel: 'external',
},
];
}
diff --git a/packages/mermaid/src/docs/.vitepress/scripts/fetch-avatars.ts b/packages/mermaid/src/docs/.vitepress/scripts/fetch-avatars.ts
index 23c359444..9b0617aa9 100644
--- a/packages/mermaid/src/docs/.vitepress/scripts/fetch-avatars.ts
+++ b/packages/mermaid/src/docs/.vitepress/scripts/fetch-avatars.ts
@@ -32,11 +32,17 @@ async function fetchAvatars() {
});
contributors = JSON.parse(await readFile(pathContributors, { encoding: 'utf-8' }));
- const avatars = contributors.map((name) =>
- download(`https://github.com/${name}.png?size=100`, getAvatarPath(name))
- );
- await Promise.allSettled(avatars);
+ const batchSize = 10;
+ for (let i = 0; i < contributors.length; i += batchSize) {
+ console.log(
+ `Processing batch ${i / batchSize + 1} of ${Math.ceil(contributors.length / batchSize)}`
+ );
+ const batch = contributors.slice(i, i + batchSize);
+ await Promise.allSettled(
+ batch.map((name) => download(`https://github.com/${name}.png?size=100`, getAvatarPath(name)))
+ );
+ }
}
void fetchAvatars();
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..ecd216248
--- /dev/null
+++ b/packages/mermaid/src/docs/.vitepress/theme/Tooltip.vue
@@ -0,0 +1,113 @@
+
+
+
+ Opens in MermaidChart.com
+
+
+
+
+
+
diff --git a/packages/mermaid/src/docs/.vitepress/theme/custom.css b/packages/mermaid/src/docs/.vitepress/theme/custom.css
index 1d72056ec..e0b84864c 100644
--- a/packages/mermaid/src/docs/.vitepress/theme/custom.css
+++ b/packages/mermaid/src/docs/.vitepress/theme/custom.css
@@ -1,22 +1,25 @@
@import 'font-awesome/css/font-awesome.min.css';
@import '@mdi/font/css/materialdesignicons.min.css';
+/* Colors: Brand */
:root {
- --vp-c-brand: #ff3670;
- --vp-c-brand-light: #ff5e8c;
- --vp-c-brand-lighter: #ff85a8;
- --vp-c-brand-lightest: #ff9bb7;
- --vp-c-brand-dark: #bd34fe;
- --vp-c-brand-darker: #9339bd;
- --vp-c-brand-dimm: rgba(100, 108, 255, 0.08);
+ /* use for colored text */
+ --vp-c-pink-1: #e0095f;
+
+ /* use for hover state of button */
+ --vp-c-pink-2: #b0134a;
+
+ /* use for background button color */
+ --vp-c-pink-3: #e0095f;
+
+ /* use for custom container or badges */
+ --vp-c-pink-4: rgba(159, 122, 234, 0.14);
}
:root {
- --vp-home-hero-name-color: transparent;
- --vp-home-hero-name-background: -webkit-linear-gradient(120deg, #bd34fe 30%, #ff3670);
-
- --vp-home-hero-image-background-image: linear-gradient(-45deg, #bd34fe 50%, #ff3670 50%);
- --vp-home-hero-image-filter: blur(72px);
+ --vp-c-brand-1: var(--vp-c-pink-1);
+ --vp-c-brand-2: var(--vp-c-pink-2);
+ --vp-c-brand-3: var(--vp-c-pink-3);
}
.vp-doc > div {
diff --git a/packages/mermaid/src/docs/.vitepress/theme/index.ts b/packages/mermaid/src/docs/.vitepress/theme/index.ts
index 3ec200937..574ce3e81 100644
--- a/packages/mermaid/src/docs/.vitepress/theme/index.ts
+++ b/packages/mermaid/src/docs/.vitepress/theme/index.ts
@@ -1,15 +1,13 @@
/* 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 Contributors from '../components/Contributors.vue';
-// @ts-ignore Type not available
+import EditorSelectionModal from '../components/EditorSelectionModal.vue';
import HomePage from '../components/HomePage.vue';
-// @ts-ignore Type not available
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';
@@ -21,16 +19,18 @@ 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),
+ 'home-hero-after': () => h(EditorSelectionModal),
});
},
enhanceApp({ app, router }: EnhanceAppContext) {
// register global components
app.component('Mermaid', Mermaid);
app.component('Contributors', Contributors);
+
router.onBeforeRouteChange = (to) => {
try {
const url = new URL(window.location.origin + to);
diff --git a/packages/mermaid/src/docs/index.md b/packages/mermaid/src/docs/index.md
index 218757b10..f160f7d8a 100644
--- a/packages/mermaid/src/docs/index.md
+++ b/packages/mermaid/src/docs/index.md
@@ -11,27 +11,33 @@ hero:
tagline: JavaScript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.
image:
- src: /mermaid-logo.svg
- alt: Mermaid
+ light: /hero-chart.svg
+ dark: /hero-chart-dark.svg
+ alt: Mermaid diagram
actions:
- theme: brand
- text: Get Started
- link: /intro/
+ text: Try Editor
+ link: https://mermaid.live/edit
+ target: _blank
+ rel: external
- theme: alt
- text: View on GitHub
- link: https://github.com/mermaid-js/mermaid
+ text: Get started
+ link: /intro/
features:
- - title: ➕ Easy to use!
- details: Easily create and render detailed diagrams and charts with the Mermaid Live Editor.
+ - icon:
+ src: /1-Callout-Easy.svg
+ title: Easy to use
+ details: Easily create diagrams and charts with the Mermaid Live Editor.
link: https://mermaid.live/
- - title: 🧩 Integrations available!
+ - icon:
+ src: /2-Callout-Integrations.svg
+ title: Integrations available
details: Use Mermaid with your favorite applications, check out the integrations list.
link: ../../ecosystem/integrations-community.md
- - title: 🏆 Award winning!
+ - icon:
+ src: /3-Callout-Awards.svg
+ title: Award winning
details: 2019 JavaScript Open Source Award winner for "The Most Exciting Use of Technology".
link: https://osawards.com/javascript/2019
- - title: 🥰 Mermaid + Mermaid Chart
- details: Mermaid Chart is a major supporter of the Mermaid project.
- link: https://www.mermaidchart.com/
---
diff --git a/packages/mermaid/src/docs/public/1-Callout-Easy.svg b/packages/mermaid/src/docs/public/1-Callout-Easy.svg
new file mode 100644
index 000000000..a6e9251a0
--- /dev/null
+++ b/packages/mermaid/src/docs/public/1-Callout-Easy.svg
@@ -0,0 +1,9 @@
+
diff --git a/packages/mermaid/src/docs/public/2-Callout-Integrations.svg b/packages/mermaid/src/docs/public/2-Callout-Integrations.svg
new file mode 100644
index 000000000..b5ebdf055
--- /dev/null
+++ b/packages/mermaid/src/docs/public/2-Callout-Integrations.svg
@@ -0,0 +1,9 @@
+
diff --git a/packages/mermaid/src/docs/public/3-Callout-Awards.svg b/packages/mermaid/src/docs/public/3-Callout-Awards.svg
new file mode 100644
index 000000000..f10c0fc39
--- /dev/null
+++ b/packages/mermaid/src/docs/public/3-Callout-Awards.svg
@@ -0,0 +1,9 @@
+
diff --git a/packages/mermaid/src/docs/public/hero-chart-dark.svg b/packages/mermaid/src/docs/public/hero-chart-dark.svg
new file mode 100644
index 000000000..2beb9bdab
--- /dev/null
+++ b/packages/mermaid/src/docs/public/hero-chart-dark.svg
@@ -0,0 +1,27 @@
+
diff --git a/packages/mermaid/src/docs/public/hero-chart.svg b/packages/mermaid/src/docs/public/hero-chart.svg
new file mode 100644
index 000000000..fbc675f3a
--- /dev/null
+++ b/packages/mermaid/src/docs/public/hero-chart.svg
@@ -0,0 +1,27 @@
+
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 000000000..d3ff002f6
--- /dev/null
+++ b/packages/mermaid/src/docs/public/icons/ai-diagram.svg
@@ -0,0 +1,19 @@
+
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 000000000..1e255ac81
--- /dev/null
+++ b/packages/mermaid/src/docs/public/icons/ai-repair.svg
@@ -0,0 +1,19 @@
+
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 000000000..626bfd265
--- /dev/null
+++ b/packages/mermaid/src/docs/public/icons/comment.svg
@@ -0,0 +1,19 @@
+
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 000000000..a443f1699
--- /dev/null
+++ b/packages/mermaid/src/docs/public/icons/folder.svg
@@ -0,0 +1,11 @@
+
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 000000000..8a7443b6e
--- /dev/null
+++ b/packages/mermaid/src/docs/public/icons/group.svg
@@ -0,0 +1,11 @@
+
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 000000000..c827bebc6
--- /dev/null
+++ b/packages/mermaid/src/docs/public/icons/groups.svg
@@ -0,0 +1,19 @@
+
diff --git a/packages/mermaid/src/docs/public/icons/open-source.svg b/packages/mermaid/src/docs/public/icons/open-source.svg
new file mode 100644
index 000000000..d6c1f9843
--- /dev/null
+++ b/packages/mermaid/src/docs/public/icons/open-source.svg
@@ -0,0 +1,11 @@
+
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 000000000..fbf4a4800
--- /dev/null
+++ b/packages/mermaid/src/docs/public/icons/plugins.svg
@@ -0,0 +1,19 @@
+
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 000000000..4c679a19e
--- /dev/null
+++ b/packages/mermaid/src/docs/public/icons/presentation.svg
@@ -0,0 +1,19 @@
+
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 000000000..3d563baa1
--- /dev/null
+++ b/packages/mermaid/src/docs/public/icons/public.svg
@@ -0,0 +1,11 @@
+
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 000000000..5af2408d4
--- /dev/null
+++ b/packages/mermaid/src/docs/public/icons/terminal.svg
@@ -0,0 +1,11 @@
+
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 000000000..bacb28629
--- /dev/null
+++ b/packages/mermaid/src/docs/public/icons/version-history.svg
@@ -0,0 +1,19 @@
+
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 000000000..9ac13652a
--- /dev/null
+++ b/packages/mermaid/src/docs/public/icons/whiteboard.svg
@@ -0,0 +1,19 @@
+
diff --git a/packages/mermaid/src/docs/public/mermaid-logo-horizontal.svg b/packages/mermaid/src/docs/public/mermaid-logo-horizontal.svg
new file mode 100644
index 000000000..34b3bb124
--- /dev/null
+++ b/packages/mermaid/src/docs/public/mermaid-logo-horizontal.svg
@@ -0,0 +1,11 @@
+