Improved New Documentation

.github/workflows/docs.yml

@@ -21,7 +21,7 @@ jobs:
       - uses: actions/setup-node@v3
         name: Setup node
         with:
-          node-version: '16'
+          node-version: '18'
       - run: npm install -g cspell
         name: Install cSpell
       - run: cspell --config ./cSpell.json "packages/mermaid/src/docs/**/*.md" --no-progress

.github/workflows/lint.yml

@@ -39,4 +39,5 @@ jobs:
         run: pnpm run lint
 
       - name: Verify Docs
+        working-directory: ./packages/mermaid
         run: pnpm run docs:verify

.github/workflows/publish-docs.yml

@@ -0,0 +1,62 @@
+name: Deploy Vitepress docs to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches:
+      - master
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow one concurrent deployment
+concurrency:
+  group: 'pages'
+  cancel-in-progress: true
+
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - uses: pnpm/action-setup@v2
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          cache: pnpm
+          node-version: 18
+
+      - name: Install Packages
+        run: pnpm install --frozen-lockfile
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v2
+
+      - name: Run Build
+        run: pnpm --filter mermaid run docs:build:vitepress
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v1
+        with:
+          path: packages/mermaid/src/vitepress/.vitepress/dist
+
+  # Deployment job
+  deploy:
+    environment:
+      name: github-pages
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v1

.lintstagedrc.json

@@ -1,6 +1,3 @@
 {
-  "packages/mermaid/src/docs/**": ["pnpm run docs:build --git"],
-  "packages/mermaid/src/docs.mts": ["pnpm run docs:build --git"],
-  "*.{ts,js,json,html,md,mts}": ["eslint --fix", "prettier --write"],
-  "*.jison": ["pnpm run lint:jison"]
+  "!(docs/**/*)*.{ts,js,json,html,md,mts}": ["eslint --fix", "prettier --write"]
 }

.vscode/launch.json

@@ -12,6 +12,17 @@
       "args": ["run", "${relativeFile}"],
       "smartStep": true,
       "console": "integratedTerminal"
+    },
+    {
+      "name": "Docs generation",
+      "type": "node",
+      "request": "launch",
+      "args": ["src/docs.mts"],
+      "runtimeArgs": ["--loader", "ts-node/esm"],
+      "cwd": "${workspaceRoot}/packages/mermaid",
+      "skipFiles": ["<node_internals>/**", "**/node_modules/**"],
+      "smartStep": true,
+      "internalConsoleOptions": "openOnSessionStart"
     }
   ]
 }

CONTRIBUTING.md

@@ -32,7 +32,7 @@ We make all changes via pull requests. As we have many pull requests from develo
 
 - Large changes reviewed by knsv or other developer asked to review by knsv
 - Smaller low-risk changes like dependencies, documentation, etc. can be merged by active collaborators
-- Documentation (updates to the `src/docs` folder is also allowed via direct commits)
+- Documentation (updates to the `package/mermaid/src/docs` folder is also allowed via direct commits)
 
 To commit code, create a branch, let it start with the type like feature or bug followed by the issue number for reference and some describing text.
 
@@ -67,31 +67,22 @@ flowchart LR
 
 ### The official documentation site
 
-**[The mermaid documentation site](https://mermaid-js.github.io/mermaid/) is powered by [Docsify](https://docsify.js.org), a simple documentation site generator.**
+**[The mermaid documentation site](https://mermaid-js.github.io/mermaid/) is powered by [Vitepress](https://vitepress.vuejs.org/), a simple documentation site generator.**
 
-If you want to preview the whole documentation site on your machine, you need to install `docsify-cli`:
+If you want to preview the whole documentation site on your machine:
 
 ```sh
-$ npm i docsify-cli -g
-```
-
-If you are more familiar with Yarn, you can use the following command:
-
-```sh
-$ yarn global add docsify-cli
+cd mermaid
+pnpm i
+pnpm docs:dev
 ```
 
-The above command will install `docsify-cli` globally.
-If the installation is successful, the command `docsify` will be available in your `PATH`.
-
-You can now run the following command to serve the documentation site:
+You can now build and serve the documentation site:
 
 ```sh
-$ docsify serve docs
+pnpm docs:serve
 ```
 
-Once the local HTTP server is listening, you can point your browser at http://localhost:3000.
-
 ## Branching
 
 Going forward we will use a git flow inspired approach to branching. So development is done in develop, to do the development in the develop.
@@ -152,7 +143,7 @@ The source files for documentation are in `/packages/mermaid/src/docs` and are w
 
 #### Adding to or changing the documentation organization
 
-If you want to add a new section or change the organization (structure), then you need to make sure to **change the side navigation** in `src/docs/_sidebar.md`.
+If you want to add a new section or change the organization (structure), then you need to make sure to **change the side navigation** in `mermaid/src/docs/.vitepress/config.js`.
 
 When changes are committed and then released, they become part of the `master` branch and become part of the published documentation on https://mermaid-js.github.io/mermaid/
 

README.md

@@ -354,7 +354,11 @@ To report a vulnerability, please e-mail security@mermaid.live with a descriptio
 
 A quick note from Knut Sveidqvist:
 
-> _Many thanks to the [d3](https://d3js.org/) and [dagre-d3](https://github.com/cpettitt/dagre-d3) projects for providing the graphical layout and drawing libraries!_ >_Thanks also to the [js-sequence-diagram](https://bramp.github.io/js-sequence-diagrams) project for usage of the grammar for the sequence diagrams. Thanks to Jessica Peter for inspiration and starting point for gantt rendering._ >_Thank you to [Tyler Long](https://github.com/tylerlong) who has been a collaborator since April 2017._
+> _Many thanks to the [d3](https://d3js.org/) and [dagre-d3](https://github.com/cpettitt/dagre-d3) projects for providing the graphical layout and drawing libraries!_
+>
+> _Thanks also to the [js-sequence-diagram](https://bramp.github.io/js-sequence-diagrams) project for usage of the grammar for the sequence diagrams. Thanks to Jessica Peter for inspiration and starting point for gantt rendering._
+>
+> _Thank you to [Tyler Long](https://github.com/tylerlong) who has been a collaborator since April 2017._
 >
 > _Thank you to the ever-growing list of [contributors](https://github.com/knsv/mermaid/graphs/contributors) that brought the project this far!_
 

cSpell.json

@@ -2,21 +2,35 @@
   "version": "0.2",
   "language": "en",
   "words": [
+    "blockquotes",
     "customizability",
     "Gantt",
     "jison",
-    "knsv",
-    "Knut",
+    "mermiad",
     "mindmap",
     "Mindmaps",
     "mitigations",
     "sandboxed",
-    "Sveidqvist",
+    "shiki",
     "verdana",
-    "Visio",
-    "mermiad"
+    "Visio"
   ],
   "ignoreWords": [
+    "Alois",
+    "Klink",
+    "knsv",
+    "Knut",
+    "Matthieu",
+    "Sidharth",
+    "Sveidqvist",
+    "Vinod",
+    "Faber",
+    "Orlandoni",
+    "Klemm",
+    "Mindaugas",
+    "Laganeckas",
+    "Cuzon",
+    "Yash",
     "Adamiecki",
     "applitools",
     "Asciidoctor",
@@ -63,7 +77,9 @@
     "Kaufmann",
     "viewports",
     "edgechromium",
-    "statediagram"
+    "statediagram",
+    "Brolin",
+    "Greywolf"
   ],
   "patterns": [
     {

docs/CHANGELOG.md

@@ -1,4 +1,8 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the source file in [packages/mermaid/src/docs/CHANGELOG.md](../packages/mermaid/src/docs/CHANGELOG.md).
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/CHANGELOG.md](../packages/mermaid/src/docs/CHANGELOG.md).
 
 # Change Log
 
@@ -13,10 +17,10 @@ All changes are in descending order, beginning with the newest (latest) version.
 🔖 [Release Notes](https://github.com/mermaid-js/mermaid/releases/tag/8.7.0) |
 📜 [Full Changelog](https://github.com/mermaid-js/mermaid/compare/8.6.0...8.7.0)
 
-This version brings with it a system for [dynamic and integrated configuration of the diagram themes](./theming.md).
+This version brings with it a system for [dynamic and integrated configuration of the diagram themes](config/theming.md).
 The objective of this is to increase the customizability of mermaid and the ease of Styling, with the customization of themes through the `%%init%%` directive and `initialize` calls.
 
-Themes follow and build upon the Levels of Configuration and employ `directives` to modify and create custom configurations, as they were introduced in Version [8.6.0](../getting-started/8.6.0_docs.md).
+Themes follow and build upon the Levels of Configuration and employ `directives` to modify and create custom configurations, as they were introduced in Version [8.6.0](config/8.6.0_docs.md).
 
 **These Theming Configurations, similar to directives, will also be made applicable in the Live-Editor, for easier styling.**