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 ...
2025-11-05 13:24:11 +01:00 · 2023-04-23 22:50:40 +05:30
parent 642bc1a739 9298f631f9
commit 05e7a6bd4b
20 changed files with 2803 additions and 2500 deletions
--- a/.github/workflows/build-docs.yml
+++ b/.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
--- a/.github/workflows/e2e-applitools.yml
+++ b/.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
-        run: pnpm run e2e
+      - name: Cypress run
+        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'
--- a/.github/workflows/link-checker.yml
+++ b/.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
--- a/.github/workflows/publish-docs.yml
+++ b/.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
--- a/.github/workflows/release-publish.yml
+++ b/.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
--- a/.vite/build.ts
+++ b/.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`,
      },
    ];
--- a/cypress/platform/knsv2.html
+++ b/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);
      };
--- a/demos/pie.html
+++ b/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; }',
--- a/docs/ecosystem/integrations.md
+++ b/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)
--- a/docs/syntax/classDiagram.md
+++ b/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
--- a/docs/syntax/flowchart.md
+++ b/docs/syntax/flowchart.md
@@ -742,9 +742,9 @@ end

 Formatting:

- For bold text, use double 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.
+- For bold text, use double 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.

 This feature is applicable to node labels, edge labels, and subgraph labels.

--- a/package.json
+++ b/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/spy": "^0.29.0",
-    "@vitest/ui": "^0.29.0",
-    "concurrently": "^7.5.0",
+    "@vitest/coverage-c8": "^0.30.0",
+    "@vitest/spy": "^0.30.0",
+    "@vitest/ui": "^0.30.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",
-    "vite": "^4.1.1",
-    "vitest": "^0.29.0"
+    "typescript": "^5.0.0",
+    "vite": "^4.3.1",
+    "vitest": "^0.30.0"
  },
  "volta": {
-    "node": "18.15.0"
+    "node": "18.16.0"
  }
 }
--- a/packages/mermaid-example-diagram/package.json
+++ b/packages/mermaid-example-diagram/package.json
@@ -48,8 +48,8 @@
  },
  "devDependencies": {
    "@types/cytoscape": "^3.19.9",
-    "concurrently": "^7.5.0",
-    "rimraf": "^4.0.0",
+    "concurrently": "^8.0.0",
+    "rimraf": "^5.0.0",
    "mermaid": "workspace:*"
  },
  "resolutions": {
--- a/packages/mermaid/package.json
+++ b/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",
-    "start-server-and-test": "^1.14.0",
-    "typedoc": "^0.23.18",
-    "typedoc-plugin-markdown": "^3.13.6",
-    "typescript": "^4.8.4",
+    "rimraf": "^5.0.0",
+    "start-server-and-test": "^2.0.0",
+    "typedoc": "^0.24.4",
+    "typedoc-plugin-markdown": "^3.15.2",
+    "typescript": "^5.0.0",
    "unist-util-flatmap": "^1.0.0",
-    "vitepress": "^1.0.0-alpha.46",
-    "vitepress-plugin-search": "^1.0.4-alpha.19"
+    "vitepress": "^1.0.0-alpha.72",
+    "vitepress-plugin-search": "^1.0.4-alpha.20"
  },
  "files": [
-    "dist",
+    "dist/",
    "README.md"
  ],
-  "sideEffects": false
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  }
 }
--- a/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js
+++ b/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');
--- a/packages/mermaid/src/docs/ecosystem/integrations.md
+++ b/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)
--- a/packages/mermaid/src/docs/syntax/classDiagram.md
+++ b/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
--- a/packages/mermaid/src/docs/syntax/flowchart.md
+++ b/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 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.
+- For bold text, use double 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.

 This feature is applicable to node labels, edge labels, and subgraph labels.

--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/renovate.json
+++ b/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,