Merge branch 'develop' into MultipleUpdatesToClassDiagram

* develop: (30 commits)
  Update vite
  Fix applitools cypress
  Update packages/mermaid/package.json
  chore(deps): update dependency typescript to v5
  fix typedoc
  fix(deps): update all minor dependencies
  chore(deps): update pnpm to v8
  chore(deps): update fregante/setup-git-user action to v2
  fix(deps): update all minor dependencies
  chore(deps): update dependency start-server-and-test to v2
  chore(deps): update dependency rimraf to v5
  chore(deps): update dependency eslint-plugin-unicorn to v46
  chore(deps): update actions/deploy-pages action to v2
  chore(deps): update dependency eslint-plugin-jsdoc to v43
  Split docs into build and deploy
  fix(deps): update dependency dompurify to v3
  chore(deps): update dependency concurrently to v8
  Split renovate groups
  Upgrade vitepress
  chore(deps): update pnpm to v7.30.5
  ...

.github/workflows/build-docs.yml

@@ -0,0 +1,29 @@
+name: Build Vitepress docs
+
+on:
+  pull_request:
+
+permissions:
+  contents: read
+
+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: Run Build
+        run: pnpm --filter mermaid run docs:build:vitepress

.github/workflows/e2e-applitools.yml

@@ -38,15 +38,8 @@ jobs:
       - name: Setup Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v3
         with:
-          cache: pnpm
           node-version: ${{ matrix.node-version }}
 
-      - name: Install Packages
-        run: |
-          pnpm install --frozen-lockfile
-        env:
-          CYPRESS_CACHE_FOLDER: .cache/Cypress
-
       - if: ${{ env.USE_APPLI }}
         name: Notify applitools of new batch
         # Copied from docs https://applitools.com/docs/topics/integrations/github-integration-ci-setup.html
@@ -54,19 +47,22 @@ jobs:
         env:
           # e.g. mermaid-js/mermaid/my-branch
           APPLITOOLS_BRANCH: ${{ github.repository }}/${{ github.ref_name }}
-          APPLITOOLS_PARENT_BRANCH: ${{ github.inputs.parent_branch }}
+          APPLITOOLS_PARENT_BRANCH: ${{ github.event.inputs.parent_branch }}
           APPLITOOLS_API_KEY: ${{ secrets.APPLITOOLS_API_KEY }}
           APPLITOOLS_SERVER_URL: 'https://eyesapi.applitools.com'
 
-      - name: Run E2E Tests
+      - name: Cypress run
-        run: pnpm run e2e
+        uses: cypress-io/github-action@v4
+        id: cypress
+        with:
+          start: pnpm run dev
+          wait-on: 'http://localhost:9000'
         env:
-          CYPRESS_CACHE_FOLDER: .cache/Cypress
           # Mermaid applitools.config.js uses this to pick batch name.
           APPLI_BRANCH: ${{ github.ref_name }}
           APPLITOOLS_BATCH_ID: ${{ github.sha }}
           # e.g. mermaid-js/mermaid/my-branch
           APPLITOOLS_BRANCH: ${{ github.repository }}/${{ github.ref_name }}
-          APPLITOOLS_PARENT_BRANCH: ${{ github.inputs.parent_branch }}
+          APPLITOOLS_PARENT_BRANCH: ${{ github.event.inputs.parent_branch }}
           APPLITOOLS_API_KEY: ${{ secrets.APPLITOOLS_API_KEY }}
           APPLITOOLS_SERVER_URL: 'https://eyesapi.applitools.com'

.github/workflows/link-checker.yml

@@ -36,7 +36,7 @@ jobs:
           restore-keys: cache-lychee-
 
       - name: Link Checker
-        uses: lycheeverse/lychee-action@v1.6.1
+        uses: lycheeverse/lychee-action@v1.7.0
         with:
           args: >-
             --verbose

.github/workflows/publish-docs.yml

@@ -5,10 +5,6 @@ on:
   push:
     branches:
       - master
-  pull_request:
-
-  # 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:
@@ -53,7 +49,6 @@ jobs:
 
   # Deployment job
   deploy:
-    if: ${{ github.event_name == 'push' && github.ref == 'refs/heads/master' }}
     environment:
       name: github-pages
     runs-on: ubuntu-latest
@@ -61,4 +56,4 @@ jobs:
     steps:
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v1
+        uses: actions/deploy-pages@v2

.github/workflows/release-publish.yml

@@ -9,7 +9,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
-      - uses: fregante/setup-git-user@v1
+      - uses: fregante/setup-git-user@v2
 
       - uses: pnpm/action-setup@v2
         # uses version from "packageManager" field in package.json

.vite/build.ts

@@ -11,6 +11,7 @@ const visualize = process.argv.includes('--visualize');
 const watch = process.argv.includes('--watch');
 const mermaidOnly = process.argv.includes('--mermaid');
 const __dirname = fileURLToPath(new URL('.', import.meta.url));
+const sourcemap = false;
 
 type OutputOptions = Exclude<
   Exclude<InlineConfig['build'], undefined>['rollupOptions'],
@@ -60,9 +61,15 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
     {
       name,
       format: 'esm',
-      sourcemap: true,
+      sourcemap,
       entryFileNames: `${name}.esm${minify ? '.min' : ''}.mjs`,
     },
+    {
+      name,
+      format: 'umd',
+      sourcemap: true,
+      entryFileNames: `${name}${minify ? '.min' : ''}.js`,
+    },
   ];
 
   if (core) {
@@ -79,7 +86,7 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
       {
         name,
         format: 'esm',
-        sourcemap: true,
+        sourcemap,
         entryFileNames: `${name}.core.mjs`,
       },
     ];

cypress/platform/knsv2.html

@@ -393,9 +393,9 @@ mindmap
 
     <script type="module">
       // import mindmap from '../../packages/mermaid-mindmap/src/detector';
-      import example from '../../packages/mermaid-example-diagram/src/mermaid-example-diagram.core.mjs';
+      // import example from '../../packages/mermaid-example-diagram/src/mermaid-example-diagram.core.mjs';
       import mermaid from './mermaid.esm.mjs';
-      await mermaid.registerExternalDiagrams([example]);
+      // await mermaid.registerExternalDiagrams([example]);
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
       };

demos/pie.html

@@ -38,7 +38,7 @@
     </pre>
 
     <script type="module">
-      import mermaid from '../packages/mermaid/src/mermaid';
+      import mermaid from './mermaid.esm.mjs';
       mermaid.initialize({
         theme: 'forest',
         // themeCSS: '.node rect { fill: red; }',

docs/ecosystem/integrations.md

@@ -27,7 +27,7 @@ They also serve as proof of concept, for the variety of things that can be built
 - [Swimm](https://swimm.io) (**Native support**)
 - [Notion](https://notion.so) (**Native support**)
 - [Observable](https://observablehq.com/@observablehq/mermaid) (**Native support**)
-- [Obsidian](https://help.obsidian.md/How+to/Format+your+notes#Diagram) (**Native support**)
+- [Obsidian](https://help.obsidian.md/Editing+and+formatting/Advanced+formatting+syntax#Diagram) (**Native support**)
 - [GitBook](https://gitbook.com)
   - [Mermaid Plugin](https://github.com/JozoVilcek/gitbook-plugin-mermaid)
   - [Markdown with Mermaid CLI](https://github.com/miao1007/gitbook-plugin-mermaid-cli)

docs/syntax/classDiagram.md

@@ -604,10 +604,26 @@ You would define these actions on a separate line after all classes have been de
 
 ## Notes
 
-It is possible to add notes on diagram using `note "line1\nline2"` or note for class using `note for class "line1\nline2"`
+It is possible to add notes on the diagram using `note "line1\nline2"`. A note can be added for a specific class using `note for <CLASS NAME> "line1\nline2"`.
 
 ### Examples
 
+```mermaid-example
+classDiagram
+    note "This is a general note"
+    note for MyClass "This is a note for a class"
+    class MyClass{
+    }
+```
+
+```mermaid
+classDiagram
+    note "This is a general note"
+    note for MyClass "This is a note for a class"
+    class MyClass{
+    }
+```
+
 _URL Link:_
 
 ```mermaid-example

docs/syntax/flowchart.md

@@ -742,9 +742,9 @@ end
 
 Formatting:
 
-- For bold text, use double asterisks \*\* before and after the text.
+- For bold text, use double asterisks (`**`) before and after the text.
-- For italics, use single asterisks \* before and after the text.
+- For italics, use single asterisks (`*`) before and after the text.
-- With traditional strings, you needed to add <br> tags for text to wrap in nodes. However, markdown strings automatically wrap text when it becomes too long and allows you to start a new line by simply using a newline character instead of a <br> tag.
+- With traditional strings, you needed to add `<br>` tags for text to wrap in nodes. However, markdown strings automatically wrap text when it becomes too long and allows you to start a new line by simply using a newline character instead of a `<br>` tag.
 
 This feature is applicable to node labels, edge labels, and subgraph labels.
 

package.json

@@ -4,7 +4,7 @@
   "version": "10.1.0",
   "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "type": "module",
-  "packageManager": "pnpm@7.30.1",
+  "packageManager": "pnpm@8.3.1",
   "keywords": [
     "diagram",
     "markdown",
@@ -71,10 +71,10 @@
     "@types/rollup-plugin-visualizer": "^4.2.1",
     "@typescript-eslint/eslint-plugin": "^5.48.2",
     "@typescript-eslint/parser": "^5.48.2",
-    "@vitest/coverage-c8": "^0.29.0",
+    "@vitest/coverage-c8": "^0.30.0",
-    "@vitest/spy": "^0.29.0",
+    "@vitest/spy": "^0.30.0",
-    "@vitest/ui": "^0.29.0",
+    "@vitest/ui": "^0.30.0",
-    "concurrently": "^7.5.0",
+    "concurrently": "^8.0.0",
     "cors": "^2.8.5",
     "coveralls": "^3.1.1",
     "cypress": "^12.0.0",
@@ -85,13 +85,13 @@
     "eslint-plugin-cypress": "^2.12.1",
     "eslint-plugin-html": "^7.1.0",
     "eslint-plugin-jest": "^27.1.5",
-    "eslint-plugin-jsdoc": "^39.6.2",
+    "eslint-plugin-jsdoc": "^43.0.0",
     "eslint-plugin-json": "^3.1.0",
     "eslint-plugin-lodash": "^7.4.0",
     "eslint-plugin-markdown": "^3.0.0",
     "eslint-plugin-no-only-tests": "^3.1.0",
     "eslint-plugin-tsdoc": "^0.2.17",
-    "eslint-plugin-unicorn": "^45.0.0",
+    "eslint-plugin-unicorn": "^46.0.0",
     "express": "^4.18.2",
     "globby": "^13.1.2",
     "husky": "^8.0.2",
@@ -101,18 +101,18 @@
     "jsdom": "^21.0.0",
     "lint-staged": "^13.0.3",
     "path-browserify": "^1.0.1",
-    "pnpm": "^7.15.0",
+    "pnpm": "^8.0.0",
     "prettier": "^2.7.1",
     "prettier-plugin-jsdoc": "^0.4.2",
-    "rimraf": "^4.0.0",
+    "rimraf": "^5.0.0",
     "rollup-plugin-visualizer": "^5.8.3",
-    "start-server-and-test": "^1.15.4",
+    "start-server-and-test": "^2.0.0",
     "ts-node": "^10.9.1",
-    "typescript": "^4.8.4",
+    "typescript": "^5.0.0",
-    "vite": "^4.1.1",
+    "vite": "^4.3.1",
-    "vitest": "^0.29.0"
+    "vitest": "^0.30.0"
   },
   "volta": {
-    "node": "18.15.0"
+    "node": "18.16.0"
   }
 }

packages/mermaid-example-diagram/package.json

@@ -48,8 +48,8 @@
   },
   "devDependencies": {
     "@types/cytoscape": "^3.19.9",
-    "concurrently": "^7.5.0",
+    "concurrently": "^8.0.0",
-    "rimraf": "^4.0.0",
+    "rimraf": "^5.0.0",
     "mermaid": "workspace:*"
   },
   "resolutions": {

packages/mermaid/package.json

@@ -53,14 +53,14 @@
   },
   "dependencies": {
     "@braintree/sanitize-url": "^6.0.0",
-    "@khanacademy/simple-markdown": "^0.8.6",
+    "@khanacademy/simple-markdown": "^0.9.0",
     "cytoscape": "^3.23.0",
     "cytoscape-cose-bilkent": "^4.1.0",
     "cytoscape-fcose": "^2.1.0",
     "d3": "^7.4.0",
     "dagre-d3-es": "7.0.10",
     "dayjs": "^1.11.7",
-    "dompurify": "2.4.5",
+    "dompurify": "3.0.2",
     "elkjs": "^0.8.2",
     "khroma": "^2.0.0",
     "lodash-es": "^4.17.21",
@@ -73,7 +73,7 @@
   "devDependencies": {
     "@types/cytoscape": "^3.19.9",
     "@types/d3": "^7.4.0",
-    "@types/dompurify": "^2.4.0",
+    "@types/dompurify": "^3.0.0",
     "@types/jsdom": "^21.0.0",
     "@types/lodash-es": "^4.17.7",
     "@types/micromatch": "^4.0.2",
@@ -83,7 +83,7 @@
     "@typescript-eslint/eslint-plugin": "^5.42.1",
     "@typescript-eslint/parser": "^5.42.1",
     "chokidar": "^3.5.3",
-    "concurrently": "^7.5.0",
+    "concurrently": "^8.0.0",
     "coveralls": "^3.1.1",
     "cpy-cli": "^4.2.0",
     "cspell": "^6.14.3",
@@ -98,18 +98,21 @@
     "remark": "^14.0.2",
     "remark-frontmatter": "^4.0.1",
     "remark-gfm": "^3.0.1",
-    "rimraf": "^4.0.0",
+    "rimraf": "^5.0.0",
-    "start-server-and-test": "^1.14.0",
+    "start-server-and-test": "^2.0.0",
-    "typedoc": "^0.23.18",
+    "typedoc": "^0.24.4",
-    "typedoc-plugin-markdown": "^3.13.6",
+    "typedoc-plugin-markdown": "^3.15.2",
-    "typescript": "^4.8.4",
+    "typescript": "^5.0.0",
     "unist-util-flatmap": "^1.0.0",
-    "vitepress": "^1.0.0-alpha.46",
+    "vitepress": "^1.0.0-alpha.72",
-    "vitepress-plugin-search": "^1.0.4-alpha.19"
+    "vitepress-plugin-search": "^1.0.4-alpha.20"
   },
   "files": [
-    "dist",
+    "dist/",
     "README.md"
   ],
-  "sideEffects": false
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  }
 }

packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js

@@ -182,7 +182,7 @@ export const addVertices = async function (vert, svgId, root, doc, diagObj, pare
 
       // Add the element to the DOM
       if (node.type !== 'group') {
-        nodeEl = insertNode(nodes, node, vertex.dir);
+        nodeEl = await insertNode(nodes, node, vertex.dir);
         boundingBox = nodeEl.node().getBBox();
       } else {
         const svgLabel = doc.createElementNS('http://www.w3.org/2000/svg', 'text');

packages/mermaid/src/docs/ecosystem/integrations.md

@@ -21,7 +21,7 @@ They also serve as proof of concept, for the variety of things that can be built
 - [Swimm](https://swimm.io) (**Native support**)
 - [Notion](https://notion.so) (**Native support**)
 - [Observable](https://observablehq.com/@observablehq/mermaid) (**Native support**)
-- [Obsidian](https://help.obsidian.md/How+to/Format+your+notes#Diagram) (**Native support**)
+- [Obsidian](https://help.obsidian.md/Editing+and+formatting/Advanced+formatting+syntax#Diagram) (**Native support**)
 - [GitBook](https://gitbook.com)
   - [Mermaid Plugin](https://github.com/JozoVilcek/gitbook-plugin-mermaid)
   - [Markdown with Mermaid CLI](https://github.com/miao1007/gitbook-plugin-mermaid-cli)

packages/mermaid/src/docs/syntax/classDiagram.md

@@ -403,10 +403,18 @@ click className href "url" "tooltip"
 
 ## Notes
 
-It is possible to add notes on diagram using `note "line1\nline2"` or note for class using `note for class "line1\nline2"`
+It is possible to add notes on the diagram using `note "line1\nline2"`. A note can be added for a specific class using `note for <CLASS NAME> "line1\nline2"`.
 
 ### Examples
 
+```mermaid
+classDiagram
+    note "This is a general note"
+    note for MyClass "This is a note for a class"
+    class MyClass{
+    }
+```
+
 _URL Link:_
 
 ```mmd

packages/mermaid/src/docs/syntax/flowchart.md

@@ -465,9 +465,9 @@ end
 
 Formatting:
 
-- For bold text, use double asterisks \*\* before and after the text.
+- For bold text, use double asterisks (`**`) before and after the text.
-- For italics, use single asterisks \* before and after the text.
+- For italics, use single asterisks (`*`) before and after the text.
-- With traditional strings, you needed to add <br> tags for text to wrap in nodes. However, markdown strings automatically wrap text when it becomes too long and allows you to start a new line by simply using a newline character instead of a <br> tag.
+- With traditional strings, you needed to add `<br>` tags for text to wrap in nodes. However, markdown strings automatically wrap text when it becomes too long and allows you to start a new line by simply using a newline character instead of a `<br>` tag.
 
 This feature is applicable to node labels, edge labels, and subgraph labels.
 

renovate.json

@@ -2,7 +2,6 @@
   "extends": [
     "config:base",
     ":rebaseStalePrs",
-    "group:allNonMajor",
     "schedule:earlyMondays",
     ":automergeMinor",
     ":automergeTesters",
@@ -14,6 +13,18 @@
     {
       "matchUpdateTypes": ["minor", "patch", "digest"],
       "automerge": true
+    },
+    {
+      "groupName": "all patch dependencies",
+      "groupSlug": "all-patch",
+      "matchPackagePatterns": ["*"],
+      "matchUpdateTypes": ["patch"]
+    },
+    {
+      "groupName": "all minor dependencies",
+      "groupSlug": "all-minor",
+      "matchPackagePatterns": ["*"],
+      "matchUpdateTypes": ["minor"]
     }
   ],
   "dependencyDashboard": true,