Working New Documentation Vitepress

docs/n00b-syntaxReference.md

@@ -26,18 +26,6 @@ erDiagram
           PRODUCT ||--o{ ORDER-ITEM : "ordered in"
 ```
 
-```mermaid
-erDiagram
-          CUSTOMER }|..|{ DELIVERY-ADDRESS : has
-          CUSTOMER ||--o{ ORDER : places
-          CUSTOMER ||--o{ INVOICE : "liable for"
-          DELIVERY-ADDRESS ||--o{ ORDER : receives
-          INVOICE ||--|{ ORDER : covers
-          ORDER ||--|{ ORDER-ITEM : includes
-          PRODUCT-CATEGORY ||--|{ PRODUCT : contains
-          PRODUCT ||--o{ ORDER-ITEM : "ordered in"
-```
-
 The [Getting Started](./n00b-gettingStarted.md) section can also provide some practical examples of mermaid syntax.
 
 ## Diagram Breaking

package.json

@@ -28,11 +28,14 @@
     "build:vite": "ts-node-esm --transpileOnly --project=.vite/tsconfig.json .vite/build.ts",
     "build:types": "tsc -p ./tsconfig.json --emitDeclarationOnly",
     "build:watch": "yarn build:code --watch",
-    "build": "yarn clean; concurrently \"yarn build:vite\" \"yarn build:types\"",
+    "build": "yarn clean && concurrently \"yarn build:vite\" \"yarn build:types\"",
     "dev": "concurrently \"yarn build:vite --watch\" \"ts-node-esm .vite/server\"",
     "docs:build": "ts-node-esm --transpileOnly src/docs.mts",
     "docs:verify": "yarn docs:build --verify",
-    "postbuild": "documentation build src/mermaidAPI.ts src/config.ts src/defaultConfig.ts --shallow -f md --markdown-toc false > src/docs/Setup.md && prettier --write src/docs/Setup.md",
+    "vdocs:dev": "vitepress dev vdocs",
+    "vdocs:build": "vitepress build vdocs",
+    "vdocs:serve": "vitepress serve vdocs",
+    "postbuild": "echo 'building docs from code here soon'",
     "release": "yarn build",
     "lint": "eslint --cache --ignore-path .gitignore . && yarn lint:jison && prettier --check .",
     "lint:fix": "eslint --fix --ignore-path .gitignore . && prettier --write .",
@@ -99,7 +102,7 @@
     "coveralls": "^3.1.1",
     "cypress": "^10.0.0",
     "cypress-image-snapshot": "^4.0.1",
-    "documentation": "13.2.0",
+    "esbuild": "^0.15.8",
     "eslint": "^8.24.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-cypress": "^2.12.1",
@@ -115,6 +118,7 @@
     "jison": "^0.4.18",
     "jsdom": "^20.0.0",
     "lint-staged": "^13.0.0",
+    "markdown-it": "^13.0.1",
     "moment": "^2.23.0",
     "path-browserify": "^1.0.1",
     "prettier": "^2.7.1",
@@ -126,6 +130,9 @@
     "ts-node": "^10.9.1",
     "typescript": "^4.8.3",
     "unist-util-flatmap": "^1.0.0",
+    "vitepress": "^1.0.0-alpha.19",
+    "vitepress-plugin-mermaid": "^2.0.8",
+    "vitepress-plugin-search": "^1.0.4-alpha.11",
     "vite": "^3.0.9",
     "vitest": "^0.23.1"
   },

vdocs/.vitepress/config.ts

@@ -0,0 +1,166 @@
+import { version } from '../../package.json';
+import ExampleMarkdown from './mermaid-markdown-all';
+import { defineConfig } from 'vitepress';
+import { update } from 'lodash';
+
+export default defineConfig({
+  lang: 'en-US',
+  title: 'Mermaid',
+  description: 'Create diagrams and visualizations using text and code.',
+  base: '/mermaid-docs/',
+  lastUpdated: true,
+  markdown: ExampleMarkdown,
+  themeConfig: {
+    nav: nav(),
+
+    sidebar: {
+      '/': sidebarAll(),
+      // "/intro/": sidebarIntro(),
+      // "/syntax/": sidebarSyntax(),
+      // "/config": sidebarConfig(),
+      // "/misc/": sidebarMisc(),
+      // "/community/": sidebarCommunity(),
+    },
+
+    // TODO: update to mermaid
+    editLink: {
+      pattern: 'https://github.com/emersonbottero/mermaid/edit/develop/vdocs/:path',
+      text: 'Edit this page on GitHub',
+    },
+
+    socialLinks: [{ icon: 'github', link: 'https://github.com/emersonbottero/mermaid' }],
+  },
+});
+
+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/knsv/mermaid/issues/866',
+        },
+      ],
+    },
+    {
+      text: '💻 Live Editor',
+      link: '/edit',
+    },
+  ];
+}
+
+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(),
+  ];
+}
+
+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' },
+        { 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' },
+      ],
+    },
+  ];
+}
+
+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' },
+      ],
+    },
+  ];
+}

vdocs/.vitepress/mermaid-markdown-all.ts

@@ -0,0 +1,32 @@
+import { MermaidMarkdown } from 'vitepress-plugin-mermaid';
+import shiki from 'shiki';
+
+export default {
+  config: async (md) => {
+    MermaidMarkdown(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];
+
+      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 =
+          '<h5>Code:</h5>' +
+          '<div class="language-mermaid"><button class="copy"></button><span class="lang">mermaid</span>' +
+          code +
+          '</div>';
+
+        // return code;
+        return `${code}
+          <h5>Render:</h5>
+          <Mermaid id="me${index}"  graph="${encodeURIComponent(token.content)}"></Mermaid>`;
+      }
+      return fence(tokens, index, options, env, slf);
+    };
+  },
+};

vdocs/.vitepress/theme/custom.css

@@ -0,0 +1,6 @@
+/* Use this file to add custom css */
+
+/* TODO: Remove after vitepress-plugin-search next release */
+.search-item-icon {
+  font-family: none;
+}

vdocs/.vitepress/theme/index.ts

@@ -0,0 +1,11 @@
+import DefaultTheme from 'vitepress/theme';
+import Mermaid from 'vitepress-plugin-mermaid/Mermaid.vue';
+import './custom.css';
+
+export default {
+  ...DefaultTheme,
+  enhanceApp({ app }) {
+    // register global components
+    app.component('Mermaid', Mermaid);
+  },
+};