diff --git a/.gitignore b/.gitignore
index cdd33c2c5..5710769c9 100644
--- a/.gitignore
+++ b/.gitignore
@@ -33,5 +33,4 @@ cypress/snapshots/
.tsbuildinfo
tsconfig.tsbuildinfo
-#docs generate from code
-packages/mermaid/src/docs/config/setup
\ No newline at end of file
+packages/mermaid/src/vitepress
\ No newline at end of file
diff --git a/cSpell.json b/cSpell.json
index 4a6d092e9..d5cce0f06 100644
--- a/cSpell.json
+++ b/cSpell.json
@@ -13,6 +13,7 @@
"Mindmaps",
"mitigations",
"sandboxed",
+ "shiki",
"Sveidqvist",
"verdana",
"Visio"
diff --git a/docs/.vitepress/blocks-markdown.ts b/docs/.vitepress/blocks-markdown.ts
deleted file mode 100644
index 870f1582c..000000000
--- a/docs/.vitepress/blocks-markdown.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-const CustomMarkdown = (md) => {
- const fence = md.renderer.rules.fence.bind(md.renderer.rules);
-
- md.renderer.rules.fence = (tokens, index, options, env, slf) => {
- const token = tokens[index];
-
- if (token.info.trim() === 'warning') {
- return ``;
- }
-
- if (token.info.trim() === 'note') {
- return ``;
- }
-
- if (token.info.trim() === 'jison') {
- return `jison${token.content
- .replace(//g, '>')}}
`;
- }
-
- return fence(tokens, index, options, env, slf);
- };
-};
-
-export default CustomMarkdown;
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
deleted file mode 100644
index 23b5d6a85..000000000
--- a/docs/.vitepress/config.ts
+++ /dev/null
@@ -1,176 +0,0 @@
-import { version } from '../../../package.json';
-import MermaidExample from './mermaid-markdown-all';
-import { MermaidMarkdown } from 'vitepress-plugin-mermaid';
-import CustomMarkdown from './blocks-markdown';
-import { defineConfig } from 'vitepress';
-
-const allMarkdownTransformers = {
- config: async (md) => {
- MermaidMarkdown(md);
- await MermaidExample(md);
- CustomMarkdown(md);
- },
-};
-
-export default defineConfig({
- lang: 'en-US',
- title: 'Mermaid',
- description: 'Create diagrams and visualizations using text and code.',
- base: '/mermaid-js/',
- markdown: allMarkdownTransformers,
- head: [['link', { rel: 'icon', type: 'image/x-icon', href: '/mermaid-js/favicon.ico' }]],
- themeConfig: {
- nav: nav(),
- editLink: {
- pattern: 'https://github.com/mermaid-js/mermaid/edit/develop/packages/mermaid/src/docs/:path',
- text: 'Edit this page on GitHub',
- },
-
- sidebar: {
- '/': sidebarAll(),
- // "/intro/": sidebarIntro(),
- // "/syntax/": sidebarSyntax(),
- // "/config": sidebarConfig(),
- // "/misc/": sidebarMisc(),
- // "/community/": sidebarCommunity(),
- },
- },
-});
-
-function nav() {
- return [
- { text: 'Intro', link: '/intro/', activeMatch: '/intro/' },
- {
- text: 'Configuration',
- link: '/config/Tutorials',
- activeMatch: '/config/',
- },
- { text: 'Syntax', link: '/syntax/classDiagram', activeMatch: '/syntax/' },
- { text: 'Misc', link: '/misc/integrations', activeMatch: '/misc/' },
- {
- text: 'Community',
- link: '/community/n00b-overview',
- activeMatch: '/community/',
- },
- {
- text: version,
- items: [
- {
- text: 'Changelog',
- link: 'https://github.com/mermaid-js/mermaid/blob/develop/CHANGELOG.md',
- },
- {
- text: 'Contributing',
- link: 'https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md',
- },
- ],
- },
- {
- text: '💻 Live Editor',
- link: 'https://mermaid.live',
- },
- ];
-}
-
-function sidebarAll() {
- return [
- {
- text: '📔 Introduction',
- collapsible: true,
- items: [
- { text: 'About Mermaid', link: '/intro/' },
- { text: 'Deployment', link: '/intro/n00b-gettingStarted' },
- {
- text: 'Syntax and Configuration',
- link: '/intro/n00b-syntaxReference',
- },
- ],
- },
- ...sidebarSyntax(),
- ...sidebarConfig(),
- ...sidebarMisc(),
- ...sidebarCommunity(),
- // {
- // text: "Generated",
- // items: [{ text: "modules", link: "docs/code/modules" }],
- // },
- ];
-}
-
-function sidebarSyntax() {
- return [
- {
- text: '📊 Diagram Syntax',
- collapsible: true,
- items: [
- { text: 'Flowchart', link: '/syntax/flowchart' },
- { text: 'Sequence Diagram', link: '/syntax/sequenceDiagram' },
- { text: 'Class Diagram', link: '/syntax/classDiagram' },
- { text: 'State Diagram', link: '/syntax/stateDiagram' },
- {
- text: 'Entity Relationship Diagram',
- link: '/syntax/entityRelationshipDiagram',
- },
- { text: 'User Journey', link: '/syntax/userJourney' },
- { text: 'Gantt', link: '/syntax/gantt' },
- { text: 'Pie Chart', link: '/syntax/pie' },
- { text: 'Requirement Diagram', link: '/syntax/requirementDiagram' },
- { text: 'Gitgraph (Git) Diagram 🔥', link: '/syntax/gitGraph' },
- { text: 'C4C Diagram (Context) Diagram 🦺⚠️', link: '/syntax/c4c' },
- { text: 'Other Examples', link: '/syntax/examples' },
- ],
- },
- ];
-}
-
-function sidebarConfig() {
- return [
- {
- text: '⚙️ Deployment and Configuration',
- collapsible: true,
- items: [
- { text: 'Tutorials', link: '/config/Tutorials' },
- { text: 'API-Usage', link: '/config/usage' },
- { text: 'Mermaid API Configuration', link: '/config/setup/modules' },
- { text: 'Directives', link: '/config/directives' },
- { text: 'Theming', link: '/config/theming' },
- { text: 'Accessibility', link: '/config/accessibility' },
- { text: 'Mermaid CLI', link: '/config/mermaidCLI' },
- { text: 'Advanced usage', link: '/config/n00b-advanced' },
- { text: 'Configuration', link: '/config/configuration' },
- ],
- },
- ];
-}
-
-function sidebarMisc() {
- return [
- {
- text: '📚 Misc',
- collapsible: true,
- items: [
- { text: 'Use-Cases and Integrations', link: '/misc/integrations' },
- { text: 'FAQ', link: '/misc/faq' },
- ],
- },
- ];
-}
-
-function sidebarCommunity() {
- return [
- {
- text: '🙌 Contributions and Community',
- collapsible: true,
- items: [
- { text: 'Overview for Beginners', link: '/community/n00b-overview' },
- {
- text: 'Development and Contribution',
- link: '/community/development',
- },
- { text: 'Changelog', link: '/community/CHANGELOG' },
- { text: 'Adding Diagrams', link: '/community/newDiagram' },
- { text: 'Security', link: '/community/security' },
- ],
- },
- ];
-}
diff --git a/docs/.vitepress/mermaid-markdown-all.ts b/docs/.vitepress/mermaid-markdown-all.ts
deleted file mode 100644
index 937e12fc3..000000000
--- a/docs/.vitepress/mermaid-markdown-all.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import shiki from 'shiki';
-
-const MermaidExample = async (md) => {
- const fence = md.renderer.rules.fence.bind(md.renderer.rules);
-
- const highlighter = await shiki.getHighlighter({ theme: 'material-palenight' });
-
- md.renderer.rules.fence = (tokens, index, options, env, slf) => {
- const token = tokens[index];
- // console.log("==>",token.info);
-
- if (token.info.trim() === 'mermaid-example') {
- let code = highlighter.codeToHtml(token.content, { lang: 'mermaid' });
- code = code.replace('#2e3440ff', 'transparent');
- code = code.replace('#292D3E', 'transparent');
-
- code =
- 'Code:
' +
- `` +
- `mermaid` +
- code +
- '
';
-
- // return code;
- return `${code}
- Render:
- `;
- }
- return fence(tokens, index, options, env, slf);
- };
-};
-
-export default MermaidExample;
diff --git a/docs/.vitepress/theme/custom.css b/docs/.vitepress/theme/custom.css
deleted file mode 100644
index e1ef049cd..000000000
--- a/docs/.vitepress/theme/custom.css
+++ /dev/null
@@ -1,27 +0,0 @@
-: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);
-}
-
-: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-doc > div {
- width: 100%;
-}
-
-a.edit {
- margin: 12px;
- position: relative;
- top: 10px;
-}
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
deleted file mode 100644
index bcce341a2..000000000
--- a/docs/.vitepress/theme/index.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import DefaultTheme from 'vitepress/theme';
-// @ts-ignore
-import Mermaid from 'vitepress-plugin-mermaid/Mermaid.vue';
-import './custom.css';
-
-export default {
- ...DefaultTheme,
- enhanceApp({ app }) {
- // register global components
- app.component('Mermaid', Mermaid);
- },
-};
diff --git a/docs/config/setup/.nojekyll b/docs/config/setup/.nojekyll
deleted file mode 100644
index e2ac6616a..000000000
--- a/docs/config/setup/.nojekyll
+++ /dev/null
@@ -1 +0,0 @@
-TypeDoc added this file to prevent GitHub Pages from using Jekyll. You can turn off this behavior by setting the `githubPages` option to false.
\ No newline at end of file
diff --git a/docs/index.md b/docs/index.md
deleted file mode 100644
index 3c9586005..000000000
--- a/docs/index.md
+++ /dev/null
@@ -1,140 +0,0 @@
-> **Warning**
->
-> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
->
-> ## Please edit the corresponding file in package/mermaid/src/docs.
-
----
-
-layout: home
-
-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.
-image:
-src: /mermaid-logo.svg
-alt: Mermaid
-actions:
-\- theme: brand
-text: Get Started
-link: /intro/
-\- theme: alt
-text: View on GitHub
-link: https://github.com/mermaid-js/mermaid
-
-features:
-
-- title: ➕ Easy to use!
- details: Mermaid allows even non-programmers to easily create detailed and diagrams through the Mermaid Live Editor.
-- title: 🎥 Video Tutorials!
- details: Has video tutorials for beginners and advanced users.
-- title: 🏆 Award winner!
- details: Mermaid was nominated and won the JS Open Source Awards (2019) in the category "The most exciting use of technology"!!!
-- title: 🧩 Integrations available!
- details: Use Mermaid with your favorite applications, check out the list of Integrations and Usages of Mermaid.
-
----
-
-
-
-
-
Meet The Team
-
-
-
-
diff --git a/docs/vite.config.ts b/docs/vite.config.ts
deleted file mode 100644
index bea6fe26d..000000000
--- a/docs/vite.config.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import { defineConfig, searchForWorkspaceRoot } from 'vite';
-import path from 'path';
-// @ts-ignore: still in alpha
-import { SearchPlugin } from 'vitepress-plugin-search';
-
-const virtualModuleId = 'virtual:mermaid-config';
-const resolvedVirtualModuleId = '\0' + virtualModuleId;
-
-export default defineConfig({
- plugins: [
- SearchPlugin(),
- {
- // TODO: will be fixed in the next vitepress release.
- name: 'fix-virtual',
-
- async resolveId(id) {
- if (id === virtualModuleId) {
- return resolvedVirtualModuleId;
- }
- },
- async load(this, id) {
- if (id === resolvedVirtualModuleId) {
- return `export default ${JSON.stringify({
- securityLevel: 'loose',
- startOnLoad: false,
- })};`;
- }
- },
- },
- ],
- resolve: {
- alias: {
- mermaid: path.join(__dirname, '../../dist/mermaid.esm.min.mjs'), // Use this one to build
- },
- },
- server: {
- fs: {
- allow: [
- // search up for workspace root
- searchForWorkspaceRoot(process.cwd()),
- // Allow serving files from one level up to the project root
- path.join(__dirname, '..'),
- ],
- },
- },
-});
diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json
index fc0ae1ae9..ad25cd58b 100644
--- a/packages/mermaid/package.json
+++ b/packages/mermaid/package.json
@@ -31,15 +31,13 @@
"build:esbuild": "concurrently \"pnpm build:code\" \"pnpm build:types\"",
"build": "pnpm clean; pnpm build:esbuild",
"dev": "node .esbuild/serve.cjs",
- "predocs:build": "rimraf docs && pnpm docs:code",
- "docs:build": "rimraf ../../docs; ts-node-esm src/docs.mts",
+ "docs:code": "typedoc --plugin typedoc-plugin-markdown --readme none --githubPages false --hideBreadcrumbs --gitRemote disable --hideInPageTOC --namedAnchors --out src/docs/config/setup --entryPointStrategy expand src/defaultConfig.ts src/config.ts src/mermaidAPI.ts",
+ "docs:build": "rimraf ../../docs && pnpm docs:code && ts-node-esm src/docs.mts",
"docs:verify": "ts-node-esm src/docs.mts --verify",
- "docs:code": "typedoc --plugin typedoc-plugin-markdown --readme none --hideBreadcrumbs --gitRemote disable --hideInPageTOC --namedAnchors --out src/docs/config/setup --entryPointStrategy expand src/defaultConfig.ts src/config.ts src/mermaidAPI.ts",
- "predocs:dev": "pnpm docs:code",
- "docs:dev": "vitepress dev src/docs",
- "predocs:bundle": "pnpm docs:code",
- "docs:bundle": "vitepress build src/docs",
- "docs:serve": "vitepress serve src/docs",
+ "docs:build:vitepress": "rimraf src/vitepress && pnpm docs:code && ts-node-esm src/docs.mts --vitepress",
+ "docs:dev": "pnpm docs:build:vitepress && vitepress dev src/vitepress",
+ "docs:bundle": "pnpm docs:build:vitepress && vitepress build src/vitepress",
+ "docs:serve": "pnpm docs:build:vitepress && vitepress serve src/vitepress",
"release": "pnpm build",
"lint": "eslint --cache --ignore-path .gitignore . && pnpm lint:jison && prettier --check .",
"lint:fix": "eslint --fix --ignore-path .gitignore . && prettier --write .",
diff --git a/packages/mermaid/src/docs.mts b/packages/mermaid/src/docs.mts
index 870aa9e7b..22d64faf8 100644
--- a/packages/mermaid/src/docs.mts
+++ b/packages/mermaid/src/docs.mts
@@ -45,10 +45,15 @@ const MERMAID_MAJOR_VERSION = (
JSON.parse(readFileSync('../mermaid/package.json', 'utf8')).version as string
).split('.')[0];
+const verifyOnly: boolean = process.argv.includes('--verify');
+const git: boolean = process.argv.includes('--git');
+const vitepress: boolean = process.argv.includes('--vitepress');
+const noHeader: boolean = process.argv.includes('--noHeader') || vitepress;
+
// These paths are from the root of the mono-repo, not from the
// mermaid sub-directory
const SOURCE_DOCS_DIR = 'src/docs';
-const FINAL_DOCS_DIR = '../../docs';
+const FINAL_DOCS_DIR = vitepress ? 'src/vitepress' : '../../docs';
const AUTOGENERATED_TEXT = `> **Warning**
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
@@ -60,9 +65,6 @@ const LOGMSG_COPIED = `, and copied to ${FINAL_DOCS_DIR}`;
const WARN_DOCSDIR_DOESNT_MATCH = `Changed files were transformed in ${SOURCE_DOCS_DIR} but do not match the files in ${FINAL_DOCS_DIR}. Please run pnpm docs:build after making changes to ${SOURCE_DOCS_DIR} to update the ${FINAL_DOCS_DIR} directory with the transformed files.`;
-const verifyOnly: boolean = process.argv.includes('--verify');
-const git: boolean = process.argv.includes('--git');
-
// TODO: Read from .prettierrc?
const prettierConfig: prettier.Config = {
useTabs: false,
@@ -176,8 +178,17 @@ const transformMarkdown = (file: string) => {
return [c];
});
- // Add the AUTOGENERATED_TEXT to the start of the file
- const transformed = `${AUTOGENERATED_TEXT}\n${remark.stringify(out)}`;
+ let transformed = remark.stringify(out);
+ if (!noHeader) {
+ // Add the AUTOGENERATED_TEXT to the start of the file
+ transformed = `${AUTOGENERATED_TEXT}\n${transformed}`;
+ }
+
+ if (vitepress && file === 'src/docs/index.md') {
+ // Skip transforming index if vitepress is enabled
+ transformed = doc;
+ }
+
const formatted = prettier.format(transformed, {
parser: 'markdown',
...prettierConfig,
@@ -206,6 +217,11 @@ const transformHtml = (filename: string) => {
//g,
MERMAID_MAJOR_VERSION
);
+
+ if (noHeader) {
+ return fileContents;
+ }
+
const jsdom = new JSDOM(fileContents);
const htmlDoc = jsdom.window.document;
const autoGeneratedComment = jsdom.window.document.createComment(AUTOGENERATED_TEXT);
@@ -224,6 +240,10 @@ const transformHtml = (filename: string) => {
};
const getFilesFromGlobs = async (globs: string[]): Promise => {
+ globs.push('!**/dist');
+ if (!vitepress) {
+ globs.push('!**/.vitepress', '!**/vite.config.ts', '!src/docs/index.md');
+ }
return await globby(globs, { dot: true });
};
diff --git a/packages/mermaid/src/docs/.vitepress/blocks-markdown.ts b/packages/mermaid/src/docs/.vitepress/blocks-markdown.ts
deleted file mode 100644
index 870f1582c..000000000
--- a/packages/mermaid/src/docs/.vitepress/blocks-markdown.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-const CustomMarkdown = (md) => {
- const fence = md.renderer.rules.fence.bind(md.renderer.rules);
-
- md.renderer.rules.fence = (tokens, index, options, env, slf) => {
- const token = tokens[index];
-
- if (token.info.trim() === 'warning') {
- return ``;
- }
-
- if (token.info.trim() === 'note') {
- return ``;
- }
-
- if (token.info.trim() === 'jison') {
- return `jison${token.content
- .replace(//g, '>')}}
`;
- }
-
- return fence(tokens, index, options, env, slf);
- };
-};
-
-export default CustomMarkdown;
diff --git a/packages/mermaid/src/docs/.vitepress/config.ts b/packages/mermaid/src/docs/.vitepress/config.ts
index 23b5d6a85..2dde653ac 100644
--- a/packages/mermaid/src/docs/.vitepress/config.ts
+++ b/packages/mermaid/src/docs/.vitepress/config.ts
@@ -1,14 +1,12 @@
import { version } from '../../../package.json';
import MermaidExample from './mermaid-markdown-all';
import { MermaidMarkdown } from 'vitepress-plugin-mermaid';
-import CustomMarkdown from './blocks-markdown';
-import { defineConfig } from 'vitepress';
+import { defineConfig, MarkdownOptions } from 'vitepress';
-const allMarkdownTransformers = {
+const allMarkdownTransformers: MarkdownOptions = {
config: async (md) => {
- MermaidMarkdown(md);
await MermaidExample(md);
- CustomMarkdown(md);
+ MermaidMarkdown(md);
},
};
@@ -28,11 +26,6 @@ export default defineConfig({
sidebar: {
'/': sidebarAll(),
- // "/intro/": sidebarIntro(),
- // "/syntax/": sidebarSyntax(),
- // "/config": sidebarConfig(),
- // "/misc/": sidebarMisc(),
- // "/community/": sidebarCommunity(),
},
},
});
@@ -90,10 +83,6 @@ function sidebarAll() {
...sidebarConfig(),
...sidebarMisc(),
...sidebarCommunity(),
- // {
- // text: "Generated",
- // items: [{ text: "modules", link: "docs/code/modules" }],
- // },
];
}
diff --git a/packages/mermaid/src/docs/.vitepress/mermaid-markdown-all.ts b/packages/mermaid/src/docs/.vitepress/mermaid-markdown-all.ts
index 937e12fc3..7006f20e9 100644
--- a/packages/mermaid/src/docs/.vitepress/mermaid-markdown-all.ts
+++ b/packages/mermaid/src/docs/.vitepress/mermaid-markdown-all.ts
@@ -1,32 +1,55 @@
+import type { MarkdownRenderer } from 'vitepress';
import shiki from 'shiki';
-const MermaidExample = async (md) => {
- const fence = md.renderer.rules.fence.bind(md.renderer.rules);
+const MermaidExample = async (md: MarkdownRenderer) => {
+ const defaultRenderer = md.renderer.rules.fence;
- const highlighter = await shiki.getHighlighter({ theme: 'material-palenight' });
+ if (!defaultRenderer) {
+ throw new Error('defaultRenderer is undefined');
+ }
+
+ const highlighter = await shiki.getHighlighter({
+ theme: 'material-palenight',
+ langs: ['mermaid'],
+ });
md.renderer.rules.fence = (tokens, index, options, env, slf) => {
const token = tokens[index];
- // console.log("==>",token.info);
if (token.info.trim() === 'mermaid-example') {
- let code = highlighter.codeToHtml(token.content, { lang: 'mermaid' });
- code = code.replace('#2e3440ff', 'transparent');
- code = code.replace('#292D3E', 'transparent');
+ const highlight = highlighter
+ .codeToHtml(token.content, { lang: 'mermaid' })
+ .replace(/Code:' +
- `` +
- `mermaid` +
- code +
- '
';
-
- // return code;
- return `${code}
- Render:
- `;
+ return `Code:
+
+
+ mermaid
+${highlight}
+
+ Diagram:
`;
}
- return fence(tokens, index, options, env, slf);
+ if (token.info.trim() === 'warning') {
+ return ``;
+ }
+
+ if (token.info.trim() === 'note') {
+ return ``;
+ }
+
+ if (token.info.trim() === 'jison') {
+ return `
+
+
jison
+
+ ${token.content.replace(//g, '>')}
+
+