Merge branch 'develop' into feature/2776_katex_math

.github/ISSUE_TEMPLATE/config.yml

@@ -4,7 +4,7 @@ contact_links:
     url: https://github.com/mermaid-js/mermaid/discussions
     about: Ask the Community questions or share your own graphs in our discussions.
   - name: Discord
-    url: https://discord.gg/wwtabKgp8y
+    url: https://discord.gg/AgrbSrBer3
     about: Join our Community on Discord for Help and a casual chat.
   - name: Documentation
     url: https://mermaid.js.org

.github/workflows/build-docs.yml

@@ -24,7 +24,7 @@ jobs:
         uses: actions/setup-node@v4
         with:
           cache: pnpm
-          node-version: 18
+          node-version-file: '.node-version'
 
       - name: Install Packages
         run: pnpm install --frozen-lockfile

.github/workflows/build.yml

@@ -12,9 +12,6 @@ on:
 permissions:
   contents: read
 
-env:
-  node-version: 18.x
-
 jobs:
   build-mermaid:
     runs-on: ubuntu-latest
@@ -24,11 +21,11 @@ jobs:
       - uses: pnpm/action-setup@v2
         # uses version from "packageManager" field in package.json
 
-      - name: Setup Node.js ${{ env.node-version }}
+      - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
           cache: pnpm
-          node-version: ${{ env.node-version }}
+          node-version-file: '.node-version'
 
       - name: Install Packages
         run: |

.github/workflows/e2e-applitools.yml

@@ -21,9 +21,9 @@ env:
 jobs:
   e2e-applitools:
     runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node-version: [18.x]
+    container:
+      image: cypress/browsers:node-20.11.0-chrome-121.0.6167.85-1-ff-120.0-edge-121.0.2277.83-1
+      options: --user 1001
     steps:
       - if: ${{ ! env.USE_APPLI }}
         name: Warn if not using Applitools
@@ -35,10 +35,10 @@ jobs:
       - uses: pnpm/action-setup@v2
         # uses version from "packageManager" field in package.json
 
-      - name: Setup Node.js ${{ matrix.node-version }}
+      - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: ${{ matrix.node-version }}
+          node-version-file: '.node-version'
 
       - if: ${{ env.USE_APPLI }}
         name: Notify applitools of new batch

.github/workflows/e2e.yml

@@ -17,20 +17,22 @@ permissions:
   contents: read
 
 env:
-  node-version: 18.x
   # For PRs and MergeQueues, the target commit is used, and for push events, github.event.previous is used.
   targetHash: ${{ github.event.pull_request.base.sha || github.event.merge_group.base_sha || (github.event.before == '0000000000000000000000000000000000000000' && 'develop' || github.event.before)  }}
 
 jobs:
   cache:
     runs-on: ubuntu-latest
+    container:
+      image: cypress/browsers:node-20.11.0-chrome-121.0.6167.85-1-ff-120.0-edge-121.0.2277.83-1
+      options: --user 1001
     steps:
       - uses: actions/checkout@v4
       - uses: pnpm/action-setup@v2
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 18.x
+          node-version-file: '.node-version'
       - name: Cache snapshots
         id: cache-snapshot
         uses: actions/cache@v4
@@ -57,6 +59,9 @@ jobs:
 
   e2e:
     runs-on: ubuntu-latest
+    container:
+      image: cypress/browsers:node-20.11.0-chrome-121.0.6167.85-1-ff-120.0-edge-121.0.2277.83-1
+      options: --user 1001
     needs: cache
     strategy:
       fail-fast: false
@@ -68,10 +73,10 @@ jobs:
       - uses: pnpm/action-setup@v2
         # uses version from "packageManager" field in package.json
 
-      - name: Setup Node.js ${{ env.node-version }}
+      - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: ${{ env.node-version }}
+          node-version-file: '.node-version'
 
       # These cached snapshots are downloaded, providing the reference snapshots.
       - name: Cache snapshots

.github/workflows/lint.yml

@@ -13,9 +13,6 @@ on:
 permissions:
   contents: write
 
-env:
-  node-version: 18.x
-
 jobs:
   lint:
     runs-on: ubuntu-latest
@@ -25,11 +22,11 @@ jobs:
       - uses: pnpm/action-setup@v2
         # uses version from "packageManager" field in package.json
 
-      - name: Setup Node.js ${{ env.node-version }}
+      - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
           cache: pnpm
-          node-version: ${{ env.node-version }}
+          node-version-file: '.node-version'
 
       - name: Install Packages
         run: |

.github/workflows/publish-docs.yml

@@ -31,7 +31,7 @@ jobs:
         uses: actions/setup-node@v4
         with:
           cache: pnpm
-          node-version: 18
+          node-version-file: '.node-version'
 
       - name: Install Packages
         run: pnpm install --frozen-lockfile

.github/workflows/release-preview-publish.yml

@@ -19,7 +19,7 @@ jobs:
         uses: actions/setup-node@v4
         with:
           cache: pnpm
-          node-version: 18.x
+          node-version-file: '.node-version'
 
       - name: Install Packages
         run: |

.github/workflows/release-publish.yml

@@ -14,11 +14,11 @@ jobs:
       - uses: pnpm/action-setup@v2
         # uses version from "packageManager" field in package.json
 
-      - name: Setup Node.js v18
+      - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
           cache: pnpm
-          node-version: 18.x
+          node-version-file: '.node-version'
 
       - name: Install Packages
         run: |

.github/workflows/test.yml

@@ -5,9 +5,6 @@ on: [push, pull_request, merge_group]
 permissions:
   contents: read
 
-env:
-  node-version: 18.x
-
 jobs:
   unit-test:
     runs-on: ubuntu-latest
@@ -17,11 +14,11 @@ jobs:
       - uses: pnpm/action-setup@v2
         # uses version from "packageManager" field in package.json
 
-      - name: Setup Node.js ${{ env.node-version }}
+      - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
           cache: pnpm
-          node-version: ${{ env.node-version }}
+          node-version-file: '.node-version'
 
       - name: Install Packages
         run: |

.node-version

@@ -0,0 +1 @@
+v20.11.0

Dockerfile

@@ -1,2 +1,2 @@
-FROM node:18.19.0-alpine3.18 AS base
+FROM node:20.11.0-alpine3.19 AS base
 RUN wget -qO- https://get.pnpm.io/install.sh | ENV="$HOME/.shrc" SHELL="$(which sh)" sh -

README.md

@@ -15,7 +15,7 @@ Generate diagrams from markdown-like text.
 <a href="https://mermaid.live/"><b>Live Editor!</b></a>
 </p>
 <p align="center">
- <a href="https://mermaid.js.org">📖 Documentation</a> | <a href="https://mermaid.js.org/intro/">🚀 Getting Started</a> | <a href="https://www.jsdelivr.com/package/npm/mermaid">🌐 CDN</a> | <a href="https://discord.gg/wwtabKgp8y" title="Discord invite">🙌 Join Us</a>
+ <a href="https://mermaid.js.org">📖 Documentation</a> | <a href="https://mermaid.js.org/intro/">🚀 Getting Started</a> | <a href="https://www.jsdelivr.com/package/npm/mermaid">🌐 CDN</a> | <a href="https://discord.gg/AgrbSrBer3" title="Discord invite">🙌 Join Us</a>
 </p>
 <p align="center">
 <a href="./README.zh-CN.md">简体中文</a>
@@ -33,7 +33,7 @@ Try Live Editor previews of future releases: <a href="https://develop.git.mermai
 [![Coverage Status](https://codecov.io/github/mermaid-js/mermaid/branch/develop/graph/badge.svg)](https://app.codecov.io/github/mermaid-js/mermaid/tree/develop)
 [![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid)
 [![NPM Downloads](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid)
-[![Join our Discord!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=discord&label=discord)](https://discord.gg/wwtabKgp8y)
+[![Join our Discord!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=discord&label=discord)](https://discord.gg/AgrbSrBer3)
 [![Twitter Follow](https://img.shields.io/badge/Social-mermaidjs__-blue?style=social&logo=X)](https://twitter.com/mermaidjs_)
 
 <img src="./img/header.png" alt="" />

README.zh-CN.md

@@ -15,7 +15,7 @@ Mermaid
 <a href="https://mermaid.live/"><b>实时编辑器!</b></a>
 </p>
 <p align="center">
- <a href="https://mermaid.js.org">📖 文档</a> | <a href="https://mermaid.js.org/intro/">🚀 入门</a> | <a href="https://www.jsdelivr.com/package/npm/mermaid">🌐 CDN</a> | <a href="https://discord.gg/wwtabKgp8y" title="Discord invite">🙌 加入我们</a>
+ <a href="https://mermaid.js.org">📖 文档</a> | <a href="https://mermaid.js.org/intro/">🚀 入门</a> | <a href="https://www.jsdelivr.com/package/npm/mermaid">🌐 CDN</a> | <a href="https://discord.gg/AgrbSrBer3" title="Discord invite">🙌 加入我们</a>
 </p>
 <p align="center">
 <a href="./README.md">English</a>
@@ -34,7 +34,7 @@ Mermaid
 [![Coverage Status](https://codecov.io/github/mermaid-js/mermaid/branch/develop/graph/badge.svg)](https://app.codecov.io/github/mermaid-js/mermaid/tree/develop)
 [![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid)
 [![NPM Downloads](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid)
-[![Join our Discord!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=discord&label=discord)](https://discord.gg/wwtabKgp8y)
+[![Join our Discord!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=discord&label=discord)](https://discord.gg/AgrbSrBer3)
 [![Twitter Follow](https://img.shields.io/badge/Social-mermaidjs__-blue?style=social&logo=X)](https://twitter.com/mermaidjs_)
 
 <img src="./img/header.png" alt="" />

cypress/integration/rendering/sequencediagram.spec.js

@@ -375,6 +375,26 @@ context('Sequence diagram', () => {
         {}
       );
     });
+    it('should have actor-top and actor-bottom classes on top and bottom actor box and symbol', () => {
+      imgSnapshotTest(
+        `
+        sequenceDiagram
+          actor Bob
+          Alice->>Bob: Hi Bob
+          Bob->>Alice: Hi Alice
+      `,
+        {}
+      );
+      cy.get('.actor').should('have.class', 'actor-top');
+      cy.get('.actor-man').should('have.class', 'actor-top');
+      cy.get('.actor.actor-top').should('not.have.class', 'actor-bottom');
+      cy.get('.actor-man.actor-top').should('not.have.class', 'actor-bottom');
+
+      cy.get('.actor').should('have.class', 'actor-bottom');
+      cy.get('.actor-man').should('have.class', 'actor-bottom');
+      cy.get('.actor.actor-bottom').should('not.have.class', 'actor-top');
+      cy.get('.actor-man.actor-bottom').should('not.have.class', 'actor-top');
+    });
     it('should render long notes left of actor', () => {
       imgSnapshotTest(
         `

docs/ecosystem/integrations-create.md

@@ -24,7 +24,7 @@ Currently pending [IANA](https://www.iana.org/) recognition.
 
 ### Mermaid Discord workspace
 
-We would love to see what you create with Mermaid. Please share your creations with us in our [Discord](https://discord.gg/wwtabKgp8y) server [#showcase](https://discord.com/channels/1079455296289788015/1079502635054399649) channel.
+We would love to see what you create with Mermaid. Please share your creations with us in our [Discord](https://discord.gg/AgrbSrBer3) server [#showcase](https://discord.com/channels/1079455296289788015/1079502635054399649) channel.
 
 ### Add to Mermaid Ecosystem
 

docs/intro/index.md

@@ -22,7 +22,7 @@ It is a JavaScript based diagramming and charting tool that renders Markdown-ins
 [![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master)
 [![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid)
 [![NPM](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid)
-[![Join our Discord!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=discord&label=discord)](https://discord.gg/wwtabKgp8y)
+[![Join our Discord!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=discord&label=discord)](https://discord.gg/AgrbSrBer3)
 [![Twitter Follow](https://img.shields.io/twitter/follow/mermaidjs_?style=social)](https://twitter.com/mermaidjs_)
 
 </div>

docs/news/announcements.md

@@ -14,19 +14,6 @@ Create flowchart nodes, connect them with edges, update shapes, change colors, a
 
 Read more about it in our latest [BLOG POST](https://www.mermaidchart.com/blog/posts/mermaid-chart-releases-new-visual-editor-for-flowcharts) and watch a [DEMO VIDEO](https://www.youtube.com/watch?v=5aja0gijoO0) on our YouTube page.
 
-## 🎉 Mermaid Chart is running a Holiday promotion
-
-### Use <span class="text-[#FE3470]">HOLIDAYS2023</span> to get a 14-day free trial and 25% off a Pro subscription
-
-With a Pro subscription, you get access to:
-
-- AI functionality
-- Team collaboration and multi-user editing
-- Unlimited diagrams and presentations
-- And more!
-
-Redeem the promo code on the [Mermaid Chart website](https://www.mermaidchart.com/app/user/billing/checkout?coupon=HOLIDAYS2023).
-
 ## 📖 Blog posts
 
 Visit our [Blog](./blog.md) to see the latest blog posts.

docs/news/blog.md

@@ -6,6 +6,12 @@
 
 # Blog
 
+## [How one data scientist uses Mermaid Chart to quickly and easily build flowcharts](https://www.mermaidchart.com/blog/posts/customer-spotlight-ari-tal/)
+
+23 January 2024 · 4 mins
+
+Read about how Ari Tal, a data scientist and founder of Leveling Up with XAI, utilizes Mermaid Chart for its easy-to-use flowchart creation capabilities to enhance his work in explainable AI (XAI).
+
 ## [Introducing Mermaid Chart’s JetBrains IDE Extension](https://www.mermaidchart.com/blog/posts/introducing-mermaid-charts-jetbrains-ide-extension/)
 
 20 December 2023 · 5 mins

docs/syntax/sequenceDiagram.md

@@ -740,20 +740,22 @@ Styling of a sequence diagram is done by defining a number of css classes. Durin
 
 ### Classes used
 
-| Class        | Description                                                 |
-| ------------ | ----------------------------------------------------------- |
-| actor        | Style for the actor box at the top of the diagram.          |
-| text.actor   | Styles for text in the actor box at the top of the diagram. |
-| actor-line   | The vertical line for an actor.                             |
-| messageLine0 | Styles for the solid message line.                          |
-| messageLine1 | Styles for the dotted message line.                         |
-| messageText  | Defines styles for the text on the message arrows.          |
-| labelBox     | Defines styles label to left in a loop.                     |
-| labelText    | Styles for the text in label for loops.                     |
-| loopText     | Styles for the text in the loop box.                        |
-| loopLine     | Defines styles for the lines in the loop box.               |
-| note         | Styles for the note box.                                    |
-| noteText     | Styles for the text on in the note boxes.                   |
+| Class        | Description                                                    |
+| ------------ | -------------------------------------------------------------- |
+| actor        | Styles for the actor box.                                      |
+| actor-top    | Styles for the actor figure/ box at the top of the diagram.    |
+| actor-bottom | Styles for the actor figure/ box at the bottom of the diagram. |
+| text.actor   | Styles for text in the actor box.                              |
+| actor-line   | The vertical line for an actor.                                |
+| messageLine0 | Styles for the solid message line.                             |
+| messageLine1 | Styles for the dotted message line.                            |
+| messageText  | Defines styles for the text on the message arrows.             |
+| labelBox     | Defines styles label to left in a loop.                        |
+| labelText    | Styles for the text in label for loops.                        |
+| loopText     | Styles for the text in the loop box.                           |
+| loopLine     | Defines styles for the lines in the loop box.                  |
+| note         | Styles for the note box.                                       |
+| noteText     | Styles for the text on in the note boxes.                      |
 
 ### Sample stylesheet
 

package.json

@@ -74,7 +74,7 @@
     "@types/jsdom": "^21.1.1",
     "@types/lodash": "^4.14.194",
     "@types/mdast": "^3.0.11",
-    "@types/node": "^18.16.0",
+    "@types/node": "^20.11.10",
     "@types/prettier": "^2.7.2",
     "@types/rollup-plugin-visualizer": "^4.2.1",
     "@typescript-eslint/eslint-plugin": "^6.7.2",
@@ -122,9 +122,6 @@
     "vite-plugin-istanbul": "^4.1.0",
     "vitest": "^0.34.0"
   },
-  "volta": {
-    "node": "18.19.0"
-  },
   "nyc": {
     "report-dir": "coverage/cypress"
   }

packages/mermaid/package.json

@@ -124,8 +124,8 @@
     "typescript": "^5.0.4",
     "unist-util-flatmap": "^1.0.0",
     "unist-util-visit": "^4.1.2",
-    "vitepress": "^1.0.0-alpha.72",
-    "vitepress-plugin-search": "^1.0.4-alpha.20"
+    "vitepress": "^1.0.0-rc.40",
+    "vitepress-plugin-search": "^1.0.4-alpha.22"
   },
   "files": [
     "dist/",