chore: bump mermaid version to v10.9.3

Updates the bundled version of dependencies in the following files:

- `dist/mermaid.min.js`
- `dist/mermaid.js`
- `dist/mermaid.esm.mjs`
- `dist/mermaid.esm.min.mjs`

**If you are not using these files
(e.g. you are using the default NPM export of `mermaid`,
 e.g. `import mermaid from 'mermaid'`,
 or you are using `dist/mermaid.core.mjs`),
this release is identical to v10.9.2.**

This is to avoid potential security issues in KaTeX and DOMPurify, see:

- https://github.com/cure53/DOMPurify/security/advisories/GHSA-mmhx-hmjr-r674
- https://github.com/advisories/GHSA-64fm-8hw2-v72w
- https://github.com/advisories/GHSA-cvr6-37gx-v8wc
- https://github.com/advisories/GHSA-f98w-7cxr-ff2h
- https://github.com/advisories/GHSA-3wc5-fcw2-2329

These dependencies have already been updated in
[v11.0.0](https://github.com/mermaid-js/mermaid/releases/tag/v11.0.0).

Changelog
=========

Chore
-----

- Updates the bundled version of KaTeX to 0.16.11
  (2bedd0ef87)
- Updates the bundled version of DOMPurify to 3.1.6
  (92a07ffe40)

.cspell/libraries.txt

@@ -36,6 +36,7 @@ jsfiddle
 jsonschema
 katex
 khroma
+langium
 mathml
 matplotlib
 mdbook

.github/lychee.toml

@@ -40,7 +40,7 @@ exclude = [
 # BundlePhobia has frequent downtime
 "https://bundlephobia.com",
 
-# Chrome webstore redirect issue
+# Chrome webstore migration issue. Temporary
 "https://chromewebstore.google.com"
 ]
 

.github/workflows/build-docs.yml

@@ -18,7 +18,7 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v4
 
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@v4
 
       - name: Setup Node.js
         uses: actions/setup-node@v4

.github/workflows/build.yml

@@ -18,7 +18,7 @@ jobs:
     steps:
       - uses: actions/checkout@v4
 
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@v4
         # uses version from "packageManager" field in package.json
 
       - name: Setup Node.js

.github/workflows/e2e-applitools.yml

@@ -32,7 +32,7 @@ jobs:
 
       - uses: actions/checkout@v4
 
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@v4
         # uses version from "packageManager" field in package.json
 
       - name: Setup Node.js

.github/workflows/e2e.yml

@@ -28,7 +28,7 @@ jobs:
       options: --user 1001
     steps:
       - uses: actions/checkout@v4
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@v4
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
@@ -70,7 +70,7 @@ jobs:
     steps:
       - uses: actions/checkout@v4
 
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@v4
         # uses version from "packageManager" field in package.json
 
       - name: Setup Node.js

.github/workflows/lint.yml

@@ -19,7 +19,7 @@ jobs:
     steps:
       - uses: actions/checkout@v4
 
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@v4
         # uses version from "packageManager" field in package.json
 
       - name: Setup Node.js

.github/workflows/publish-docs.yml

@@ -25,7 +25,7 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v4
 
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@v4
 
       - name: Setup Node.js
         uses: actions/setup-node@v4

.github/workflows/release-draft.yml

@@ -12,7 +12,7 @@ jobs:
   draft-release:
     runs-on: ubuntu-latest
     permissions:
-      contents: write # write permission is required to create a github release
+      contents: write # write permission is required to create a GitHub release
       pull-requests: read # required to read PR titles/labels
     steps:
       - name: Draft Release

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

@@ -13,7 +13,7 @@ jobs:
         with:
           fetch-depth: 0
 
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@v4
 
       - name: Setup Node.js
         uses: actions/setup-node@v4

.github/workflows/release-publish.yml

@@ -11,7 +11,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: fregante/setup-git-user@v2
 
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@v4
         # uses version from "packageManager" field in package.json
 
       - name: Setup Node.js

.github/workflows/test.yml

@@ -11,7 +11,7 @@ jobs:
     steps:
       - uses: actions/checkout@v4
 
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@v4
         # uses version from "packageManager" field in package.json
 
       - name: Setup Node.js

.github/workflows/update-browserlist.yml

@@ -9,7 +9,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@v4
       - run: npx update-browserslist-db@latest
       - name: Commit changes
         uses: EndBug/add-and-commit@v9

cypress/integration/other/xss.spec.js

@@ -137,4 +137,9 @@ describe('XSS', () => {
     cy.wait(1000);
     cy.get('#the-malware').should('not.exist');
   });
+  it('should sanitize backticks block diagram labels properly', () => {
+    cy.visit('http://localhost:9000/xss25.html');
+    cy.wait(1000);
+    cy.get('#the-malware').should('not.exist');
+  });
 });

cypress/platform/xss25.html

@@ -0,0 +1,108 @@
+<html>
+  <head>
+    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
+    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
+      rel="stylesheet"
+    />
+    <style>
+      body {
+        /* background: rgb(221, 208, 208); */
+        /* background:#333; */
+        font-family: 'Arial';
+        /* font-size: 18px !important; */
+      }
+      h1 {
+        color: grey;
+      }
+      .mermaid2 {
+        display: none;
+      }
+      .mermaid svg {
+        /* font-size: 18px !important; */
+      }
+      .malware {
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: 150px;
+        background: red;
+        color: black;
+        display: flex;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-family: monospace;
+        font-size: 72px;
+      }
+    </style>
+    <script>
+      function xssAttack() {
+        const div = document.createElement('div');
+        div.id = 'the-malware';
+        div.className = 'malware';
+        div.innerHTML = 'XSS Succeeded';
+        document.getElementsByTagName('body')[0].appendChild(div);
+        throw new Error('XSS Succeeded');
+      }
+    </script>
+  </head>
+  <body>
+    <div>Security check</div>
+    <div class="flex">
+      <div id="diagram" class="mermaid"></div>
+      <div id="res" class=""></div>
+    </div>
+    <script type="module">
+      import mermaid from './mermaid.esm.mjs';
+      mermaid.parseError = function (err, hash) {
+        // console.error('Mermaid error: ', err);
+      };
+      mermaid.initialize({
+        theme: 'forest',
+        arrowMarkerAbsolute: true,
+        // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
+        logLevel: 0,
+        state: {
+          defaultRenderer: 'dagre-wrapper',
+        },
+        flowchart: {
+          // defaultRenderer: 'dagre-wrapper',
+          nodeSpacing: 10,
+          curve: 'cardinal',
+          htmlLabels: true,
+        },
+        htmlLabels: false,
+        // gantt: { axisFormat: '%m/%d/%Y' },
+        sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
+        // sequenceDiagram: { actorMargin: 300 } // deprecated
+        // fontFamily: '"times", sans-serif',
+        // fontFamily: 'courier',
+        fontSize: 18,
+        curve: 'basis',
+        securityLevel: 'strict',
+        startOnLoad: false,
+        secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'],
+        // themeVariables: {relationLabelColor: 'red'}
+      });
+      function callback() {
+        alert('It worked');
+      }
+
+      let diagram = 'block-beta\n';
+      diagram += '`A-- "X<img src=x on';
+      diagram += 'error=xssAttack()>" -->B';
+
+      console.log(diagram);
+      // document.querySelector('#diagram').innerHTML = diagram;
+      const { svg } = await mermaid.render('diagram', diagram);
+      document.querySelector('#res').innerHTML = svg;
+    </script>
+  </body>
+</html>

docs/community/new-diagram-jison.md

@@ -0,0 +1,222 @@
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/community/new-diagram-jison.md](../../packages/mermaid/src/docs/community/new-diagram-jison.md).
+
+# Adding a New Diagram/Chart (Deprecated) 📊
+
+> **Warning**
+> JISON grammars are deprecated in mermaid. Please use Langium instead. See [New Diagram](./new-diagram.md) for more information.
+>
+> **New diagrams with JISON grammars will not be accepted.**
+
+### Step 1: Grammar & Parsing
+
+#### Grammar
+
+This would be to define a JISON grammar for the new diagram type. That should start with a way to identify that the text in the mermaid tag is a diagram of that type. Create a new folder under diagrams for your new diagram type and a parser folder in it. This leads us to step 2.
+
+For instance:
+
+- the flowchart starts with the keyword _graph_
+- the sequence diagram starts with the keyword _sequenceDiagram_
+
+#### Store data found during parsing
+
+There are some jison specific sub steps here where the parser stores the data encountered when parsing the diagram, this data is later used by the renderer. You can during the parsing call an object provided to the parser by the user of the parser. This object can be called during parsing for storing data.
+
+```jison
+statement
+	: 'participant' actor  { $$='actor'; }
+	| signal               { $$='signal'; }
+	| note_statement       { $$='note';  }
+	| 'title' message      { yy.setTitle($2);  }
+	;
+```
+
+In the extract of the grammar above, it is defined that a call to the setTitle method in the data object will be done when parsing and the title keyword is encountered.
+
+> **Note**
+> Make sure that the `parseError` function for the parser is defined and calling `mermaid.parseError`. This way a common way of detecting parse errors is provided for the end-user.
+
+For more info look at the example diagram type:
+
+The `yy` object has the following function:
+
+```javascript
+exports.parseError = function (err, hash) {
+  mermaid.parseError(err, hash);
+};
+```
+
+when parsing the `yy` object is initialized as per below:
+
+```javascript
+const parser = exampleParser.parser;
+parser.yy = db;
+```
+
+### Step 2: Rendering
+
+Write a renderer that given the data found during parsing renders the diagram. To look at an example look at sequenceRenderer.js rather than the flowchart renderer as this is a more generic example.
+
+Place the renderer in the diagram folder.
+
+### Step 3: Detection of the new diagram type
+
+The second thing to do is to add the capability to detect the new diagram to type to the detectType in `diagram-api/detectType.ts`. The detection should return a key for the new diagram type.
+[This key will be used to as the aria roledescription](#aria-roledescription), so it should be a word that clearly describes the diagram type.
+For example, if your new diagram uses a UML deployment diagram, a good key would be "UMLDeploymentDiagram" because assistive technologies such as a screen reader
+would voice that as "U-M-L Deployment diagram." Another good key would be "deploymentDiagram" because that would be voiced as "Deployment Diagram." A bad key would be "deployment" because that would not sufficiently describe the diagram.
+
+Note that the diagram type key does not have to be the same as the diagram keyword chosen for the [grammar](#grammar), but it is helpful if they are the same.
+
+### Step 4: The final piece - triggering the rendering
+
+At this point when mermaid is trying to render the diagram, it will detect it as being of the new type but there will be no match when trying to render the diagram. To fix this add a new case in the switch statement in main.js:init this should match the diagram type returned from step #2. The code in this new case statement should call the renderer for the diagram type with the data found by the parser as an argument.
+
+## Usage of the parser as a separate module
+
+### Setup
+
+```javascript
+const graph = require('./graphDb');
+const flow = require('./parser/flow');
+flow.parser.yy = graph;
+```
+
+### Parsing
+
+```javascript
+flow.parser.parse(text);
+```
+
+### Data extraction
+
+```javascript
+graph.getDirection();
+graph.getVertices();
+graph.getEdges();
+```
+
+The parser is also exposed in the mermaid api by calling:
+
+```javascript
+const parser = mermaid.getParser();
+```
+
+Note that the parse needs a graph object to store the data as per:
+
+```javascript
+flow.parser.yy = graph;
+```
+
+Look at `graphDb.js` for more details on that object.
+
+## Layout
+
+If you are using a dagre based layout, please use flowchart-v2 as a template and by doing that you will be using dagre-wrapper instead of dagreD3 which we are migrating away from.
+
+### Common parts of a diagram
+
+There are a few features that are common between the different types of diagrams. We try to standardize the diagrams that work as similar as possible for the end user. The commonalities are:
+
+- Directives, a way of modifying the diagram configuration from within the diagram code.
+- Accessibility, a way for an author to provide additional information like titles and descriptions to people accessing a text with diagrams using a screen reader.
+- Themes, there is a common way to modify the styling of diagrams in Mermaid.
+- Comments should follow mermaid standards
+
+Here are some pointers on how to handle these different areas.
+
+## Accessibility
+
+Mermaid automatically adds the following accessibility information for the diagram SVG HTML element:
+
+- aria-roledescription
+- accessible title
+- accessible description
+
+### aria-roledescription
+
+The aria-roledescription is automatically set to [the diagram type](#step-3--detection-of-the-new-diagram-type) and inserted into the SVG element.
+
+See [the definition of aria-roledescription](https://www.w3.org/TR/wai-aria-1.1/#aria-roledescription) in [the Accessible Rich Internet Applications W3 standard.](https://www.w3.org/WAI/standards-guidelines/aria/)
+
+### accessible title and description
+
+The syntax for accessible titles and descriptions is described in [the Accessibility documentation section.](../config/accessibility.md)
+
+As a design goal, the jison syntax should be similar between the diagrams.
+
+```jison
+
+* lexical grammar */
+%lex
+%x acc_title
+%x acc_descr
+%x acc_descr_multiline
+
+%%
+accTitle\s*":"\s*                                { this.begin("acc_title");return 'acc_title'; }
+<acc_title>(?!\n|;|#)*[^\n]*                     { this.popState(); return "acc_title_value"; }
+accDescr\s*":"\s*                                { this.begin("acc_descr");return 'acc_descr'; }
+<acc_descr>(?!\n|;|#)*[^\n]*                     { this.popState(); return "acc_descr_value"; }
+accDescr\s*"{"\s*                                { this.begin("acc_descr_multiline");}
+<acc_descr_multiline>[\}]                        { this.popState(); }
+<acc_descr_multiline>[^\}]*                      return "acc_descr_multiline_value";
+
+statement
+    : acc_title acc_title_value  { $$=$2.trim();yy.setTitle($$); }
+    | acc_descr acc_descr_value  { $$=$2.trim();yy.setAccDescription($$); }
+    | acc_descr_multiline_value { $$=$1.trim();yy.setAccDescription($$); }
+
+```
+
+The functions for setting title and description are provided by a common module. This is the import from flowDb.js:
+
+    import {
+      setAccTitle,
+      getAccTitle,
+      getAccDescription,
+      setAccDescription,
+      clear as commonClear,
+    } from '../../commonDb';
+
+The accessibility title and description are inserted into the SVG element in the `render` function in mermaidAPI.
+
+## Theming
+
+Mermaid supports themes and has an integrated theming engine. You can read more about how the themes can be used [in the docs](../config/theming.md).
+
+When adding themes to a diagram it comes down to a few important locations in the code.
+
+The entry point for the styling engine is in **src/styles.js**. The getStyles function will be called by Mermaid when the styles are being applied to the diagram.
+
+This function will in turn call a function _your diagram should provide_ returning the css for the new diagram. The diagram specific, also which is commonly also called getStyles and located in the folder for your diagram under src/diagrams and should be named styles.js. The getStyles function will be called with the theme options as an argument like in the following example:
+
+```js
+const getStyles = (options) =>
+  `
+    .line {
+      stroke-width: 1;
+      stroke: ${options.lineColor};
+      stroke-dasharray: 2;
+    }
+    // ...
+    `;
+```
+
+Note that you need to provide your function to the main getStyles by adding it into the themes object in **src/styles.js** like in the xyzDiagram in the provided example:
+
+```js
+const themes = {
+  flowchart,
+  'flowchart-v2': flowchart,
+  sequence,
+  xyzDiagram,
+  //...
+};
+```
+
+The actual options and values for the colors are defined in **src/theme/theme-\[xyz].js**. If you provide the options your diagram needs in the existing theme files then the theming will work smoothly without hiccups.

docs/community/new-diagram.md

@@ -6,52 +6,18 @@
 
 # Adding a New Diagram/Chart 📊
 
+### Examples
+
+Please refer to the following PRs on how to use Langium to add a new diagram grammar.
+
+- <https://github.com/mermaid-js/mermaid/pull/4839>
+- <https://github.com/mermaid-js/mermaid/pull/4751>
+
+> **Warning**
+> The below steps are a work in progress and will be updated soon.
+
 ### Step 1: Grammar & Parsing
 
-#### Grammar
-
-This would be to define a JISON grammar for the new diagram type. That should start with a way to identify that the text in the mermaid tag is a diagram of that type. Create a new folder under diagrams for your new diagram type and a parser folder in it. This leads us to step 2.
-
-For instance:
-
-- the flowchart starts with the keyword _graph_
-- the sequence diagram starts with the keyword _sequenceDiagram_
-
-#### Store data found during parsing
-
-There are some jison specific sub steps here where the parser stores the data encountered when parsing the diagram, this data is later used by the renderer. You can during the parsing call an object provided to the parser by the user of the parser. This object can be called during parsing for storing data.
-
-```jison
-statement
-	: 'participant' actor  { $$='actor'; }
-	| signal               { $$='signal'; }
-	| note_statement       { $$='note';  }
-	| 'title' message      { yy.setTitle($2);  }
-	;
-```
-
-In the extract of the grammar above, it is defined that a call to the setTitle method in the data object will be done when parsing and the title keyword is encountered.
-
-> **Note**
-> Make sure that the `parseError` function for the parser is defined and calling `mermaid.parseError`. This way a common way of detecting parse errors is provided for the end-user.
-
-For more info look at the example diagram type:
-
-The `yy` object has the following function:
-
-```javascript
-exports.parseError = function (err, hash) {
-  mermaid.parseError(err, hash);
-};
-```
-
-when parsing the `yy` object is initialized as per below:
-
-```javascript
-const parser = exampleParser.parser;
-parser.yy = db;
-```
-
 ### Step 2: Rendering
 
 Write a renderer that given the data found during parsing renders the diagram. To look at an example look at sequenceRenderer.js rather than the flowchart renderer as this is a more generic example.
@@ -67,52 +33,6 @@ would voice that as "U-M-L Deployment diagram." Another good key would be "deplo
 
 Note that the diagram type key does not have to be the same as the diagram keyword chosen for the [grammar](#grammar), but it is helpful if they are the same.
 
-### Step 4: The final piece - triggering the rendering
-
-At this point when mermaid is trying to render the diagram, it will detect it as being of the new type but there will be no match when trying to render the diagram. To fix this add a new case in the switch statement in main.js:init this should match the diagram type returned from step #2. The code in this new case statement should call the renderer for the diagram type with the data found by the parser as an argument.
-
-## Usage of the parser as a separate module
-
-### Setup
-
-```javascript
-const graph = require('./graphDb');
-const flow = require('./parser/flow');
-flow.parser.yy = graph;
-```
-
-### Parsing
-
-```javascript
-flow.parser.parse(text);
-```
-
-### Data extraction
-
-```javascript
-graph.getDirection();
-graph.getVertices();
-graph.getEdges();
-```
-
-The parser is also exposed in the mermaid api by calling:
-
-```javascript
-const parser = mermaid.getParser();
-```
-
-Note that the parse needs a graph object to store the data as per:
-
-```javascript
-flow.parser.yy = graph;
-```
-
-Look at `graphDb.js` for more details on that object.
-
-## Layout
-
-If you are using a dagre based layout, please use flowchart-v2 as a template and by doing that you will be using dagre-wrapper instead of dagreD3 which we are migrating away from.
-
 ### Common parts of a diagram
 
 There are a few features that are common between the different types of diagrams. We try to standardize the diagrams that work as similar as possible for the end user. The commonalities are:
@@ -142,33 +62,7 @@ See [the definition of aria-roledescription](https://www.w3.org/TR/wai-aria-1.1/
 
 The syntax for accessible titles and descriptions is described in [the Accessibility documentation section.](../config/accessibility.md)
 
-As a design goal, the jison syntax should be similar between the diagrams.
-
-```jison
-
-* lexical grammar */
-%lex
-%x acc_title
-%x acc_descr
-%x acc_descr_multiline
-
-%%
-accTitle\s*":"\s*                                { this.begin("acc_title");return 'acc_title'; }
-<acc_title>(?!\n|;|#)*[^\n]*                     { this.popState(); return "acc_title_value"; }
-accDescr\s*":"\s*                                { this.begin("acc_descr");return 'acc_descr'; }
-<acc_descr>(?!\n|;|#)*[^\n]*                     { this.popState(); return "acc_descr_value"; }
-accDescr\s*"{"\s*                                { this.begin("acc_descr_multiline");}
-<acc_descr_multiline>[\}]                        { this.popState(); }
-<acc_descr_multiline>[^\}]*                      return "acc_descr_multiline_value";
-
-statement
-    : acc_title acc_title_value  { $$=$2.trim();yy.setTitle($$); }
-    | acc_descr acc_descr_value  { $$=$2.trim();yy.setAccDescription($$); }
-    | acc_descr_multiline_value { $$=$1.trim();yy.setAccDescription($$); }
-
-```
-
-The functions for setting title and description are provided by a common module. This is the import from flowDb.js:
+The functions for setting title and description are provided by a common module. This is the import in flowDb.js:
 
     import {
       setAccTitle,

docs/config/math.md

@@ -4,7 +4,7 @@
 >
 > ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/math.md](../../packages/mermaid/src/docs/config/math.md).
 
-# Math Configuration (v\<MERMAID_RELEASE_VERSION>+)
+# Math Configuration (v10.9.0+)
 
 Mermaid supports rendering mathematical expressions through the [KaTeX](https://katex.org/) typesetter.
 

docs/ecosystem/integrations-community.md

@@ -118,7 +118,7 @@ Communication tools and platforms
 - [phpBB](https://phpbb.com)
   - [phpbb-ext-mermaid](https://github.com/AlfredoRamos/phpbb-ext-mermaid)
 - [Slack](https://slack.com)
-  - [Mermaid Preview](https://github.com/JackuB/mermaid-for-slack)
+  - [Mermaid Preview](https://mermaid-preview.com)
 
 ### Wikis
 

docs/ecosystem/mermaid-chart.md

@@ -6,6 +6,10 @@
 
 # Mermaid Chart
 
+The Future of Diagramming & Visual Collaboration
+
+Try the Ultimate AI, Mermaid, and Visual Diagramming Suite by creating an account at [Mermaid Chart](https://www.mermaidchart.com/app/sign-up).
+
 <br />
 
 <a href="https://www.producthunt.com/posts/mermaid-chart?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-mermaid&#0045;chart" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=416671&theme=light" alt="Mermaid&#0032;Chart - A&#0032;smarter&#0032;way&#0032;to&#0032;create&#0032;diagrams | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
@@ -18,22 +22,26 @@
 
 - **Editor** - A web based editor for creating and editing Mermaid diagrams.
 
-- **Presentation** - A presentation mode for viewing Mermaid diagrams in a slideshow format.
+- **Visual Editor** - The Visual Editor enables users of all skill levels to create diagrams easily and efficiently, with both GUI and code-based editing options.
 
-- **Collaboration** - A web based collaboration feature for multi-user editing on Mermaid diagrams in real-time (Pro plan).
+- **AI Chat** - Use our embedded AI Chat to generate diagrams from natural language descriptions.
 
 - **Plugins** - A plugin system for extending the functionality of Mermaid.
 
-  Plugins are available for:
+  Official Mermaid Chart plugins:
 
-  - [ChatGPT](https://docs.mermaidchart.com/plugins/chatgpt)
+  - [Mermaid Chart GPT](https://chat.openai.com/g/g-1IRFKwq4G-mermaid-chart)
+  - [Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=MermaidChart.vscode-mermaid-chart)
   - [JetBrains IDE](https://plugins.jetbrains.com/plugin/23043-mermaid-chart)
   - [Microsoft PowerPoint and Word](https://appsource.microsoft.com/en-us/product/office/WA200006214?tab=Overview)
-  - [Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=MermaidChart.vscode-mermaid-chart)
 
-- **AI diagramming** - A feature for generating Mermaid diagrams from text using AI (Pro plan).
+  Visit our [Plugins](https://www.mermaidchart.com/plugins) page for more information.
 
-- **More** - To learn more, visit our [Product](https://www.mermaidchart.com/product) page.
+- **Collaboration** - A web based collaboration feature for multi-user editing on Mermaid diagrams in real-time (Pro and Enterprise plans).
+
+- **Comments** - Enhance collaboration by adding comments to diagrams.
+
+- **Presentations** - A presentation mode for viewing Mermaid diagrams in a slideshow format.
 
 ## Plans
 
@@ -43,11 +51,9 @@
 
 - **Enterprise** - A paid plan for enterprise use that includes all Pro features, and more.
 
-## Access
+To learn more, visit our [Pricing](https://mermaidchart.com/pricing) page.
 
-Sign up for a free account at [Mermaid Chart](https://www.mermaidchart.com/app/sign-up).
-
-Mermaid Chart is currently offering a 14-day free trial of our newly-launched Pro tier. To learn more, visit our [Pricing](https://mermaidchart.com/pricing) page.
+Mermaid Chart is currently offering a 14-day free trial on our Pro and Enterprise tiers. Sign up for a free account at [Mermaid Chart](https://www.mermaidchart.com/app/sign-up).
 
 ## Mermaid JS contributions
 

docs/news/announcements.md

@@ -6,13 +6,45 @@
 
 # Announcements
 
-## 🚀 Mermaid Chart's Visual Editor for Flowcharts
+## 🚀 Exciting News from Mermaid Chart! 🚀
 
-The Mermaid Chart team is excited to introduce a new Visual Editor for flowcharts, enabling users of all skill levels to create diagrams easily and efficiently, with both GUI and code-based editing options.
+We're thrilled to announce that Mermaid Chart has successfully raised $7.5 million in Seed funding! 🌟 This achievement marks the beginning of a new era for Mermaid and Mermaid Chart.
 
-Create flowchart nodes, connect them with edges, update shapes, change colors, and edit labels with just a few clicks that automatically reflect in your diagram’s code for easy customizability.
+**Why It Matters for Mermaid Chart:**
 
-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.
+- **Empowering Collaboration**: Our tools are designed to enable faster, more efficient team collaboration across any distance, leveraging the best of text, voice, and automation.
+- **Opening New Doors**: Mermaid AI and our Visual Editor are breaking down barriers, making sophisticated diagramming accessible to everyone, not just software engineers.
+- **Looking Forward**: We're not stopping here! Expect groundbreaking features like automated documentation tools, advanced AI diagramming, and high-security on-premise solutions.
+
+**Why It Matters for Mermaid JS:**
+
+- **Continued support from Mermaid Chart**: At Mermaid Chart, we value our still-growing Mermaid JS roots. As such, we have funneled back development and support to the project. Thanks to the successful seed round, we can continue to ramp up these efforts.
+
+We are incredibly excited about the future and are grateful to the community, our team, and our investors for being part of this journey. Together, we're not just creating diagrams; we're designing the future of collaboration.
+
+🌐 Learn more about our groundbreaking tools and what's next for Mermaid Chart by visiting [our website](https://www.mermaidchart.com/blog/posts/mermaid-chart-raises-7.5m-to-reinvent-visual-collaoration-for-enterprises).
+
+Thank you for being part of our story. Here's to creating, innovating, and collaborating on a global scale!
+
+Knut Sveidqvist 🧜‍♂️✨
+
+## Mermaid Chart's Visual Editor for Flowcharts and Sequence diagrams
+
+The Mermaid Chart team is excited to introduce a new Visual Editor for Flowcharts and Sequence diagrams, enabling users of all skill levels to create diagrams easily and efficiently, with both GUI and code-based editing options.
+
+Learn more:
+
+- Visual Editor For Flowcharts
+
+  - [Blog post](https://www.mermaidchart.com/blog/posts/mermaid-chart-releases-new-visual-editor-for-flowcharts)
+
+  - [Demo video](https://www.youtube.com/watch?v=5aja0gijoO0)
+
+- Visual Editor For Sequence diagrams
+
+  - [Blog post](https://www.mermaidchart.com/blog/posts/mermaid-chart-unveils-visual-editor-for-sequence-diagrams)
+
+  - [Demo video](https://youtu.be/imc2u5_N6Dc)
 
 ## 📖 Blog posts
 

docs/news/blog.md

@@ -6,6 +6,48 @@
 
 # Blog
 
+## [How to Choose the Right Documentation Software](https://www.mermaidchart.com/blog/posts/how-to-choose-the-right-documentation-software/)
+
+7 May 2024 · 5 mins
+
+How to Choose the Right Documentation Software. Reliable and efficient documentation software is crucial in the fast-paced world of software development.
+
+## [AI in software diagramming: What trends will define the future?](https://www.mermaidchart.com/blog/posts/ai-in-software-diagramming/)
+
+24 April 2024 · 5 mins
+
+Artificial intelligence (AI) tools are changing the way developers work.
+
+## [Mermaid Chart Unveils Visual Editor for Sequence Diagrams](https://www.mermaidchart.com/blog/posts/mermaid-chart-unveils-visual-editor-for-sequence-diagrams/)
+
+8 April 2024 · 5 mins
+
+Sequence diagrams are excellent tools for communication and documentation.
+
+## [Modeling system states: It starts with a Turing machine](https://www.mermaidchart.com/blog/posts/modeling-system-states/)
+
+27 March 2024 · 12 mins
+
+In computer science, there are a few fundamental papers that, without exaggeration, changed everything.
+
+## [Mermaid Chart Raises $7.5M to Reinvent Visual Collaboration for Enterprises](https://www.mermaidchart.com/blog/posts/mermaid-chart-raises-7.5m-to-reinvent-visual-collaoration-for-enterprises/)
+
+20 March 2024 · 4 mins
+
+Mermaid Chart, the company offering text-based diagramming and workflow management tools, today announced it has raised $7.5 million in Seed funding.
+
+## [Mermaid Chart GPT Is Now Available In the GPT Store!](https://www.mermaidchart.com/blog/posts/mermaid-chart-gpt-is-now-available-in-the-gpt-store/)
+
+7 March 2024 · 3 mins
+
+Mermaid Chart GPT is Now Available In the GPT Store!
+
+## [How to Make a Flowchart with Mermaid Chart](https://www.mermaidchart.com/blog/posts/how-to-make-flowcharts-with-mermaid-chart/)
+
+30 January 2024 · 6 mins
+
+Learn how to make a flowchart with Mermaid Chart, the leading text-to-diagram platform for both developers and non-developers.
+
 ## [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

docs/syntax/gantt.md

@@ -143,7 +143,7 @@ After processing the tags, the remaining metadata items are interpreted as follo
 | `until <otherTaskId>`                                | End date of preceding task                          | Start date of previously specified task `otherTaskID` | n/a      |
 
 > **Note**
-> Support for keyword `until` was added in (v\<MERMAID_RELEASE_VERSION>+). This can be used to define a task which is running until some other specific task or milestone starts.
+> Support for keyword `until` was added in (v10.9.0+). This can be used to define a task which is running until some other specific task or milestone starts.
 
 For simplicity, the table does not show the use of multiple tasks listed with the `after` keyword. Here is an example of how to use it and how it's interpreted:
 

packages/mermaid-zenuml/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mermaid-js/mermaid-zenuml",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "MermaidJS plugin for ZenUML integration",
   "module": "dist/mermaid-zenuml.core.mjs",
   "types": "dist/detector.d.ts",

packages/mermaid/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mermaid",
-  "version": "10.8.0",
+  "version": "10.9.3",
   "description": "Markdown-ish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "type": "module",
   "module": "./dist/mermaid.core.mjs",
@@ -68,7 +68,7 @@
     "d3-sankey": "^0.12.3",
     "dagre-d3-es": "7.0.10",
     "dayjs": "^1.11.7",
-    "dompurify": "^3.0.5",
+    "dompurify": "^3.0.5 <3.1.7",
     "elkjs": "^0.9.0",
     "katex": "^0.16.9",
     "khroma": "^2.0.0",

packages/mermaid/scripts/docs.mts

@@ -252,11 +252,12 @@ export function transformMarkdownAst({
         node.lang = MERMAID_KEYWORD;
         return [node];
       } else if (MERMAID_EXAMPLE_KEYWORDS.includes(node.lang)) {
-        // Return 2 nodes:
+        // If Vitepress, return only the original node with the language now set to 'mermaid-example' (will be rendered using custom renderer)
+        // Else Return 2 nodes:
         //   1. the original node with the language now set to 'mermaid-example' (will be rendered as code), and
         //   2. a copy of the original node with the language set to 'mermaid' (will be rendered as a diagram)
         node.lang = MERMAID_CODE_ONLY_KEYWORD;
-        return [node, Object.assign({}, node, { lang: MERMAID_KEYWORD })];
+        return vitepress ? [node] : [node, Object.assign({}, node, { lang: MERMAID_KEYWORD })];
       }
 
       // Transform these blocks into block quotes.

packages/mermaid/src/diagrams/block/blockDB.ts

@@ -1,9 +1,11 @@
 import type { DiagramDB } from '../../diagram-api/types.js';
 import type { BlockConfig, BlockType, Block, ClassDef } from './blockTypes.js';
 import * as configApi from '../../config.js';
+import { getConfig } from '../../diagram-api/diagramAPI.js';
 import { clear as commonClear } from '../common/commonDb.js';
 import { log } from '../../logger.js';
 import clone from 'lodash-es/clone.js';
+import common from '../common/common.js';
 
 // Initialize the node database for simple lookups
 let blockDatabase: Record<string, Block> = {};
@@ -14,9 +16,12 @@ const COLOR_KEYWORD = 'color';
 const FILL_KEYWORD = 'fill';
 const BG_FILL = 'bgFill';
 const STYLECLASS_SEP = ',';
+const config = getConfig();
 
 let classes = {} as Record<string, ClassDef>;
 
+const sanitizeText = (txt: string) => common.sanitizeText(txt, config);
+
 /**
  * Called when the parser comes across a (style) class definition
  * @example classDef my-style fill:#f96;
@@ -87,6 +92,9 @@ const populateBlockDatabase = (_blockList: Block[] | Block[][], parent: Block):
   const blockList = _blockList.flat();
   const children = [];
   for (const block of blockList) {
+    if (block.label) {
+      block.label = sanitizeText(block.label);
+    }
     if (block.type === 'classDef') {
       addStyleClass(block.id, block.css);
       continue;

packages/mermaid/src/docs/.vitepress/components/TopBar.vue

@@ -4,7 +4,7 @@
   >
     <p class="flex-grow text-center tracking-wide text-text">
       <a
-        href="https://www.mermaidchart.com/app/landing"
+        href="https://www.mermaidchart.com/landing"
         target="_blank"
         class="unstyled flex-grow tracking-wide plausible-event-name=bannerClick"
       >

packages/mermaid/src/docs/.vitepress/mermaid-markdown-all.ts

@@ -9,35 +9,15 @@ const MermaidExample = async (md: MarkdownRenderer) => {
 
   md.renderer.rules.fence = (tokens, index, options, env, slf) => {
     const token = tokens[index];
-
-    if (token.info.trim() === 'mermaid-example') {
-      if (!md.options.highlight) {
-        // this function is always created by vitepress, but we need to check it
-        // anyway to make TypeScript happy
-        throw new Error(
-          'Missing MarkdownIt highlight function (should be automatically created by vitepress'
-        );
-      }
-
-      // doing ```mermaid-example {line-numbers=5 highlight=14-17} is not supported
-      const langAttrs = '';
-      return `
-      <h5>Code:</h5>
-      <div class="language-mermaid">
-        <button class="copy"></button>
-        <span class="lang">mermaid</span>
-        ${
-          // html is pre-escaped by the highlight function
-          // (it also adds `v-pre` to ignore Vue template syntax)
-          md.options.highlight(token.content, 'mermaid', langAttrs)
-        }
-      </div>`;
-    } else if (token.info.trim() === 'mermaid') {
+    const language = token.info.trim();
+    if (language.startsWith('mermaid')) {
       const key = index;
       return `
       <Suspense> 
       <template #default>
-      <Mermaid id="mermaid-${key}"  graph="${encodeURIComponent(token.content)}"></Mermaid>
+      <Mermaid id="mermaid-${key}" :showCode="${
+        language === 'mermaid-example'
+      }" graph="${encodeURIComponent(token.content)}"></Mermaid>
       </template>
         <!-- loading state via #fallback slot -->
         <template #fallback>
@@ -45,25 +25,18 @@ const MermaidExample = async (md: MarkdownRenderer) => {
         </template>
       </Suspense>
 `;
-    }
-    if (token.info.trim() === 'warning') {
+    } else if (language === 'warning') {
       return `<div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>${token.content}}</p></div>`;
-    }
-
-    if (token.info.trim() === 'note') {
+    } else if (language === 'note') {
       return `<div class="tip custom-block"><p class="custom-block-title">NOTE</p><p>${token.content}}</p></div>`;
-    }
-
-    if (token.info.trim() === 'regexp') {
+    } else if (language === 'regexp') {
       // shiki doesn't yet support regexp code blocks, but the javascript
       // one still makes RegExes look good
       token.info = 'javascript';
       // use trimEnd to move trailing `\n` outside if the JavaScript regex `/` block
       token.content = `/${token.content.trimEnd()}/\n`;
       return defaultRenderer(tokens, index, options, env, slf);
-    }
-
-    if (token.info.trim() === 'jison') {
+    } else if (language === 'jison') {
       return `<div class="language-">
       <button class="copy"></button>
       <span class="lang">jison</span>

packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue

@@ -1,4 +1,16 @@
 <template>
+  <div v-if="props.showCode">
+    <h5>Code:</h5>
+    <div class="language-mermaid">
+      <button class="copy"></button>
+      <span class="lang">mermaid</span>
+      <pre><code :contenteditable="contentEditable" @input="updateCode"  @keydown.meta.enter="renderChart" @keydown.ctrl.enter="renderChart" ref="editableContent" class="editable-code"></code></pre>
+      <div class="buttons-container">
+        <span>{{ ctrlSymbol }} + Enter</span><span>|</span>
+        <button @click="renderChart">Run ▶</button>
+      </div>
+    </div>
+  </div>
   <div v-html="svg"></div>
 </template>
 
@@ -15,18 +27,40 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  showCode: {
+    type: Boolean,
+    default: true,
+  },
 });
 
 const svg = ref('');
+const code = ref(decodeURIComponent(props.graph));
+const ctrlSymbol = ref(navigator.platform.includes('Mac') ? '⌘' : 'Ctrl');
+const editableContent = ref(null);
+const isFirefox = navigator.userAgent.toLowerCase().includes('firefox');
+const contentEditable = ref(isFirefox ? 'true' : 'plaintext-only');
+
 let mut = null;
 
+const updateCode = (event) => {
+  code.value = event.target.innerText;
+};
+
 onMounted(async () => {
   mut = new MutationObserver(() => renderChart());
   mut.observe(document.documentElement, { attributes: true });
+
+  if (editableContent.value) {
+    // Set the initial value of the contenteditable element
+    // We cannot bind using `{{ code }}` because it will rerender the whole component
+    // when the value changes, shifting the cursor when enter is used
+    editableContent.value.textContent = code.value;
+  }
+
   await renderChart();
 
   //refresh images on first render
-  const hasImages = /<img([\w\W]+?)>/.exec(decodeURIComponent(props.graph))?.length > 0;
+  const hasImages = /<img([\w\W]+?)>/.exec(code.value)?.length > 0;
   if (hasImages)
     setTimeout(() => {
       let imgElements = document.getElementsByTagName('img');
@@ -51,16 +85,14 @@ onMounted(async () => {
 onUnmounted(() => mut.disconnect());
 
 const renderChart = async () => {
-  console.log('rendering chart' + props.id + props.graph);
+  console.log('rendering chart' + props.id + code.value);
   const hasDarkClass = document.documentElement.classList.contains('dark');
   const mermaidConfig = {
     securityLevel: 'loose',
     startOnLoad: false,
     theme: hasDarkClass ? 'dark' : 'default',
   };
-
-  console.log({ mermaidConfig });
-  let svgCode = await render(props.id, decodeURIComponent(props.graph), mermaidConfig);
+  let svgCode = await render(props.id, code.value, mermaidConfig);
   // This is a hack to force v-html to re-render, otherwise the diagram disappears
   // when **switching themes** or **reloading the page**.
   // The cause is that the diagram is deleted during rendering (out of Vue's knowledge).
@@ -70,3 +102,35 @@ const renderChart = async () => {
   svg.value = `${svgCode} <span style="display: none">${salt}</span>`;
 };
 </script>
+
+<style>
+.editable-code:focus {
+  outline: none; /* Removes the default focus indicator */
+}
+
+.buttons-container {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  z-index: 1;
+  padding: 0.5rem;
+  display: flex;
+  gap: 0.5rem;
+}
+
+.buttons-container > span {
+  cursor: default;
+  opacity: 0.5;
+  font-size: 0.8rem;
+}
+
+.buttons-container > button {
+  color: #007bffbf;
+  font-weight: bold;
+  cursor: pointer;
+}
+
+.buttons-container > button:hover {
+  color: #007bff;
+}
+</style>

packages/mermaid/src/docs/community/new-diagram-jison.md

@@ -0,0 +1,220 @@
+# Adding a New Diagram/Chart (Deprecated) 📊
+
+```warning
+JISON grammars are deprecated in mermaid. Please use Langium instead. See [New Diagram](./new-diagram.md) for more information.
+
+**New diagrams with JISON grammars will not be accepted.**
+```
+
+### Step 1: Grammar & Parsing
+
+#### Grammar
+
+This would be to define a JISON grammar for the new diagram type. That should start with a way to identify that the text in the mermaid tag is a diagram of that type. Create a new folder under diagrams for your new diagram type and a parser folder in it. This leads us to step 2.
+
+For instance:
+
+- the flowchart starts with the keyword _graph_
+- the sequence diagram starts with the keyword _sequenceDiagram_
+
+#### Store data found during parsing
+
+There are some jison specific sub steps here where the parser stores the data encountered when parsing the diagram, this data is later used by the renderer. You can during the parsing call an object provided to the parser by the user of the parser. This object can be called during parsing for storing data.
+
+```jison
+statement
+	: 'participant' actor  { $$='actor'; }
+	| signal               { $$='signal'; }
+	| note_statement       { $$='note';  }
+	| 'title' message      { yy.setTitle($2);  }
+	;
+```
+
+In the extract of the grammar above, it is defined that a call to the setTitle method in the data object will be done when parsing and the title keyword is encountered.
+
+```note
+Make sure that the `parseError` function for the parser is defined and calling `mermaid.parseError`. This way a common way of detecting parse errors is provided for the end-user.
+```
+
+For more info look at the example diagram type:
+
+The `yy` object has the following function:
+
+```javascript
+exports.parseError = function (err, hash) {
+  mermaid.parseError(err, hash);
+};
+```
+
+when parsing the `yy` object is initialized as per below:
+
+```javascript
+const parser = exampleParser.parser;
+parser.yy = db;
+```
+
+### Step 2: Rendering
+
+Write a renderer that given the data found during parsing renders the diagram. To look at an example look at sequenceRenderer.js rather than the flowchart renderer as this is a more generic example.
+
+Place the renderer in the diagram folder.
+
+### Step 3: Detection of the new diagram type
+
+The second thing to do is to add the capability to detect the new diagram to type to the detectType in `diagram-api/detectType.ts`. The detection should return a key for the new diagram type.
+[This key will be used to as the aria roledescription](#aria-roledescription), so it should be a word that clearly describes the diagram type.
+For example, if your new diagram uses a UML deployment diagram, a good key would be "UMLDeploymentDiagram" because assistive technologies such as a screen reader
+would voice that as "U-M-L Deployment diagram." Another good key would be "deploymentDiagram" because that would be voiced as "Deployment Diagram." A bad key would be "deployment" because that would not sufficiently describe the diagram.
+
+Note that the diagram type key does not have to be the same as the diagram keyword chosen for the [grammar](#grammar), but it is helpful if they are the same.
+
+### Step 4: The final piece - triggering the rendering
+
+At this point when mermaid is trying to render the diagram, it will detect it as being of the new type but there will be no match when trying to render the diagram. To fix this add a new case in the switch statement in main.js:init this should match the diagram type returned from step #2. The code in this new case statement should call the renderer for the diagram type with the data found by the parser as an argument.
+
+## Usage of the parser as a separate module
+
+### Setup
+
+```javascript
+const graph = require('./graphDb');
+const flow = require('./parser/flow');
+flow.parser.yy = graph;
+```
+
+### Parsing
+
+```javascript
+flow.parser.parse(text);
+```
+
+### Data extraction
+
+```javascript
+graph.getDirection();
+graph.getVertices();
+graph.getEdges();
+```
+
+The parser is also exposed in the mermaid api by calling:
+
+```javascript
+const parser = mermaid.getParser();
+```
+
+Note that the parse needs a graph object to store the data as per:
+
+```javascript
+flow.parser.yy = graph;
+```
+
+Look at `graphDb.js` for more details on that object.
+
+## Layout
+
+If you are using a dagre based layout, please use flowchart-v2 as a template and by doing that you will be using dagre-wrapper instead of dagreD3 which we are migrating away from.
+
+### Common parts of a diagram
+
+There are a few features that are common between the different types of diagrams. We try to standardize the diagrams that work as similar as possible for the end user. The commonalities are:
+
+- Directives, a way of modifying the diagram configuration from within the diagram code.
+- Accessibility, a way for an author to provide additional information like titles and descriptions to people accessing a text with diagrams using a screen reader.
+- Themes, there is a common way to modify the styling of diagrams in Mermaid.
+- Comments should follow mermaid standards
+
+Here are some pointers on how to handle these different areas.
+
+## Accessibility
+
+Mermaid automatically adds the following accessibility information for the diagram SVG HTML element:
+
+- aria-roledescription
+- accessible title
+- accessible description
+
+### aria-roledescription
+
+The aria-roledescription is automatically set to [the diagram type](#step-3--detection-of-the-new-diagram-type) and inserted into the SVG element.
+
+See [the definition of aria-roledescription](https://www.w3.org/TR/wai-aria-1.1/#aria-roledescription) in [the Accessible Rich Internet Applications W3 standard.](https://www.w3.org/WAI/standards-guidelines/aria/)
+
+### accessible title and description
+
+The syntax for accessible titles and descriptions is described in [the Accessibility documentation section.](../config/accessibility.md)
+
+As a design goal, the jison syntax should be similar between the diagrams.
+
+```jison
+
+* lexical grammar */
+%lex
+%x acc_title
+%x acc_descr
+%x acc_descr_multiline
+
+%%
+accTitle\s*":"\s*                                { this.begin("acc_title");return 'acc_title'; }
+<acc_title>(?!\n|;|#)*[^\n]*                     { this.popState(); return "acc_title_value"; }
+accDescr\s*":"\s*                                { this.begin("acc_descr");return 'acc_descr'; }
+<acc_descr>(?!\n|;|#)*[^\n]*                     { this.popState(); return "acc_descr_value"; }
+accDescr\s*"{"\s*                                { this.begin("acc_descr_multiline");}
+<acc_descr_multiline>[\}]                        { this.popState(); }
+<acc_descr_multiline>[^\}]*                      return "acc_descr_multiline_value";
+
+statement
+    : acc_title acc_title_value  { $$=$2.trim();yy.setTitle($$); }
+    | acc_descr acc_descr_value  { $$=$2.trim();yy.setAccDescription($$); }
+    | acc_descr_multiline_value { $$=$1.trim();yy.setAccDescription($$); }
+
+```
+
+The functions for setting title and description are provided by a common module. This is the import from flowDb.js:
+
+```
+import {
+  setAccTitle,
+  getAccTitle,
+  getAccDescription,
+  setAccDescription,
+  clear as commonClear,
+} from '../../commonDb';
+```
+
+The accessibility title and description are inserted into the SVG element in the `render` function in mermaidAPI.
+
+## Theming
+
+Mermaid supports themes and has an integrated theming engine. You can read more about how the themes can be used [in the docs](../config/theming.md).
+
+When adding themes to a diagram it comes down to a few important locations in the code.
+
+The entry point for the styling engine is in **src/styles.js**. The getStyles function will be called by Mermaid when the styles are being applied to the diagram.
+
+This function will in turn call a function _your diagram should provide_ returning the css for the new diagram. The diagram specific, also which is commonly also called getStyles and located in the folder for your diagram under src/diagrams and should be named styles.js. The getStyles function will be called with the theme options as an argument like in the following example:
+
+```js
+const getStyles = (options) =>
+  `
+    .line {
+      stroke-width: 1;
+      stroke: ${options.lineColor};
+      stroke-dasharray: 2;
+    }
+    // ...
+    `;
+```
+
+Note that you need to provide your function to the main getStyles by adding it into the themes object in **src/styles.js** like in the xyzDiagram in the provided example:
+
+```js
+const themes = {
+  flowchart,
+  'flowchart-v2': flowchart,
+  sequence,
+  xyzDiagram,
+  //...
+};
+```
+
+The actual options and values for the colors are defined in **src/theme/theme-[xyz].js**. If you provide the options your diagram needs in the existing theme files then the theming will work smoothly without hiccups.

packages/mermaid/src/docs/community/new-diagram.md

@@ -1,52 +1,18 @@
 # Adding a New Diagram/Chart 📊
 
+### Examples
+
+Please refer to the following PRs on how to use Langium to add a new diagram grammar.
+
+- https://github.com/mermaid-js/mermaid/pull/4839
+- https://github.com/mermaid-js/mermaid/pull/4751
+
+```warning
+The below steps are a work in progress and will be updated soon.
+```
+
 ### Step 1: Grammar & Parsing
 
-#### Grammar
-
-This would be to define a JISON grammar for the new diagram type. That should start with a way to identify that the text in the mermaid tag is a diagram of that type. Create a new folder under diagrams for your new diagram type and a parser folder in it. This leads us to step 2.
-
-For instance:
-
-- the flowchart starts with the keyword _graph_
-- the sequence diagram starts with the keyword _sequenceDiagram_
-
-#### Store data found during parsing
-
-There are some jison specific sub steps here where the parser stores the data encountered when parsing the diagram, this data is later used by the renderer. You can during the parsing call an object provided to the parser by the user of the parser. This object can be called during parsing for storing data.
-
-```jison
-statement
-	: 'participant' actor  { $$='actor'; }
-	| signal               { $$='signal'; }
-	| note_statement       { $$='note';  }
-	| 'title' message      { yy.setTitle($2);  }
-	;
-```
-
-In the extract of the grammar above, it is defined that a call to the setTitle method in the data object will be done when parsing and the title keyword is encountered.
-
-```note
-Make sure that the `parseError` function for the parser is defined and calling `mermaid.parseError`. This way a common way of detecting parse errors is provided for the end-user.
-```
-
-For more info look at the example diagram type:
-
-The `yy` object has the following function:
-
-```javascript
-exports.parseError = function (err, hash) {
-  mermaid.parseError(err, hash);
-};
-```
-
-when parsing the `yy` object is initialized as per below:
-
-```javascript
-const parser = exampleParser.parser;
-parser.yy = db;
-```
-
 ### Step 2: Rendering
 
 Write a renderer that given the data found during parsing renders the diagram. To look at an example look at sequenceRenderer.js rather than the flowchart renderer as this is a more generic example.
@@ -62,52 +28,6 @@ would voice that as "U-M-L Deployment diagram." Another good key would be "deplo
 
 Note that the diagram type key does not have to be the same as the diagram keyword chosen for the [grammar](#grammar), but it is helpful if they are the same.
 
-### Step 4: The final piece - triggering the rendering
-
-At this point when mermaid is trying to render the diagram, it will detect it as being of the new type but there will be no match when trying to render the diagram. To fix this add a new case in the switch statement in main.js:init this should match the diagram type returned from step #2. The code in this new case statement should call the renderer for the diagram type with the data found by the parser as an argument.
-
-## Usage of the parser as a separate module
-
-### Setup
-
-```javascript
-const graph = require('./graphDb');
-const flow = require('./parser/flow');
-flow.parser.yy = graph;
-```
-
-### Parsing
-
-```javascript
-flow.parser.parse(text);
-```
-
-### Data extraction
-
-```javascript
-graph.getDirection();
-graph.getVertices();
-graph.getEdges();
-```
-
-The parser is also exposed in the mermaid api by calling:
-
-```javascript
-const parser = mermaid.getParser();
-```
-
-Note that the parse needs a graph object to store the data as per:
-
-```javascript
-flow.parser.yy = graph;
-```
-
-Look at `graphDb.js` for more details on that object.
-
-## Layout
-
-If you are using a dagre based layout, please use flowchart-v2 as a template and by doing that you will be using dagre-wrapper instead of dagreD3 which we are migrating away from.
-
 ### Common parts of a diagram
 
 There are a few features that are common between the different types of diagrams. We try to standardize the diagrams that work as similar as possible for the end user. The commonalities are:
@@ -137,33 +57,7 @@ See [the definition of aria-roledescription](https://www.w3.org/TR/wai-aria-1.1/
 
 The syntax for accessible titles and descriptions is described in [the Accessibility documentation section.](../config/accessibility.md)
 
-As a design goal, the jison syntax should be similar between the diagrams.
-
-```jison
-
-* lexical grammar */
-%lex
-%x acc_title
-%x acc_descr
-%x acc_descr_multiline
-
-%%
-accTitle\s*":"\s*                                { this.begin("acc_title");return 'acc_title'; }
-<acc_title>(?!\n|;|#)*[^\n]*                     { this.popState(); return "acc_title_value"; }
-accDescr\s*":"\s*                                { this.begin("acc_descr");return 'acc_descr'; }
-<acc_descr>(?!\n|;|#)*[^\n]*                     { this.popState(); return "acc_descr_value"; }
-accDescr\s*"{"\s*                                { this.begin("acc_descr_multiline");}
-<acc_descr_multiline>[\}]                        { this.popState(); }
-<acc_descr_multiline>[^\}]*                      return "acc_descr_multiline_value";
-
-statement
-    : acc_title acc_title_value  { $$=$2.trim();yy.setTitle($$); }
-    | acc_descr acc_descr_value  { $$=$2.trim();yy.setAccDescription($$); }
-    | acc_descr_multiline_value { $$=$1.trim();yy.setAccDescription($$); }
-
-```
-
-The functions for setting title and description are provided by a common module. This is the import from flowDb.js:
+The functions for setting title and description are provided by a common module. This is the import in flowDb.js:
 
 ```
 import {

packages/mermaid/src/docs/config/math.md

@@ -1,4 +1,4 @@
-# Math Configuration (v<MERMAID_RELEASE_VERSION>+)
+# Math Configuration (v10.9.0+)
 
 Mermaid supports rendering mathematical expressions through the [KaTeX](https://katex.org/) typesetter.
 

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

@@ -113,7 +113,7 @@ Communication tools and platforms
 - [phpBB](https://phpbb.com)
   - [phpbb-ext-mermaid](https://github.com/AlfredoRamos/phpbb-ext-mermaid)
 - [Slack](https://slack.com)
-  - [Mermaid Preview](https://github.com/JackuB/mermaid-for-slack)
+  - [Mermaid Preview](https://mermaid-preview.com)
 
 ### Wikis
 

packages/mermaid/src/docs/ecosystem/mermaid-chart.md

@@ -1,5 +1,9 @@
 # Mermaid Chart
 
+The Future of Diagramming & Visual Collaboration
+
+Try the Ultimate AI, Mermaid, and Visual Diagramming Suite by creating an account at [Mermaid Chart](https://www.mermaidchart.com/app/sign-up).
+
 <br />
 
 <a href="https://www.producthunt.com/posts/mermaid-chart?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-mermaid&#0045;chart" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=416671&theme=light" alt="Mermaid&#0032;Chart - A&#0032;smarter&#0032;way&#0032;to&#0032;create&#0032;diagrams | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
@@ -12,22 +16,26 @@
 
 - **Editor** - A web based editor for creating and editing Mermaid diagrams.
 
-- **Presentation** - A presentation mode for viewing Mermaid diagrams in a slideshow format.
+- **Visual Editor** - The Visual Editor enables users of all skill levels to create diagrams easily and efficiently, with both GUI and code-based editing options.
 
-- **Collaboration** - A web based collaboration feature for multi-user editing on Mermaid diagrams in real-time (Pro plan).
+- **AI Chat** - Use our embedded AI Chat to generate diagrams from natural language descriptions.
 
 - **Plugins** - A plugin system for extending the functionality of Mermaid.
 
-  Plugins are available for:
+  Official Mermaid Chart plugins:
 
-  - [ChatGPT](https://docs.mermaidchart.com/plugins/chatgpt)
+  - [Mermaid Chart GPT](https://chat.openai.com/g/g-1IRFKwq4G-mermaid-chart)
+  - [Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=MermaidChart.vscode-mermaid-chart)
   - [JetBrains IDE](https://plugins.jetbrains.com/plugin/23043-mermaid-chart)
   - [Microsoft PowerPoint and Word](https://appsource.microsoft.com/en-us/product/office/WA200006214?tab=Overview)
-  - [Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=MermaidChart.vscode-mermaid-chart)
 
-- **AI diagramming** - A feature for generating Mermaid diagrams from text using AI (Pro plan).
+  Visit our [Plugins](https://www.mermaidchart.com/plugins) page for more information.
 
-- **More** - To learn more, visit our [Product](https://www.mermaidchart.com/product) page.
+- **Collaboration** - A web based collaboration feature for multi-user editing on Mermaid diagrams in real-time (Pro and Enterprise plans).
+
+- **Comments** - Enhance collaboration by adding comments to diagrams.
+
+- **Presentations** - A presentation mode for viewing Mermaid diagrams in a slideshow format.
 
 ## Plans
 
@@ -37,11 +45,9 @@
 
 - **Enterprise** - A paid plan for enterprise use that includes all Pro features, and more.
 
-## Access
+To learn more, visit our [Pricing](https://mermaidchart.com/pricing) page.
 
-Sign up for a free account at [Mermaid Chart](https://www.mermaidchart.com/app/sign-up).
-
-Mermaid Chart is currently offering a 14-day free trial of our newly-launched Pro tier. To learn more, visit our [Pricing](https://mermaidchart.com/pricing) page.
+Mermaid Chart is currently offering a 14-day free trial on our Pro and Enterprise tiers. Sign up for a free account at [Mermaid Chart](https://www.mermaidchart.com/app/sign-up).
 
 ## Mermaid JS contributions
 

packages/mermaid/src/docs/news/announcements.md

@@ -4,13 +4,45 @@ outline: 'deep' # shows all h3 headings in outline in Vitepress
 
 # Announcements
 
-## 🚀 Mermaid Chart's Visual Editor for Flowcharts
+## 🚀 Exciting News from Mermaid Chart! 🚀
 
-The Mermaid Chart team is excited to introduce a new Visual Editor for flowcharts, enabling users of all skill levels to create diagrams easily and efficiently, with both GUI and code-based editing options.
+We're thrilled to announce that Mermaid Chart has successfully raised $7.5 million in Seed funding! 🌟 This achievement marks the beginning of a new era for Mermaid and Mermaid Chart.
 
-Create flowchart nodes, connect them with edges, update shapes, change colors, and edit labels with just a few clicks that automatically reflect in your diagram’s code for easy customizability.
+**Why It Matters for Mermaid Chart:**
 
-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.
+- **Empowering Collaboration**: Our tools are designed to enable faster, more efficient team collaboration across any distance, leveraging the best of text, voice, and automation.
+- **Opening New Doors**: Mermaid AI and our Visual Editor are breaking down barriers, making sophisticated diagramming accessible to everyone, not just software engineers.
+- **Looking Forward**: We're not stopping here! Expect groundbreaking features like automated documentation tools, advanced AI diagramming, and high-security on-premise solutions.
+
+**Why It Matters for Mermaid JS:**
+
+- **Continued support from Mermaid Chart**: At Mermaid Chart, we value our still-growing Mermaid JS roots. As such, we have funneled back development and support to the project. Thanks to the successful seed round, we can continue to ramp up these efforts.
+
+We are incredibly excited about the future and are grateful to the community, our team, and our investors for being part of this journey. Together, we're not just creating diagrams; we're designing the future of collaboration.
+
+🌐 Learn more about our groundbreaking tools and what's next for Mermaid Chart by visiting [our website](https://www.mermaidchart.com/blog/posts/mermaid-chart-raises-7.5m-to-reinvent-visual-collaoration-for-enterprises).
+
+Thank you for being part of our story. Here's to creating, innovating, and collaborating on a global scale!
+
+Knut Sveidqvist 🧜‍♂️✨
+
+## Mermaid Chart's Visual Editor for Flowcharts and Sequence diagrams
+
+The Mermaid Chart team is excited to introduce a new Visual Editor for Flowcharts and Sequence diagrams, enabling users of all skill levels to create diagrams easily and efficiently, with both GUI and code-based editing options.
+
+Learn more:
+
+- Visual Editor For Flowcharts
+
+  - [Blog post](https://www.mermaidchart.com/blog/posts/mermaid-chart-releases-new-visual-editor-for-flowcharts)
+
+  - [Demo video](https://www.youtube.com/watch?v=5aja0gijoO0)
+
+- Visual Editor For Sequence diagrams
+
+  - [Blog post](https://www.mermaidchart.com/blog/posts/mermaid-chart-unveils-visual-editor-for-sequence-diagrams)
+
+  - [Demo video](https://youtu.be/imc2u5_N6Dc)
 
 ## 📖 Blog posts
 

packages/mermaid/src/docs/news/blog.md

@@ -1,5 +1,47 @@
 # Blog
 
+## [How to Choose the Right Documentation Software](https://www.mermaidchart.com/blog/posts/how-to-choose-the-right-documentation-software/)
+
+7 May 2024 · 5 mins
+
+How to Choose the Right Documentation Software. Reliable and efficient documentation software is crucial in the fast-paced world of software development.
+
+## [AI in software diagramming: What trends will define the future?](https://www.mermaidchart.com/blog/posts/ai-in-software-diagramming/)
+
+24 April 2024 · 5 mins
+
+Artificial intelligence (AI) tools are changing the way developers work.
+
+## [Mermaid Chart Unveils Visual Editor for Sequence Diagrams](https://www.mermaidchart.com/blog/posts/mermaid-chart-unveils-visual-editor-for-sequence-diagrams/)
+
+8 April 2024 · 5 mins
+
+Sequence diagrams are excellent tools for communication and documentation.
+
+## [Modeling system states: It starts with a Turing machine](https://www.mermaidchart.com/blog/posts/modeling-system-states/)
+
+27 March 2024 · 12 mins
+
+In computer science, there are a few fundamental papers that, without exaggeration, changed everything.
+
+## [Mermaid Chart Raises $7.5M to Reinvent Visual Collaboration for Enterprises](https://www.mermaidchart.com/blog/posts/mermaid-chart-raises-7.5m-to-reinvent-visual-collaoration-for-enterprises/)
+
+20 March 2024 · 4 mins
+
+Mermaid Chart, the company offering text-based diagramming and workflow management tools, today announced it has raised $7.5 million in Seed funding.
+
+## [Mermaid Chart GPT Is Now Available In the GPT Store!](https://www.mermaidchart.com/blog/posts/mermaid-chart-gpt-is-now-available-in-the-gpt-store/)
+
+7 March 2024 · 3 mins
+
+Mermaid Chart GPT is Now Available In the GPT Store!
+
+## [How to Make a Flowchart with Mermaid Chart](https://www.mermaidchart.com/blog/posts/how-to-make-flowcharts-with-mermaid-chart/)
+
+30 January 2024 · 6 mins
+
+Learn how to make a flowchart with Mermaid Chart, the leading text-to-diagram platform for both developers and non-developers.
+
 ## [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

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

@@ -92,7 +92,7 @@ After processing the tags, the remaining metadata items are interpreted as follo
 | `until <otherTaskId>`                                | End date of preceding task                          | Start date of previously specified task `otherTaskID` | n/a      |
 
 ```note
-Support for keyword `until` was added in (v<MERMAID_RELEASE_VERSION>+). This can be used to define a task which is running until some other specific task or milestone starts.
+Support for keyword `until` was added in (v10.9.0+). This can be used to define a task which is running until some other specific task or milestone starts.
 ```
 
 For simplicity, the table does not show the use of multiple tasks listed with the `after` keyword. Here is an example of how to use it and how it's interpreted:

packages/mermaid/src/schemas/config.schema.yaml

@@ -23,7 +23,7 @@
 # - If adding a new object to `MermaidConfig` (e.g. a new diagram type),
 #   you may need to add it to `.vite/jsonSchemaPlugin.ts` and `src/docs.mts`
 #   to get the docs/default values to generate properly.
-$id: https://mermaid-js.github.io/schemas/config.schema.json
+$id: https://mermaid.js.org/schemas/config.schema.json
 $schema: https://json-schema.org/draft/2019-09/schema
 title: Mermaid Config
 type: object

pnpm-lock.yaml

@@ -227,14 +227,14 @@ importers:
         specifier: ^1.11.7
         version: 1.11.10
       dompurify:
-        specifier: ^3.0.5
-        version: 3.0.9
+        specifier: ^3.0.5 <3.1.7
+        version: 3.1.6
       elkjs:
         specifier: ^0.9.0
         version: 0.9.2
       katex:
         specifier: ^0.16.9
-        version: 0.16.9
+        version: 0.16.11
       khroma:
         specifier: ^2.0.0
         version: 2.1.0
@@ -8833,8 +8833,8 @@ packages:
       domelementtype: 2.3.0
     dev: true
 
-  /dompurify@3.0.9:
-    resolution: {integrity: sha512-uyb4NDIvQ3hRn6NiC+SIFaP4mJ/MdXlvtunaqK9Bn6dD3RuB/1S/gasEjDHD8eiaqdSael2vBv+hOs7Y+jhYOQ==}
+  /dompurify@3.1.6:
+    resolution: {integrity: sha512-cTOAhc36AalkjtBpfG6O8JimdTMWNXjiePT2xQH/ppBGi/4uIpmj8eKyIkMJErXWARyINV/sB38yf8JCLF5pbQ==}
     dev: false
 
   /domutils@3.1.0:
@@ -12081,8 +12081,8 @@ packages:
     engines: {node: '>=12.20'}
     dev: true
 
-  /katex@0.16.9:
-    resolution: {integrity: sha512-fsSYjWS0EEOwvy81j3vRA8TEAhQhKiqO+FQaKWp0m39qwOzHVBgAUBIXWj1pB+O2W3fIpNa6Y9KSKCVbfPhyAQ==}
+  /katex@0.16.11:
+    resolution: {integrity: sha512-RQrI8rlHY92OLf3rho/Ts8i/XvjgguEjOkO1BEXcU3N8BqPpSzBNwV/G0Ukr+P/l3ivvJUE/Fa/CwbS6HesGNQ==}
     hasBin: true
     dependencies:
       commander: 8.3.0

scripts/editor.bash

@@ -28,5 +28,5 @@ yarn install
 yarn link mermaid     
 
 # Force Build the site
-yarn run build -- --force
+yarn run build