fix: set root when globalThis is defined

feat(git-graph): GitGraph Bottom-to-Top Orientation

.commitlintrc.json

@@ -1,3 +0,0 @@
-{
-  "extends": ["@commitlint/config-conventional"]
-}

.eslintrc.cjs

@@ -14,7 +14,7 @@ module.exports = {
     },
     tsconfigRootDir: __dirname,
     sourceType: 'module',
-    ecmaVersion: 2020,
+    ecmaVersion: 2022,
     allowAutomaticSingleRunInference: true,
     project: ['./tsconfig.eslint.json', './packages/*/tsconfig.json'],
     parser: '@typescript-eslint/parser',
@@ -23,7 +23,7 @@ module.exports = {
     'eslint:recommended',
     'plugin:@typescript-eslint/recommended',
     'plugin:json/recommended',
-    'plugin:markdown/recommended',
+    'plugin:markdown/recommended-legacy',
     'plugin:@cspell/recommended',
     'prettier',
   ],

.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/e2e.yml

@@ -17,9 +17,19 @@ permissions:
   contents: read
 
 env:
-  # 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)  }}
-
+  # For PRs and MergeQueues, the target commit is used, and for push events to non-develop branches, github.event.previous is used if available. Otherwise, 'develop' is used.
+  targetHash: >-
+    ${{ 
+      github.event.pull_request.base.sha || 
+      github.event.merge_group.base_sha || 
+      (
+        (
+          (github.event_name == 'push' && github.ref == 'refs/heads/develop') || 
+          github.event.before == '0000000000000000000000000000000000000000'
+        ) && 'develop'
+      ) || 
+      github.event.before
+    }}
 jobs:
   cache:
     runs-on: ubuntu-latest
@@ -48,11 +58,26 @@ jobs:
         with:
           ref: ${{ env.targetHash }}
 
+      - name: Install dependencies
+        if: ${{ steps.cache-snapshot.outputs.cache-hit != 'true' }}
+        uses: cypress-io/github-action@v6
+        with:
+          # just perform install
+          runTests: false
+
+      - name: Calculate bundle size
+        if: ${{ steps.cache-snapshot.outputs.cache-hit != 'true'}}
+        run: |
+          pnpm run build:viz
+          mkdir -p cypress/snapshots/stats/base
+          mv stats cypress/snapshots/stats/base
+
       - name: Cypress run
-        uses: cypress-io/github-action@v4
+        uses: cypress-io/github-action@v6
         id: cypress-snapshot-gen
         if: ${{ steps.cache-snapshot.outputs.cache-hit != 'true' }}
         with:
+          install: false
           start: pnpm run dev
           wait-on: 'http://localhost:9000'
           browser: chrome
@@ -86,15 +111,30 @@ jobs:
           path: ./cypress/snapshots
           key: ${{ runner.os }}-snapshots-${{ env.targetHash }}
 
+      - name: Install dependencies
+        uses: cypress-io/github-action@v6
+        with:
+          runTests: false
+
+      - name: Output size diff
+        if: ${{ matrix.containers == 1 }}
+        run: |
+          pnpm run build:viz
+          mv stats cypress/snapshots/stats/head
+          echo '## Bundle size difference' >> "$GITHUB_STEP_SUMMARY"
+          echo '' >> "$GITHUB_STEP_SUMMARY"
+          npx tsx scripts/size.ts >> "$GITHUB_STEP_SUMMARY"
+
       # Install NPM dependencies, cache them correctly
       # and run all Cypress tests
       - name: Cypress run
-        uses: cypress-io/github-action@v4
+        uses: cypress-io/github-action@v6
         id: cypress
         # If CYPRESS_RECORD_KEY is set, run in parallel on all containers
         # Otherwise (e.g. if running from fork), we run on a single container only
         if: ${{ ( env.CYPRESS_RECORD_KEY != '' ) || ( matrix.containers == 1 ) }}
         with:
+          install: false
           start: pnpm run dev:coverage
           wait-on: 'http://localhost:9000'
           browser: chrome

.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

.husky/commit-msg

@@ -1,4 +0,0 @@
-#!/bin/sh
-# . "$(dirname "$0")/_/husky.sh"
-
-# npx --no-install commitlint --edit $1

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-pnpm run pre-commit
+NODE_OPTIONS="--max_old_space_size=8192" pnpm run pre-commit

.prettierrc.json

@@ -3,5 +3,6 @@
   "printWidth": 100,
   "singleQuote": true,
   "useTabs": false,
-  "tabWidth": 2
+  "tabWidth": 2,
+  "trailingComma": "es5"
 }

cypress/integration/other/configuration.spec.js

@@ -118,11 +118,53 @@ describe('Configuration', () => {
     it('should not taint the initial configuration when using multiple directives', () => {
       const url = 'http://localhost:9000/regression/issue-1874.html';
       cy.visit(url);
-
-      cy.get('svg');
+      cy.window().should('have.property', 'rendered', true);
+      cy.get('svg').should('be.visible');
       cy.matchImageSnapshot(
         'configuration.spec-should-not-taint-initial-configuration-when-using-multiple-directives'
       );
     });
   });
+
+  describe('suppressErrorRendering', () => {
+    beforeEach(() => {
+      cy.on('uncaught:exception', (err, runnable) => {
+        return !err.message.includes('Parse error on line');
+      });
+    });
+
+    it('should not render error diagram if suppressErrorRendering is set', () => {
+      const url = 'http://localhost:9000/suppressError.html?suppressErrorRendering=true';
+      cy.visit(url);
+      cy.window().should('have.property', 'rendered', true);
+      cy.get('#test')
+        .find('svg')
+        .should(($svg) => {
+          // all failing diagrams should not appear!
+          expect($svg).to.have.length(2);
+          // none of the diagrams should be error diagrams
+          expect($svg).to.not.contain('Syntax error');
+        });
+      cy.matchImageSnapshot(
+        'configuration.spec-should-not-render-error-diagram-if-suppressErrorRendering-is-set'
+      );
+    });
+
+    it('should render error diagram if suppressErrorRendering is not set', () => {
+      const url = 'http://localhost:9000/suppressError.html';
+      cy.visit(url);
+      cy.window().should('have.property', 'rendered', true);
+      cy.get('#test')
+        .find('svg')
+        .should(($svg) => {
+          // all five diagrams should be rendered
+          expect($svg).to.have.length(5);
+          // some of the diagrams should be error diagrams
+          expect($svg).to.contain('Syntax error');
+        });
+      cy.matchImageSnapshot(
+        'configuration.spec-should-render-error-diagram-if-suppressErrorRendering-is-not-set'
+      );
+    });
+  });
 });

cypress/integration/rendering/flowchart-elk.spec.js

@@ -844,3 +844,42 @@ end
     });
   });
 });
+
+describe('Title and arrow styling #4813', () => {
+  it('should render a flowchart with title', () => {
+    const titleString = 'Test Title';
+    renderGraph(
+      `---
+      title: ${titleString}
+      ---
+      flowchart LR
+      A-->B
+      A-->C`,
+      { flowchart: { defaultRenderer: 'elk' } }
+    );
+    cy.get('svg').should((svg) => {
+      const title = svg[0].querySelector('text');
+      expect(title.textContent).to.contain(titleString);
+    });
+  });
+
+  it('Render with stylized arrows', () => {
+    renderGraph(
+      `
+      flowchart LR
+      A-->B
+      B-.-oC
+      C==xD
+      D ~~~ A`,
+      { flowchart: { defaultRenderer: 'elk' } }
+    );
+    cy.get('svg').should((svg) => {
+      const edges = svg[0].querySelectorAll('.edges path');
+      console.log(edges);
+      expect(edges[0]).to.have.attr('pattern', 'solid');
+      expect(edges[1]).to.have.attr('pattern', 'dotted');
+      expect(edges[2]).to.have.css('stroke-width', '3.5px');
+      expect(edges[3]).to.have.css('stroke-width', '1.5px');
+    });
+  });
+});

cypress/integration/rendering/flowchart-v2.spec.js

@@ -760,6 +760,51 @@ A ~~~ B
     );
   });
 
+  it('3258: Should render subgraphs with main graph nodeSpacing and rankSpacing', () => {
+    imgSnapshotTest(
+      `---
+      title: Subgraph nodeSpacing and rankSpacing example
+      ---
+      flowchart LR
+        X --> Y
+        subgraph X
+          direction LR
+          A
+          C
+        end
+        subgraph Y
+          B
+          D
+        end
+      `,
+      { flowchart: { nodeSpacing: 1, rankSpacing: 1 } }
+    );
+  });
+
+  it('3258: Should render subgraphs with large nodeSpacing and rankSpacing', () => {
+    imgSnapshotTest(
+      `---
+      title: Subgraph nodeSpacing and rankSpacing example
+      config:
+        flowchart: 
+          nodeSpacing: 250
+          rankSpacing: 250
+      ---
+      flowchart LR
+        X --> Y
+        subgraph X
+          direction LR
+          A
+          C
+        end
+        subgraph Y
+          B
+          D
+        end
+      `
+    );
+  });
+
   describe('Markdown strings flowchart (#4220)', () => {
     describe('html labels', () => {
       it('With styling and classes', () => {
@@ -904,6 +949,18 @@ end
         );
       });
     });
+
+    it('should not auto wrap when markdownAutoWrap is false', () => {
+      imgSnapshotTest(
+        `flowchart TD
+    angular_velocity["\`**angular_velocity**
+      *angular_displacement / duration*
+      [rad/s, 1/s]
+      {vector}\`"]
+    frequency["frequency\n(1 / period_duration)\n[Hz, 1/s]"]`,
+        { markdownAutoWrap: false }
+      );
+    });
   });
   describe('Subgraph title margins', () => {
     it('Should render subgraphs with title margins set (LR)', () => {

cypress/integration/rendering/gantt.spec.js

@@ -101,12 +101,12 @@ describe('Gantt diagram', () => {
       title Adding GANTT diagram to mermaid
       excludes weekdays 2014-01-10
       todayMarker off
-  
+
       section team's critical event
       deadline A           :milestone, crit, deadlineA, 2024-02-01, 0
       deadline B           :milestone, crit, deadlineB, 2024-02-15, 0
       boss on leave        :bossaway, 2024-01-28, 2024-02-11
-  
+
       section new intern
       onboarding           :onboarding, 2024-01-02, 1w
       literature review    :litreview, 2024-01-02, 10d
@@ -573,7 +573,28 @@ describe('Gantt diagram', () => {
       `
     );
   });
-
+  it('should render a gantt diagram exculding friday and saturday', () => {
+    imgSnapshotTest(
+      `gantt
+      title A Gantt Diagram
+      dateFormat  YYYY-MM-DD
+      excludes weekends
+      weekend friday
+      section Section1
+      A task :a1, 2024-02-28, 10d`
+    );
+  });
+  it('should render a gantt diagram exculding saturday and sunday', () => {
+    imgSnapshotTest(
+      `gantt
+      title A Gantt Diagram
+      dateFormat  YYYY-MM-DD
+      excludes weekends
+      weekend saturday
+      section Section1
+      A task :a1, 2024-02-28, 10d`
+    );
+  });
   it('should render when compact is true', () => {
     imgSnapshotTest(
       `

cypress/integration/rendering/gitGraph.spec.js

@@ -1013,4 +1013,450 @@ gitGraph TB:
       { gitGraph: { parallelCommits: true } }
     );
   });
+  describe('Git-Graph Bottom-to-Top Orientation Tests', () => {
+    it('50: should render a simple gitgraph with commit on main branch | Vertical Branch - Bottom-to-top', () => {
+      imgSnapshotTest(
+        `gitGraph BT:
+         commit id: "1"
+         commit id: "2"
+         commit id: "3"
+        `,
+        {}
+      );
+    });
+    it('51: should render a simple gitgraph with commit on main branch with Id | Vertical Branch - Bottom-to-top', () => {
+      imgSnapshotTest(
+        `gitGraph BT:
+         commit id: "One"
+         commit id: "Two"
+         commit id: "Three"
+        `,
+        {}
+      );
+    });
+    it('52: should render a simple gitgraph with different commitTypes on main branch | Vertical Branch - Bottom-to-top', () => {
+      imgSnapshotTest(
+        `gitGraph BT:
+         commit id: "Normal Commit"
+         commit id: "Reverse Commit" type: REVERSE
+         commit id: "Highlight Commit" type: HIGHLIGHT
+        `,
+        {}
+      );
+    });
+    it('53: should render a simple gitgraph with tags commitTypes on main branch | Vertical Branch - Bottom-to-top', () => {
+      imgSnapshotTest(
+        `gitGraph BT:
+         commit id: "Normal Commit with tag" tag: "v1.0.0"
+         commit id: "Reverse Commit with tag" type: REVERSE tag: "RC_1"
+         commit id: "Highlight Commit" type: HIGHLIGHT  tag: "8.8.4"
+        `,
+        {}
+      );
+    });
+    it('54: should render a simple gitgraph with two branches | Vertical Branch - Bottom-to-top', () => {
+      imgSnapshotTest(
+        `gitGraph BT:
+         commit id: "1"
+         commit id: "2"
+         branch develop
+         checkout develop
+         commit id: "3"
+         commit id: "4"
+         checkout main
+         commit id: "5"
+         commit id: "6"
+        `,
+        {}
+      );
+    });
+    it('55: should render a simple gitgraph with two branches and merge commit | Vertical Branch - Bottom-to-top', () => {
+      imgSnapshotTest(
+        `gitGraph BT:
+         commit id: "1"
+         commit id: "2"
+         branch develop
+         checkout develop
+         commit id: "3"
+         commit id: "4"
+         checkout main
+         merge develop
+         commit id: "5"
+         commit id: "6"
+        `,
+        {}
+      );
+    });
+    it('56: should render a simple gitgraph with three branches and tagged merge commit | Vertical Branch - Bottom-to-top', () => {
+      imgSnapshotTest(
+        `gitGraph BT:
+         commit id: "1"
+         commit id: "2"
+         branch nice_feature
+         checkout nice_feature
+         commit id: "3"
+         checkout main
+         commit id: "4"
+         checkout nice_feature
+         branch very_nice_feature
+         checkout very_nice_feature
+         commit id: "5"
+         checkout main
+         commit id: "6"
+         checkout nice_feature
+         commit id: "7"
+         checkout main
+         merge nice_feature id: "12345" tag: "my merge commit"
+         checkout very_nice_feature
+         commit id: "8"
+         checkout main
+         commit id: "9"
+        `,
+        {}
+      );
+    });
+    it('57: should render a simple gitgraph with more than 8 branches &  overriding variables | Vertical Branch - Bottom-to-top', () => {
+      imgSnapshotTest(
+        `%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
+          'gitBranchLabel0': '#ffffff',
+          'gitBranchLabel1': '#ffffff',
+          'gitBranchLabel2': '#ffffff',
+          'gitBranchLabel3': '#ffffff',
+          'gitBranchLabel4': '#ffffff',
+          'gitBranchLabel5': '#ffffff',
+          'gitBranchLabel6': '#ffffff',
+          'gitBranchLabel7': '#ffffff',
+    } } }%%
+    gitGraph BT:
+      checkout main
+      branch branch1
+      branch branch2
+      branch branch3
+      branch branch4
+      branch branch5
+      branch branch6
+      branch branch7
+      branch branch8
+      branch branch9
+      checkout branch1
+      commit id: "1"
+        `,
+        {}
+      );
+    });
+    it('58: should render a simple gitgraph with rotated labels | Vertical Branch - Bottom-to-top', () => {
+      imgSnapshotTest(
+        `%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'gitGraph': {
+          'rotateCommitLabel': true
+    } } }%%
+          gitGraph BT:
+          commit id: "75f7219e83b321cd3fdde7dcf83bc7c1000a6828"
+          commit id: "0db4784daf82736dec4569e0dc92980d328c1f2e"
+          commit id: "7067e9973f9eaa6cd4a4b723c506d1eab598e83e"
+          commit id: "66972321ad6c199013b5b31f03b3a86fa3f9817d"
+        `,
+        {}
+      );
+    });
+    it('59: should render a simple gitgraph with horizontal labels | Vertical Branch - Bottom-to-top', () => {
+      imgSnapshotTest(
+        `%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'gitGraph': {
+          'rotateCommitLabel': false
+    } } }%%
+          gitGraph BT:
+          commit id: "Alpha"
+          commit id: "Beta"
+          commit id: "Gamma"
+          commit id: "Delta"
+        `,
+        {}
+      );
+    });
+    it('60: should render a simple gitgraph with cherry pick commit | Vertical Branch - Bottom-to-top', () => {
+      imgSnapshotTest(
+        `
+      gitGraph BT:
+         commit id: "ZERO"
+         branch develop
+         commit id:"A"
+         checkout main
+         commit id:"ONE"
+         checkout develop
+         commit id:"B"
+         checkout main
+         commit id:"TWO"
+         cherry-pick id:"A"
+         commit id:"THREE"
+         checkout develop
+         commit id:"C"
+        `,
+        {}
+      );
+    });
+    it('61: should render a gitgraph with cherry pick commit with custom tag | Vertical Branch - Bottom-to-top', () => {
+      imgSnapshotTest(
+        `
+      gitGraph BT:
+         commit id: "ZERO"
+         branch develop
+         commit id:"A"
+         checkout main
+         commit id:"ONE"
+         checkout develop
+         commit id:"B"
+         checkout main
+         commit id:"TWO"
+         cherry-pick id:"A" tag: "snapshot"
+         commit id:"THREE"
+         checkout develop
+         commit id:"C"
+        `,
+        {}
+      );
+    });
+    it('62: should render a gitgraph with cherry pick commit with no tag | Vertical Branch - Bottom-to-top', () => {
+      imgSnapshotTest(
+        `
+      gitGraph BT:
+         commit id: "ZERO"
+         branch develop
+         commit id:"A"
+         checkout main
+         commit id:"ONE"
+         checkout develop
+         commit id:"B"
+         checkout main
+         commit id:"TWO"
+         cherry-pick id:"A" tag: ""
+         commit id:"THREE"
+         checkout develop
+         commit id:"C"
+        `,
+        {}
+      );
+    });
+    it('63: should render a simple gitgraph with two cherry pick commit | Vertical Branch - Bottom-to-top', () => {
+      imgSnapshotTest(
+        `
+      gitGraph BT:
+         commit id: "ZERO"
+         branch develop
+         commit id:"A"
+         checkout main
+         commit id:"ONE"
+         checkout develop
+         commit id:"B"
+         branch featureA
+         commit id:"FIX"
+         commit id: "FIX-2"
+         checkout main
+         commit id:"TWO"
+         cherry-pick id:"A"
+         commit id:"THREE"
+         cherry-pick id:"FIX"
+         checkout develop
+         commit id:"C"
+         merge featureA
+        `,
+        {}
+      );
+    });
+    it('64: should render commits for more than 8 branches | Vertical Branch - Bottom-to-top', () => {
+      imgSnapshotTest(
+        `
+        gitGraph BT:
+        checkout main
+        %% Make sure to manually set the ID of all commits, for consistent visual tests
+        commit id: "1-abcdefg"
+        checkout main
+        branch branch1
+        commit id: "2-abcdefg"
+        checkout main
+        merge branch1
+        branch branch2
+        commit id: "3-abcdefg"
+        checkout main
+        merge branch2
+        branch branch3
+        commit id: "4-abcdefg"
+        checkout main
+        merge branch3
+        branch branch4
+        commit id: "5-abcdefg"
+        checkout main
+        merge branch4
+        branch branch5
+        commit id: "6-abcdefg"
+        checkout main
+        merge branch5
+        branch branch6
+        commit id: "7-abcdefg"
+        checkout main
+        merge branch6
+        branch branch7
+        commit id: "8-abcdefg"
+        checkout main
+        merge branch7
+        branch branch8
+        commit id: "9-abcdefg"
+        checkout main
+        merge branch8
+        branch branch9
+        commit id: "10-abcdefg"
+        `,
+        {}
+      );
+    });
+    it('65: should render a simple gitgraph with three branches,custom merge commit id,tag,type | Vertical Branch - Bottom-to-top', () => {
+      imgSnapshotTest(
+        `gitGraph BT:
+         commit id: "1"
+         commit id: "2"
+         branch nice_feature
+         checkout nice_feature
+         commit id: "3"
+         checkout main
+         commit id: "4"
+         checkout nice_feature
+         branch very_nice_feature
+         checkout very_nice_feature
+         commit id: "5"
+         checkout main
+         commit id: "6"
+         checkout nice_feature
+         commit id: "7"
+         checkout main
+         merge nice_feature id: "customID" tag: "customTag" type: REVERSE
+         checkout very_nice_feature
+         commit id: "8"
+         checkout main
+         commit id: "9"
+        `,
+        {}
+      );
+    });
+    it('66: should render a simple gitgraph with a title | Vertical Branch - Bottom-to-top', () => {
+      imgSnapshotTest(
+        `---
+  title: simple gitGraph
+  ---
+  gitGraph BT:
+    commit id: "1-abcdefg"
+  `,
+        {}
+      );
+    });
+    it('67: should render a simple gitgraph overlapping commits | Vertical Branch - Bottom-to-top', () => {
+      imgSnapshotTest(
+        `gitGraph BT:
+         commit id:"s1"
+         commit id:"s2"
+         branch branch1
+         commit id:"s3"
+         commit id:"s4"
+         checkout main
+         commit id:"s5"
+         checkout branch1
+         commit id:"s6"
+         commit id:"s7"
+         merge main
+        `,
+        {}
+      );
+    });
+    it('68: should render a simple gitgraph with two branches from same commit | Vertical Branch - Bottom-to-top', () => {
+      imgSnapshotTest(
+        `gitGraph BT:
+        commit id:"1-abcdefg"
+        commit id:"2-abcdefg"
+        branch feature-001
+        commit id:"3-abcdefg"
+        commit id:"4-abcdefg"
+        checkout main
+        branch feature-002
+        commit id:"5-abcdefg"
+        checkout feature-001
+        merge feature-002
+        `,
+        {}
+      );
+    });
+    it('69: should render GitGraph with branch that is not used immediately | Vertical Branch - Bottom-to-top', () => {
+      imgSnapshotTest(
+        `gitGraph BT:
+        commit id:"1-abcdefg"
+        branch x
+        checkout main
+        commit id:"2-abcdefg"
+        checkout x
+        commit id:"3-abcdefg"
+        checkout main
+        merge x
+        `,
+        {}
+      );
+    });
+    it('70: should render GitGraph with branch and sub-branch neither of which used immediately | Vertical Branch - Bottom-to-top', () => {
+      imgSnapshotTest(
+        `gitGraph BT:
+        commit id:"1-abcdefg"
+        branch x
+        checkout main
+        commit id:"2-abcdefg"
+        checkout x
+        commit id:"3-abcdefg"
+        checkout main
+        merge x
+        checkout x
+        branch y
+        checkout x
+        commit id:"4-abcdefg"
+        checkout y
+        commit id:"5-abcdefg"
+        checkout x
+        merge y
+        `,
+        {}
+      );
+    });
+    it('71: should render GitGraph with parallel commits | Vertical Branch - Bottom-to-top', () => {
+      imgSnapshotTest(
+        `gitGraph BT:
+        commit id:"1-abcdefg"
+        commit id:"2-abcdefg"
+        branch develop
+        commit id:"3-abcdefg"
+        commit id:"4-abcdefg"
+        checkout main
+        branch feature
+        commit id:"5-abcdefg"
+        commit id:"6-abcdefg"
+        checkout main
+        commit id:"7-abcdefg"
+        commit id:"8-abcdefg"
+        `,
+        { gitGraph: { parallelCommits: true } }
+      );
+    });
+    it('72: should render GitGraph with unconnected branches and parallel commits | Vertical Branch - Bottom-to-top', () => {
+      imgSnapshotTest(
+        `gitGraph BT:
+        branch dev
+        branch v2
+        branch feat
+        commit id:"1-abcdefg"
+        commit id:"2-abcdefg"
+        checkout main
+        commit id:"3-abcdefg"
+        checkout dev
+        commit id:"4-abcdefg"
+        checkout v2
+        commit id:"5-abcdefg"
+        checkout main
+        commit id:"6-abcdefg"
+        `,
+        { gitGraph: { parallelCommits: true } }
+      );
+    });
+  });
 });

cypress/integration/rendering/sequencediagram.spec.js

@@ -375,7 +375,7 @@ context('Sequence diagram', () => {
         {}
       );
     });
-    it('should have actor-top and actor-bottom classes on top and bottom actor box and symbol', () => {
+    it('should have actor-top and actor-bottom classes on top and bottom actor box and symbol and actor-box and actor-man classes for text tags', () => {
       imgSnapshotTest(
         `
         sequenceDiagram
@@ -394,6 +394,9 @@ context('Sequence diagram', () => {
       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');
+
+      cy.get('text.actor-box').should('include.text', 'Alice');
+      cy.get('text.actor-man').should('include.text', 'Bob');
     });
     it('should render long notes left of actor', () => {
       imgSnapshotTest(
@@ -807,7 +810,10 @@ context('Sequence diagram', () => {
         note left of Alice: config: mirrorActors=true<br/>directive: mirrorActors=false
         Bob->>Alice: Short as well
       `,
-        { logLevel: 0, sequence: { mirrorActors: true, noteFontSize: 18, noteFontFamily: 'Arial' } }
+        {
+          logLevel: 0,
+          sequence: { mirrorActors: true, noteFontSize: 18, noteFontFamily: 'Arial' },
+        }
       );
     });
   });
@@ -858,7 +864,10 @@ context('Sequence diagram', () => {
         a->>j: Hello John, how are you?
         j-->>a: Great!
       `,
-        { logLevel: 0, sequence: { mirrorActors: true, noteFontSize: 18, noteFontFamily: 'Arial' } }
+        {
+          logLevel: 0,
+          sequence: { mirrorActors: true, noteFontSize: 18, noteFontFamily: 'Arial' },
+        }
       );
     });
     it('should support actor links and properties when not mirrored EXPERIMENTAL: USE WITH CAUTION', () => {

cypress/platform/ashish2.html

@@ -33,7 +33,9 @@
         background-image: radial-gradient(#fff 1%, transparent 11%),
           radial-gradient(#fff 1%, transparent 11%);
         background-size: 20px 20px;
-        background-position: 0 0, 10px 10px;
+        background-position:
+          0 0,
+          10px 10px;
         background-repeat: repeat;
       }
       .malware {

cypress/platform/click_security_loose.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <meta charset="utf-8" />

cypress/platform/click_security_other.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <meta charset="utf-8" />

cypress/platform/click_security_sandbox.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <meta charset="utf-8" />

cypress/platform/click_security_strict.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <meta charset="utf-8" />

cypress/platform/css1.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <meta charset="utf-8" />

cypress/platform/empty.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />

cypress/platform/interaction.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <meta charset="utf-8" />

cypress/platform/regression/issue-1874.html

@@ -21,7 +21,11 @@ sequenceDiagram
     mermaid.initialize({
       theme: 'base',
       themeVariables: {},
-      startOnLoad: true,
+      startOnLoad: false,
     });
+    await mermaid.run();
+    if (window.Cypress) {
+      window.rendered = true;
+    }
   </script>
 </html>

cypress/platform/render-after-error.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <meta charset="utf-8" />

cypress/platform/rerender.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <meta charset="utf-8" />

cypress/platform/subgraph.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <meta charset="utf-8" />

cypress/platform/suppressError.html

@@ -0,0 +1,59 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <title>Mermaid Quick Test Page</title>
+    <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
+  </head>
+  <body>
+    <div id="test">
+      <pre class="mermaid">
+  flowchart
+      a[This should be visible]
+    </pre
+      >
+      <pre class="mermaid">
+  flowchart
+    a --< b
+    </pre
+      >
+      <pre class="mermaid">
+  flowchart
+      a[This should be visible]
+    </pre
+      >
+      <pre class="mermaid">
+  ---
+  config:
+    suppressErrorRendering: true # This should not affect anything, as suppressErrorRendering is a secure config
+  ---
+  flowchart
+    a --< b
+    </pre
+      >
+      <pre class="mermaid">
+  ---
+  config:
+    suppressErrorRendering: false # This should not affect anything, as suppressErrorRendering is a secure config
+  ---
+  flowchart
+    a --< b
+    </pre
+      >
+    </div>
+    <script type="module">
+      import mermaid from './mermaid.esm.mjs';
+      const shouldSuppress =
+        new URLSearchParams(window.location.search).get('suppressErrorRendering') === 'true';
+      mermaid.initialize({ startOnLoad: false, suppressErrorRendering: shouldSuppress });
+      try {
+        await mermaid.run();
+      } catch {
+        if (window.Cypress) {
+          window.rendered = true;
+        }
+      }
+    </script>
+  </body>
+</html>

cypress/platform/vertices.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <meta charset="utf-8" />

cypress/platform/viewer.js

@@ -1,4 +1,5 @@
 import mermaid from './mermaid.esm.mjs';
+import flowchartELK from './mermaid-flowchart-elk.esm.mjs';
 import externalExample from './mermaid-example-diagram.esm.mjs';
 import zenUml from './mermaid-zenuml.esm.mjs';
 
@@ -45,7 +46,7 @@ const contentLoaded = async function () {
       document.getElementsByTagName('body')[0].appendChild(div);
     }
 
-    await mermaid.registerExternalDiagrams([externalExample, zenUml]);
+    await mermaid.registerExternalDiagrams([externalExample, zenUml, flowchartELK]);
     mermaid.initialize(graphObj.mermaid);
     await mermaid.run();
   }

cypress/platform/xss22.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />

demos/block.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en" xmlns="http://www.w3.org/1999/html">
   <head>
     <meta charset="utf-8" />

demos/c4context.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />

demos/classchart.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />

demos/dataflowchart.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />

demos/dev/example.html

@@ -39,6 +39,8 @@ graph TB
 
     <script type="module">
       import mermaid from '/mermaid.esm.mjs';
+      import flowchartELK from '/mermaid-flowchart-elk.esm.mjs';
+      await mermaid.registerExternalDiagrams([flowchartELK]);
       async function render(str) {
         const { svg } = await mermaid.render('dynamic', str);
         document.getElementById('dynamicDiagram').innerHTML = svg;

demos/er.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />

demos/error.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />

demos/flowchart-elk.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />

demos/flowchart.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
@@ -1591,6 +1591,33 @@
     </pre>
     <hr />
 
+    <pre class="mermaid">
+      ---
+      title: Subgraph nodeSpacing and rankSpacing example
+      config:
+        flowchart:
+          nodeSpacing: 1
+          rankSpacing: 1
+      ---
+
+      flowchart LR
+      
+      X --> Y
+      
+      subgraph X
+        direction LR
+        A
+        C
+      end
+      
+      subgraph Y
+        direction LR
+        B
+        D
+      end
+    </pre>
+    <hr />
+
     <h1 id="link-clicked">Anchor for "link-clicked" test</h1>
 
     <script type="module">

demos/gantt.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />

demos/git.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
@@ -40,6 +40,19 @@
     checkout main
     merge newbranch
     </pre>
+    <pre class="mermaid">
+      ---
+      title: Simple "branch and merge" (bottom-to-top)
+      ---
+      gitGraph BT:
+      commit
+      branch newbranch
+      checkout newbranch
+      commit
+      checkout main
+      merge newbranch
+      </pre
+    >
     <h2>Continuous development graph</h2>
     <pre class="mermaid">
     ---
@@ -73,6 +86,23 @@
     checkout main
     merge develop
     </pre>
+    <pre class="mermaid">
+      ---
+      title: Continuous development (bottom-to-top)
+      ---
+      gitGraph BT:
+      commit
+      branch develop
+      checkout develop
+      commit
+      checkout main
+      merge develop
+      checkout develop
+      commit
+      checkout main
+      merge develop
+      </pre
+    >
     <h2>Merge feature to advanced main graph</h2>
     <pre class="mermaid">
     ---
@@ -100,6 +130,20 @@
     commit
     merge newbranch
     </pre>
+    <pre class="mermaid">
+      ---
+      title: Merge feature to advanced main (bottom-to-top)
+      ---
+      gitGraph BT:
+      commit
+      branch newbranch
+      checkout newbranch
+      commit
+      checkout main
+      commit
+      merge newbranch
+      </pre
+    >
     <h2>Two-way merges</h2>
     <pre class="mermaid">
     ---
@@ -137,6 +181,25 @@
     checkout main
     merge develop
     </pre>
+    <pre class="mermaid">
+      ---
+      title: Two-way merges (bottom-to-top)
+      ---
+      gitGraph BT:
+      commit
+      branch develop
+      checkout develop
+      commit
+      checkout main
+      merge develop
+      commit
+      checkout develop
+      merge main
+      commit
+      checkout main
+      merge develop
+      </pre
+    >
     <h2>Cherry-pick from branch graph</h2>
     <pre class="mermaid">
     ---
@@ -170,6 +233,22 @@
     checkout main
     cherry-pick id: "Pick me"
     </pre>
+    <pre class="mermaid">
+      ---
+      title: Cherry-pick from branch (bottom-to-top)
+      ---
+      gitGraph BT:
+      commit
+      branch newbranch
+      checkout newbranch
+      commit id: "Pick me"
+      checkout main
+      commit
+      checkout newbranch
+      commit
+      checkout main
+      cherry-pick id: "Pick me"
+    </pre>
     <h2>Cherry-pick from main graph</h2>
     <pre class="mermaid">
     ---
@@ -199,6 +278,21 @@
     commit
     cherry-pick id: "A"
     </pre>
+    <pre class="mermaid">
+      ---
+      title: Cherry-pick from main (bottom-to-top)
+      ---
+      gitGraph BT:
+      commit
+      branch develop
+      commit
+      checkout main
+      commit id:"A"
+      checkout develop
+      commit
+      cherry-pick id: "A"
+      </pre
+    >
     <h2>Cherry-pick then merge graph</h2>
     <pre class="mermaid">
     ---
@@ -234,6 +328,24 @@
     cherry-pick id: "Pick me"
     merge newbranch
     </pre>
+    <pre class="mermaid">
+      ---
+      title: Cherry-pick then merge (bottom-to-top)
+      ---
+      gitGraph BT:
+      commit
+      branch newbranch
+      checkout newbranch
+      commit id: "Pick me"
+      checkout main
+      commit
+      checkout newbranch
+      commit
+      checkout main
+      cherry-pick id: "Pick me"
+      merge newbranch
+      </pre
+    >
     <h2>Merge from main onto undeveloped branch graph</h2>
     <pre class="mermaid">
     ---
@@ -261,6 +373,20 @@
     checkout develop
     merge main
     </pre>
+    <pre class="mermaid">
+      ---
+      title: Merge from main onto undeveloped branch (bottom-to-top)
+      ---
+      gitGraph BT:
+      commit
+      branch develop
+      commit
+      checkout main
+      commit
+      checkout develop
+      merge main
+      </pre
+    >
     <h2>Merge from main onto developed branch graph</h2>
     <pre class="mermaid">
     ---
@@ -290,6 +416,21 @@
     commit
     merge main
     </pre>
+    <pre class="mermaid">
+      ---
+      title: Merge from main onto developed branch (bottom-to-top)
+      ---
+      gitGraph BT:
+      commit
+      branch develop
+      commit
+      checkout main
+      commit
+      checkout develop
+      commit
+      merge main
+      </pre
+    >
     <h2>Two branches from same commit graph</h2>
     <pre class="mermaid">
     ---
@@ -323,6 +464,23 @@
     checkout feature-001
     merge feature-002
     </pre>
+    <pre class="mermaid">
+      ---
+      title: Two branches from same commit (bottom-to-top)
+      ---
+      gitGraph BT:
+      commit
+      commit
+      branch feature-001
+      commit
+      commit
+      checkout main
+      branch feature-002
+      commit
+      checkout feature-001
+      merge feature-002
+      </pre
+    >
     <h2>Three branches and a cherry-pick from each graph</h2>
     <pre class="mermaid">
     ---
@@ -372,6 +530,30 @@
     commit id:"C"
     merge featureA
     </pre>
+    <pre class="mermaid">
+    ---
+    title: Three branches and a cherry-pick from each (bottom-to-top)
+    ---
+    gitGraph BT:
+    commit id: "ZERO"
+    branch develop
+    commit id:"A"
+    checkout main
+    commit id:"ONE"
+    checkout develop
+    commit id:"B"
+    branch featureA
+    commit id:"FIX"
+    commit id: "FIX-2"
+    checkout main
+    commit id:"TWO"
+    cherry-pick id:"A"
+    commit id:"THREE"
+    cherry-pick id:"FIX"
+    checkout develop
+    commit id:"C"
+    merge featureA
+    </pre>
     <script type="module">
       import mermaid from './mermaid.esm.mjs';
       const ALLOWED_TAGS = [

demos/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
@@ -18,6 +18,7 @@
     <p>
       Some of these pages have duplicates; some are slow to load because they have so many graphs.
     </p>
+    <p>You can test custom code in the <a href="./dev/example.html">development page</a>.</p>
     <p>
       If you'd like to clean up one of the pages, please feel free to
       <a href="https://github.com/mermaid-js/mermaid/pulls">submit a pull request (PR).</a>

demos/info.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />

demos/journey.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />

demos/mindmap.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />

demos/packet.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />

demos/pie.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />

demos/quadrantchart.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />

demos/requirements.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />

demos/sankey.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en" xmlns="http://www.w3.org/1999/html">
   <head>
     <meta charset="utf-8" />

demos/sequence.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />

demos/state.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en" xmlns="http://www.w3.org/1999/html">
   <head>
     <meta charset="utf-8" />

demos/timeline.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <meta charset="utf-8" />

demos/xychart.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />

demos/zenuml.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />

docs/community/new-diagram-jison.md

@@ -0,0 +1,224 @@
+> **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,41 +62,17 @@ 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 in flowDb.js:
 
 ```
-
-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';
+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.
 

docs/config/directives.md

@@ -21,17 +21,17 @@ While directives allow you to change most of the default configuration settings,
 
 Mermaid basically supports two types of configuration options to be overridden by directives.
 
-1.  _General/Top Level configurations_ : These are the configurations that are available and applied to all the diagram. **Some of the most important top-level** configurations are:
+1. _General/Top Level configurations_ : These are the configurations that are available and applied to all the diagram. **Some of the most important top-level** configurations are:
 
-    - theme
-    - fontFamily
-    - logLevel
-    - securityLevel
-    - startOnLoad
-    - secure
+   - theme
+   - fontFamily
+   - logLevel
+   - securityLevel
+   - startOnLoad
+   - secure
 
-2.  _Diagram-specific configurations_ : These are the configurations that are available and applied to a specific diagram. For each diagram there are specific configuration that will alter how that particular diagram looks and behaves.
-    For example, `mirrorActors` is a configuration that is specific to the `SequenceDiagram` and alters whether the actors are mirrored or not. So this config is available only for the `SequenceDiagram` type.
+2. _Diagram-specific configurations_ : These are the configurations that are available and applied to a specific diagram. For each diagram there are specific configuration that will alter how that particular diagram looks and behaves.
+   For example, `mirrorActors` is a configuration that is specific to the `SequenceDiagram` and alters whether the actors are mirrored or not. So this config is available only for the `SequenceDiagram` type.
 
 **NOTE:** Not all configuration options are listed here. To get hold of all the configuration options, please refer to the [defaultConfig.ts](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/defaultConfig.ts) in the source code.
 
@@ -47,28 +47,34 @@ Here the structure of a directive text is like a nested key-value pair map or a
 
 The following code snippet shows the structure of a directive:
 
-    %%{
-      init: {
-        "theme": "dark",
-        "fontFamily": "monospace",
-        "logLevel": "info",
-        "flowchart": {
-          "htmlLabels": true,
-          "curve": "linear"
-        },
-        "sequence": {
-          "mirrorActors": true
-        }
-      }
-    }%%
+```
+%%{
+  init: {
+    "theme": "dark",
+    "fontFamily": "monospace",
+    "logLevel": "info",
+    "flowchart": {
+      "htmlLabels": true,
+      "curve": "linear"
+    },
+    "sequence": {
+      "mirrorActors": true
+    }
+  }
+}%%
+```
 
 You can also define the directives in a single line, like this:
 
-    %%{init: { **insert configuration options here** } }%%
+```
+%%{init: { **insert configuration options here** } }%%
+```
 
 For example, the following code snippet:
 
-    %%{init: { "sequence": { "mirrorActors":false }}}%%
+```
+%%{init: { "sequence": { "mirrorActors":false }}}%%
+```
 
 **Notes:**
 The JSON object that is passed as {**argument**} must be valid key value pairs and encased in quotation marks or it will be ignored.

docs/config/faq.md

@@ -6,12 +6,12 @@
 
 # Frequently Asked Questions
 
-1.  [How to add title to flowchart?](https://github.com/knsv/mermaid/issues/556#issuecomment-363182217)
-2.  [How to specify custom CSS file?](https://github.com/mermaidjs/mermaid.cli/pull/24#issuecomment-373402785)
-3.  [How to fix tooltip misplacement issue?](https://github.com/knsv/mermaid/issues/542#issuecomment-3343564621)
-4.  [How to specify gantt diagram xAxis format?](https://github.com/knsv/mermaid/issues/269#issuecomment-373229136)
-5.  [How to bind an event?](https://github.com/knsv/mermaid/issues/372)
-6.  [How to add newline in the text?](https://github.com/knsv/mermaid/issues/384#issuecomment-281339381)
-7.  [How to have special characters in link text?](https://github.com/knsv/mermaid/issues/407#issuecomment-329944735)
-8.  [How to change Flowchart curve style?](https://github.com/knsv/mermaid/issues/580#issuecomment-373929046)
-9.  [How to create a Flowchart end-Node that says "End"](https://github.com/mermaid-js/mermaid/issues/1444#issuecomment-639528897)
+1. [How to add title to flowchart?](https://github.com/knsv/mermaid/issues/556#issuecomment-363182217)
+2. [How to specify custom CSS file?](https://github.com/mermaidjs/mermaid.cli/pull/24#issuecomment-373402785)
+3. [How to fix tooltip misplacement issue?](https://github.com/knsv/mermaid/issues/542#issuecomment-3343564621)
+4. [How to specify gantt diagram xAxis format?](https://github.com/knsv/mermaid/issues/269#issuecomment-373229136)
+5. [How to bind an event?](https://github.com/knsv/mermaid/issues/372)
+6. [How to add newline in the text?](https://github.com/knsv/mermaid/issues/384#issuecomment-281339381)
+7. [How to have special characters in link text?](https://github.com/knsv/mermaid/issues/407#issuecomment-329944735)
+8. [How to change Flowchart curve style?](https://github.com/knsv/mermaid/issues/580#issuecomment-373929046)
+9. [How to create a Flowchart end-Node that says "End"](https://github.com/mermaid-js/mermaid/issues/1444#issuecomment-639528897)

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.
 
@@ -61,7 +61,7 @@ By default, MathML is used for rendering mathematical expressions. If you have u
 Example with legacy mode enabled (the latest version of KaTeX's stylesheet can be found on their [docs](https://katex.org/docs/browser.html)):
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <!-- KaTeX requires the use of the HTML5 doctype. Without it, KaTeX may not render properly -->
 <html lang="en">
   <head>

docs/config/setup/modules/config.md

@@ -50,7 +50,7 @@ Pushes in a directive to the configuration
 | --------- | ------------------------- | ----------- | ------------------------------ |
 | getConfig | Obtains the currentConfig | Get Request | Any Values from current Config |
 
-**Notes**: Returns **any** the currentConfig
+**Notes**: Avoid calling this function repeatedly. Instead, store the result in a variable and use it, and pass it down to function calls.
 
 #### Returns
 

docs/config/setup/modules/mermaidAPI.md

@@ -43,6 +43,7 @@ const config = {
   securityLevel: 'strict',
   startOnLoad: true,
   arrowMarkerAbsolute: false,
+  suppressErrorRendering: false,
 
   er: {
     diagramPadding: 20,
@@ -97,7 +98,7 @@ mermaid.initialize(config);
 
 #### Defined in
 
-[mermaidAPI.ts:622](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L622)
+[mermaidAPI.ts:635](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L635)
 
 ## Functions
 

docs/config/theming.md

@@ -12,15 +12,15 @@ Themes can now be customized at the site-wide level, or on individual Mermaid di
 
 ## Available Themes
 
-1.  [**default**](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/themes/theme-default.js) - This is the default theme for all diagrams.
+1. [**default**](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/themes/theme-default.js) - This is the default theme for all diagrams.
 
-2.  [**neutral**](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/themes/theme-neutral.js) - This theme is great for black and white documents that will be printed.
+2. [**neutral**](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/themes/theme-neutral.js) - This theme is great for black and white documents that will be printed.
 
-3.  [**dark**](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/themes/theme-dark.js) - This theme goes well with dark-colored elements or dark-mode.
+3. [**dark**](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/themes/theme-dark.js) - This theme goes well with dark-colored elements or dark-mode.
 
-4.  [**forest**](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/themes/theme-forest.js) - This theme contains shades of green.
+4. [**forest**](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/themes/theme-forest.js) - This theme contains shades of green.
 
-5.  [**base**](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/themes/theme-base.js) - This is the only theme that can be modified. Use this theme as the base for customizations.
+5. [**base**](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/themes/theme-base.js) - This is the only theme that can be modified. Use this theme as the base for customizations.
 
 ## Site-wide Theme
 
@@ -250,7 +250,7 @@ The theming engine will only recognize hex colors and not color names. So, the v
 | actorBkg              | mainBkg                        | Actor Background Color      |
 | actorBorder           | primaryBorderColor             | Actor Border Color          |
 | actorTextColor        | primaryTextColor               | Actor Text Color            |
-| actorLineColor        | grey                           | Actor Line Color            |
+| actorLineColor        | actorBorder                    | Actor Line Color            |
 | signalColor           | textColor                      | Signal Color                |
 | signalTextColor       | textColor                      | Signal Text Color           |
 | labelBoxBkgColor      | actorBkg                       | Label Box Background Color  |

docs/config/usage.md

@@ -73,7 +73,7 @@ Example:
 ## Simple full example:
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <body>
     <pre class="mermaid">
@@ -286,11 +286,11 @@ const drawDiagram = async function () {
 };
 ```
 
-1.  The graph is generated using the render call.
-2.  After generation the render function calls the provided callback function, in this case it's called insertSvg.
-3.  The callback function is called with two parameters, the SVG code of the generated graph and a function. This function binds events to the SVG **after** it is inserted into the DOM.
-4.  Insert the SVG code into the DOM for presentation.
-5.  Call the binding function that binds the events.
+1. The graph is generated using the render call.
+2. After generation the render function calls the provided callback function, in this case it's called insertSvg.
+3. The callback function is called with two parameters, the SVG code of the generated graph and a function. This function binds events to the SVG **after** it is inserted into the DOM.
+4. Insert the SVG code into the DOM for presentation.
+5. Call the binding function that binds the events.
 
 ## Example of a marked renderer
 

docs/ecosystem/integrations-community.md

@@ -71,6 +71,12 @@ To add an integration to this list, see the [Integrations - create page](./integ
   - [redmine-mermaid](https://github.com/styz/redmine_mermaid)
 - Visual Studio Code [Polyglot Interactive Notebooks](https://github.com/dotnet/interactive#net-interactive)
 
+### LLM integrations
+
+LLM integrations to create mermaid diagrams using AI from text descriptions.
+
+- [HueHive - Create mermaid diagrams with text](https://huehive.co/tools/diagrams)
+
 ### CRM/ERP
 
 Customer Relationship Management/Enterprise Resource Planning
@@ -97,6 +103,8 @@ Content Management Systems/Enterprise Content Management
 
 - [ApostropheCMS](https://apostrophecms.com/)
   - [Extension for Mermaid.js](https://github.com/BoDonkey/mermaid-extension)
+- [Drupal](https://drupal.org/)
+  - [Mermaid Diagram Field module](https://www.drupal.org/project/mermaid_diagram_field)
 - [Grav CMS](https://getgrav.org/)
   - [Mermaid Diagrams Plugin](https://github.com/DanielFlaum/grav-plugin-mermaid-diagrams)
   - [GitLab Markdown Adapter](https://github.com/Goutte/grav-plugin-gitlab-markdown-adapter)
@@ -118,7 +126,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
 
@@ -252,4 +260,4 @@ Communication tools and platforms
 - [mermaid-isomorphic](https://github.com/remcohaszing/mermaid-isomorphic)
 - [mermaid-server: Generate diagrams using a HTTP request](https://github.com/TomWright/mermaid-server)
 
-<!--- cspell:ignore Blazorade --->
+<!--- cspell:ignore Blazorade HueHive --->

docs/intro/getting-started.md

@@ -8,9 +8,9 @@
 
 ## Mermaid is composed of three parts
 
-1.  Deployment
-2.  Syntax
-3.  Configuration
+1. Deployment
+2. Syntax
+3. Configuration
 
 This section talks about the different ways to **deploy** Mermaid.
 
@@ -21,11 +21,11 @@ If you are a beginner:
 
 ## Ways to use Mermaid
 
-1.  [Using the Mermaid Live Editor](getting-started.md#_1-using-the-mermaid-live-editor)
-2.  [Using the Mermaid Chart Editor](getting-started.md#_2-using-the-mermaid-chart-editor)
-3.  [Using Mermaid Plugins and Integrations](getting-started.md#_3-using-mermaid-plugins)
-4.  [Calling the Mermaid JavaScript API](getting-started.md#_4-calling-the-mermaid-javascript-api)
-5.  [Adding Mermaid as a dependency](getting-started.md#_5-adding-mermaid-as-a-dependency)
+1. [Using the Mermaid Live Editor](getting-started.md#_1-using-the-mermaid-live-editor)
+2. [Using the Mermaid Chart Editor](getting-started.md#_2-using-the-mermaid-chart-editor)
+3. [Using Mermaid Plugins and Integrations](getting-started.md#_3-using-mermaid-plugins)
+4. [Calling the Mermaid JavaScript API](getting-started.md#_4-calling-the-mermaid-javascript-api)
+5. [Adding Mermaid as a dependency](getting-started.md#_5-adding-mermaid-as-a-dependency)
 
 To learn more, visit the [Usage](../config/usage.md) page.
 
@@ -301,22 +301,22 @@ In this example, `mermaid.js` is referenced in `src` as a separate JavaScript fi
 
 Below are the steps for adding Mermaid as a dependency:
 
-1.  Install `node v16`
+1. Install `node v16`
 
 > **Note**
 > To learn more about downloading and installing `Node.js` and `npm`, visit the [npm Docs website](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm).
 
-1.  Install `yarn` using `npm` with this command:
+1. Install `yarn` using `npm` with this command:
 
-    `npm install -g yarn`
+   `npm install -g yarn`
 
-2.  After yarn installs, enter this command:
+2. After yarn installs, enter this command:
 
-    `yarn add mermaid`
+   `yarn add mermaid`
 
-3.  To add Mermaid as a dev dependency, enter this command:
+3. To add Mermaid as a dev dependency, enter this command:
 
-    `yarn add --dev mermaid`
+   `yarn add --dev mermaid`
 
 ## Closing note
 

docs/intro/index.md

@@ -311,7 +311,9 @@ xychart-beta
 
 ### CDN
 
-    https://cdn.jsdelivr.net/npm/mermaid@<version>/dist/
+```
+https://cdn.jsdelivr.net/npm/mermaid@<version>/dist/
+```
 
 To select a version:
 
@@ -323,11 +325,11 @@ Latest Version: <https://cdn.jsdelivr.net/npm/mermaid@11>
 
 To Deploy Mermaid:
 
-1.  You will need to install node v16, which would have npm
-2.  Install mermaid
-    - NPM: `npm i mermaid`
-    - Yarn: `yarn add mermaid`
-    - Pnpm: `pnpm add mermaid`
+1. You will need to install node v16, which would have npm
+2. Install mermaid
+   - NPM: `npm i mermaid`
+   - Yarn: `yarn add mermaid`
+   - Pnpm: `pnpm add mermaid`
 
 ### [Mermaid API](../config/setup/README.md):
 

docs/intro/syntax-reference.md

@@ -51,7 +51,7 @@ One should **beware the use of some words or symbols** that can break diagrams.
 | Diagram Breakers                                                                     | Reason                                                                  | Solution                                          |
 | ------------------------------------------------------------------------------------ | ----------------------------------------------------------------------- | ------------------------------------------------- |
 | **Comments**                                                                         |                                                                         |                                                   |
-| [` %%{``}%% `](https://github.com/mermaid-js/mermaid/issues/1968)                    | Similar to [Directives](../config/directives.md) confuses the renderer. | In comments using `%%`, avoid using "{}".         |
+| [`%%{``}%%`](https://github.com/mermaid-js/mermaid/issues/1968)                      | Similar to [Directives](../config/directives.md) confuses the renderer. | In comments using `%%`, avoid using "{}".         |
 | **Flow-Charts**                                                                      |                                                                         |                                                   |
 | 'end'                                                                                | The word "End" can cause Flowcharts and Sequence diagrams to break      | Wrap them in quotation marks to prevent breakage. |
 | [Nodes inside Nodes](../syntax/flowchart.md?id=special-characters-that-break-syntax) | Mermaid gets confused with nested shapes                                | wrap them in quotation marks to prevent breaking  |

docs/news/announcements.md

@@ -6,7 +6,29 @@
 
 # Announcements
 
-## 🚀 Mermaid Chart's Visual Editor for Flowcharts
+## 🚀 Exciting News from Mermaid Chart! 🚀
+
+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.
+
+**Why It Matters for Mermaid Chart:**
+
+- **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
 
 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.
 

docs/news/blog.md

@@ -6,6 +6,24 @@
 
 # Blog
 
+## [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/block.md

@@ -636,8 +636,10 @@ Understanding and avoiding common syntax errors is key to a smooth experience wi
 
 A common mistake is incorrect linking syntax, which can lead to unexpected results or broken diagrams:
 
-    block-beta
-      A - B
+```
+block-beta
+  A - B
+```
 
 **Correction**:
 Ensure that links between blocks are correctly specified with arrows (--> or ---) to define the direction and type of connection. Also remember that one of the fundaments for block diagram is to give the author full control of where the boxes are positioned so in the example you need to add a space between the boxes:

docs/syntax/classDiagram.md

@@ -8,7 +8,7 @@
 
 > "In software engineering, a class diagram in the Unified Modeling Language (UML) is a type of static structure diagram that describes the structure of a system by showing the system's classes, their attributes, operations (or methods), and the relationships among objects."
 >
-> \-Wikipedia
+> -Wikipedia
 
 The class diagram is the main building block of object-oriented modeling. It is used for general conceptual modeling of the structure of the application, and for detailed modeling to translate the models into programming code. Class diagrams can also be used for data modeling. The classes in a class diagram represent both the main elements, interactions in the application, and the classes to be programmed.
 
@@ -296,7 +296,9 @@ To describe the visibility (or encapsulation) of an attribute or method/function
 
 A relationship is a general term covering the specific types of logical connections found on class and object diagrams.
 
-    [classA][Arrow][ClassB]
+```
+[classA][Arrow][ClassB]
+```
 
 There are eight different types of relations defined for classes under UML which are currently supported:
 
@@ -369,7 +371,9 @@ classO .. classP : Link(Dashed)
 
 It is possible to add label text to a relation:
 
-    [classA][Arrow][ClassB]:LabelText
+```
+[classA][Arrow][ClassB]:LabelText
+```
 
 ```mermaid-example
 classDiagram
@@ -401,7 +405,9 @@ classDiagram
 
 Here is the syntax:
 
-    [Relation Type][Link][Relation Type]
+```
+[Relation Type][Link][Relation Type]
+```
 
 Where `Relation Type` can be one of:
 
@@ -465,7 +471,9 @@ The different cardinality options are :
 
 Cardinality can be easily defined by placing the text option within quotes `"` before or after a given arrow. For example:
 
-    [classA] "cardinality1" [Arrow] "cardinality2" [ClassB]:LabelText
+```
+[classA] "cardinality1" [Arrow] "cardinality2" [ClassB]:LabelText
+```
 
 ```mermaid-example
 classDiagram
@@ -618,9 +626,11 @@ It is possible to bind a click event to a node. The click can lead to either a j
 
 You would define these actions on a separate line after all classes have been declared.
 
-    action className "reference" "tooltip"
-    click className call callback() "tooltip"
-    click className href "url" "tooltip"
+```
+action className "reference" "tooltip"
+click className call callback() "tooltip"
+click className href "url" "tooltip"
+```
 
 - _action_ is either `link` or `callback`, depending on which type of interaction you want to have called
 - _className_ is the id of the node that the action will be associated with
@@ -803,11 +813,15 @@ should have a different look. This is done by predefining classes in css styles
 
 Then attaching that class to a specific node:
 
-        cssClass "nodeId1" styleClass;
+```
+    cssClass "nodeId1" styleClass;
+```
 
 It is also possible to attach a class to a list of nodes in one statement:
 
-        cssClass "nodeId1,nodeId2" styleClass;
+```
+    cssClass "nodeId1,nodeId2" styleClass;
+```
 
 A shorter form of adding a class is to attach the classname to the node using the `:::` operator:
 

docs/syntax/entityRelationshipDiagram.md

@@ -86,7 +86,9 @@ When including attributes on ER diagrams, you must decide whether to include for
 
 Mermaid syntax for ER diagrams is compatible with PlantUML, with an extension to label the relationship. Each statement consists of the following parts:
 
-        <first-entity> [<relationship> <second-entity> : <relationship-label>]
+```
+    <first-entity> [<relationship> <second-entity> : <relationship-label>]
+```
 
 Where:
 
@@ -97,7 +99,9 @@ Where:
 
 For example:
 
-        PROPERTY ||--|{ ROOM : contains
+```
+    PROPERTY ||--|{ ROOM : contains
+```
 
 This statement can be read as _a property contains one or more rooms, and a room is part of one and only one property_. You can see that the label here is from the first entity's perspective: a property contains a room, but a room does not contain a property. When considered from the perspective of the second entity, the equivalent label is usually very easy to infer. (Some ER diagrams label relationships from both perspectives, but this is not supported here, and is usually superfluous).
 

docs/syntax/flowchart.md

@@ -642,9 +642,11 @@ Numbers given are base 10, so `#` can be encoded as `#35;`. It is also supported
 
 ## Subgraphs
 
-    subgraph title
-        graph definition
-    end
+```
+subgraph title
+    graph definition
+end
+```
 
 An example below:
 
@@ -850,6 +852,16 @@ Formatting:
 
 This feature is applicable to node labels, edge labels, and subgraph labels.
 
+The auto wrapping can be disabled by using
+
+```
+---
+config:
+  markdownAutoWrap: false
+---
+graph LR
+```
+
 ## Interaction
 
 It is possible to bind a click event to a node, the click can lead to either a javascript callback or to a link which will be opened in a new browser tab.
@@ -857,8 +869,10 @@ It is possible to bind a click event to a node, the click can lead to either a j
 > **Note**
 > This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`.
 
-    click nodeId callback
-    click nodeId call callback()
+```
+click nodeId callback
+click nodeId call callback()
+```
 
 - nodeId is the id of the node
 - callback is the name of a javascript function defined on the page displaying the graph, the function will be called with the nodeId as parameter.
@@ -981,11 +995,15 @@ have no ids in the same way as nodes, some other way of deciding what style the
 Instead of ids, the order number of when the link was defined in the graph is used, or use default to apply to all links.
 In the example below the style defined in the linkStyle statement will belong to the fourth link in the graph:
 
-    linkStyle 3 stroke:#ff3,stroke-width:4px,color:red;
+```
+linkStyle 3 stroke:#ff3,stroke-width:4px,color:red;
+```
 
 It is also possible to add style to multiple links in a single statement, by separating link numbers with commas:
 
-    linkStyle 1,2,7 color:blue;
+```
+linkStyle 1,2,7 color:blue;
+```
 
 ### Styling line curves
 
@@ -995,8 +1013,10 @@ Available curve styles include `basis`, `bumpX`, `bumpY`, `cardinal`, `catmullRo
 
 In this example, a left-to-right graph uses the `stepBefore` curve style:
 
-    %%{ init: { 'flowchart': { 'curve': 'stepBefore' } } }%%
-    graph LR
+```
+%%{ init: { 'flowchart': { 'curve': 'stepBefore' } } }%%
+graph LR
+```
 
 For a full list of available curves, including an explanation of custom curves, refer to
 the [Shapes](https://github.com/d3/d3-shape/blob/main/README.md#curves) documentation in the
@@ -1027,19 +1047,27 @@ should have a different look.
 
 A class definition looks like the example below:
 
-        classDef className fill:#f9f,stroke:#333,stroke-width:4px;
+```
+    classDef className fill:#f9f,stroke:#333,stroke-width:4px;
+```
 
 Also, it is possible to define style to multiple classes in one statement:
 
-        classDef firstClassName,secondClassName font-size:12pt;
+```
+    classDef firstClassName,secondClassName font-size:12pt;
+```
 
 Attachment of a class to a node is done as per below:
 
-        class nodeId1 className;
+```
+    class nodeId1 className;
+```
 
 It is also possible to attach a class to a list of nodes in one statement:
 
-        class nodeId1,nodeId2 className;
+```
+    class nodeId1,nodeId2 className;
+```
 
 A shorter form of adding a class is to attach the classname to the node using the `:::`operator as per below:
 
@@ -1110,7 +1138,9 @@ flowchart LR
 
 If a class is named default it will be assigned to all classes without specific class definitions.
 
-        classDef default fill:#f9f,stroke:#333,stroke-width:4px;
+```
+    classDef default fill:#f9f,stroke:#333,stroke-width:4px;
+```
 
 ## Basic support for fontawesome
 
@@ -1183,7 +1213,9 @@ Starting with Mermaid version 9.4, you can use an alternate renderer named elk.
 The _elk_ renderer is an experimental feature.
 You can change the renderer to elk by adding this directive:
 
-    %%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
+```
+%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
+```
 
 > **Note**
 > Note that the site needs to use mermaid version 9.4+ for this to work and have this featured enabled in the lazy-loading configuration.

docs/syntax/gantt.md

@@ -120,9 +120,9 @@ A colon, `:`, separates the task title from its metadata.
 Metadata items are separated by a comma, `,`. Valid tags are `active`, `done`, `crit`, and `milestone`. Tags are optional, but if used, they must be specified first.
 After processing the tags, the remaining metadata items are interpreted as follows:
 
-1.  If a single item is specified, it determines when the task ends. It can either be a specific date/time or a duration. If a duration is specified, it is added to the start date of the task to determine the end date of the task, taking into account any exclusions.
-2.  If two items are specified, the last item is interpreted as in the previous case. The first item can either specify an explicit start date/time (in the format specified by `dateFormat`) or reference another task using `after <otherTaskID> [[otherTaskID2 [otherTaskID3]]...]`. In the latter case, the start date of the task will be set according to the latest end date of any referenced task.
-3.  If three items are specified, the last two will be interpreted as in the previous case. The first item will denote the ID of the task, which can be referenced using the `later <taskID>` syntax.
+1. If a single item is specified, it determines when the task ends. It can either be a specific date/time or a duration. If a duration is specified, it is added to the start date of the task to determine the end date of the task, taking into account any exclusions.
+2. If two items are specified, the last item is interpreted as in the previous case. The first item can either specify an explicit start date/time (in the format specified by `dateFormat`) or reference another task using `after <otherTaskID> [[otherTaskID2 [otherTaskID3]]...]`. In the latter case, the start date of the task will be set according to the latest end date of any referenced task.
+3. If three items are specified, the last two will be interpreted as in the previous case. The first item will denote the ID of the task, which can be referenced using the `later <taskID>` syntax.
 
 | Metadata syntax                                      | Start date                                          | End date                                              | ID       |
 | ---------------------------------------------------- | --------------------------------------------------- | ----------------------------------------------------- | -------- |
@@ -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:
 
@@ -167,6 +167,38 @@ gantt
 
 The `title` is an _optional_ string to be displayed at the top of the Gantt chart to describe the chart as a whole.
 
+### Excludes
+
+The `excludes` is an _optional_ attribute that accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".
+These date will be marked on the graph, and be excluded from the duration calculation of tasks. Meaning that if there are excluded dates during a task interval, the number of 'skipped' days will be added to the end of the task to ensure the duration is as specified in the code.
+
+#### Weekend (v\<MERMAID_RELEASE_VERSION>+)
+
+When excluding weekends, it is possible to configure the weekends to be either Friday and Saturday or Saturday and Sunday. By default weekends are Saturday and Sunday.
+To define the weekend start day, there is an _optional_ attribute `weekend` that can be added in a new line followed by either `friday` or `saturday`.
+
+```mermaid-example
+gantt
+    title A Gantt Diagram Excluding Fri - Sat weekends
+    dateFormat YYYY-MM-DD
+    excludes weekends
+    weekend friday
+    section Section
+        A task          :a1, 2024-01-01, 30d
+        Another task    :after a1, 20d
+```
+
+```mermaid
+gantt
+    title A Gantt Diagram Excluding Fri - Sat weekends
+    dateFormat YYYY-MM-DD
+    excludes weekends
+    weekend friday
+    section Section
+        A task          :a1, 2024-01-01, 30d
+        Another task    :after a1, 20d
+```
+
 ### Section statements
 
 You can divide the chart into various sections, for example to separate different parts of a project like development and documentation.
@@ -436,11 +468,15 @@ Styling of the Gantt diagram is done by defining a number of CSS classes. During
 
 You can style or hide the marker for the current date. To style it, add a value for the `todayMarker` key.
 
-    todayMarker stroke-width:5px,stroke:#0f0,opacity:0.5
+```
+todayMarker stroke-width:5px,stroke:#0f0,opacity:0.5
+```
 
 To hide the marker, set `todayMarker` to `off`.
 
-    todayMarker off
+```
+todayMarker off
+```
 
 ## Configuration
 
@@ -482,8 +518,10 @@ mermaid.ganttConfig = {
 
 It is possible to bind a click event to a task. The click can lead to either a javascript callback or to a link which will be opened in the current browser tab. **Note**: This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`.
 
-    click taskId call callback(arguments)
-    click taskId href URL
+```
+click taskId call callback(arguments)
+click taskId href URL
+```
 
 - taskId is the id of the task
 - callback is the name of a javascript function defined on the page displaying the graph, the function will be called with the taskId as the parameter if no other arguments are specified.

docs/syntax/gitgraph.md

@@ -363,11 +363,11 @@ Here, a new commit representing the cherry-pick is created on the current branch
 
 A few important rules to note here are:
 
-1.  You need to provide the `id` for an existing commit to be cherry-picked. If given commit id does not exist it will result in an error. For this, make use of the `commit id:$value` format of declaring commits. See the examples from above.
-2.  The given commit must not exist on the current branch. The cherry-picked commit must always be a different branch than the current branch.
-3.  Current branch must have at least one commit, before you can cherry-pick, otherwise it will cause an error is throw.
-4.  When cherry-picking a merge commit, providing a parent commit ID is mandatory. If the parent attribute is omitted or an invalid parent commit ID is provided, an error will be thrown.
-5.  The specified parent commit must be an immediate parent of the merge commit being cherry-picked.
+1. You need to provide the `id` for an existing commit to be cherry-picked. If given commit id does not exist it will result in an error. For this, make use of the `commit id:$value` format of declaring commits. See the examples from above.
+2. The given commit must not exist on the current branch. The cherry-picked commit must always be a different branch than the current branch.
+3. Current branch must have at least one commit, before you can cherry-pick, otherwise it will cause an error is throw.
+4. When cherry-picking a merge commit, providing a parent commit ID is mandatory. If the parent attribute is omitted or an invalid parent commit ID is provided, an error will be thrown.
+5. The specified parent commit must be an immediate parent of the merge commit being cherry-picked.
 
 Let see an example:
 
@@ -836,9 +836,9 @@ Here, we have changed the default main branch name to `MetroLine1`.
 
 ## Orientation (v10.3.0+)
 
-Mermaid supports two graph orientations: **Left-to-Right** (default) and **Top-to-Bottom**.
+Mermaid supports three graph orientations: **Left-to-Right** (default), **Top-to-Bottom**, and **Bottom-to-Top**.
 
-You can set this with either `LR:` (for [**Left-to-Right**](#left-to-right-default-lr)) or `TB:` (for [**Top-to-Bottom**](#top-to-bottom-tb)) after `gitGraph`.
+You can set this with either `LR:` (for [**Left-to-Right**](#left-to-right-default-lr)), `TB:` (for [**Top-to-Bottom**](#top-to-bottom-tb)) or `BT:` (for [**Bottom-to-Top**](#bottom-to-top-bt)) after `gitGraph`.
 
 ### Left to Right (default, `LR:`)
 
@@ -916,6 +916,44 @@ Usage example:
        commit
 ```
 
+### Bottom to Top (`BT:`) (v\<MERMAID_RELEASE_VERSION>+)
+
+In `BT` (**Bottom-to-Top**) orientation, the commits run from bottom to top of the graph and branches are arranged side-by-side.
+
+To orient the graph this way, you need to add `BT:` after gitGraph.
+
+Usage example:
+
+```mermaid-example
+    gitGraph BT:
+       commit
+       commit
+       branch develop
+       commit
+       commit
+       checkout main
+       commit
+       commit
+       merge develop
+       commit
+       commit
+```
+
+```mermaid
+    gitGraph BT:
+       commit
+       commit
+       branch develop
+       commit
+       commit
+       checkout main
+       commit
+       commit
+       merge develop
+       commit
+       commit
+```
+
 ## Parallel commits (v10.8.0+)
 
 Commits in Mermaid display temporal information in gitgraph by default. For example if two commits are one commit away from its parent, the commit that was made earlier is rendered closer to its parent. You can turn this off by enabling the `parallelCommits` flag.

docs/syntax/mindmap.md

@@ -60,11 +60,13 @@ The syntax for creating Mindmaps is simple and relies on indentation for setting
 
 In the following example you can see how there are 3 different levels. One with starting at the left of the text and another level with two rows starting at the same column, defining the node A. At the end there is one more level where the text is indented further than the previous lines defining the nodes B and C.
 
-    mindmap
-        Root
-            A
-                B
-                C
+```
+mindmap
+    Root
+        A
+            B
+            C
+```
 
 In summary is a simple text outline where there is one node at the root level called `Root` which has one child `A`. `A` in turn has two children `B`and `C`. In the diagram below we can see this rendered as a mindmap.
 
@@ -230,11 +232,13 @@ _These classes need to be supplied by the site administrator._
 
 The actual indentation does not really matter only compared with the previous rows. If we take the previous example and disrupt it a little we can see how the calculations are performed. Let us start with placing C with a smaller indentation than `B` but larger then `A`.
 
-    mindmap
-        Root
-            A
-                B
-              C
+```
+mindmap
+    Root
+        A
+            B
+          C
+```
 
 This outline is unclear as `B` clearly is a child of `A` but when we move on to `C` the clarity is lost. `C` is not a child of `B` with a higher indentation nor does it have the same indentation as `B`. The only thing that is clear is that the first node with smaller indentation, indicating a parent, is A. Then Mermaid relies on this known truth and compensates for the unclear indentation and selects `A` as a parent of `C` leading till the same diagram with `B` and `C` as siblings.
 

docs/syntax/pie.md

@@ -7,7 +7,7 @@
 # Pie chart diagrams
 
 > A pie chart (or a circle chart) is a circular statistical graphic, which is divided into slices to illustrate numerical proportion. In a pie chart, the arc length of each slice (and consequently its central angle and area), is proportional to the quantity it represents. While it is named for its resemblance to a pie which has been sliced, there are variations on the way it can be presented. The earliest known pie chart is generally credited to William Playfair's Statistical Breviary of 1801
-> \-Wikipedia
+> -Wikipedia
 
 Mermaid can render Pie Chart diagrams.
 

docs/syntax/quadrantChart.md

@@ -59,8 +59,10 @@ The title is a short description of the chart and it will always render on top o
 
 #### Example
 
-    quadrantChart
-        title This is a sample example
+```
+quadrantChart
+    title This is a sample example
+```
 
 ### x-axis
 
@@ -68,8 +70,8 @@ The x-axis determines what text would be displayed in the x-axis. In x-axis ther
 
 #### Example
 
-1.  `x-axis <text> --> <text>` both the left and right axis text will be rendered.
-2.  `x-axis <text>` only the left axis text will be rendered.
+1. `x-axis <text> --> <text>` both the left and right axis text will be rendered.
+2. `x-axis <text>` only the left axis text will be rendered.
 
 ### y-axis
 
@@ -77,8 +79,8 @@ The y-axis determines what text would be displayed in the y-axis. In y-axis ther
 
 #### Example
 
-1.  `y-axis <text> --> <text>` both the bottom and top axis text will be rendered.
-2.  `y-axis <text>` only the bottom axis text will be rendered.
+1. `y-axis <text> --> <text>` both the bottom and top axis text will be rendered.
+2. `y-axis <text>` only the bottom axis text will be rendered.
 
 ### Quadrants text
 
@@ -86,10 +88,10 @@ The `quadrant-[1,2,3,4]` determine what text would be displayed inside the quadr
 
 #### Example
 
-1.  `quadrant-1 <text>` determine what text will be rendered inside the top right quadrant.
-2.  `quadrant-2 <text>` determine what text will be rendered inside the top left quadrant.
-3.  `quadrant-3 <text>` determine what text will be rendered inside the bottom left quadrant.
-4.  `quadrant-4 <text>` determine what text will be rendered inside the bottom right quadrant.
+1. `quadrant-1 <text>` determine what text will be rendered inside the top right quadrant.
+2. `quadrant-2 <text>` determine what text will be rendered inside the top left quadrant.
+3. `quadrant-3 <text>` determine what text will be rendered inside the bottom left quadrant.
+4. `quadrant-4 <text>` determine what text will be rendered inside the bottom right quadrant.
 
 ### Points
 
@@ -97,8 +99,8 @@ Points are used to plot a circle inside the quadrantChart. The syntax is `<text>
 
 #### Example
 
-1.  `Point 1: [0.75, 0.80]` here the Point 1 will be drawn in the top right quadrant.
-2.  `Point 2: [0.35, 0.24]` here the Point 2 will be drawn in the bottom left quadrant.
+1. `Point 1: [0.75, 0.80]` here the Point 1 will be drawn in the top right quadrant.
+2. `Point 2: [0.35, 0.24]` here the Point 2 will be drawn in the bottom left quadrant.
 
 ## Chart Configurations
 

docs/syntax/requirementDiagram.md

@@ -56,12 +56,14 @@ An important note on user text: all input can be surrounded in quotes or not. Fo
 
 A requirement definition contains a requirement type, name, id, text, risk, and verification method. The syntax follows:
 
-    <type> user_defined_name {
-        id: user_defined_id
-        text: user_defined text
-        risk: <risk>
-        verifymethod: <method>
-    }
+```
+<type> user_defined_name {
+    id: user_defined_id
+    text: user_defined text
+    risk: <risk>
+    verifymethod: <method>
+}
+```
 
 Type, risk, and method are enumerations defined in SysML.
 
@@ -75,10 +77,12 @@ Type, risk, and method are enumerations defined in SysML.
 
 An element definition contains an element name, type, and document reference. These three are all user defined. The element feature is intended to be lightweight but allow requirements to be connected to portions of other documents.
 
-    element user_defined_name {
-        type: user_defined_type
-        docref: user_defined_ref
-    }
+```
+element user_defined_name {
+    type: user_defined_type
+    docref: user_defined_ref
+}
+```
 
 ### Relationship
 
@@ -86,11 +90,15 @@ Relationships are comprised of a source node, destination node, and relationship
 
 Each follows the definition format of
 
-    {name of source} - <type> -> {name of destination}
+```
+{name of source} - <type> -> {name of destination}
+```
 
 or
 
-    {name of destination} <- <type> - {name of source}
+```
+{name of destination} <- <type> - {name of source}
+```
 
 "name of source" and "name of destination" should be names of requirement or element nodes defined elsewhere.
 

docs/syntax/sequenceDiagram.md

@@ -42,16 +42,16 @@ appearance by doing the following:
 sequenceDiagram
     participant Alice
     participant Bob
-    Alice->>Bob: Hi Bob
     Bob->>Alice: Hi Alice
+    Alice->>Bob: Hi Bob
 ```
 
 ```mermaid
 sequenceDiagram
     participant Alice
     participant Bob
-    Alice->>Bob: Hi Bob
     Bob->>Alice: Hi Alice
+    Alice->>Bob: Hi Bob
 ```
 
 ### Actors
@@ -98,8 +98,10 @@ sequenceDiagram
 
 It is possible to create and destroy actors by messages. To do so, add a create or destroy directive before the message.
 
-    create participant B
-    A --> B: Hello
+```
+create participant B
+A --> B: Hello
+```
 
 Create directives support actor/participant distinction and aliases. The sender or the recipient of a message can be destroyed but only the recipient can be created.
 
@@ -143,22 +145,26 @@ And fixing diagram code does not get rid of this error and rendering of all othe
 
 The actor(s) can be grouped in vertical boxes. You can define a color (if not, it will be transparent) and/or a descriptive label using the following notation:
 
-    box Aqua Group Description
-    ... actors ...
-    end
-    box Group without description
-    ... actors ...
-    end
-    box rgb(33,66,99)
-    ... actors ...
-    end
+```
+box Aqua Group Description
+... actors ...
+end
+box Group without description
+... actors ...
+end
+box rgb(33,66,99)
+... actors ...
+end
+```
 
 > **Note**
 > If your group name is a color you can force the color to be transparent:
 
-    box transparent Aqua
-    ... actors ...
-    end
+```
+box transparent Aqua
+... actors ...
+end
+```
 
 ```mermaid-example
     sequenceDiagram
@@ -196,7 +202,9 @@ The actor(s) can be grouped in vertical boxes. You can define a color (if not, i
 
 Messages can be of two displayed either solid or with a dotted line.
 
-    [Actor][Arrow][Actor]:Message text
+```
+[Actor][Arrow][Actor]:Message text
+```
 
 There are six types of arrows currently supported:
 
@@ -314,9 +322,11 @@ sequenceDiagram
 
 It is possible to express loops in a sequence diagram. This is done by the notation
 
-    loop Loop text
-    ... statements ...
-    end
+```
+loop Loop text
+... statements ...
+end
+```
 
 See the example below:
 
@@ -340,17 +350,21 @@ sequenceDiagram
 
 It is possible to express alternative paths in a sequence diagram. This is done by the notation
 
-    alt Describing text
-    ... statements ...
-    else
-    ... statements ...
-    end
+```
+alt Describing text
+... statements ...
+else
+... statements ...
+end
+```
 
 or if there is sequence that is optional (if without else).
 
-    opt Describing text
-    ... statements ...
-    end
+```
+opt Describing text
+... statements ...
+end
+```
 
 See the example below:
 
@@ -386,13 +400,15 @@ It is possible to show actions that are happening in parallel.
 
 This is done by the notation
 
-    par [Action 1]
-    ... statements ...
-    and [Action 2]
-    ... statements ...
-    and [Action N]
-    ... statements ...
-    end
+```
+par [Action 1]
+... statements ...
+and [Action 2]
+... statements ...
+and [Action N]
+... statements ...
+end
+```
 
 See the example below:
 
@@ -454,13 +470,15 @@ It is possible to show actions that must happen automatically with conditional h
 
 This is done by the notation
 
-    critical [Action that must be performed]
-    ... statements ...
-    option [Circumstance A]
-    ... statements ...
-    option [Circumstance B]
-    ... statements ...
-    end
+```
+critical [Action that must be performed]
+... statements ...
+option [Circumstance A]
+... statements ...
+option [Circumstance B]
+... statements ...
+end
+```
 
 See the example below:
 
@@ -510,9 +528,11 @@ It is possible to indicate a stop of the sequence within the flow (usually used
 
 This is done by the notation
 
-    break [something happened]
-    ... statements ...
-    end
+```
+break [something happened]
+... statements ...
+end
+```
 
 See the example below:
 
@@ -542,15 +562,17 @@ It is possible to highlight flows by providing colored background rects. This is
 
 The colors are defined using rgb and rgba syntax.
 
-    rect rgb(0, 255, 0)
-    ... content ...
-    end
+```
+rect rgb(0, 255, 0)
+... content ...
+end
+```
 
-<!---->
-
-    rect rgba(0, 0, 255, .1)
-    ... content ...
-    end
+```
+rect rgba(0, 0, 255, .1)
+... content ...
+end
+```
 
 See the examples below:
 
@@ -674,7 +696,9 @@ Actors can have popup-menus containing individualized links to external pages. F
 
 This can be configured by adding one or more link lines with the format:
 
-    link <actor>: <link-label> @ <link-url>
+```
+link <actor>: <link-label> @ <link-url>
+```
 
 ```mermaid-example
 sequenceDiagram
@@ -708,7 +732,9 @@ There is an advanced syntax that relies on JSON formatting. If you are comfortab
 
 This can be configured by adding the links lines with the format:
 
-    links <actor>: <json-formatted link-name link-url pairs>
+```
+links <actor>: <json-formatted link-name link-url pairs>
+```
 
 An example is below:
 
@@ -740,22 +766,24 @@ Styling of a sequence diagram is done by defining a number of css classes. Durin
 
 ### Classes used
 
-| 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.                      |
+| 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 of all of the actors.                          |
+| text.actor-box | Styles for text of the actor box.                              |
+| text.actor-man | Styles for text of the actor figure.                           |
+| 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
 

docs/syntax/stateDiagram.md

@@ -454,8 +454,8 @@ state or states in the diagram.
 
 **These are the current limitations with state diagram classDefs:**
 
-1.  Cannot be applied to start or end states
-2.  Cannot be applied to or within composite states
+1. Cannot be applied to start or end states
+2. Cannot be applied to or within composite states
 
 _These are in development and will be available in a future version._
 
@@ -467,7 +467,9 @@ a _[valid CSS property name](https://www.w3.org/TR/CSS/#properties)_ followed by
 
 Here is an example of a classDef with just one property-value pair:
 
-        classDef movement font-style:italic;
+```
+    classDef movement font-style:italic;
+```
 
 where
 
@@ -478,7 +480,9 @@ If you want to have more than one _property-value pair_ then you put a comma (`,
 
 Here is an example with three property-value pairs:
 
-        classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
+```
+    classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
+```
 
 where
 
@@ -493,9 +497,9 @@ where
 
 There are two ways to apply a `classDef` style to a state:
 
-1.  use the `class` keyword to apply a classDef style to one or more states in a single statement, or
-2.  use the `:::` operator to apply a classDef style to a state as it is being used in a transition statement (e.g. with an arrow
-    to/from another state)
+1. use the `class` keyword to apply a classDef style to one or more states in a single statement, or
+2. use the `:::` operator to apply a classDef style to a state as it is being used in a transition statement (e.g. with an arrow
+   to/from another state)
 
 #### 1. `class` statement
 

docs/syntax/timeline.md

@@ -191,7 +191,7 @@ As explained earlier, each section has a color scheme, and each time period and
 
 However, if there is no section defined, then we have two possibilities:
 
-1.  Style time periods individually, i.e. each time period(and its corresponding events) will have its own color scheme. This is the DEFAULT behavior.
+1. Style time periods individually, i.e. each time period(and its corresponding events) will have its own color scheme. This is the DEFAULT behavior.
 
 ```mermaid-example
     timeline
@@ -215,7 +215,7 @@ However, if there is no section defined, then we have two possibilities:
 
 **NOTE**: that there are no sections defined, and each time period and its corresponding events will have its own color scheme.
 
-2.  Disable the multiColor option using the `disableMultiColor` option. This will make all time periods and events follow the same color scheme.
+2. Disable the multiColor option using the `disableMultiColor` option. This will make all time periods and events follow the same color scheme.
 
 You will need to add this option either via mermaid.initialize function or directives.
 

docs/syntax/xyChart.md

@@ -39,8 +39,10 @@ xychart-beta
 
 The chart can be drawn horizontal or vertical, default value is vertical.
 
-    xychart-beta horizontal
-    ...
+```
+xychart-beta horizontal
+...
+```
 
 ### Title
 
@@ -48,9 +50,11 @@ The title is a short description of the chart and it will always render on top o
 
 #### Example
 
-    xychart-beta
-        title "This is a simple example"
-        ...
+```
+xychart-beta
+    title "This is a simple example"
+    ...
+```
 
 > **Note**
 > If the title is a single word one no need to use `"`, but if it has space `"` is needed
@@ -61,8 +65,8 @@ The x-axis primarily serves as a categorical value, although it can also functio
 
 #### Example
 
-1.  `x-axis title min --> max` x-axis will function as numeric with the given range
-2.  `x-axis "title with space" [cat1, "cat2 with space", cat3]` x-axis if categorical, categories are text type
+1. `x-axis title min --> max` x-axis will function as numeric with the given range
+2. `x-axis "title with space" [cat1, "cat2 with space", cat3]` x-axis if categorical, categories are text type
 
 ### y-axis
 
@@ -70,8 +74,8 @@ The y-axis is employed to represent numerical range values, it cannot have categ
 
 #### Example
 
-1.  `y-axis title min --> max`
-2.  `y-axis title` it will only add the title, the range will be auto generated from data.
+1. `y-axis title min --> max`
+2. `y-axis title` it will only add the title, the range will be auto generated from data.
 
 > **Note**
 > Both x and y axis are optional if not provided we will try to create the range
@@ -82,7 +86,7 @@ A line chart offers the capability to graphically depict lines.
 
 #### Example
 
-1.  `line [2.3, 45, .98, -3.4]` it can have all valid numeric values.
+1. `line [2.3, 45, .98, -3.4]` it can have all valid numeric values.
 
 ### Bar chart
 
@@ -90,14 +94,16 @@ A bar chart offers the capability to graphically depict bars.
 
 #### Example
 
-1.  `bar [2.3, 45, .98, -3.4]` it can have all valid numeric values.
+1. `bar [2.3, 45, .98, -3.4]` it can have all valid numeric values.
 
 #### Simplest example
 
 The only two things required are the chart name (`xychart-beta`) and one data set. So you will be able to draw a chart with a simple config like
 
-    xychart-beta
-        line [+1.3, .6, 2.4, -.34]
+```
+xychart-beta
+    line [+1.3, .6, 2.4, -.34]
+```
 
 ## Chart Configurations
 

docs/syntax/zenuml.md

@@ -105,10 +105,10 @@ zenuml
 
 Messages can be one of:
 
-1.  Sync message
-2.  Async message
-3.  Creation message
-4.  Reply message
+1. Sync message
+2. Async message
+3. Creation message
+4. Reply message
 
 ### Sync message
 
@@ -290,10 +290,10 @@ zenuml
 It is possible to express loops in a ZenUML diagram. This is done by any of the
 following notations:
 
-1.  while
-2.  for
-3.  forEach, foreach
-4.  loop
+1. while
+2. for
+3. forEach, foreach
+4. loop
 
 ```zenuml
 while(condition) {
@@ -423,13 +423,15 @@ It is possible to indicate a stop of the sequence within the flow (usually used
 
 This is done by the notation
 
-    try {
-      ...statements...
-    } catch {
-      ...statements...
-    } finally {
-      ...statements...
-    }
+```
+try {
+  ...statements...
+} catch {
+  ...statements...
+} finally {
+  ...statements...
+}
+```
 
 See the example below:
 

package.json

@@ -25,8 +25,8 @@
     "dev:vite": "tsx .vite/server.ts",
     "dev:coverage": "pnpm coverage:cypress:clean && VITE_COVERAGE=true pnpm dev:vite",
     "release": "pnpm build",
-    "lint": "eslint --cache --cache-strategy content --ignore-path .gitignore . && pnpm lint:jison && prettier --cache --check .",
-    "lint:fix": "eslint --cache --cache-strategy content --fix --ignore-path .gitignore . && prettier --write . && tsx scripts/fixCSpell.ts",
+    "lint": "cross-env NODE_OPTIONS=--max_old_space_size=8192 eslint --cache --cache-strategy content --ignore-path .gitignore . && pnpm lint:jison && prettier --cache --check .",
+    "lint:fix": "cross-env NODE_OPTIONS=--max_old_space_size=8192 eslint --cache --cache-strategy content --fix --ignore-path .gitignore . && prettier --write . && tsx scripts/fixCSpell.ts",
     "lint:jison": "tsx ./scripts/jison/lint.mts",
     "contributors": "tsx scripts/updateContributors.ts",
     "cypress": "cypress run",
@@ -61,76 +61,76 @@
     ]
   },
   "devDependencies": {
-    "@applitools/eyes-cypress": "^3.40.6",
-    "@commitlint/cli": "^17.6.1",
-    "@commitlint/config-conventional": "^17.6.1",
-    "@cspell/eslint-plugin": "^8.3.2",
-    "@cypress/code-coverage": "^3.12.18",
-    "@rollup/plugin-typescript": "^11.1.1",
-    "@types/cors": "^2.8.13",
-    "@types/eslint": "^8.37.0",
-    "@types/express": "^4.17.17",
-    "@types/js-yaml": "^4.0.5",
-    "@types/jsdom": "^21.1.1",
-    "@types/lodash": "^4.14.194",
-    "@types/mdast": "^3.0.11",
-    "@types/node": "^20.11.17",
-    "@types/prettier": "^2.7.2",
-    "@types/rollup-plugin-visualizer": "^4.2.1",
-    "@typescript-eslint/eslint-plugin": "^6.7.2",
-    "@typescript-eslint/parser": "^6.7.2",
-    "@vitest/coverage-v8": "^0.34.0",
-    "@vitest/spy": "^0.34.0",
-    "@vitest/ui": "^0.34.0",
+    "@applitools/eyes-cypress": "^3.42.3",
+    "@cspell/eslint-plugin": "^8.6.0",
+    "@cypress/code-coverage": "^3.12.30",
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@types/cors": "^2.8.17",
+    "@types/eslint": "^8.56.6",
+    "@types/express": "^4.17.21",
+    "@types/js-yaml": "^4.0.9",
+    "@types/jsdom": "^21.1.6",
+    "@types/lodash": "^4.17.0",
+    "@types/mdast": "^4.0.3",
+    "@types/node": "^20.11.30",
+    "@types/rollup-plugin-visualizer": "^4.2.4",
+    "@typescript-eslint/eslint-plugin": "^7.3.1",
+    "@typescript-eslint/parser": "^7.3.1",
+    "@vitest/coverage-v8": "^1.4.0",
+    "@vitest/spy": "^1.4.0",
+    "@vitest/ui": "^1.4.0",
     "ajv": "^8.12.0",
-    "chokidar": "^3.5.3",
-    "concurrently": "^8.0.1",
+    "chokidar": "^3.6.0",
+    "concurrently": "^8.2.2",
     "cors": "^2.8.5",
-    "cspell": "^8.3.2",
-    "cypress": "^12.17.4",
+    "cross-env": "^7.0.3",
+    "cspell": "^8.6.0",
+    "cypress": "^13.7.1",
     "cypress-image-snapshot": "^4.0.1",
-    "esbuild": "^0.20.0",
-    "eslint": "^8.47.0",
-    "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-cypress": "^2.13.2",
-    "eslint-plugin-html": "^7.1.0",
-    "eslint-plugin-jest": "^27.2.1",
-    "eslint-plugin-jsdoc": "^46.0.0",
+    "esbuild": "^0.20.2",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-cypress": "^2.15.1",
+    "eslint-plugin-html": "^8.0.0",
+    "eslint-plugin-jest": "^27.9.0",
+    "eslint-plugin-jsdoc": "^48.2.1",
     "eslint-plugin-json": "^3.1.0",
     "eslint-plugin-lodash": "^7.4.0",
-    "eslint-plugin-markdown": "^3.0.0",
+    "eslint-plugin-markdown": "^4.0.1",
     "eslint-plugin-no-only-tests": "^3.1.0",
     "eslint-plugin-tsdoc": "^0.2.17",
-    "eslint-plugin-unicorn": "^47.0.0",
-    "express": "^4.18.2",
-    "globby": "^13.1.4",
-    "husky": "^8.0.3",
-    "jest": "^29.5.0",
+    "eslint-plugin-unicorn": "^51.0.1",
+    "express": "^4.19.1",
+    "globby": "^14.0.1",
+    "husky": "^9.0.11",
+    "jest": "^29.7.0",
     "jison": "^0.4.18",
     "js-yaml": "^4.1.0",
-    "jsdom": "^22.0.0",
+    "jsdom": "^24.0.0",
     "langium-cli": "3.0.1",
-    "lint-staged": "^13.2.1",
+    "lint-staged": "^15.2.2",
+    "markdown-table": "^3.0.3",
     "nyc": "^15.1.0",
     "path-browserify": "^1.0.1",
-    "pnpm": "^8.6.8",
-    "prettier": "^2.8.8",
-    "prettier-plugin-jsdoc": "^0.4.2",
-    "rimraf": "^5.0.0",
-    "rollup-plugin-visualizer": "^5.9.2",
-    "start-server-and-test": "^2.0.0",
-    "tsx": "^4.6.2",
-    "typescript": "^5.1.3",
-    "vite": "^4.5.2",
-    "vite-plugin-istanbul": "^4.1.0",
-    "vitest": "^0.34.0"
+    "pnpm": "^8.15.5",
+    "prettier": "^3.2.5",
+    "prettier-plugin-jsdoc": "^1.3.0",
+    "rimraf": "^5.0.5",
+    "rollup-plugin-visualizer": "^5.12.0",
+    "start-server-and-test": "^2.0.3",
+    "tsx": "^4.7.1",
+    "typescript": "^5.4.3",
+    "vite": "^5.2.3",
+    "vite-plugin-istanbul": "^6.0.0",
+    "vitest": "^1.4.0"
   },
   "nyc": {
     "report-dir": "coverage/cypress"
   },
   "pnpm": {
     "patchedDependencies": {
-      "cytoscape@3.28.1": "patches/cytoscape@3.28.1.patch"
+      "cytoscape@3.28.1": "patches/cytoscape@3.28.1.patch",
+      "lodash-es@4.17.21": "patches/lodash-es@4.17.21.patch"
     }
   }
 }

packages/mermaid-example-diagram/package.json

@@ -38,14 +38,14 @@
     ]
   },
   "dependencies": {
-    "@braintree/sanitize-url": "^6.0.1",
-    "d3": "^7.0.0",
-    "khroma": "^2.0.0"
+    "@braintree/sanitize-url": "^6.0.4",
+    "d3": "^7.9.0",
+    "khroma": "^2.1.0"
   },
   "devDependencies": {
-    "concurrently": "^8.0.0",
-    "rimraf": "^5.0.0",
-    "mermaid": "workspace:*"
+    "concurrently": "^8.2.2",
+    "mermaid": "workspace:*",
+    "rimraf": "^5.0.5"
   },
   "files": [
     "dist"

packages/mermaid-flowchart-elk/package.json

@@ -29,15 +29,15 @@
   "author": "Knut Sveidqvist",
   "license": "MIT",
   "dependencies": {
-    "d3": "^7.4.0",
+    "d3": "^7.9.0",
     "dagre-d3-es": "7.0.10",
-    "khroma": "^2.0.0",
-    "elkjs": "^0.8.2"
+    "elkjs": "^0.9.2",
+    "khroma": "^2.1.0"
   },
   "devDependencies": {
-    "concurrently": "^8.0.0",
-    "rimraf": "^5.0.0",
-    "mermaid": "workspace:^"
+    "concurrently": "^8.2.2",
+    "mermaid": "workspace:^",
+    "rimraf": "^5.0.5"
   },
   "files": [
     "dist"

packages/mermaid-flowchart-elk/src/diagram-definition.ts

@@ -1,6 +1,6 @@
 // @ts-ignore: JISON typing missing
 import parser from '../../mermaid/src/diagrams/flowchart/parser/flow.jison';
-import * as db from '../../mermaid/src/diagrams/flowchart/flowDb.js';
+import db from '../../mermaid/src/diagrams/flowchart/flowDb.js';
 import styles from '../../mermaid/src/diagrams/flowchart/styles.js';
 import renderer from './flowRenderer-elk.js';
 

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

@@ -6,6 +6,7 @@ import { findCommonAncestor } from './render-utils.js';
 import { labelHelper } from '../../mermaid/src/dagre-wrapper/shapes/util.js';
 import { getConfig } from '../../mermaid/src/config.js';
 import { log } from '../../mermaid/src/logger.js';
+import utils from '../../mermaid/src/utils.js';
 import { setupGraphViewbox } from '../../mermaid/src/setupGraphViewbox.js';
 import common from '../../mermaid/src/diagrams/common/common.js';
 import { interpolateToCurve, getStylesFromArray } from '../../mermaid/src/utils.js';
@@ -655,6 +656,11 @@ const insertEdge = function (edgesEl, edge, edgeData, diagObj, parentLookupDb, i
     .attr('d', curve(points))
     .attr('class', 'path ' + edgeData.classes)
     .attr('fill', 'none');
+  Object.entries(edgeData).forEach(([key, value]) => {
+    if (key !== 'classes') {
+      edgePath.attr(key, value);
+    }
+  });
   const edgeG = edgesEl.insert('g').attr('class', 'edgeLabel');
   const edgeWithLabel = select(edgeG.node().appendChild(edge.labelEl));
   const box = edgeWithLabel.node().firstChild.getBoundingClientRect();
@@ -702,21 +708,15 @@ const insertChildren = (nodeArray, parentLookupDb) => {
  */
 
 export const draw = async function (text, id, _version, diagObj) {
-  // Add temporary render element
-  diagObj.db.clear();
+  const { securityLevel, flowchart: conf } = getConfig();
   nodeDb = {};
   portPos = {};
-  diagObj.db.setGen('gen-2');
-  // Parse the graph definition
-  diagObj.parser.parse(text);
-
   const renderEl = select('body').append('div').attr('style', 'height:400px').attr('id', 'cy');
   let graph = {
     id: 'root',
     layoutOptions: {
       'elk.hierarchyHandling': 'INCLUDE_CHILDREN',
-      'org.eclipse.elk.padding': '[top=100, left=100, bottom=110, right=110]',
-      'elk.layered.spacing.edgeNodeBetweenLayers': '30',
+      'elk.layered.spacing.edgeNodeBetweenLayers': conf?.nodeSpacing ? `${conf.nodeSpacing}` : '30',
       // 'elk.layered.mergeEdges': 'true',
       'elk.direction': 'DOWN',
       // 'elk.ports.sameLayerEdges': true,
@@ -744,7 +744,6 @@ export const draw = async function (text, id, _version, diagObj) {
       graph.layoutOptions['elk.direction'] = 'LEFT';
       break;
   }
-  const { securityLevel, flowchart: conf } = getConfig();
 
   // Find the root dom node to ne used in rendering
   // Handle root and document for when rendering in sandbox mode
@@ -759,7 +758,6 @@ export const draw = async function (text, id, _version, diagObj) {
   const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document;
 
   const svg = root.select(`[id="${id}"]`);
-
   // Define the supported markers for the diagram
   const markers = ['point', 'circle', 'cross'];
 
@@ -841,6 +839,7 @@ export const draw = async function (text, id, _version, diagObj) {
   log.info('after layout', JSON.stringify(graph, null, 2));
   const g = await elk.layout(graph);
   drawNodes(0, 0, g.children, svg, subGraphsEl, diagObj, 0);
+  utils.insertTitle(svg, 'flowchartTitleText', conf.titleTopMargin, diagObj.db.getDiagramTitle());
   log.info('after layout', g);
   g.edges?.map((edge) => {
     insertEdge(edgesEl, edge, edge.edgeData, diagObj, parentLookupDb, id);

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",
@@ -34,7 +34,7 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@zenuml/core": "^3.17.2"
+    "@zenuml/core": "^3.19.2"
   },
   "devDependencies": {
     "mermaid": "workspace:^"

packages/mermaid/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mermaid",
   "version": "11.0.0-alpha.6",
-  "description": "Markdown-ish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
+  "description": "Markdown-ish syntax for generating flowcharts, mindmaps, sequence diagrams, class diagrams, gantt charts, git graphs and more.",
   "type": "module",
   "module": "./dist/mermaid.core.mjs",
   "types": "./dist/mermaid.d.ts",
@@ -20,7 +20,16 @@
     "sequence diagram",
     "gantt",
     "class diagram",
-    "git graph"
+    "git graph",
+    "mindmap",
+    "packet diagram",
+    "c4 diagram",
+    "er diagram",
+    "pie chart",
+    "pie diagram",
+    "quadrant chart",
+    "requirement diagram",
+    "graph"
   ],
   "scripts": {
     "clean": "rimraf dist",
@@ -59,69 +68,69 @@
     ]
   },
   "dependencies": {
-    "@braintree/sanitize-url": "^6.0.1",
+    "@braintree/sanitize-url": "^7.0.1",
     "@mermaid-js/parser": "workspace:^",
     "cytoscape": "^3.28.1",
     "cytoscape-cose-bilkent": "^4.1.0",
-    "d3": "^7.4.0",
+    "d3": "^7.9.0",
     "d3-sankey": "^0.12.3",
     "dagre-d3-es": "7.0.10",
-    "dayjs": "^1.11.7",
-    "dompurify": "^3.0.5",
-    "elkjs": "^0.9.0",
+    "dayjs": "^1.11.10",
+    "dompurify": "^3.0.11",
+    "elkjs": "^0.9.2",
     "katex": "^0.16.9",
-    "khroma": "^2.0.0",
+    "khroma": "^2.1.0",
     "lodash-es": "^4.17.21",
-    "mdast-util-from-markdown": "^1.3.0",
-    "stylis": "^4.1.3",
+    "mdast-util-from-markdown": "^2.0.0",
+    "stylis": "^4.3.1",
     "ts-dedent": "^2.2.0",
-    "uuid": "^9.0.0"
+    "uuid": "^9.0.1"
   },
   "devDependencies": {
-    "@adobe/jsonschema2md": "^7.1.4",
-    "@types/cytoscape": "^3.19.9",
-    "@types/d3": "^7.4.0",
-    "@types/d3-sankey": "^0.12.1",
-    "@types/d3-scale": "^4.0.3",
-    "@types/d3-scale-chromatic": "^3.0.0",
-    "@types/d3-selection": "^3.0.5",
-    "@types/d3-shape": "^3.1.1",
-    "@types/dompurify": "^3.0.2",
-    "@types/jsdom": "^21.1.1",
+    "@adobe/jsonschema2md": "^7.1.5",
+    "@types/cytoscape": "^3.19.16",
+    "@types/d3": "^7.4.3",
+    "@types/d3-sankey": "^0.12.4",
+    "@types/d3-scale": "^4.0.8",
+    "@types/d3-scale-chromatic": "^3.0.3",
+    "@types/d3-selection": "^3.0.10",
+    "@types/d3-shape": "^3.1.6",
+    "@types/dompurify": "^3.0.5",
+    "@types/jsdom": "^21.1.6",
     "@types/katex": "^0.16.7",
-    "@types/lodash-es": "^4.17.7",
-    "@types/micromatch": "^4.0.2",
-    "@types/prettier": "^2.7.2",
-    "@types/stylis": "^4.0.2",
-    "@types/uuid": "^9.0.1",
-    "@typescript-eslint/eslint-plugin": "^5.59.0",
-    "@typescript-eslint/parser": "^5.59.0",
-    "ajv": "^8.11.2",
-    "chokidar": "^3.5.3",
-    "concurrently": "^8.0.1",
-    "cpy-cli": "^4.2.0",
+    "@types/lodash-es": "^4.17.12",
+    "@types/micromatch": "^4.0.6",
+    "@types/prettier": "^3.0.0",
+    "@types/stylis": "^4.2.5",
+    "@types/uuid": "^9.0.8",
+    "@typescript-eslint/eslint-plugin": "^7.3.1",
+    "@typescript-eslint/parser": "^7.3.1",
+    "ajv": "^8.12.0",
+    "chokidar": "^3.6.0",
+    "concurrently": "^8.2.2",
+    "cpy-cli": "^5.0.0",
     "csstree-validator": "^3.0.0",
-    "globby": "^13.1.4",
+    "globby": "^14.0.1",
     "jison": "^0.4.18",
-    "js-base64": "^3.7.5",
-    "jsdom": "^22.0.0",
-    "json-schema-to-typescript": "^11.0.3",
+    "js-base64": "^3.7.7",
+    "jsdom": "^24.0.0",
+    "json-schema-to-typescript": "^13.1.2",
     "micromatch": "^4.0.5",
     "path-browserify": "^1.0.1",
-    "prettier": "^2.8.8",
-    "remark": "^14.0.2",
-    "remark-frontmatter": "^4.0.1",
-    "remark-gfm": "^3.0.1",
-    "rimraf": "^5.0.0",
-    "start-server-and-test": "^2.0.0",
-    "type-fest": "^4.1.0",
-    "typedoc": "^0.25.0",
-    "typedoc-plugin-markdown": "^3.15.2",
-    "typescript": "^5.0.4",
+    "prettier": "^3.2.5",
+    "remark": "^15.0.1",
+    "remark-frontmatter": "^5.0.0",
+    "remark-gfm": "^4.0.0",
+    "rimraf": "^5.0.5",
+    "start-server-and-test": "^2.0.3",
+    "type-fest": "^4.13.1",
+    "typedoc": "^0.25.12",
+    "typedoc-plugin-markdown": "^3.17.1",
+    "typescript": "^5.4.3",
     "unist-util-flatmap": "^1.0.0",
-    "unist-util-visit": "^4.1.2",
-    "vitepress": "^1.0.0-rc.40",
-    "vitepress-plugin-search": "^1.0.4-alpha.22"
+    "unist-util-visit": "^5.0.0",
+    "vitepress": "^1.0.1",
+    "vitepress-plugin-search": "1.0.4-alpha.22"
   },
   "files": [
     "dist/",

packages/mermaid/scripts/docs.mts

@@ -85,7 +85,7 @@ const LOGMSG_COPIED = `, and copied to ${FINAL_DOCS_DIR}`;
 
 const WARN_DOCSDIR_DOESNT_MATCH = `Changed files were transformed in ${SOURCE_DOCS_DIR} but do not match the files in ${FINAL_DOCS_DIR}. Please run 'pnpm --filter mermaid run docs:build' after making changes to ${SOURCE_DOCS_DIR} to update the ${FINAL_DOCS_DIR} directory with the transformed files.`;
 
-const prettierConfig = prettier.resolveConfig.sync('.') ?? {};
+const prettierConfig = (await prettier.resolveConfig('.')) ?? {};
 // From https://github.com/vuejs/vitepress/blob/428eec3750d6b5648a77ac52d88128df0554d4d1/src/node/markdownToVue.ts#L20-L21
 const includesRE = /<!--\s*@include:\s*(.*?)\s*-->/g;
 const includedFiles: Set<string> = new Set();
@@ -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.
@@ -325,7 +326,7 @@ export function transformMarkdownAst({
  *
  * @param file {string} name of the file that will be verified
  */
-const transformMarkdown = (file: string) => {
+const transformMarkdown = async (file: string) => {
   const doc = injectPlaceholders(transformIncludeStatements(file, readSyncedUTF8file(file)));
 
   let transformed = remark()
@@ -346,7 +347,7 @@ const transformMarkdown = (file: string) => {
     transformed = doc;
   }
 
-  const formatted = prettier.format(transformed, {
+  const formatted = await prettier.format(transformed, {
     parser: 'markdown',
     ...prettierConfig,
   });
@@ -453,7 +454,7 @@ async function transformJsonSchema(file: string) {
 
     const transformed = transformer.stringify(await transformer.run(markdownAst as Root));
 
-    const formatted = prettier.format(transformed, {
+    const formatted = await prettier.format(transformed, {
       parser: 'markdown',
       ...prettierConfig,
     });
@@ -471,7 +472,7 @@ async function transformJsonSchema(file: string) {
  *
  * @param filename {string} name of the HTML file to transform
  */
-const transformHtml = (filename: string) => {
+const transformHtml = async (filename: string) => {
   /**
    * Insert the '...auto generated...' comment into an HTML file after the<html> element
    *
@@ -495,7 +496,7 @@ const transformHtml = (filename: string) => {
   };
 
   const transformedHTML = insertAutoGeneratedComment(filename);
-  const formattedHTML = prettier.format(transformedHTML, {
+  const formattedHTML = await prettier.format(transformedHTML, {
     parser: 'html',
     ...prettierConfig,
   });
@@ -540,7 +541,7 @@ export const processDocs = async () => {
   const mdFileGlobs = getGlobs([posix.join(sourceDirGlob, '*.md')]);
   const mdFiles = await getFilesFromGlobs(mdFileGlobs);
   console.log(`${action} ${mdFiles.length} markdown files...`);
-  mdFiles.forEach(transformMarkdown);
+  await Promise.all(mdFiles.map(transformMarkdown));
 
   for (const includedFile of includedFiles) {
     rmSync(includedFile, { force: true });
@@ -551,7 +552,7 @@ export const processDocs = async () => {
   const htmlFileGlobs = getGlobs([posix.join(sourceDirGlob, '*.html')]);
   const htmlFiles = await getFilesFromGlobs(htmlFileGlobs);
   console.log(`${action} ${htmlFiles.length} html files...`);
-  htmlFiles.forEach(transformHtml);
+  await Promise.all(htmlFiles.map(transformHtml));
 
   const otherFileGlobs = getGlobs([sourceDirGlob, '!**/*.md', '!**/*.html']);
   const otherFiles = await getFilesFromGlobs(otherFileGlobs);
@@ -590,9 +591,9 @@ export const processDocs = async () => {
           return;
         }
         if (isMd(path)) {
-          transformMarkdown(path);
+          void transformMarkdown(path);
         } else if (isHtml(path)) {
-          transformHtml(path);
+          void transformHtml(path);
         } else if (isOther(path)) {
           copyTransformedContents(path, true);
         }

packages/mermaid/src/config.ts

@@ -124,7 +124,7 @@ export const setConfig = (conf: MermaidConfig): MermaidConfig => {
  * | --------- | ------------------------- | ----------- | ------------------------------ |
  * | getConfig | Obtains the currentConfig | Get Request | Any Values from current Config |
  *
- * **Notes**: Returns **any** the currentConfig
+ * **Notes**: Avoid calling this function repeatedly. Instead, store the result in a variable and use it, and pass it down to function calls.
  *
  * @returns The currentConfig
  */

packages/mermaid/src/config.type.ts

@@ -159,6 +159,13 @@ export interface MermaidConfig {
   dompurifyConfig?: DOMPurifyConfiguration;
   wrap?: boolean;
   fontSize?: number;
+  markdownAutoWrap?: boolean;
+  /**
+   * Suppresses inserting 'Syntax error' diagram in the DOM.
+   * This is useful when you want to control how to handle syntax errors in your application.
+   *
+   */
+  suppressErrorRendering?: boolean;
 }
 /**
  * The object containing configurations specific for packet diagrams.

packages/mermaid/src/dagre-wrapper/clusters.js

@@ -30,7 +30,7 @@ const rect = (parent, node) => {
   //   .appendChild(createLabel(node.labelText, node.labelStyle, undefined, true));
   const text =
     node.labelType === 'markdown'
-      ? createText(label, node.labelText, { style: node.labelStyle, useHtmlLabels })
+      ? createText(label, node.labelText, { style: node.labelStyle, useHtmlLabels }, siteConfig)
       : label.node().appendChild(createLabel(node.labelText, node.labelStyle, undefined, true));
 
   // Get the size of the label

packages/mermaid/src/dagre-wrapper/edges.js

@@ -18,15 +18,21 @@ export const clear = () => {
 };
 
 export const insertEdgeLabel = (elem, edge) => {
-  const useHtmlLabels = evaluate(getConfig().flowchart.htmlLabels);
+  const config = getConfig();
+  const useHtmlLabels = evaluate(config.flowchart.htmlLabels);
   // Create the actual text element
   const labelElement =
     edge.labelType === 'markdown'
-      ? createText(elem, edge.label, {
-          style: edge.labelStyle,
-          useHtmlLabels,
-          addSvgBackground: true,
-        })
+      ? createText(
+          elem,
+          edge.label,
+          {
+            style: edge.labelStyle,
+            useHtmlLabels,
+            addSvgBackground: true,
+          },
+          config
+        )
       : createLabel(edge.label, edge.labelStyle);
 
   // Create outer g, edgeLabel, this will be positioned after graph layout

packages/mermaid/src/dagre-wrapper/index.js

@@ -54,6 +54,14 @@ const recursiveRender = async (_elem, graph, diagramType, id, parentCluster, sit
       if (node && node.clusterNode) {
         // const children = graph.children(v);
         log.info('Cluster identified', v, node.width, graph.node(v));
+        // `node.graph.setGraph` applies the graph configurations such as nodeSpacing to subgraphs as without this the default values would be used
+        // We override only the `ranksep` and `nodesep` configurations to allow for setting subgraph spacing while avoiding overriding other properties
+        const { ranksep, nodesep } = graph.graph();
+        node.graph.setGraph({
+          ...node.graph.graph(),
+          ranksep,
+          nodesep,
+        });
         const o = await recursiveRender(
           nodes,
           node.graph,

packages/mermaid/src/dagre-wrapper/shapes/util.js

@@ -6,8 +6,9 @@ import { evaluate, sanitizeText } from '../../diagrams/common/common.js';
 import { decodeEntities } from '../../utils.js';
 
 export const labelHelper = async (parent, node, _classes, isNode) => {
+  const config = getConfig();
   let classes;
-  const useHtmlLabels = node.useHtmlLabels || evaluate(getConfig().flowchart.htmlLabels);
+  const useHtmlLabels = node.useHtmlLabels || evaluate(config.flowchart.htmlLabels);
   if (!_classes) {
     classes = 'node default';
   } else {
@@ -35,26 +36,26 @@ export const labelHelper = async (parent, node, _classes, isNode) => {
   let text;
   if (node.labelType === 'markdown') {
     // text = textNode;
-    text = createText(label, sanitizeText(decodeEntities(labelText), getConfig()), {
-      useHtmlLabels,
-      width: node.width || getConfig().flowchart.wrappingWidth,
-      classes: 'markdown-node-label',
-    });
+    text = createText(
+      label,
+      sanitizeText(decodeEntities(labelText), config),
+      {
+        useHtmlLabels,
+        width: node.width || config.flowchart.wrappingWidth,
+        classes: 'markdown-node-label',
+      },
+      config
+    );
   } else {
     text = textNode.appendChild(
-      createLabel(
-        sanitizeText(decodeEntities(labelText), getConfig()),
-        node.labelStyle,
-        false,
-        isNode
-      )
+      createLabel(sanitizeText(decodeEntities(labelText), config), node.labelStyle, false, isNode)
     );
   }
   // Get the size of the label
   let bbox = text.getBBox();
   const halfPadding = node.padding / 2;
 
-  if (evaluate(getConfig().flowchart.htmlLabels)) {
+  if (evaluate(config.flowchart.htmlLabels)) {
     const div = text.children[0];
     const dv = select(text);
 
@@ -76,8 +77,8 @@ export const labelHelper = async (parent, node, _classes, isNode) => {
 
                 if (noImgText) {
                   // default size if no text
-                  const bodyFontSize = getConfig().fontSize
-                    ? getConfig().fontSize
+                  const bodyFontSize = config.fontSize
+                    ? config.fontSize
                     : window.getComputedStyle(document.body).fontSize;
                   const enlargingFactor = 5;
                   const width = parseInt(bodyFontSize, 10) * enlargingFactor + 'px';

packages/mermaid/src/diagram-api/diagram-orchestration.spec.ts

@@ -53,7 +53,7 @@ describe('diagram-orchestration', () => {
       expect(() =>
         detectType('flowchart TD; A-->B', { flowchart: { defaultRenderer: 'dagre-d3' } })
       ).toThrowErrorMatchingInlineSnapshot(
-        '"No diagram type detected matching given configuration for text: flowchart TD; A-->B"'
+        `[UnknownDiagramError: No diagram type detected matching given configuration for text: flowchart TD; A-->B]`
       );
 
       // graph & dagre-wrapper => flowchart-v2