Revert "update to warning format"

This reverts commit 89a1b67ad8.

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -50,7 +50,7 @@ body:
     attributes:
       label: Setup
       description: |-
-        Please fill out the info below.
+        Please fill out the below info.
         Note that you only need to fill out the relevant section
       value: |-
         - Mermaid version: 

.github/workflows/build-docs.yml

@@ -1,29 +0,0 @@
-name: Build Vitepress docs
-
-on:
-  pull_request:
-
-permissions:
-  contents: read
-
-jobs:
-  # Build job
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-
-      - uses: pnpm/action-setup@v2
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v3
-        with:
-          cache: pnpm
-          node-version: 18
-
-      - name: Install Packages
-        run: pnpm install --frozen-lockfile
-
-      - name: Run Build
-        run: pnpm --filter mermaid run docs:build:vitepress

.github/workflows/e2e-applitools.yml

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

.github/workflows/link-checker.yml

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

.github/workflows/lint.yml

@@ -42,7 +42,7 @@ jobs:
           if ! pnpm run lint; then
               # print a nice error message on lint failure
               ERROR_MESSAGE='Running `pnpm run lint` failed.'
-              ERROR_MESSAGE+=' Running `pnpm -w run lint:fix` may fix this issue. '
+              ERROR_MESSAGE+=' Running `pnpm run lint:fix` may fix this issue. '
               ERROR_MESSAGE+=" If this error doesn't occur on your local machine,"
               ERROR_MESSAGE+=' make sure your packages are up-to-date by running `pnpm install`.'
               ERROR_MESSAGE+=' You may also need to delete your prettier cache by running'

.github/workflows/publish-docs.yml

@@ -5,6 +5,10 @@ on:
   push:
     branches:
       - master
+  pull_request:
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
 
 # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
 permissions:
@@ -49,6 +53,7 @@ jobs:
 
   # Deployment job
   deploy:
+    if: ${{ github.event_name == 'push' && github.ref == 'refs/heads/master' }}
     environment:
       name: github-pages
     runs-on: ubuntu-latest
@@ -56,4 +61,4 @@ jobs:
     steps:
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v2
+        uses: actions/deploy-pages@v1

.github/workflows/release-publish.yml

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

.gitignore

@@ -36,6 +36,3 @@ tsconfig.tsbuildinfo
 knsv*.html
 local*.html
 stats/
-
-**/user-avatars/*
-**/contributor-names.json

.lintstagedrc.mjs

@@ -1,5 +1,5 @@
 export default {
-  '!(docs/**/*)*.{ts,js,html,md,mts}': [
+  '!(docs/**/*)*.{ts,js,json,html,md,mts}': [
     'eslint --cache --cache-strategy content --fix',
     // don't cache prettier yet, since we use `prettier-plugin-jsdoc`,
     // and prettier doesn't invalidate cache on plugin updates"

.prettierignore

@@ -4,5 +4,4 @@ cypress/platform/xss3.html
 coverage
 # Autogenerated by PNPM
 pnpm-lock.yaml
-stats
-packages/mermaid/src/docs/.vitepress/components.d.ts
+stats

.vite/build.ts

@@ -3,7 +3,6 @@ import { resolve } from 'path';
 import { fileURLToPath } from 'url';
 import jisonPlugin from './jisonPlugin.js';
 import { readFileSync } from 'fs';
-import typescript from '@rollup/plugin-typescript';
 import { visualizer } from 'rollup-plugin-visualizer';
 import type { TemplateType } from 'rollup-plugin-visualizer/dist/plugin/template-types.js';
 
@@ -11,7 +10,6 @@ const visualize = process.argv.includes('--visualize');
 const watch = process.argv.includes('--watch');
 const mermaidOnly = process.argv.includes('--mermaid');
 const __dirname = fileURLToPath(new URL('.', import.meta.url));
-const sourcemap = false;
 
 type OutputOptions = Exclude<
   Exclude<InlineConfig['build'], undefined>['rollupOptions'],
@@ -61,15 +59,9 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
     {
       name,
       format: 'esm',
-      sourcemap,
+      sourcemap: true,
       entryFileNames: `${name}.esm${minify ? '.min' : ''}.mjs`,
     },
-    {
-      name,
-      format: 'umd',
-      sourcemap,
-      entryFileNames: `${name}${minify ? '.min' : ''}.js`,
-    },
   ];
 
   if (core) {
@@ -86,7 +78,7 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
       {
         name,
         format: 'esm',
-        sourcemap,
+        sourcemap: true,
         entryFileNames: `${name}.core.mjs`,
       },
     ];
@@ -110,14 +102,9 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
       },
     },
     resolve: {
-      extensions: [],
+      extensions: ['.jison', '.js', '.ts', '.json'],
     },
-    plugins: [
-      jisonPlugin(),
-      // @ts-expect-error According to the type definitions, rollup plugins are incompatible with vite
-      typescript({ compilerOptions: { declaration: false } }),
-      ...visualizerOptions(packageName, core),
-    ],
+    plugins: [jisonPlugin(), ...visualizerOptions(packageName, core)],
   };
 
   if (watch && config.build) {

README.md

@@ -165,13 +165,6 @@ class Class10 {
   int id
   size()
 }
-namespace Namespace01 {
-  class Class11
-  class Class12 {
-    int id
-    size()
-  }
-}
 ```
 
 ```mermaid
@@ -191,13 +184,6 @@ class Class10 {
   int id
   size()
 }
-namespace Namespace01 {
-  class Class11
-  class Class12 {
-    int id
-    size()
-  }
-}
 ```
 
 ### State diagram [<a href="https://mermaid-js.github.io/mermaid/#/stateDiagram">docs</a> - <a href="https://mermaid.live/edit#pako:eNpdkEFvgzAMhf8K8nEqpYSNthx22Xbcqcexg0sCiZQQlDhIFeK_L8A6TfXp6fOz9ewJGssFVOAJSbwr7ByadGR1n8T6evpO0vQ1uZDSekOrXGFsPqJPO6q-2-imH8f_0TeHXm50lfelsAMjnEHFY6xpMdRAUhhRQxUlFy0GTTXU_RytYeAx-AdXZB1ULWovdoCB7OXWN1CRC-Ju-r3uz6UtchGHJqDbsPygU57iysb2reoWHpyOWBINvsqypb3vFMlw3TfWZF5xiY7keC6zkpUnZIUojwW-FAVvrvn51LLnvOXHQ84Q5nn-AVtLcwk">live editor</a>]

__mocks__/d3.ts

@@ -1,5 +1,5 @@
 // @ts-nocheck TODO: Fix TS
-import { MockedD3 } from '../packages/mermaid/src/tests/MockedD3.js';
+import { MockedD3 } from '../packages/mermaid/src/tests/MockedD3';
 
 export const select = function () {
   return new MockedD3();

cSpell.json

@@ -5,13 +5,11 @@
     "acyclicer",
     "adamiecki",
     "alois",
-    "aloisklink",
     "antiscript",
     "appli",
     "applitools",
     "asciidoctor",
     "ashish",
-    "ashishjain",
     "astah",
     "bbox",
     "bilkent",
@@ -25,7 +23,6 @@
     "classdef",
     "codedoc",
     "colour",
-    "commitlint",
     "cpettitt",
     "customizability",
     "cuzon",
@@ -51,41 +48,30 @@
     "grav",
     "greywolf",
     "huynh",
-    "huynhicode",
     "inkdrop",
     "jaoude",
-    "jgreywolf",
     "jison",
-    "jiti",
     "kaufmann",
     "khroma",
     "klemm",
     "klink",
     "knsv",
     "knut",
-    "knutsveidqvist",
     "laganeckas",
-    "linetype",
     "lintstagedrc",
     "logmsg",
     "lucida",
-    "markdownish",
     "matthieu",
-    "matthieumorel",
     "mdast",
     "mdbook",
-    "mermaidjs",
     "mermerd",
     "mindaugas",
     "mindmap",
     "mindmaps",
     "mitigations",
     "mkdocs",
-    "mmorel",
     "mult",
     "orlandoni",
-    "pathe",
-    "pbrolin",
     "phpbb",
     "plantuml",
     "playfair",
@@ -97,7 +83,6 @@
     "rect",
     "rects",
     "redmine",
-    "rehype",
     "roledescription",
     "sandboxed",
     "setupgraphviewbox",
@@ -105,12 +90,8 @@
     "sidharth",
     "sidharthv",
     "sphinxcontrib",
-    "startx",
-    "starty",
     "statediagram",
     "steph",
-    "stopx",
-    "stopy",
     "stylis",
     "substate",
     "sveidqvist",
@@ -120,19 +101,14 @@
     "textlength",
     "treemap",
     "ts-nocheck",
-    "tsdoc",
     "tuleap",
-    "tylerlong",
     "ugge",
     "unist",
-    "unocss",
-    "valign",
     "verdana",
     "viewports",
     "vinod",
     "visio",
     "vitepress",
-    "vueuse",
     "xlink",
     "yash"
   ],
@@ -174,7 +150,6 @@
   ],
   "ignorePaths": [
     "packages/mermaid/src/docs/CHANGELOG.md",
-    "packages/mermaid/src/docs/.vitepress/redirect.ts",
-    "packages/mermaid/src/docs/.vitepress/contributor-names.json"
+    "packages/mermaid/src/docs/.vitepress/redirect.ts"
   ]
 }

cypress/helpers/util.js

@@ -60,7 +60,7 @@ export const renderGraph = (graphStr, options, api) => {
   openURLAndVerifyRendering(url, options);
 };
 
-export const openURLAndVerifyRendering = (url, options, validation = undefined) => {
+const openURLAndVerifyRendering = (url, options, validation = undefined) => {
   const useAppli = Cypress.env('useAppli');
   const name = (options.name || cy.state('runnable').fullTitle()).replace(/\s+/g, '-');
 

cypress/integration/other/configuration.spec.js

@@ -1,4 +1,4 @@
-import { renderGraph } from '../../helpers/util.js';
+import { renderGraph } from '../../helpers/util';
 describe('Configuration', () => {
   describe('arrowMarkerAbsolute', () => {
     it('should handle default value false of arrowMarkerAbsolute', () => {

cypress/integration/other/external-diagrams.spec.js

@@ -1,4 +1,4 @@
-import { urlSnapshotTest } from '../../helpers/util.js';
+import { urlSnapshotTest } from '../../helpers/util';
 
 describe('mermaid', () => {
   describe('registerDiagram', () => {

cypress/integration/other/ghsa.spec.js

@@ -1,4 +1,4 @@
-import { urlSnapshotTest, openURLAndVerifyRendering } from '../../helpers/util.js';
+import { urlSnapshotTest } from '../../helpers/util';
 
 describe('CSS injections', () => {
   it('should not allow CSS injections outside of the diagram', () => {
@@ -13,11 +13,4 @@ describe('CSS injections', () => {
       flowchart: { htmlLabels: false },
     });
   });
-  it('should not allow manipulating styletags using arrowheads', () => {
-    openURLAndVerifyRendering('http://localhost:9000/xss23-css.html', {
-      logLevel: 1,
-      arrowMarkerAbsolute: false,
-      flowchart: { htmlLabels: true },
-    });
-  });
 });

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

@@ -1,4 +1,4 @@
-import { imgSnapshotTest } from '../../helpers/util.js';
+import { imgSnapshotTest } from '../../helpers/util';
 describe('Class diagram V2', () => {
   it('0: should render a simple class diagram', () => {
     imgSnapshotTest(
@@ -548,18 +548,4 @@ class C13["With Città foreign language"]
 `
     );
   });
-  it('should add classes namespaces', function () {
-    imgSnapshotTest(
-      `
-      classDiagram
-      namespace Namespace1 {
-        class C1
-        class C2
-      }
-      C1 --> C2
-      class C3
-      class C4
-      `
-    );
-  });
 });

cypress/integration/rendering/classDiagram.spec.js

@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util';
 
 describe('Class diagram', () => {
   it('1: should render a simple class diagram', () => {
@@ -286,7 +286,7 @@ describe('Class diagram', () => {
     cy.get('svg');
   });
 
-  it('15: should render a simple class diagram with css classes applied to multiple classes', () => {
+  it('15: should render a simple class diagram with css classes applied two multiple classes', () => {
     imgSnapshotTest(
       `
     classDiagram

cypress/integration/rendering/current.spec.js

@@ -1,4 +1,4 @@
-import { imgSnapshotTest } from '../../helpers/util.js';
+import { imgSnapshotTest } from '../../helpers/util';
 
 describe('Current diagram', () => {
   it('should render a state with states in it', () => {

cypress/integration/rendering/debug.spec.js

@@ -1,4 +1,4 @@
-import { imgSnapshotTest } from '../../helpers/util.js';
+import { imgSnapshotTest } from '../../helpers/util';
 
 describe('Flowchart', () => {
   it('34: testing the label width in percy', () => {

cypress/integration/rendering/erDiagram.spec.js

@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util';
 
 describe('Entity Relationship Diagram', () => {
   it('should render a simple ER diagram', () => {

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

@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util';
 
 describe.skip('Flowchart ELK', () => {
   it('1-elk: should render a simple flowchart', () => {

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

@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util';
 
 describe('Flowchart v2', () => {
   it('1: should render a simple flowchart', () => {
@@ -685,16 +685,6 @@ A ~~~ B
       { titleTopMargin: 0 }
     );
   });
-  it('4023: Should render html labels with images and-or text correctly', () => {
-    imgSnapshotTest(
-      `flowchart TD
-    B[<img src='https://mermaid.js.org/mermaid-logo.svg'>]
-    B-->C[<img src="https://mermaid.js.org/mermaid-logo.svg"> more text <img src='https://mermaid.js.org/mermaid-logo.svg'>]
-    B-->D(<img src='https://mermaid.js.org/mermaid-logo.svg'> some text)
-    B-->E(plain)`,
-      {}
-    );
-  });
   describe('Markdown strings flowchart (#4220)', () => {
     describe('html labels', () => {
       it('With styling and classes', () => {

cypress/integration/rendering/flowchart.spec.js

@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util';
 
 describe('Graph', () => {
   it('1: should render a simple flowchart no htmlLabels', () => {

cypress/integration/rendering/quadrantChart.spec.js

@@ -1,163 +0,0 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
-
-describe('Quadrant Chart', () => {
-  it('should render if only chart type is provided', () => {
-    imgSnapshotTest(
-      `
-  quadrantChart
-      `,
-      {}
-    );
-    cy.get('svg');
-  });
-  it('should render a complete quadrant chart', () => {
-    imgSnapshotTest(
-      `
-  quadrantChart
-    title Reach and engagement of campaigns
-    x-axis Low Reach --> High Reach
-    y-axis Low Engagement --> High Engagement
-    quadrant-1 We should expand
-    quadrant-2 Need to promote
-    quadrant-3 Re-evaluate
-    quadrant-4 May be improved
-    Campaign A: [0.3, 0.6]
-    Campaign B: [0.45, 0.23]
-    Campaign C: [0.57, 0.69]
-    Campaign D: [0.78, 0.34]
-    Campaign E: [0.40, 0.34]
-    Campaign F: [0.35, 0.78]
-      `,
-      {}
-    );
-    cy.get('svg');
-  });
-  it('should render without points', () => {
-    imgSnapshotTest(
-      `
-  quadrantChart
-    title Reach and engagement of campaigns
-    x-axis Low Reach --> High Reach
-    y-axis Low Engagement --> High Engagement
-    quadrant-1 We should expand
-    quadrant-2 Need to promote
-    quadrant-3 Re-evaluate
-    quadrant-4 May be improved
-      `,
-      {}
-    );
-    cy.get('svg');
-  });
-  it('should able to render y-axix on right side', () => {
-    imgSnapshotTest(
-      `
-  %%{init: {"quadrantChart": {"yAxisPosition": "right"}}}%%
-  quadrantChart
-    title Reach and engagement of campaigns
-    x-axis Low Reach --> High Reach
-    y-axis Low Engagement --> High Engagement
-    quadrant-1 We should expand
-    quadrant-2 Need to promote
-    quadrant-3 Re-evaluate
-    quadrant-4 May be improved
-      `,
-      {}
-    );
-    cy.get('svg');
-  });
-  it('should able to render x-axix on bottom', () => {
-    imgSnapshotTest(
-      `
-  %%{init: {"quadrantChart": {"xAxisPosition": "bottom"}}}%%
-  quadrantChart
-    title Reach and engagement of campaigns
-    x-axis Low Reach --> High Reach
-    y-axis Low Engagement --> High Engagement
-    quadrant-1 We should expand
-    quadrant-2 Need to promote
-    quadrant-3 Re-evaluate
-    quadrant-4 May be improved
-      `,
-      {}
-    );
-    cy.get('svg');
-  });
-  it('should able to render x-axix on bottom and y-axis on right', () => {
-    imgSnapshotTest(
-      `
-  %%{init: {"quadrantChart": {"xAxisPosition": "bottom", "yAxisPosition": "right"}}}%%
-  quadrantChart
-    title Reach and engagement of campaigns
-    x-axis Low Reach --> High Reach
-    y-axis Low Engagement --> High Engagement
-    quadrant-1 We should expand
-    quadrant-2 Need to promote
-    quadrant-3 Re-evaluate
-    quadrant-4 May be improved
-      `,
-      {}
-    );
-    cy.get('svg');
-  });
-  it('should render without title', () => {
-    imgSnapshotTest(
-      `
-  quadrantChart
-    x-axis Low Reach --> High Reach
-    y-axis Low Engagement --> High Engagement
-    quadrant-1 We should expand
-    quadrant-2 Need to promote
-    quadrant-3 Re-evaluate
-    quadrant-4 May be improved
-      `,
-      {}
-    );
-    cy.get('svg');
-  });
-  it('should use all the config', () => {
-    imgSnapshotTest(
-      `
-  %%{init: {"quadrantChart": {"chartWidth": 600, "chartHeight": 600, "titlePadding": 20, "titleFontSize": 10, "quadrantPadding": 20, "quadrantTextTopPadding": 40, "quadrantLabelFontSize": 20, "quadrantInternalBorderStrokeWidth": 3, "quadrantExternalBorderStrokeWidth": 5, "xAxisLabelPadding": 20, "xAxisLabelFontSize": 20, "yAxisLabelPadding": 20, "yAxisLabelFontSize": 20, "pointTextPadding": 20, "pointLabelFontSize": 20, "pointRadius": 10 }}}%%
-  quadrantChart
-    title Reach and engagement of campaigns
-    x-axis Low Reach --> High Reach
-    y-axis Low Engagement --> High Engagement
-    quadrant-1 We should expand
-    quadrant-2 Need to promote
-    quadrant-3 Re-evaluate
-    quadrant-4 May be improved
-    Campaign A: [0.3, 0.6]
-    Campaign B: [0.45, 0.23]
-    Campaign C: [0.57, 0.69]
-    Campaign D: [0.78, 0.34]
-    Campaign E: [0.40, 0.34]
-    Campaign F: [0.35, 0.78]
-      `,
-      {}
-    );
-    cy.get('svg');
-  });
-  it('should use all the theme variable', () => {
-    imgSnapshotTest(
-      `
-  %%{init: {"themeVariables": {"quadrant1Fill": "#b4dcff","quadrant2Fill": "#fef0ff", "quadrant3Fill": "#fffaf0", "quadrant4Fill": "#f0fff2", "quadrant1TextFill": "#ff0000", "quadrant2TextFill": "#2d00df", "quadrant3TextFill": "#00ffda", "quadrant4TextFill": "#e68300", "quadrantPointFill": "#0149ff", "quadrantPointTextFill": "#dc00ff", "quadrantXAxisTextFill": "#ffb500", "quadrantYAxisTextFill": "#fae604", "quadrantInternalBorderStrokeFill": "#3636f2", "quadrantExternalBorderStrokeFill": "#ff1010", "quadrantTitleFill": "#00ea19"} }}%%
-  quadrantChart
-    title Reach and engagement of campaigns
-    x-axis Low Reach --> High Reach
-    y-axis Low Engagement --> High Engagement
-    quadrant-1 We should expand
-    quadrant-2 Need to promote
-    quadrant-3 Re-evaluate
-    quadrant-4 May be improved
-    Campaign A: [0.3, 0.6]
-    Campaign B: [0.45, 0.23]
-    Campaign C: [0.57, 0.69]
-    Campaign D: [0.78, 0.34]
-    Campaign E: [0.40, 0.34]
-    Campaign F: [0.35, 0.78]
-      `,
-      {}
-    );
-    cy.get('svg');
-  });
-});

cypress/integration/rendering/sequencediagram.spec.js

@@ -1,6 +1,6 @@
 /// <reference types="Cypress" />
 
-import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util';
 
 context('Sequence diagram', () => {
   it('should render a sequence diagram with boxes', () => {
@@ -123,29 +123,6 @@ context('Sequence diagram', () => {
       }
     );
   });
-  it('should render a sequence diagram with par_over', () => {
-    imgSnapshotTest(
-      `
-        sequenceDiagram
-        participant Alice
-        participant Bob
-        participant John
-        par_over Section title
-          Alice ->> Bob: Message 1<br>Second line
-          Bob ->> John: Message 2
-        end
-        par_over Two line<br>section title
-          Note over Alice: Alice note
-          Note over Bob: Bob note<br>Second line
-          Note over John: John note
-        end
-        par_over Mixed section
-          Alice ->> Bob: Message 1
-          Note left of Bob: Alice/Bob Note
-        end
-      `
-    );
-  });
   context('font settings', () => {
     it('should render different note fonts when configured', () => {
       imgSnapshotTest(

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

@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util';
 
 describe('State diagram', () => {
   it('v2 should render a simple info', () => {
@@ -530,7 +530,7 @@ stateDiagram-v2
           [*] --> A
           A --> B: test({ foo#colon; 'far' })
           B --> [*]
-            classDef badBadEvent fill:#f00,color:white,font-weight:bold
+            classDef badBadEvent fill:#f00,color:white,font-weight:bold 
             class B badBadEvent
            `,
         { logLevel: 0, fontFamily: 'courier' }
@@ -543,14 +543,14 @@ stateDiagram-v2
           classDef notMoving fill:white
           classDef movement font-style:italic;
           classDef badBadEvent fill:#f00,color:white,font-weight:bold
-
+    
           [*] --> Still
           Still --> [*]
           Still --> Moving
           Moving --> Still
           Moving --> Crash
           Crash --> [*]
-
+    
           class Still notMoving
           class Moving, Crash movement
           class Crash badBadEvent

cypress/integration/rendering/stateDiagram.spec.js

@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util';
 
 describe('State diagram', () => {
   it('should render a simple state diagrams', () => {

cypress/platform/ashish2.html

@@ -188,7 +188,7 @@ mindmap
       //import mindmap from '../../packages/mermaid-mindmap/src/detector';
       // import example from '../../packages/mermaid-example-diagram/src/detector';
       // import timeline from '../../packages/mermaid-timeline/src/detector';
-      import mermaid from './mermaid.esm.mjs';
+      import mermaid from '../../packages/mermaid/src/mermaid';
       // await mermaid.registerExternalDiagrams([]);
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);

cypress/platform/bundle-test.js

@@ -1,5 +1,4 @@
-// TODO: this file should be testing the ./mermaid.core.mjs file, as that's the file listed in the package.json file that users will use
-import mermaid from './mermaid.esm.mjs';
+import mermaid from '../../packages/mermaid/src/mermaid';
 
 let code = `flowchart LR
 Power_Supply --> Transmitter_A

cypress/platform/external-diagrams-example-diagram.html

@@ -11,9 +11,9 @@ example-diagram
     <!-- <script src="//cdn.jsdelivr.net/npm/mermaid@9.1.7/dist/mermaid.min.js"></script> -->
     <!-- <script type="module" src="./external-diagrams-mindmap.mjs" /> -->
     <script type="module">
-      import exampleDiagram from '../../packages/mermaid-example-diagram/dist/mermaid-example-diagram.core.mjs';
+      import exampleDiagram from '../../packages/mermaid-example-diagram/src/detector';
       // import example from '../../packages/mermaid-example-diagram/src/detector';
-      import mermaid from './mermaid.esm.mjs';
+      import mermaid from '../../packages/mermaid/src/mermaid';
 
       await mermaid.registerExternalDiagrams([exampleDiagram]);
       await mermaid.initialize({ logLevel: 0 });

cypress/platform/flow2.html

@@ -30,7 +30,7 @@
     </pre>
 
     <script type="module">
-      import mermaid from './mermaid.esm.mjs';
+      import mermaid from '../../packages/mermaid/src/mermaid';
 
       mermaid.initialize({
         theme: 'forest',

cypress/platform/knsv.html

@@ -42,86 +42,368 @@
     </style>
   </head>
   <body>
-    <pre class="mermaid" style="width: 50%">
-      %%{init: {"flowchart": {"htmlLabels": true}} }%%
-      flowchart LR
-      b("`The dog in **the** hog.(1).. a a a a *very long text* about it
-      Word!
-      
-      Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words.`") --apa--> c
-      
-          </pre
-    >
-    <pre class="mermaid" style="width: 50%">
-      classDiagram-v2
+    <pre class="mermaid2" style="width: 50%">
+flowchart LR
+  subgraph one
+    direction LR
+    A[myClass1] --> B[default]
+    subgraph two
+      direction BT
+      C[myClass2] --> D[default]
+    end
+  end
 
-      classA -- classB : Inheritance
-      classA -- classC : link
-      classC -- classD : link
-      classB -- classD
     </pre>
-    <pre class="mermaid" style="width: 50%">
-      sequenceDiagram
-      Alice->>Bob: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
-      loop Loopy
-          Bob->>Alice: Pasten
-      end
+    <pre class="mermaid2" style="width: 50%">
+flowchart LR
+  classDef aPID stroke:#4e4403,fill:#fdde29,color:#4e4403,rx:5px,ry:5px;
+  classDef crm stroke:#333333,fill:#DCDCDC,color:#333333,rx:5px,ry:5px;
+  classDef type stroke:#502604,fill:#FAB565,color:#502604,rx:20px,ry:20px;;
+
+  O0("Joe")
+  class O0 aPID;
+
+  O1("Person")
+  class O1 crm;
+  O0 -- has type -->O1["Person"]
+
+  O2("aat:300411314")
+  class O2 type;
+  click O2 function "Sorry the newline html tags are not being processed correctly<br/> So all of this appears on the <br/> same line."
+  O0 -- has type -->O2["Bug"]
+  click O0 function "Lots of great info about Joe<br>Lots of great info about Joe<br>burt<br>fred";
     </pre>
-    <pre class="mermaid" style="width: 50%">
-      %%{init: {"flowchart": {"htmlLabels": false}} }%%
-      flowchart LR
-      b("`The dog in **the** hog.(1)
-      NL`") --"`1o **bold**`"--> c[new strings svg labels]
+    <pre class="mermaid2" style="width: 50%">
+flowchart TD
+    subgraph test
+    direction TB
+    subgraph test2
+      direction LR
+      F --> D
+    end
+    subgraph test3
+      direction TB
+      G --> H
+    end
+    end
     </pre>
-    <pre class="mermaid" style="width: 50%">
-      %%{init: {"flowchart": {"htmlLabels": true}} }%%
-      flowchart LR
-      b("`The dog in **the** hog.(1)
-      NL`") --"`1o **bold**`"--> c[new strings html labels]
+    <pre class="mermaid2" style="width: 50%">
+flowchart TD
+
+  release-branch[Create Release Branch]:::relClass
+  develop-branch[Update Develop Branch]:::relClass
+  github-release-draft[GitHub Release Draft]:::relClass
+  trigger-pipeline[Trigger Jenkins pipeline]:::fixClass
+  github-release[GitHub Release]:::postClass
+
+  build-ready --> release-branch
+  build-ready --> develop-branch
+  release-branch --> jenkins-release-build
+  jenkins-release-build --> github-release-draft
+  jenkins-release-build --> install-release
+  install-release --> verify-release
+  jenkins-release-build --> announce
+  github-release-draft --> github-release
+  verify-release --> verify-check
+  verify-check -- Yes --> github-release
+  verify-check -- No --> release-fix
+  release-fix --> release-branch-pr
+  verify-check -- No --> delete-artifacts
+  release-branch-pr --> trigger-pipeline
+  delete-artifacts --> trigger-pipeline
+  trigger-pipeline --> jenkins-release-build
+
+
     </pre>
-    <pre class="mermaid" style="width: 50%">
-      %%{init: {"flowchart": {"htmlLabels": true}} }%%
-      flowchart LR
-      b("The dog in the hog.(1)\nNL") --"1o bold"--> c[old strings svg labels]
+    <pre class="mermaid2" style="width: 50%">
+flowchart LR
+        a["<strong>Haiya</strong>"]===>b
     </pre>
-    <script type="module">
-      // import mindmap from '../../packages/mermaid-mindmap/src/detector';
-      // import example from '../../packages/mermaid-example-diagram/src/mermaid-example-diagram.core.mjs';
-      import mermaid from './mermaid.esm.mjs';
-      // await mermaid.registerExternalDiagrams([example]);
+    <pre class="mermaid2" style="width: 50%">
+flowchart TD
+    A --> B
+    A --> C
+    B --> C
+    </pre>
+    <pre class="mermaid2" style="width: 50%">
+flowchart TD
+      A([stadium shape test])
+      A -->|Get money| B([Go shopping])
+      B --> C([Let me think...<br />Do I want something for work,<br />something to spend every free second with,<br />or something to get around?])
+      C -->|One| D([Laptop])
+      C -->|Two| E([iPhone])
+      C -->|Three| F([Car<br/>wroom wroom])
+      click A "index.html#link-clicked" "link test"
+      click B testClick "click test"
+      classDef someclass fill:#f96;
+      class A someclass;
+      class C someclass;
+    </pre>
+    <pre class="mermaid2" style="width: 50%">
+   sequenceDiagram
+      title: My Sequence Diagram Title
+      accTitle: My Acc Sequence Diagram
+      accDescr: My Sequence Diagram Description
+
+      Alice->>John: Hello John, how are you?
+      John-->>Alice: Great!
+      Alice-)John: See you later!
+    </pre>
+    <pre class="mermaid2" style="width: 50%">
+graph TD
+    A -->|000| B
+    B -->|111| C
+
+    linkStyle 1 stroke:#ff3,stroke-width:4px,color:red;
+    </pre>
+    <pre class="mermaid2" style="width: 100%">
+  journey
+      accTitle: My User Journey Diagram
+      accDescr: My User Journey Diagram Description
+
+      title My working day
+      section Go to work
+        Make tea: 5: Me
+        Go upstairs: 3: Me
+        Do work: 1: Me, Cat
+      section Go home
+        Go downstairs: 5: Me
+        Sit down: 5: Me
+    </pre>
+    <pre class="mermaid2" style="width: 100%">
+        info
+    </pre>
+    <pre class="mermaid2" style="width: 100%">
+requirementDiagram
+      accTitle: My req Diagram
+      accDescr: My req Diagram Description
+
+    requirement test_req {
+    id: 1
+    text: the test text.
+    risk: high
+    verifymethod: test
+    }
+
+    functionalRequirement test_req2 {
+    id: 1.1
+    text: the second test text.
+    risk: low
+    verifymethod: inspection
+    }
+
+    performanceRequirement test_req3 {
+    id: 1.2
+    text: the third test text.
+    risk: medium
+    verifymethod: demonstration
+    }
+
+    element test_entity {
+    type: simulation
+    }
+
+    element test_entity2 {
+    type: word doc
+    docRef: reqs/test_entity
+    }
+
+
+    test_entity - satisfies -> test_req2
+    test_req - traces -> test_req2
+    test_req - contains -> test_req3
+    test_req <- copies - test_entity2
+    </pre>
+    <pre class="mermaid2" style="width: 100%">
+gantt
+    dateFormat  YYYY-MM-DD
+    title       Adding GANTT diagram functionality to mermaid
+    excludes    weekends
+    %% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)
+
+    section A section
+    Completed task            :done,    des1, 2014-01-06,2014-01-08
+    Active task               :active,  des2, 2014-01-09, 3d
+    Future task               :         des3, after des2, 5d
+    Future task2              :         des4, after des3, 5d
+
+    section Critical tasks
+    Completed task in the critical line :crit, done, 2014-01-06,24h
+    Implement parser and jison          :crit, done, after des1, 2d
+    Create tests for parser             :crit, active, 3d
+    Future task in critical line        :crit, 5d
+    Create tests for renderer           :2d
+    Add to mermaid                      :1d
+    Functionality added                 :milestone, 2014-01-25, 0d
+
+    section Documentation
+    Describe gantt syntax               :active, a1, after des1, 3d
+    Add gantt diagram to demo page      :after a1  , 20h
+    Add another diagram to demo page    :doc1, after a1  , 48h
+
+    section Last section
+    Describe gantt syntax               :after doc1, 3d
+    Add gantt diagram to demo page      :20h
+    Add another diagram to demo page    :48h
+    </pre>
+    <pre class="mermaid2" style="width: 100%">
+stateDiagram
+  state Active {
+    Idle
+  }
+  Inactive --> Idle: ACT
+  Active --> Active: LOG
+    </pre>
+    <pre class="mermaid2" style="width: 100%">
+      flowchart TB
+        accTitle: My flowchart
+        accDescr: My flowchart Description
+        subgraph One
+          a1-->a2-->a3
+        end
+    </pre>
+    <pre class="mermaid2" style="width: 100%">
+        sequenceDiagram
+          A ->> B: 1
+          rect rgb(204, 0, 102)
+            break yes
+              rect rgb(0, 204, 204)
+                C ->> C: 0
+              end
+            end
+          end
+          B ->> A: Return
+    </pre>
+    <pre class="mermaid2" style="width: 100%">
+classDiagram
+accTitle: My class diagram
+accDescr: My class diagram Description
+Class01 <|-- AveryLongClass : Cool
+Class09 --> C2 : Where am i?
+Class09 --* C3
+Class09 --|> Class07
+Class07 : equals()
+Class07 : Object[] elementData
+Class01 : size()
+Class01 : int chimp
+Class01 : int gorilla
+class Class10 {
+  int id
+  size()
+}
+    </pre>
+    <pre class="mermaid2" style="width: 100%">
+%%{init: {'config': {'wrap': true }}}%%
+        sequenceDiagram
+        participant A as Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
+        A->>Bob: Hola
+        Bob-->A: Pasten !
+    </pre>
+    <pre class="mermaid2" style="width: 100%">
+      gitGraph
+       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>
+    <pre class="mermaid2" style="width: 100%">
+flowchart TD
+      A[Christmas] -->|Get money| B(Go shopping)
+      B --> C{Let me think}
+      C -->|One| D[Laptop]
+      C -->|Two| E[iPhone]
+      C -->|Three| F[fa:fa-car Car]
+    </pre>
+    <pre class="mermaid2" style="width: 100%">
+        classDiagram
+          Animal "1" <|-- Duck
+          Animal <|-- Fish
+          Animal <--o Zebra
+          Animal : +int age
+          Animal : +String gender
+          Animal: +isMammal()
+          Animal: +mate()
+          class Duck{
+            +String beakColor
+            +swim()
+            +quack()
+          }
+          class Fish{
+            -int sizeInFeet
+            -canEat()
+          }
+          class Zebra{
+            +bool is_wild
+            +run()
+          }
+    </pre>
+    <pre class="mermaid2" style="width: 100%">
+        erDiagram
+    CAR ||--o{ NAMED-DRIVER : allows
+    CAR {
+        string registrationNumber
+        string make
+        string model
+    }
+    PERSON ||--o{ NAMED-DRIVER : is
+    PERSON {
+        string firstName
+        string lastName
+        int age
+    }
+    </pre>
+
+    <!-- <script src="./mermaid.js"></script> -->
+    <script src="./mermaid.js"></script>
+    <script>
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
       };
       mermaid.initialize({
-        // theme: 'forest',
+        maxTextSize: 900000,
         startOnLoad: true,
+        securityLevel: 'loose',
         logLevel: 0,
+        fontFamily: 'courier',
         flowchart: {
-          // defaultRenderer: 'elk',
-          useMaxWidth: false,
-          // htmlLabels: false,
-          htmlLabels: true,
+          // curve: 'curveLinear',
+          useMaxWidth: true,
+          htmlLabels: false,
+          fontFamily: 'courier',
         },
-        // htmlLabels: false,
-        gantt: {
-          useMaxWidth: false,
-        },
-        sequence: {
-          wrap: true,
-        },
-        useMaxWidth: false,
+        lazyLoadedDiagrams: ['./mermaid-mindmap-detector.js'],
       });
       function callback() {
         alert('It worked');
       }
+
+      function clickByFlow(elemName) {
+        const div = document.createElement('div');
+        div.className = 'created-by-click';
+        div.style = 'padding: 20px; background: green; color: white;';
+        div.innerText = 'Clicked By Flow';
+
+        document.getElementsByTagName('body')[0].appendChild(div);
+      }
+
       mermaid.parseError = function (err, hash) {
         console.error('In parse error:');
         console.error(err);
       };
-      // mermaid.test1('first_slow', 1200).then((r) => console.info(r));
-      // mermaid.test1('second_fast', 200).then((r) => console.info(r));
-      // mermaid.test1('third_fast', 200).then((r) => console.info(r));
-      // mermaid.test1('forth_slow', 1200).then((r) => console.info(r));
     </script>
   </body>
 </html>

cypress/platform/knsv2.html

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

cypress/platform/knsv3.html

@@ -40,7 +40,7 @@
 
     <script type="module">
       // import mermaid from './mermaid.esm.mjs';
-      import mermaid from '../../packages/mermaid/dist/mermaid.esm.mjs';
+      import mermaid from '../../packages/mermaid/src/mermaid';
       // import mermaidMindmap from './mermaid-mindmap.esm.mjs';
 
       // import mermaidMindmap from 'https://cdn.jsdelivr.net/npm/@mermaid-js/mermaid-mindmap@9.3.0/+esm';

cypress/platform/viewer.js

@@ -1,5 +1,5 @@
-import mermaid2 from './mermaid.esm.mjs';
-import externalExample from '../../packages/mermaid-example-diagram/dist/mermaid-example-diagram.core.mjs';
+import mermaid2 from '../../packages/mermaid/src/mermaid';
+import externalExample from '../../packages/mermaid-example-diagram/src/detector';
 
 function b64ToUtf8(str) {
   return decodeURIComponent(escape(window.atob(str)));

cypress/platform/xss23-css.html

@@ -1,85 +0,0 @@
-<html>
-  <head>
-    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
-    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
-    />
-    <link
-      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
-      rel="stylesheet"
-    />
-    <style>
-      body {
-        /* background: rgb(221, 208, 208); */
-        /* background:#333; */
-        font-family: 'Arial';
-        /* font-size: 18px !important; */
-      }
-      h1 {
-        color: grey;
-      }
-      .mermaid2 {
-        display: none;
-      }
-      .mermaid svg {
-        /* font-size: 18px !important; */
-      }
-      .malware {
-        position: fixed;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        height: 150px;
-        background: red;
-        color: black;
-        display: flex;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        font-family: monospace;
-        font-size: 72px;
-      }
-    </style>
-  </head>
-  <body>
-    <div>Security check</div>
-    <div class="flex">
-      <div id="diagram" class="mermaid"></div>
-      <div id="graph-div"></div>
-      <div id="res" class=""></div>
-    </div>
-    <script type="module">
-      import mermaid from './mermaid.esm.mjs';
-      mermaid.parseError = function (err, hash) {
-        // console.error('Mermaid error: ', err);
-      };
-      mermaid.initialize({
-        theme: 'base',
-        startOnLoad: false,
-        flowcharts: { htmlLabels: true },
-      });
-      function callback() {
-        alert('It worked');
-      }
-      function xssAttack() {
-        const div = document.createElement('div');
-        div.id = 'the-malware';
-        div.className = 'malware';
-        div.innerHTML = 'XSS Succeeded';
-        document.getElementsByTagName('body')[0].appendChild(div);
-        throw new Error('XSS Succeeded');
-      }
-
-      let diagram = `graph TD
-A[["a marker-end=#quot;url(<s title='#<style>*{background:red}</style>'>b"]]
-`;
-      const el = document.querySelector('#graph-div');
-      console.log(diagram);
-      const { svg } = await mermaid.render('graph-div', diagram);
-      document.querySelector('#res').innerHTML = svg;
-      window.rendered = true;
-    </script>
-  </body>
-</html>

demos/index.html

@@ -54,9 +54,6 @@
       <li>
         <h2><a href="./pie.html">Pie</a></h2>
       </li>
-      <li>
-        <h2><a href="./quadrantchart.html">Quadrant charts</a></h2>
-      </li>
       <li>
         <h2><a href="./requirements.html">Requirements</a></h2>
       </li>

demos/pie.html

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

demos/quadrantchart.html

@@ -1,55 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <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=" />
-    <style>
-      div.mermaid {
-        /* font-family: 'trebuchet ms', verdana, arial; */
-        font-family: 'Courier New', Courier, monospace !important;
-      }
-    </style>
-  </head>
-
-  <body>
-    <h1>Quadrant chart demos</h1>
-    <pre class="mermaid">
-    %%{init: {"quadrantChart": {"quadrantPadding": 10}, "theme": "forest", "themeVariables": {"quadrant1TextFill": "blue"}} }%%
-    quadrantChart
-      x-axis Urgent --> Not Urgent
-      y-axis Not Important --> important
-      quadrant-1 Plan
-      quadrant-2 Do
-      quadrant-3 Deligate
-      quadrant-4 Delete
-    </pre>
-
-    <pre class="mermaid">
-    %%{init: {"quadrantChart": {"chartWidth": 600, "chartHeight": 600} } }%%
-    quadrantChart
-      title Analytics and Business Intelligence Platforms
-      x-axis "Completeness of Vision ❤" -->
-      y-axis Ability to Execute
-      quadrant-1 Leaders
-      quadrant-2 Challengers
-      quadrant-3 Niche
-      quadrant-4 Visionaries
-      Microsoft: [0.75, 0.75]
-      Salesforce: [0.55, 0.60]
-      IBM: [0.51, 0.40]
-      Incorta: [0.20, 0.30]
-    </pre>
-    <hr />
-
-    <script type="module">
-      import mermaid from './mermaid.esm.mjs';
-      mermaid.initialize({
-        theme: 'default',
-        logLevel: 3,
-        securityLevel: 'loose',
-      });
-    </script>
-  </body>
-</html>

demos/sequence.html

@@ -144,26 +144,6 @@
     >
     <hr />
 
-    <pre class="mermaid">
-      sequenceDiagram
-      participant Alice
-      participant Bob
-      participant John
-      par_over Section title
-        Alice ->> Bob: Message 1<br>Second line
-        Bob ->> John: Message 2
-      end
-      par_over Two line<br>section title
-        Note over Alice: Alice note
-        Note over Bob: Bob note<br>Second line
-        Note over John: John note
-      end
-      par_over Mixed section
-        Alice ->> Bob: Message 1
-        Note left of Bob: Alice/Bob Note
-      end
-    </pre>
-
     <script type="module">
       import mermaid from './mermaid.esm.mjs';
       mermaid.initialize({

docs/config/setup/modules/defaultConfig.md

@@ -14,7 +14,7 @@
 
 #### Defined in
 
-[defaultConfig.ts:2293](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L2293)
+[defaultConfig.ts:2115](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L2115)
 
 ---
 

docs/config/setup/modules/mermaidAPI.md

@@ -96,7 +96,7 @@ mermaid.initialize(config);
 
 #### Defined in
 
-[mermaidAPI.ts:670](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L670)
+[mermaidAPI.ts:667](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L667)
 
 ## Functions
 
@@ -127,7 +127,7 @@ Return the last node appended
 
 #### Defined in
 
-[mermaidAPI.ts:309](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L309)
+[mermaidAPI.ts:312](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L312)
 
 ---
 
@@ -153,7 +153,7 @@ the cleaned up svgCode
 
 #### Defined in
 
-[mermaidAPI.ts:257](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L257)
+[mermaidAPI.ts:263](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L263)
 
 ---
 
@@ -179,7 +179,7 @@ the string with all the user styles
 
 #### Defined in
 
-[mermaidAPI.ts:186](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L186)
+[mermaidAPI.ts:192](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L192)
 
 ---
 
@@ -202,7 +202,7 @@ the string with all the user styles
 
 #### Defined in
 
-[mermaidAPI.ts:234](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L234)
+[mermaidAPI.ts:240](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L240)
 
 ---
 
@@ -229,7 +229,7 @@ with an enclosing block that has each of the cssClasses followed by !important;
 
 #### Defined in
 
-[mermaidAPI.ts:170](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L170)
+[mermaidAPI.ts:176](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L176)
 
 ---
 
@@ -295,7 +295,7 @@ Put the svgCode into an iFrame. Return the iFrame code
 
 #### Defined in
 
-[mermaidAPI.ts:288](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L288)
+[mermaidAPI.ts:291](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L291)
 
 ---
 
@@ -320,4 +320,4 @@ Remove any existing elements from the given document
 
 #### Defined in
 
-[mermaidAPI.ts:359](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L359)
+[mermaidAPI.ts:362](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L362)

docs/config/usage.md

@@ -112,10 +112,10 @@ A `securityLevel` configuration has to first be cleared. `securityLevel` sets th
 
 Values:
 
-- **strict**: (**default**) HTML tags in the text are encoded and click functionality is disabled.
-- **antiscript**: HTML tags in text are allowed (only script elements are removed) and click functionality is enabled.
-- **loose**: HTML tags in text are allowed and click functionality is enabled.
-- **sandbox**: With this security level, all rendering takes place in a sandboxed iframe. This prevent any JavaScript from running in the context. This may hinder interactive functionality of the diagram, like scripts, popups in the sequence diagram, links to other tabs or targets, etc.
+- **strict**: (**default**) tags in text are encoded, click functionality is disabled
+- **loose**: tags in text are allowed, click functionality is enabled
+- **antiscript**: html tags in text are allowed, (only script element is removed), click functionality is enabled
+- **sandbox**: With this security level all rendering takes place in a sandboxed iframe. This prevent any JavaScript running in the context. This may hinder interactive functionality of the diagram like scripts, popups in sequence diagram or links to other tabs/targets etc.
 
 > **Note**
 > This changes the default behaviour of mermaid so that after upgrade to 8.2, unless the `securityLevel` is not changed, tags in flowcharts are encoded as tags and clicking is disabled.
@@ -348,10 +348,10 @@ mermaid.parseError = function (err, hash) {
   displayErrorInGui(err);
 };
 
-const textFieldUpdated = async function () {
+const textFieldUpdated = function () {
   const textStr = getTextFromFormField('code');
 
-  if (await mermaid.parse(textStr)) {
+  if (mermaid.parse(textStr)) {
     reRender(textStr);
   }
 };

docs/ecosystem/integrations.md

@@ -23,11 +23,10 @@ They also serve as proof of concept, for the variety of things that can be built
 - [Mermaid Flow Visual Editor](https://www.mermaidflow.app) (**Native support**)
 - [Deepdwn](https://billiam.itch.io/deepdwn) (**Native support**)
 - [Joplin](https://joplinapp.org) (**Native support**)
-- [Slab](https://slab.com) (**Native support**)
 - [Swimm](https://swimm.io) (**Native support**)
 - [Notion](https://notion.so) (**Native support**)
 - [Observable](https://observablehq.com/@observablehq/mermaid) (**Native support**)
-- [Obsidian](https://help.obsidian.md/Editing+and+formatting/Advanced+formatting+syntax#Diagram) (**Native support**)
+- [Obsidian](https://help.obsidian.md/How+to/Format+your+notes#Diagram) (**Native support**)
 - [GitBook](https://gitbook.com)
   - [Mermaid Plugin](https://github.com/JozoVilcek/gitbook-plugin-mermaid)
   - [Markdown with Mermaid CLI](https://github.com/miao1007/gitbook-plugin-mermaid-cli)
@@ -147,12 +146,8 @@ They also serve as proof of concept, for the variety of things that can be built
 
 - [Sphinx](https://www.sphinx-doc.org/en/master/)
   - [sphinxcontrib-mermaid](https://github.com/mgaitan/sphinxcontrib-mermaid)
-- [remark](https://remark.js.org/)
-  - [remark-mermaidjs](https://github.com/remcohaszing/remark-mermaidjs)
-- [rehype](https://github.com/rehypejs/rehype)
-  - [rehype-mermaidjs](https://github.com/remcohaszing/rehype-mermaidjs)
-- [Gatsby](https://www.gatsbyjs.com/)
-  - [gatsby-remark-mermaid](https://github.com/remcohaszing/gatsby-remark-mermaid)
+- [remark.js](https://remark.js.org/)
+  - [remark-mermaid](https://github.com/temando/remark-mermaid)
 - [jSDoc](https://jsdoc.app/)
   - [jsdoc-mermaid](https://github.com/Jellyvision/jsdoc-mermaid)
 - [MkDocs](https://www.mkdocs.org)
@@ -165,7 +160,6 @@ They also serve as proof of concept, for the variety of things that can be built
   - [codedoc-mermaid-plugin](https://www.npmjs.com/package/codedoc-mermaid-plugin)
 - [mdbook](https://rust-lang.github.io/mdBook/index.html)
   - [mdbook-mermaid](https://github.com/badboy/mdbook-mermaid)
-- [Quarto](https://quarto.org/)
 
 ## Browser Extensions
 
@@ -193,7 +187,6 @@ They also serve as proof of concept, for the variety of things that can be built
   - [bisheng-plugin-mermaid](https://github.com/yct21/bisheng-plugin-mermaid)
 - [Reveal CK](https://github.com/jedcn/reveal-ck)
   - [reveal-ck-mermaid-plugin](https://github.com/tmtm/reveal-ck-mermaid-plugin)
-- [mermaid-isomorphic](https://github.com/remcohaszing/mermaid-isomorphic)
 - [mermaid-server: Generate diagrams using a HTTP request](https://github.com/TomWright/mermaid-server)
 - [ExDoc](https://github.com/elixir-lang/ex_doc)
   - [Rendering Mermaid graphs](https://github.com/elixir-lang/ex_doc#rendering-mermaid-graphs)

docs/intro/index.md

@@ -235,42 +235,6 @@ journey
       Sit down: 5: Me
 ```
 
-### [Quadrant Chart](../syntax/quadrantChart.md)
-
-```mermaid-example
-quadrantChart
-    title Reach and engagement of campaigns
-    x-axis Low Reach --> High Reach
-    y-axis Low Engagement --> High Engagement
-    quadrant-1 We should expand
-    quadrant-2 Need to promote
-    quadrant-3 Re-evaluate
-    quadrant-4 May be improved
-    Campaign A: [0.3, 0.6]
-    Campaign B: [0.45, 0.23]
-    Campaign C: [0.57, 0.69]
-    Campaign D: [0.78, 0.34]
-    Campaign E: [0.40, 0.34]
-    Campaign F: [0.35, 0.78]
-```
-
-```mermaid
-quadrantChart
-    title Reach and engagement of campaigns
-    x-axis Low Reach --> High Reach
-    y-axis Low Engagement --> High Engagement
-    quadrant-1 We should expand
-    quadrant-2 Need to promote
-    quadrant-3 Re-evaluate
-    quadrant-4 May be improved
-    Campaign A: [0.3, 0.6]
-    Campaign B: [0.45, 0.23]
-    Campaign C: [0.57, 0.69]
-    Campaign D: [0.78, 0.34]
-    Campaign E: [0.40, 0.34]
-    Campaign F: [0.35, 0.78]
-```
-
 ## Installation
 
 **In depth guides and examples can be found at [Getting Started](./n00b-gettingStarted.md) and [Usage](../config/usage.md).**
@@ -299,7 +263,7 @@ To Deploy Mermaid:
 
 ### [Mermaid API](../config/setup/README.md):
 
-**To deploy mermaid without a bundler, insert a `script` tag with an absolute address and a `mermaid.initialize` call into the HTML using the following example:**
+**To deploy mermaid without a bundler, one can insert a `script` tag with an absolute address and a `mermaid.initialize` call into the HTML like so:**
 
 ```html
 <script type="module">
@@ -308,9 +272,9 @@ To Deploy Mermaid:
 </script>
 ```
 
-**Doing so commands the mermaid parser to look for the `<div>` or `<pre>` tags with `class="mermaid"`. From these tags, mermaid tries read the diagram/chart definitions and render them into SVG charts.**
+**Doing so will command the mermaid parser to look for the `<div>` or `<pre>` tags with `class="mermaid"`. From these tags mermaid will try to read the diagram/chart definitions and render them into SVG charts.**
 
-**Examples can be found in** [Other examples](../syntax/examples.md)
+**Examples can be found at** [Other examples](../syntax/examples.md)
 
 ## Sibling projects
 

docs/news/announcements.md

@@ -6,8 +6,8 @@
 
 # Announcements
 
-## [Bad documentation is bad for developers](https://www.mermaidchart.com/blog/posts/bad-documentation-is-bad-for-developers)
+## [Automatic text wrapping in flowcharts is here!](https://www.mermaidchart.com/blog/posts/automatic-text-wrapping-in-flowcharts-is-here)
 
-26 April 2023 · 11 mins
+3 April 2023 · 3 mins
 
-Documentation tends to be bad because companies and projects don’t fully realize the costs of bad documentation.
+Markdown Strings reduce the hassle # Starting from v10.

docs/news/blog.md

@@ -6,18 +6,6 @@
 
 # Blog
 
-## [Bad documentation is bad for developers](https://www.mermaidchart.com/blog/posts/bad-documentation-is-bad-for-developers)
-
-26 April 2023 · 11 mins
-
-Documentation tends to be bad because companies and projects don’t fully realize the costs of bad documentation.
-
-## [Automatic text wrapping in flowcharts is here!](https://www.mermaidchart.com/blog/posts/automatic-text-wrapping-in-flowcharts-is-here/)
-
-3 April 2023 · 3 mins
-
-Markdown Strings reduce the hassle # Starting from v10.
-
 ## [Mermaid Chart officially launched with sharable diagram links and presentation mode](https://www.mermaidchart.com/blog/posts/mermaid-chart-officially-launched-with-sharable-diagram-links-and-presentation-mode/)
 
 27 March 2023 · 2 mins

docs/syntax/classDiagram.md

@@ -128,7 +128,7 @@ classDiagram
     Vehicle <|-- Car
 ```
 
-Naming convention: a class name should be composed only of alphanumeric characters (including unicode), underscores, and dashes (-).
+Naming convention: a class name should be composed only of alphanumeric characters (including unicode), and underscores.
 
 ### Class labels
 
@@ -283,12 +283,12 @@ To describe the visibility (or encapsulation) of an attribute or method/function
 - `#` Protected
 - `~` Package/Internal
 
-> _note_ you can also include additional _classifiers_ to a method definition by adding the following notation to the _end_ of the method, i.e.: after the `()` or after the return type:
+> _note_ you can also include additional _classifiers_ to a method definition by adding the following notation to the _end_ of the method, i.e.: after the `()`:
 >
-> - `*` Abstract e.g.: `someAbstractMethod()*` or `someAbstractMethod() int*`
-> - `$` Static e.g.: `someStaticMethod()$` or `someStaticMethod() String$`
+> - `*` Abstract e.g.: `someAbstractMethod()*`
+> - `$` Static e.g.: `someStaticMethod()$`
 
-> _note_ you can also include additional _classifiers_ to a field definition by adding the following notation to the very end:
+> _note_ you can also include additional _classifiers_ to a field definition by adding the following notation to the end of its name:
 >
 > - `$` Static e.g.: `String someField$`
 
@@ -421,34 +421,6 @@ And `Link` can be one of:
 | --   | Solid       |
 | ..   | Dashed      |
 
-## Define Namespace
-
-A namespace groups classes.
-
-Code:
-
-```mermaid-example
-classDiagram
-namespace BaseShapes {
-    class Triangle
-    class Rectangle {
-      double width
-      double height
-    }
-}
-```
-
-```mermaid
-classDiagram
-namespace BaseShapes {
-    class Triangle
-    class Rectangle {
-      double width
-      double height
-    }
-}
-```
-
 ## Cardinality / Multiplicity on relations
 
 Multiplicity or cardinality in class diagrams indicates the number of instances of one class that can be linked to an instance of the other class. For example, each company will have one or more employees (not zero), and each employee currently works for zero or one companies.
@@ -632,26 +604,10 @@ You would define these actions on a separate line after all classes have been de
 
 ## Notes
 
-It is possible to add notes on the diagram using `note "line1\nline2"`. A note can be added for a specific class using `note for <CLASS NAME> "line1\nline2"`.
+It is possible to add notes on diagram using `note "line1\nline2"` or note for class using `note for class "line1\nline2"`
 
 ### Examples
 
-```mermaid-example
-classDiagram
-    note "This is a general note"
-    note for MyClass "This is a note for a class"
-    class MyClass{
-    }
-```
-
-```mermaid
-classDiagram
-    note "This is a general note"
-    note for MyClass "This is a note for a class"
-    class MyClass{
-    }
-```
-
 _URL Link:_
 
 ```mermaid-example

docs/syntax/flowchart.md

@@ -6,10 +6,11 @@
 
 # Flowcharts - Basic Syntax
 
-Flowcharts are composed of **nodes** (geometric shapes) and **edges** (arrows or lines). The Mermaid code defines how nodes and edges are made and accommodates different arrow types, multi-directional arrows, and any linking to and from subgraphs.
+All Flowcharts are composed of **nodes**, the geometric shapes and **edges**, the arrows or lines. The mermaid code defines the way that these **nodes** and **edges** are made and interact.
 
-> **Warning**
-> If you are using the word "end" in a Flowchart node, capitalize the entire word or any of the letters (e.g., "End" or "END"), or apply this [workaround](https://github.com/mermaid-js/mermaid/issues/1444#issuecomment-639528897). Typing "end" in all lowercase letters will break the Flowchart.
+It can also accommodate different arrow types, multi directional arrows, and linking to and from subgraphs.
+
+> **Important note**: Do not type the word "end" as a Flowchart node. Capitalize all or any one the letters to keep the flowchart from breaking, i.e, "End" or "END". Or you can apply this [workaround](https://github.com/mermaid-js/mermaid/issues/1444#issuecomment-639528897).
 
 ### A node (default)
 
@@ -54,45 +55,7 @@ flowchart LR
     id1[This is the text in the box]
 ```
 
-#### Unicode text
-
-Use `"` to enclose the unicode text.
-
-```mermaid-example
-flowchart LR
-    id["This ❤ Unicode"]
-```
-
-```mermaid
-flowchart LR
-    id["This ❤ Unicode"]
-```
-
-#### Markdown formatting
-
-Use double quotes and backticks "\` text \`" to enclose the markdown text.
-
-```mermaid-example
-%%{init: {"flowchart": {"htmlLabels": false}} }%%
-flowchart LR
-    markdown["`This **is** _Markdown_`"]
-    newLines["`Line1
-    Line 2
-    Line 3`"]
-    markdown --> newLines
-```
-
-```mermaid
-%%{init: {"flowchart": {"htmlLabels": false}} }%%
-flowchart LR
-    markdown["`This **is** _Markdown_`"]
-    newLines["`Line1
-    Line 2
-    Line 3`"]
-    markdown --> newLines
-```
-
-### Direction
+## Graph
 
 This statement declares the direction of the Flowchart.
 
@@ -120,13 +83,15 @@ flowchart LR
     Start --> Stop
 ```
 
+## Flowchart Orientation
+
 Possible FlowChart orientations are:
 
-- TB - Top to bottom
-- TD - Top-down/ same as top to bottom
-- BT - Bottom to top
-- RL - Right to left
-- LR - Left to right
+- TB - top to bottom
+- TD - top-down/ same as top to bottom
+- BT - bottom to top
+- RL - right to left
+- LR - left to right
 
 ## Node shapes
 
@@ -669,7 +634,7 @@ flowchart TB
     end
 ```
 
-### flowcharts
+## flowcharts
 
 With the graphtype flowchart it is also possible to set edges to and from subgraphs as in the flowchart below.
 
@@ -707,7 +672,7 @@ flowchart TB
     two --> c2
 ```
 
-### Direction in subgraphs
+## Direction in subgraphs
 
 With the graphtype flowcharts you can use the direction statement to set the direction which the subgraph will render like in this example.
 
@@ -777,9 +742,9 @@ end
 
 Formatting:
 
-- For bold text, use double asterisks (`**`) before and after the text.
-- For italics, use single asterisks (`*`) before and after the text.
-- With traditional strings, you needed to add `<br>` tags for text to wrap in nodes. However, markdown strings automatically wrap text when it becomes too long and allows you to start a new line by simply using a newline character instead of a `<br>` tag.
+- For bold text, use double asterisks \*\* before and after the text.
+- For italics, use single asterisks \* before and after the text.
+- With traditional strings, you needed to add <br> tags for text to wrap in nodes. However, markdown strings automatically wrap text when it becomes too long and allows you to start a new line by simply using a newline character instead of a <br> tag.
 
 This feature is applicable to node labels, edge labels, and subgraph labels.
 
@@ -1038,7 +1003,7 @@ flowchart TD
     B-->E(A fa:fa-camera-retro perhaps?)
 ```
 
-Mermaid is compatible with Font Awesome up to verion 5, Free icons only. Check that the icons you use are from the [supported set of icons](https://fontawesome.com/v5/search?o=r&m=free).
+?> Mermaid is now only compatible with Font Awesome versions 4 and 5. Check that you are using the correct version of Font Awesome.
 
 ## Graph declarations with spaces between vertices and link and without semicolon
 

docs/syntax/mindmap.md

@@ -182,7 +182,7 @@ More shapes will be added, beginning with the shapes available in flowcharts.
 
 ## Icons
 
-As with flowcharts you can add icons to your nodes but with an updated syntax. The styling for the font based icons are added during the integration so that they are available for the web page. _This is not something a diagram author can do but has to be done with the site administrator or the integrator_. Once the icon fonts are in place you add them to the mind map nodes using the `::icon()` syntax. You place the classes for the icon within the parenthesis like in the following example where icons for material design and [Font Awesome 5](https://fontawesome.com/v5/search?o=r&m=free) are displayed. The intention is that this approach should be used for all diagrams supporting icons. **Experimental feature:** This wider scope is also the reason Mindmaps are experimental as this syntax and approach could change.
+As with flowcharts you can add icons to your nodes but with an updated syntax. The styling for the font based icons are added during the integration so that they are available for the web page. _This is not something a diagram author can do but has to be done with the site administrator or the integrator_. Once the icon fonts are in place you add them to the mind map nodes using the `::icon()` syntax. You place the classes for the icon within the parenthesis like in the following example where icons for material design and fontawesome 4 are displayed. The intention is that this approach should be used for all diagrams supporting icons. **Experimental feature:** This wider scope is also the reason Mindmaps are experimental as this syntax and approach could change.
 
 ```mermaid-example
 mindmap

docs/syntax/quadrantChart.md

@@ -1,168 +0,0 @@
-> **Warning**
->
-> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
->
-> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/quadrantChart.md](../../packages/mermaid/src/docs/syntax/quadrantChart.md).
-
-# Quadrant Chart
-
-> A quadrant chart is a visual representation of data that is divided into four quadrants. It is used to plot data points on a two-dimensional grid, with one variable represented on the x-axis and another variable represented on the y-axis. The quadrants are determined by dividing the chart into four equal parts based on a set of criteria that is specific to the data being analyzed. Quadrant charts are often used to identify patterns and trends in data, and to prioritize actions based on the position of data points within the chart. They are commonly used in business, marketing, and risk management, among other fields.
-
-## Example
-
-```mermaid-example
-quadrantChart
-    title Reach and engagement of campaigns
-    x-axis Low Reach --> High Reach
-    y-axis Low Engagement --> High Engagement
-    quadrant-1 We should expand
-    quadrant-2 Need to promote
-    quadrant-3 Re-evaluate
-    quadrant-4 May be improved
-    Campaign A: [0.3, 0.6]
-    Campaign B: [0.45, 0.23]
-    Campaign C: [0.57, 0.69]
-    Campaign D: [0.78, 0.34]
-    Campaign E: [0.40, 0.34]
-    Campaign F: [0.35, 0.78]
-```
-
-```mermaid
-quadrantChart
-    title Reach and engagement of campaigns
-    x-axis Low Reach --> High Reach
-    y-axis Low Engagement --> High Engagement
-    quadrant-1 We should expand
-    quadrant-2 Need to promote
-    quadrant-3 Re-evaluate
-    quadrant-4 May be improved
-    Campaign A: [0.3, 0.6]
-    Campaign B: [0.45, 0.23]
-    Campaign C: [0.57, 0.69]
-    Campaign D: [0.78, 0.34]
-    Campaign E: [0.40, 0.34]
-    Campaign F: [0.35, 0.78]
-```
-
-## Syntax
-
-> **Note**
-> If there is no points available in the chart both **axis** text and **quadrant** will be rendered in the center of the respective quadrant.
-> If there are points **x-axis** labels will rendered from left of the respective quadrant also they will be displayed in bottom of the chart, and **y-axis** lables will be rendered in bottom of the respective quadrant, the quadrant text will render at top of the respective quadrant.
-
-> **Note**
-> For points x and y value min value is 0 and max value is 1.
-
-### Title
-
-The title is a short description of the chart and it will always render on top of the chart.
-
-#### Example
-
-    quadrantChart
-        title This is a sample example
-
-### x-axis
-
-The x-axis determine what text would be displayed in the x-axis. In x-axis there is two part **left** and **right** you can pass **both** or you can pass only **left**. The statement should start with `x-axis` then the `left axis text` followed by the delimiter `-->` then `right axis text`.
-
-#### 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.
-
-### y-axis
-
-The y-axis determine what text would be displayed in the y-axis. In y-axis there is two part **top** and **bottom** you can pass **both** or you can pass only **bottom**. The statement should start with `y-axis` then the `bottom axis text` followed by the delimiter `-->` then `top axis text`.
-
-#### 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.
-
-### Quadrants text
-
-The `quadrant-[1,2,3,4]` determine what text would be displayed inside the quadrants.
-
-#### 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.
-
-### Points
-
-Points are used to plot a circle inside the quadrantChart. The syntax is `<text>: [x, y]` here x and y value is in the range 0 - 1.
-
-#### 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.
-
-## Chart Configurations
-
-| Parameter                         | Description                                                                                       | Default value |
-| --------------------------------- | ------------------------------------------------------------------------------------------------- | :-----------: |
-| chartWidth                        | Width of the chart                                                                                |      500      |
-| chartHeight                       | Height of the chart                                                                               |      500      |
-| titlePadding                      | Top and Bottom padding of the title                                                               |      10       |
-| titleFontSize                     | Title font size                                                                                   |      20       |
-| quadrantPadding                   | Padding outside all the quadrants                                                                 |       5       |
-| quadrantTextTopPadding            | Quadrant text top padding when text is drawn on top ( not data points are there)                  |       5       |
-| quadrantLabelFontSize             | Quadrant text font size                                                                           |      16       |
-| quadrantInternalBorderStrokeWidth | Border stroke width inside the quadrants                                                          |       1       |
-| quadrantExternalBorderStrokeWidth | Quadrant external border stroke width                                                             |       2       |
-| xAxisLabelPadding                 | Top and bottom padding of x-axis text                                                             |       5       |
-| xAxisLabelFontSize                | X-axis texts font size                                                                            |      16       |
-| xAxisPosition                     | Position of x-axis (top , bottom) if there are points the x-axis will alway be rendered in bottom |     'top'     |
-| yAxisLabelPadding                 | Left and Right padding of y-axis text                                                             |       5       |
-| yAxisLabelFontSize                | Y-axis texts font size                                                                            |      16       |
-| yAxisPosition                     | Position of y-axis (left , right)                                                                 |    'left'     |
-| pointTextPadding                  | Padding between point and the below text                                                          |       5       |
-| pointLabelFontSize                | Point text font size                                                                              |      12       |
-| pointRadius                       | Radius of the point to be drawn                                                                   |       5       |
-
-## Chart Theme Variables
-
-| Parameter                        | Description                             |
-| -------------------------------- | --------------------------------------- |
-| quadrant1Fill                    | Fill color of the top right quadrant    |
-| quadrant2Fill                    | Fill color of the top left quadrant     |
-| quadrant3Fill                    | Fill color of the bottom left quadrant  |
-| quadrant4Fill                    | Fill color of the bottom right quadrant |
-| quadrant1TextFill                | Text color of the top right quadrant    |
-| quadrant2TextFill                | Text color of the top left quadrant     |
-| quadrant3TextFill                | Text color of the bottom left quadrant  |
-| quadrant4TextFill                | Text color of the bottom right quadrant |
-| quadrantPointFill                | Points fill color                       |
-| quadrantPointTextFill            | Points text color                       |
-| quadrantXAxisTextFill            | X-axis text color                       |
-| quadrantYAxisTextFill            | Y-axis text color                       |
-| quadrantInternalBorderStrokeFill | Quadrants inner border color            |
-| quadrantExternalBorderStrokeFill | Quadrants outer border color            |
-| quadrantTitleFill                | Title color                             |
-
-## Example on config and theme
-
-```mermaid-example
-%%{init: {"quadrantChart": {"chartWidth": 400, "chartHeight": 400}, "themeVariables": {"quadrant1TextFill": "#ff0000"} }}%%
-quadrantChart
-  x-axis Urgent --> Not Urgent
-  y-axis Not Important --> "Important ❤"
-  quadrant-1 Plan
-  quadrant-2 Do
-  quadrant-3 Deligate
-  quadrant-4 Delete
-```
-
-```mermaid
-%%{init: {"quadrantChart": {"chartWidth": 400, "chartHeight": 400}, "themeVariables": {"quadrant1TextFill": "#ff0000"} }}%%
-quadrantChart
-  x-axis Urgent --> Not Urgent
-  y-axis Not Important --> "Important ❤"
-  quadrant-1 Plan
-  quadrant-2 Do
-  quadrant-3 Deligate
-  quadrant-4 Delete
-```

package.json

@@ -1,10 +1,10 @@
 {
   "name": "mermaid-monorepo",
   "private": true,
-  "version": "10.2.2",
+  "version": "10.1.0",
   "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "type": "module",
-  "packageManager": "pnpm@8.5.1",
+  "packageManager": "pnpm@7.30.1",
   "keywords": [
     "diagram",
     "markdown",
@@ -26,7 +26,6 @@
     "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 . && ts-node-esm scripts/fixCSpell.ts",
     "lint:jison": "ts-node-esm ./scripts/jison/lint.mts",
-    "contributors": "ts-node-esm scripts/updateContributors.ts",
     "cypress": "cypress run",
     "cypress:open": "cypress open",
     "e2e": "start-server-and-test dev http://localhost:9000/ cypress",
@@ -55,65 +54,64 @@
     ]
   },
   "devDependencies": {
-    "@applitools/eyes-cypress": "^3.32.0",
-    "@commitlint/cli": "^17.6.1",
-    "@commitlint/config-conventional": "^17.6.1",
-    "@cspell/eslint-plugin": "^6.31.1",
-    "@rollup/plugin-typescript": "^11.1.0",
+    "@applitools/eyes-cypress": "^3.27.6",
+    "@commitlint/cli": "^17.2.0",
+    "@commitlint/config-conventional": "^17.2.0",
+    "@cspell/eslint-plugin": "^6.14.2",
     "@types/cors": "^2.8.13",
-    "@types/eslint": "^8.37.0",
+    "@types/eslint": "^8.4.10",
     "@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": "^18.16.0",
-    "@types/prettier": "^2.7.2",
+    "@types/jsdom": "^21.0.0",
+    "@types/lodash": "^4.14.188",
+    "@types/mdast": "^3.0.10",
+    "@types/node": "^18.11.9",
+    "@types/prettier": "^2.7.1",
     "@types/rollup-plugin-visualizer": "^4.2.1",
-    "@typescript-eslint/eslint-plugin": "^5.59.0",
-    "@typescript-eslint/parser": "^5.59.0",
-    "@vitest/coverage-c8": "^0.31.0",
-    "@vitest/spy": "^0.31.0",
-    "@vitest/ui": "^0.31.0",
-    "concurrently": "^8.0.1",
+    "@typescript-eslint/eslint-plugin": "^5.48.2",
+    "@typescript-eslint/parser": "^5.48.2",
+    "@vitest/coverage-c8": "^0.29.0",
+    "@vitest/spy": "^0.29.0",
+    "@vitest/ui": "^0.29.0",
+    "concurrently": "^7.5.0",
     "cors": "^2.8.5",
     "coveralls": "^3.1.1",
-    "cypress": "^12.10.0",
+    "cypress": "^12.0.0",
     "cypress-image-snapshot": "^4.0.1",
-    "esbuild": "^0.17.18",
-    "eslint": "^8.39.0",
-    "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-cypress": "^2.13.2",
+    "esbuild": "^0.17.0",
+    "eslint": "^8.32.0",
+    "eslint-config-prettier": "^8.6.0",
+    "eslint-plugin-cypress": "^2.12.1",
     "eslint-plugin-html": "^7.1.0",
-    "eslint-plugin-jest": "^27.2.1",
-    "eslint-plugin-jsdoc": "^43.0.7",
+    "eslint-plugin-jest": "^27.1.5",
+    "eslint-plugin-jsdoc": "^39.6.2",
     "eslint-plugin-json": "^3.1.0",
     "eslint-plugin-lodash": "^7.4.0",
     "eslint-plugin-markdown": "^3.0.0",
     "eslint-plugin-no-only-tests": "^3.1.0",
     "eslint-plugin-tsdoc": "^0.2.17",
-    "eslint-plugin-unicorn": "^46.0.0",
+    "eslint-plugin-unicorn": "^45.0.0",
     "express": "^4.18.2",
-    "globby": "^13.1.4",
-    "husky": "^8.0.3",
-    "jest": "^29.5.0",
+    "globby": "^13.1.2",
+    "husky": "^8.0.2",
+    "jest": "^29.3.1",
     "jison": "^0.4.18",
     "js-yaml": "^4.1.0",
-    "jsdom": "^21.1.1",
-    "lint-staged": "^13.2.1",
+    "jsdom": "^21.0.0",
+    "lint-staged": "^13.0.3",
     "path-browserify": "^1.0.1",
-    "pnpm": "^8.3.1",
-    "prettier": "^2.8.8",
+    "pnpm": "^7.15.0",
+    "prettier": "^2.7.1",
     "prettier-plugin-jsdoc": "^0.4.2",
-    "rimraf": "^5.0.0",
-    "rollup-plugin-visualizer": "^5.9.0",
-    "start-server-and-test": "^2.0.0",
+    "rimraf": "^4.0.0",
+    "rollup-plugin-visualizer": "^5.8.3",
+    "start-server-and-test": "^1.15.4",
     "ts-node": "^10.9.1",
-    "typescript": "^5.0.4",
-    "vite": "^4.3.1",
-    "vitest": "^0.31.0"
+    "typescript": "^4.8.4",
+    "vite": "^4.1.1",
+    "vitest": "^0.29.0"
   },
   "volta": {
-    "node": "18.16.0"
+    "node": "18.15.0"
   }
 }

packages/mermaid-example-diagram/package.json

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

packages/mermaid-example-diagram/src/diagram-definition.ts

@@ -1,9 +1,9 @@
 // @ts-ignore: TODO Fix ts errors
-import parser from './parser/exampleDiagram.jison';
-import * as db from './exampleDiagramDb.js';
-import renderer from './exampleDiagramRenderer.js';
-import styles from './styles.js';
-import { injectUtils } from './mermaidUtils.js';
+import parser from './parser/exampleDiagram';
+import * as db from './exampleDiagramDb';
+import renderer from './exampleDiagramRenderer';
+import styles from './styles';
+import { injectUtils } from './mermaidUtils';
 
 export const diagram = {
   db,

packages/mermaid-example-diagram/src/exampleDiagram.spec.js

@@ -1,6 +1,6 @@
-import { parser } from './parser/exampleDiagram.jison';
-import * as db from './exampleDiagramDb.js';
-import { injectUtils } from './mermaidUtils.js';
+import { parser } from './parser/exampleDiagram';
+import * as db from './exampleDiagramDb';
+import { injectUtils } from './mermaidUtils';
 // Todo fix utils functions for tests
 import {
   log,
@@ -8,7 +8,7 @@ import {
   getConfig,
   sanitizeText,
   setupGraphViewBox,
-} from '../../mermaid/src/diagram-api/diagramAPI.js';
+} from '../../mermaid/src/diagram-api/diagramAPI';
 
 injectUtils(log, setLogLevel, getConfig, sanitizeText, setupGraphViewBox);
 

packages/mermaid-example-diagram/src/exampleDiagramDb.js

@@ -1,5 +1,5 @@
 /** Created by knut on 15-01-14. */
-import { log } from './mermaidUtils.js';
+import { log } from './mermaidUtils';
 
 var message = '';
 var info = false;

packages/mermaid-example-diagram/src/exampleDiagramRenderer.js

@@ -1,6 +1,6 @@
 /** Created by knut on 14-12-11. */
 import { select } from 'd3';
-import { log, getConfig, setupGraphViewbox } from './mermaidUtils.js';
+import { log, getConfig, setupGraphViewbox } from './mermaidUtils';
 
 /**
  * Draws a an info picture in the tag with id: id based on the graph definition in text.

packages/mermaid-example-diagram/tsconfig.json

@@ -1,5 +1,6 @@
 {
   "extends": "../../tsconfig.json",
+  "module": "esnext",
   "compilerOptions": {
     "rootDir": "./src",
     "outDir": "./dist"

packages/mermaid/.gitignore

@@ -1,6 +1,3 @@
 src/vitepress
 src/docs/config/setup
-README.*
-src/docs/public/user-avatars/
-src/docs/.vitepress/cache
-src/docs/.vitepress/components.d.ts
+README.*

packages/mermaid/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mermaid",
-  "version": "10.2.2",
+  "version": "10.1.0",
   "description": "Markdown-ish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "type": "module",
   "module": "./dist/mermaid.core.mjs",
@@ -28,8 +28,8 @@
     "docs:build": "rimraf ../../docs && pnpm docs:spellcheck && pnpm docs:code && ts-node-esm src/docs.mts",
     "docs:verify": "pnpm docs:spellcheck && pnpm docs:code && ts-node-esm src/docs.mts --verify",
     "docs:pre:vitepress": "rimraf src/vitepress && pnpm docs:code && ts-node-esm src/docs.mts --vitepress",
-    "docs:build:vitepress": "pnpm docs:pre:vitepress && (cd src/vitepress && pnpm --filter ./ install --no-frozen-lockfile --ignore-scripts && pnpm run build) && cpy --flat src/docs/landing/ ./src/vitepress/.vitepress/dist/landing",
-    "docs:dev": "pnpm docs:pre:vitepress && concurrently \"pnpm --filter ./ src/vitepress dev\" \"ts-node-esm src/docs.mts --watch --vitepress\"",
+    "docs:build:vitepress": "pnpm docs:pre:vitepress && vitepress build src/vitepress && cpy --flat src/docs/landing/ ./src/vitepress/.vitepress/dist/landing",
+    "docs:dev": "pnpm docs:pre:vitepress && concurrently \"vitepress dev src/vitepress\" \"ts-node-esm src/docs.mts --watch --vitepress\"",
     "docs:serve": "pnpm docs:build:vitepress && vitepress serve src/vitepress",
     "docs:spellcheck": "cspell --config ../../cSpell.json \"src/docs/**/*.md\"",
     "release": "pnpm build",
@@ -52,20 +52,20 @@
     ]
   },
   "dependencies": {
-    "@braintree/sanitize-url": "^6.0.2",
+    "@braintree/sanitize-url": "^6.0.0",
+    "@khanacademy/simple-markdown": "^0.8.6",
     "cytoscape": "^3.23.0",
     "cytoscape-cose-bilkent": "^4.1.0",
     "cytoscape-fcose": "^2.1.0",
     "d3": "^7.4.0",
     "dagre-d3-es": "7.0.10",
     "dayjs": "^1.11.7",
-    "dompurify": "3.0.3",
+    "dompurify": "2.4.5",
     "elkjs": "^0.8.2",
     "khroma": "^2.0.0",
     "lodash-es": "^4.17.21",
-    "mdast-util-from-markdown": "^1.3.0",
     "non-layered-tidy-tree-layout": "^2.0.2",
-    "stylis": "^4.1.3",
+    "stylis": "^4.1.2",
     "ts-dedent": "^2.2.0",
     "uuid": "^9.0.0",
     "web-worker": "^1.2.0"
@@ -73,46 +73,42 @@
   "devDependencies": {
     "@types/cytoscape": "^3.19.9",
     "@types/d3": "^7.4.0",
-    "@types/dompurify": "^3.0.2",
-    "@types/jsdom": "^21.1.1",
+    "@types/dompurify": "^2.4.0",
+    "@types/jsdom": "^21.0.0",
     "@types/lodash-es": "^4.17.7",
     "@types/micromatch": "^4.0.2",
-    "@types/prettier": "^2.7.2",
+    "@types/prettier": "^2.7.1",
     "@types/stylis": "^4.0.2",
-    "@types/uuid": "^9.0.1",
-    "@typescript-eslint/eslint-plugin": "^5.59.0",
-    "@typescript-eslint/parser": "^5.59.0",
+    "@types/uuid": "^9.0.0",
+    "@typescript-eslint/eslint-plugin": "^5.42.1",
+    "@typescript-eslint/parser": "^5.42.1",
     "chokidar": "^3.5.3",
-    "concurrently": "^8.0.1",
+    "concurrently": "^7.5.0",
     "coveralls": "^3.1.1",
     "cpy-cli": "^4.2.0",
-    "cspell": "^6.31.1",
-    "csstree-validator": "^3.0.0",
-    "globby": "^13.1.4",
+    "cspell": "^6.14.3",
+    "globby": "^13.1.2",
     "jison": "^0.4.18",
-    "js-base64": "^3.7.5",
-    "jsdom": "^21.1.1",
+    "js-base64": "^3.7.2",
+    "jsdom": "^21.0.0",
     "micromatch": "^4.0.5",
     "path-browserify": "^1.0.1",
-    "prettier": "^2.8.8",
+    "prettier": "^2.7.1",
     "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",
-    "typedoc": "^0.24.5",
-    "typedoc-plugin-markdown": "^3.15.2",
-    "typescript": "^5.0.4",
+    "rimraf": "^4.0.0",
+    "start-server-and-test": "^1.14.0",
+    "typedoc": "^0.23.18",
+    "typedoc-plugin-markdown": "^3.13.6",
+    "typescript": "^4.8.4",
     "unist-util-flatmap": "^1.0.0",
-    "vitepress": "^1.0.0-alpha.72",
-    "vitepress-plugin-search": "^1.0.4-alpha.20"
+    "vitepress": "^1.0.0-alpha.46",
+    "vitepress-plugin-search": "^1.0.4-alpha.19"
   },
   "files": [
-    "dist/",
+    "dist",
     "README.md"
   ],
-  "sideEffects": false,
-  "publishConfig": {
-    "access": "public"
-  }
+  "sideEffects": false
 }

packages/mermaid/src/Diagram.ts

@@ -1,11 +1,11 @@
-import * as configApi from './config.js';
-import { log } from './logger.js';
-import { getDiagram, registerDiagram } from './diagram-api/diagramAPI.js';
-import { detectType, getDiagramLoader } from './diagram-api/detectType.js';
-import { extractFrontMatter } from './diagram-api/frontmatter.js';
-import { UnknownDiagramError } from './errors.js';
-import { DetailedError } from './utils.js';
-import { cleanupComments } from './diagram-api/comments.js';
+import * as configApi from './config';
+import { log } from './logger';
+import { getDiagram, registerDiagram } from './diagram-api/diagramAPI';
+import { detectType, getDiagramLoader } from './diagram-api/detectType';
+import { extractFrontMatter } from './diagram-api/frontmatter';
+import { UnknownDiagramError } from './errors';
+import { DetailedError } from './utils';
+import { cleanupComments } from './diagram-api/comments';
 
 export type ParseErrorFunction = (err: string | DetailedError | unknown, hash?: any) => void;
 

packages/mermaid/src/__mocks__/mermaidAPI.ts

@@ -3,9 +3,9 @@
  *
  * We can't easily use `vi.spyOn(mermaidAPI, "function")` since the object is frozen with `Object.freeze()`.
  */
-import * as configApi from '../config.js';
+import * as configApi from '../config';
 import { vi } from 'vitest';
-import { mermaidAPI as mAPI } from '../mermaidAPI.js';
+import { mermaidAPI as mAPI } from '../mermaidAPI';
 
 // original version cannot be modified since it was frozen with `Object.freeze()`
 export const mermaidAPI = {

packages/mermaid/src/accessibility.spec.ts

@@ -1,6 +1,6 @@
-import { MockedD3 } from './tests/MockedD3.js';
-import { setA11yDiagramInfo, addSVGa11yTitleDescription } from './accessibility.js';
-import { D3Element } from './mermaidAPI.js';
+import { MockedD3 } from './tests/MockedD3';
+import { setA11yDiagramInfo, addSVGa11yTitleDescription } from './accessibility';
+import { D3Element } from './mermaidAPI';
 
 describe('accessibility', () => {
   const fauxSvgNode = new MockedD3();

packages/mermaid/src/accessibility.ts

@@ -5,7 +5,7 @@
  * @see https://www.w3.org/TR/svg-aam-1.0/
  *
  */
-import { D3Element } from './mermaidAPI.js';
+import { D3Element } from './mermaidAPI';
 
 import isEmpty from 'lodash-es/isEmpty.js';
 

packages/mermaid/src/commonDb.ts

@@ -1,5 +1,5 @@
-import { sanitizeText as _sanitizeText } from './diagrams/common/common.js';
-import { getConfig } from './config.js';
+import { sanitizeText as _sanitizeText } from './diagrams/common/common';
+import { getConfig } from './config';
 let title = '';
 let diagramTitle = '';
 let description = '';

packages/mermaid/src/config.spec.js

@@ -1,4 +1,4 @@
-import * as configApi from './config.js';
+import * as configApi from './config';
 
 describe('when working with site config', function () {
   beforeEach(() => {

packages/mermaid/src/config.ts

@@ -1,8 +1,8 @@
-import assignWithDepth from './assignWithDepth.js';
-import { log } from './logger.js';
-import theme from './themes/index.js';
-import config from './defaultConfig.js';
-import type { MermaidConfig } from './config.type.js';
+import assignWithDepth from './assignWithDepth';
+import { log } from './logger';
+import theme from './themes';
+import config from './defaultConfig';
+import type { MermaidConfig } from './config.type';
 
 export const defaultConfig: MermaidConfig = Object.freeze(config);
 

packages/mermaid/src/config.type.ts

@@ -27,7 +27,6 @@ export interface MermaidConfig {
   state?: StateDiagramConfig;
   er?: ErDiagramConfig;
   pie?: PieDiagramConfig;
-  quadrantChart?: QuadrantChartConfig;
   requirement?: RequirementDiagramConfig;
   mindmap?: MindmapDiagramConfig;
   gitGraph?: GitGraphDiagramConfig;
@@ -227,27 +226,6 @@ export interface PieDiagramConfig extends BaseDiagramConfig {
   textPosition?: number;
 }
 
-export interface QuadrantChartConfig extends BaseDiagramConfig {
-  chartWidth: number;
-  chartHeight: number;
-  titleFontSize: number;
-  titlePadding: number;
-  quadrantPadding: number;
-  xAxisLabelPadding: number;
-  yAxisLabelPadding: number;
-  xAxisLabelFontSize: number;
-  yAxisLabelFontSize: number;
-  quadrantLabelFontSize: number;
-  quadrantTextTopPadding: number;
-  pointTextPadding: number;
-  pointLabelFontSize: number;
-  pointRadius: number;
-  xAxisPosition: 'top' | 'bottom';
-  yAxisPosition: 'left' | 'right';
-  quadrantInternalBorderStrokeWidth: number;
-  quadrantExternalBorderStrokeWidth: number;
-}
-
 export interface ErDiagramConfig extends BaseDiagramConfig {
   titleTopMargin?: number;
   diagramPadding?: number;

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

@@ -1,10 +1,10 @@
-import intersectRect from './intersect/intersect-rect.js';
-import { log } from '../logger.js';
-import createLabel from './createLabel.js';
-import { createText } from '../rendering-util/createText.js';
+import intersectRect from './intersect/intersect-rect';
+import { log } from '../logger';
+import createLabel from './createLabel';
+import { createText } from '../rendering-util/createText';
 import { select } from 'd3';
-import { getConfig } from '../config.js';
-import { evaluate } from '../diagrams/common/common.js';
+import { getConfig } from '../config';
+import { evaluate } from '../diagrams/common/common';
 
 const rect = (parent, node) => {
   log.info('Creating subgraph rect for ', node.id, node);

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

@@ -1,8 +1,8 @@
 import { select } from 'd3';
-import { log } from '../logger.js';
-import { getConfig } from '../config.js';
-import { evaluate } from '../diagrams/common/common.js';
-import { decodeEntities } from '../mermaidAPI.js';
+import { log } from '../logger';
+import { getConfig } from '../config';
+import { evaluate } from '../diagrams/common/common';
+import { decodeEntities } from '../mermaidAPI';
 
 /**
  * @param dom

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

@@ -1,10 +1,10 @@
-import { log } from '../logger.js';
-import createLabel from './createLabel.js';
-import { createText } from '../rendering-util/createText.js';
+import { log } from '../logger';
+import createLabel from './createLabel';
+import { createText } from '../rendering-util/createText';
 import { line, curveBasis, select } from 'd3';
-import { getConfig } from '../config.js';
-import utils from '../utils.js';
-import { evaluate } from '../diagrams/common/common.js';
+import { getConfig } from '../config';
+import utils from '../utils';
+import { evaluate } from '../diagrams/common/common';
 
 let edgeLabels = {};
 let terminalLabels = {};

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

@@ -1,5 +1,5 @@
-import { intersection } from './edges.js';
-import { setLogLevel } from '../logger.js';
+import { intersection } from './edges';
+import { setLogLevel } from '../logger';
 
 describe('Graphlib decorations', () => {
   let node;

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

@@ -1,20 +1,20 @@
 import { layout as dagreLayout } from 'dagre-d3-es/src/dagre/index.js';
 import * as graphlibJson from 'dagre-d3-es/src/graphlib/json.js';
-import insertMarkers from './markers.js';
-import { updateNodeBounds } from './shapes/util.js';
+import insertMarkers from './markers';
+import { updateNodeBounds } from './shapes/util';
 import {
   clear as clearGraphlib,
   clusterDb,
   adjustClustersAndEdges,
   findNonClusterChild,
   sortNodesByHierarchy,
-} from './mermaid-graphlib.js';
-import { insertNode, positionNode, clear as clearNodes, setNodeElem } from './nodes.js';
-import { insertCluster, clear as clearClusters } from './clusters.js';
-import { insertEdgeLabel, positionEdgeLabel, insertEdge, clear as clearEdges } from './edges.js';
-import { log } from '../logger.js';
+} from './mermaid-graphlib';
+import { insertNode, positionNode, clear as clearNodes, setNodeElem } from './nodes';
+import { insertCluster, clear as clearClusters } from './clusters';
+import { insertEdgeLabel, positionEdgeLabel, insertEdge, clear as clearEdges } from './edges';
+import { log } from '../logger';
 
-const recursiveRender = async (_elem, graph, diagramtype, parentCluster) => {
+const recursiveRender = (_elem, graph, diagramtype, parentCluster) => {
   log.info('Graph in recursive render: XXX', graphlibJson.write(graph), parentCluster);
   const dir = graph.graph().rankdir;
   log.trace('Dir in recursive render - dir:', dir);
@@ -35,46 +35,44 @@ const recursiveRender = async (_elem, graph, diagramtype, parentCluster) => {
 
   // Insert nodes, this will insert them into the dom and each node will get a size. The size is updated
   // to the abstract node and is later used by dagre for the layout
-  await Promise.all(
-    graph.nodes().map(async function (v) {
-      const node = graph.node(v);
-      if (parentCluster !== undefined) {
-        const data = JSON.parse(JSON.stringify(parentCluster.clusterData));
-        // data.clusterPositioning = true;
-        log.info('Setting data for cluster XXX (', v, ') ', data, parentCluster);
-        graph.setNode(parentCluster.id, data);
-        if (!graph.parent(v)) {
-          log.trace('Setting parent', v, parentCluster.id);
-          graph.setParent(v, parentCluster.id, data);
-        }
+  graph.nodes().forEach(function (v) {
+    const node = graph.node(v);
+    if (parentCluster !== undefined) {
+      const data = JSON.parse(JSON.stringify(parentCluster.clusterData));
+      // data.clusterPositioning = true;
+      log.info('Setting data for cluster XXX (', v, ') ', data, parentCluster);
+      graph.setNode(parentCluster.id, data);
+      if (!graph.parent(v)) {
+        log.trace('Setting parent', v, parentCluster.id);
+        graph.setParent(v, parentCluster.id, data);
       }
-      log.info('(Insert) Node XXX' + v + ': ' + JSON.stringify(graph.node(v)));
-      if (node && node.clusterNode) {
-        // const children = graph.children(v);
-        log.info('Cluster identified', v, node.width, graph.node(v));
-        const o = await recursiveRender(nodes, node.graph, diagramtype, graph.node(v));
-        const newEl = o.elem;
-        updateNodeBounds(node, newEl);
-        node.diff = o.diff || 0;
-        log.info('Node bounds (abc123)', v, node, node.width, node.x, node.y);
-        setNodeElem(newEl, node);
+    }
+    log.info('(Insert) Node XXX' + v + ': ' + JSON.stringify(graph.node(v)));
+    if (node && node.clusterNode) {
+      // const children = graph.children(v);
+      log.info('Cluster identified', v, node.width, graph.node(v));
+      const o = recursiveRender(nodes, node.graph, diagramtype, graph.node(v));
+      const newEl = o.elem;
+      updateNodeBounds(node, newEl);
+      node.diff = o.diff || 0;
+      log.info('Node bounds (abc123)', v, node, node.width, node.x, node.y);
+      setNodeElem(newEl, node);
 
-        log.warn('Recursive render complete ', newEl, node);
+      log.warn('Recursive render complete ', newEl, node);
+    } else {
+      if (graph.children(v).length > 0) {
+        // This is a cluster but not to be rendered recursively
+        // Render as before
+        log.info('Cluster - the non recursive path XXX', v, node.id, node, graph);
+        log.info(findNonClusterChild(node.id, graph));
+        clusterDb[node.id] = { id: findNonClusterChild(node.id, graph), node };
+        // insertCluster(clusters, graph.node(v));
       } else {
-        if (graph.children(v).length > 0) {
-          // This is a cluster but not to be rendered recursively
-          // Render as before
-          log.info('Cluster - the non recursive path XXX', v, node.id, node, graph);
-          log.info(findNonClusterChild(node.id, graph));
-          clusterDb[node.id] = { id: findNonClusterChild(node.id, graph), node };
-          // insertCluster(clusters, graph.node(v));
-        } else {
-          log.info('Node - the non recursive path', v, node.id, node);
-          await insertNode(nodes, graph.node(v), dir);
-        }
+        log.info('Node - the non recursive path', v, node.id, node);
+        insertNode(nodes, graph.node(v), dir);
       }
-    })
-  );
+    }
+  });
 
   // Insert labels, this will insert them into the dom so that the width can be calculated
   // Also figure out which edges point to/from clusters and adjust them accordingly
@@ -148,7 +146,7 @@ const recursiveRender = async (_elem, graph, diagramtype, parentCluster) => {
   return { elem, diff };
 };
 
-export const render = async (elem, graph, markers, diagramtype, id) => {
+export const render = (elem, graph, markers, diagramtype, id) => {
   insertMarkers(elem, markers, diagramtype, id);
   clearNodes();
   clearEdges();
@@ -159,7 +157,7 @@ export const render = async (elem, graph, markers, diagramtype, id) => {
   adjustClustersAndEdges(graph);
   log.warn('Graph after:', graphlibJson.write(graph));
   // log.warn('Graph ever  after:', graphlibJson.write(graph.node('A').graph));
-  await recursiveRender(elem, graph, diagramtype);
+  recursiveRender(elem, graph, diagramtype);
 };
 
 // const shapeDefinitions = {};

packages/mermaid/src/dagre-wrapper/intersect/intersect-circle.js

@@ -1,4 +1,4 @@
-import intersectEllipse from './intersect-ellipse.js';
+import intersectEllipse from './intersect-ellipse';
 
 /**
  * @param node

packages/mermaid/src/dagre-wrapper/intersect/intersect-polygon.js

@@ -1,6 +1,6 @@
 /* eslint "no-console": off */
 
-import intersectLine from './intersect-line.js';
+import intersectLine from './intersect-line';
 
 export default intersectPolygon;
 

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

@@ -1,6 +1,6 @@
 /** Setup arrow head and define the marker. The result is appended to the svg. */
 
-import { log } from '../logger.js';
+import { log } from '../logger';
 
 // Only add the number of markers that the diagram needs
 const insertMarkers = (elem, markerArray, type, id) => {
@@ -142,7 +142,7 @@ const point = (elem, type) => {
     .append('marker')
     .attr('id', type + '-pointEnd')
     .attr('class', 'marker ' + type)
-    .attr('viewBox', '0 0 10 10')
+    .attr('viewBox', '0 0 12 20')
     .attr('refX', 10)
     .attr('refY', 5)
     .attr('markerUnits', 'userSpaceOnUse')

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

@@ -1,5 +1,5 @@
 /** Decorates with functions required by mermaids dagre-wrapper. */
-import { log } from '../logger.js';
+import { log } from '../logger';
 import * as graphlibJson from 'dagre-d3-es/src/graphlib/json.js';
 import * as graphlib from 'dagre-d3-es/src/graphlib/index.js';
 

packages/mermaid/src/dagre-wrapper/mermaid-graphlib.spec.js

@@ -5,8 +5,8 @@ import {
   adjustClustersAndEdges,
   extractDescendants,
   sortNodesByHierarchy,
-} from './mermaid-graphlib.js';
-import { setLogLevel, log } from '../logger.js';
+} from './mermaid-graphlib';
+import { setLogLevel, log } from '../logger';
 
 describe('Graphlib decorations', () => {
   let g;

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

@@ -1,15 +1,15 @@
 import { select } from 'd3';
-import { log } from '../logger.js';
-import { labelHelper, updateNodeBounds, insertPolygonShape } from './shapes/util.js';
-import { getConfig } from '../config.js';
+import { log } from '../logger';
+import { labelHelper, updateNodeBounds, insertPolygonShape } from './shapes/util';
+import { getConfig } from '../config';
 import intersect from './intersect/index.js';
-import createLabel from './createLabel.js';
-import note from './shapes/note.js';
-import { parseMember } from '../diagrams/class/svgDraw.js';
-import { evaluate } from '../diagrams/common/common.js';
+import createLabel from './createLabel';
+import note from './shapes/note';
+import { parseMember } from '../diagrams/class/svgDraw';
+import { evaluate } from '../diagrams/common/common';
 
-const question = async (parent, node) => {
-  const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
+const question = (parent, node) => {
+  const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
 
   const w = bbox.width + node.padding;
   const h = bbox.height + node.padding;
@@ -69,8 +69,8 @@ const choice = (parent, node) => {
   return shapeSvg;
 };
 
-const hexagon = async (parent, node) => {
-  const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
+const hexagon = (parent, node) => {
+  const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
 
   const f = 4;
   const h = bbox.height + node.padding;
@@ -96,8 +96,8 @@ const hexagon = async (parent, node) => {
   return shapeSvg;
 };
 
-const rect_left_inv_arrow = async (parent, node) => {
-  const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
+const rect_left_inv_arrow = (parent, node) => {
+  const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
 
   const w = bbox.width + node.padding;
   const h = bbox.height + node.padding;
@@ -122,8 +122,8 @@ const rect_left_inv_arrow = async (parent, node) => {
   return shapeSvg;
 };
 
-const lean_right = async (parent, node) => {
-  const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
+const lean_right = (parent, node) => {
+  const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
 
   const w = bbox.width + node.padding;
   const h = bbox.height + node.padding;
@@ -145,8 +145,8 @@ const lean_right = async (parent, node) => {
   return shapeSvg;
 };
 
-const lean_left = async (parent, node) => {
-  const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
+const lean_left = (parent, node) => {
+  const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
 
   const w = bbox.width + node.padding;
   const h = bbox.height + node.padding;
@@ -168,8 +168,8 @@ const lean_left = async (parent, node) => {
   return shapeSvg;
 };
 
-const trapezoid = async (parent, node) => {
-  const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
+const trapezoid = (parent, node) => {
+  const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
 
   const w = bbox.width + node.padding;
   const h = bbox.height + node.padding;
@@ -191,8 +191,8 @@ const trapezoid = async (parent, node) => {
   return shapeSvg;
 };
 
-const inv_trapezoid = async (parent, node) => {
-  const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
+const inv_trapezoid = (parent, node) => {
+  const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
 
   const w = bbox.width + node.padding;
   const h = bbox.height + node.padding;
@@ -214,8 +214,8 @@ const inv_trapezoid = async (parent, node) => {
   return shapeSvg;
 };
 
-const rect_right_inv_arrow = async (parent, node) => {
-  const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
+const rect_right_inv_arrow = (parent, node) => {
+  const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
 
   const w = bbox.width + node.padding;
   const h = bbox.height + node.padding;
@@ -238,8 +238,8 @@ const rect_right_inv_arrow = async (parent, node) => {
   return shapeSvg;
 };
 
-const cylinder = async (parent, node) => {
-  const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
+const cylinder = (parent, node) => {
+  const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
 
   const w = bbox.width + node.padding;
   const rx = w / 2;
@@ -310,13 +310,8 @@ const cylinder = async (parent, node) => {
   return shapeSvg;
 };
 
-const rect = async (parent, node) => {
-  const { shapeSvg, bbox, halfPadding } = await labelHelper(
-    parent,
-    node,
-    'node ' + node.classes,
-    true
-  );
+const rect = (parent, node) => {
+  const { shapeSvg, bbox, halfPadding } = labelHelper(parent, node, 'node ' + node.classes, true);
 
   // add the rect
   const rect = shapeSvg.insert('rect', ':first-child');
@@ -357,8 +352,8 @@ const rect = async (parent, node) => {
   return shapeSvg;
 };
 
-const labelRect = async (parent, node) => {
-  const { shapeSvg } = await labelHelper(parent, node, 'label', true);
+const labelRect = (parent, node) => {
+  const { shapeSvg } = labelHelper(parent, node, 'label', true);
 
   log.trace('Classes = ', node.classes);
   // add the rect
@@ -544,8 +539,8 @@ const rectWithTitle = (parent, node) => {
   return shapeSvg;
 };
 
-const stadium = async (parent, node) => {
-  const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
+const stadium = (parent, node) => {
+  const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
 
   const h = bbox.height + node.padding;
   const w = bbox.width + h / 4 + node.padding;
@@ -570,8 +565,8 @@ const stadium = async (parent, node) => {
   return shapeSvg;
 };
 
-const circle = async (parent, node) => {
-  const { shapeSvg, bbox, halfPadding } = await labelHelper(parent, node, undefined, true);
+const circle = (parent, node) => {
+  const { shapeSvg, bbox, halfPadding } = labelHelper(parent, node, undefined, true);
   const circle = shapeSvg.insert('circle', ':first-child');
 
   // center the circle around its coordinate
@@ -595,8 +590,8 @@ const circle = async (parent, node) => {
   return shapeSvg;
 };
 
-const doublecircle = async (parent, node) => {
-  const { shapeSvg, bbox, halfPadding } = await labelHelper(parent, node, undefined, true);
+const doublecircle = (parent, node) => {
+  const { shapeSvg, bbox, halfPadding } = labelHelper(parent, node, undefined, true);
   const gap = 5;
   const circleGroup = shapeSvg.insert('g', ':first-child');
   const outerCircle = circleGroup.insert('circle');
@@ -631,8 +626,8 @@ const doublecircle = async (parent, node) => {
   return shapeSvg;
 };
 
-const subroutine = async (parent, node) => {
-  const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
+const subroutine = (parent, node) => {
+  const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
 
   const w = bbox.width + node.padding;
   const h = bbox.height + node.padding;
@@ -981,7 +976,7 @@ const shapes = {
 
 let nodeElems = {};
 
-export const insertNode = async (elem, node, dir) => {
+export const insertNode = (elem, node, dir) => {
   let newEl;
   let el;
 
@@ -994,9 +989,9 @@ export const insertNode = async (elem, node, dir) => {
       target = node.linkTarget || '_blank';
     }
     newEl = elem.insert('svg:a').attr('xlink:href', node.link).attr('target', target);
-    el = await shapes[node.shape](newEl, node, dir);
+    el = shapes[node.shape](newEl, node, dir);
   } else {
-    el = await shapes[node.shape](elem, node, dir);
+    el = shapes[node.shape](elem, node, dir);
     newEl = el;
   }
   if (node.tooltip) {
@@ -1022,7 +1017,6 @@ export const clear = () => {
 
 export const positionNode = (node) => {
   const el = nodeElems[node.id];
-
   log.trace(
     'Transforming node',
     node.diff,

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

@@ -1,6 +1,6 @@
 /** Setup arrow head and define the marker. The result is appended to the svg. */
 
-// import { log } from '../logger.js';
+// import { log } from '../logger';
 
 // Only add the number of markers that the diagram needs
 const insertPatterns = (elem, patternArray, type, id) => {

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

@@ -1,19 +1,14 @@
-import { updateNodeBounds, labelHelper } from './util.js';
-import { log } from '../../logger.js';
-import { getConfig } from '../../config.js';
+import { updateNodeBounds, labelHelper } from './util';
+import { log } from '../../logger';
+import { getConfig } from '../../config';
 import intersect from '../intersect/index.js';
 
-const note = async (parent, node) => {
+const note = (parent, node) => {
   const useHtmlLabels = node.useHtmlLabels || getConfig().flowchart.htmlLabels;
   if (!useHtmlLabels) {
     node.centerLabel = true;
   }
-  const { shapeSvg, bbox, halfPadding } = await labelHelper(
-    parent,
-    node,
-    'node ' + node.classes,
-    true
-  );
+  const { shapeSvg, bbox, halfPadding } = labelHelper(parent, node, 'node ' + node.classes, true);
 
   log.info('Classes = ', node.classes);
   // add the rect

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

@@ -1,11 +1,10 @@
-import createLabel from '../createLabel.js';
-import { createText } from '../../rendering-util/createText.js';
-import { getConfig } from '../../config.js';
-import { decodeEntities } from '../../mermaidAPI.js';
+import createLabel from '../createLabel';
+import { createText } from '../../rendering-util/createText';
+import { getConfig } from '../../config';
+import { decodeEntities } from '../../mermaidAPI';
 import { select } from 'd3';
-import { evaluate, sanitizeText } from '../../diagrams/common/common.js';
-
-export const labelHelper = async (parent, node, _classes, isNode) => {
+import { evaluate, sanitizeText } from '../../diagrams/common/common';
+export const labelHelper = (parent, node, _classes, isNode) => {
   let classes;
   const useHtmlLabels = node.useHtmlLabels || evaluate(getConfig().flowchart.htmlLabels);
   if (!_classes) {
@@ -52,47 +51,17 @@ export const labelHelper = async (parent, node, _classes, isNode) => {
 
   // Get the size of the label
   let bbox = text.getBBox();
-  const halfPadding = node.padding / 2;
 
   if (evaluate(getConfig().flowchart.htmlLabels)) {
     const div = text.children[0];
     const dv = select(text);
-
-    // if there are images, need to wait for them to load before getting the bounding box
-    const images = div.getElementsByTagName('img');
-    if (images) {
-      const noImgText = labelText.replace(/<img[^>]*>/g, '').trim() === '';
-
-      await Promise.all(
-        [...images].map(
-          (img) =>
-            new Promise((res) =>
-              img.addEventListener('load', function () {
-                img.style.display = 'flex';
-                img.style.flexDirection = 'column';
-
-                if (noImgText) {
-                  // default size if no text
-                  const bodyFontSize = getConfig().fontSize
-                    ? getConfig().fontSize
-                    : window.getComputedStyle(document.body).fontSize;
-                  const enlargingFactor = 5;
-                  img.style.width = parseInt(bodyFontSize, 10) * enlargingFactor + 'px';
-                } else {
-                  img.style.width = '100%';
-                }
-                res(img);
-              })
-            )
-        )
-      );
-    }
-
     bbox = div.getBoundingClientRect();
     dv.attr('width', bbox.width);
     dv.attr('height', bbox.height);
   }
 
+  const halfPadding = node.padding / 2;
+
   // Center the label
   if (useHtmlLabels) {
     label.attr('transform', 'translate(' + -bbox.width / 2 + ', ' + -bbox.height / 2 + ')');

packages/mermaid/src/defaultConfig.ts

@@ -1,5 +1,5 @@
-import theme from './themes/index.js';
-import { MermaidConfig } from './config.type.js';
+import theme from './themes';
+import { MermaidConfig } from './config.type';
 /**
  * **Configuration methods in Mermaid version 8.6.0 have been updated, to learn more[[click
  * here](8.6.0_docs.md)].**
@@ -88,13 +88,13 @@ const config: Partial<MermaidConfig> = {
    *
    * **Notes**:
    *
-   * - **strict**: (**default**) HTML tags in the text are encoded and click functionality is disabled.
-   * - **antiscript**: HTML tags in text are allowed (only script elements are removed), and click
-   *   functionality is enabled.
-   * - **loose**: HTML tags in text are allowed and click functionality is enabled.
-   * - **sandbox**: With this security level, all rendering takes place in a sandboxed iframe. This
+   * - **strict**: (**default**) tags in text are encoded, click functionality is disabled
+   * - **loose**: tags in text are allowed, click functionality is enabled
+   * - **antiscript**: html tags in text are allowed, (only script element is removed), click
+   *   functionality is enabled
+   * - **sandbox**: With this security level all rendering takes place in a sandboxed iframe. This
    *   prevent any JavaScript from running in the context. This may hinder interactive functionality
-   *   of the diagram, like scripts, popups in the sequence diagram, links to other tabs or targets, etc.
+   *   of the diagram like scripts, popups in sequence diagram or links to other tabs/targets etc.
    */
   securityLevel: 'strict',
 
@@ -1280,184 +1280,6 @@ const config: Partial<MermaidConfig> = {
     textPosition: 0.75,
   },
 
-  quadrantChart: {
-    /**
-     * | Parameter       | Description                        | Type    | Required | Values              |
-     * | --------------- | ---------------------------------- | ------- | -------- | ------------------- |
-     * | chartWidth      | Width of the chart                 | number  | Optional | Any positive number |
-     *
-     * **Notes:**
-     * Default value: 500
-     */
-    chartWidth: 500,
-    /**
-     * | Parameter       | Description                        | Type    | Required | Values              |
-     * | --------------- | ---------------------------------- | ------- | -------- | ------------------- |
-     * | chartHeight     | Height of the chart                | number  | Optional | Any positive number |
-     *
-     * **Notes:**
-     * Default value: 500
-     */
-    chartHeight: 500,
-    /**
-     * | Parameter          | Description                        | Type    | Required | Values              |
-     * | ------------------ | ---------------------------------- | ------- | -------- | ------------------- |
-     * | titlePadding       | Chart title top and bottom padding | number  | Optional | Any positive number |
-     *
-     * **Notes:**
-     * Default value: 10
-     */
-    titlePadding: 10,
-    /**
-     * | Parameter          | Description                        | Type    | Required | Values              |
-     * | ------------------ | ---------------------------------- | ------- | -------- | ------------------- |
-     * | titleFontSize      | Chart title font size              | number  | Optional | Any positive number |
-     *
-     * **Notes:**
-     * Default value: 20
-     */
-    titleFontSize: 20,
-    /**
-     * | Parameter       | Description                        | Type    | Required | Values              |
-     * | --------------- | ---------------------------------- | ------- | -------- | ------------------- |
-     * | quadrantPadding | Padding around the quadrant square | number  | Optional | Any positive number |
-     *
-     * **Notes:**
-     * Default value: 5
-     */
-    quadrantPadding: 5,
-    /**
-     * | Parameter              | Description                                                                | Type    | Required | Values              |
-     * | ---------------------- | -------------------------------------------------------------------------- | ------- | -------- | ------------------- |
-     * | quadrantTextTopPadding | quadrant title padding from top if the quadrant is rendered on top         | number  | Optional | Any positive number |
-     *
-     * **Notes:**
-     * Default value: 5
-     */
-    quadrantTextTopPadding: 5,
-    /**
-     * | Parameter             | Description                        | Type    | Required | Values              |
-     * | ------------------    | ---------------------------------- | ------- | -------- | ------------------- |
-     * | quadrantLabelFontSize | quadrant title font size           | number  | Optional | Any positive number |
-     *
-     * **Notes:**
-     * Default value: 16
-     */
-    quadrantLabelFontSize: 16,
-    /**
-     * | Parameter                         | Description                                                   | Type    | Required | Values              |
-     * | --------------------------------- | ------------------------------------------------------------- | ------- | -------- | ------------------- |
-     * | quadrantInternalBorderStrokeWidth | stroke width of edges of the box that are inside the quadrant | number  | Optional | Any positive number |
-     *
-     * **Notes:**
-     * Default value: 1
-     */
-    quadrantInternalBorderStrokeWidth: 1,
-    /**
-     * | Parameter                         | Description                                                    | Type    | Required | Values              |
-     * | --------------------------------- | -------------------------------------------------------------- | ------- | -------- | ------------------- |
-     * | quadrantExternalBorderStrokeWidth | stroke width of edges of the box that are outside the quadrant | number  | Optional | Any positive number |
-     *
-     * **Notes:**
-     * Default value: 2
-     */
-    quadrantExternalBorderStrokeWidth: 2,
-    /**
-     * | Parameter         | Description                        | Type    | Required | Values              |
-     * | ---------------   | ---------------------------------- | ------- | -------- | ------------------- |
-     * | xAxisLabelPadding | Padding around x-axis labels       | number  | Optional | Any positive number |
-     *
-     * **Notes:**
-     * Default value: 5
-     */
-    xAxisLabelPadding: 5,
-    /**
-     * | Parameter          | Description                        | Type    | Required | Values              |
-     * | ------------------ | ---------------------------------- | ------- | -------- | ------------------- |
-     * | xAxisLabelFontSize | x-axis label font size             | number  | Optional | Any positive number |
-     *
-     * **Notes:**
-     * Default value: 16
-     */
-    xAxisLabelFontSize: 16,
-    /**
-     * | Parameter     | Description                     | Type    | Required | Values              |
-     * | ------------- | ------------------------------- | ------- | -------- | ------------------- |
-     * | xAxisPosition | position of x-axis labels       | string  | Optional | 'top' or 'bottom'   |
-     *
-     * **Notes:**
-     * Default value: top
-     */
-    xAxisPosition: 'top',
-    /**
-     * | Parameter         | Description                        | Type    | Required | Values              |
-     * | ---------------   | ---------------------------------- | ------- | -------- | ------------------- |
-     * | yAxisLabelPadding | Padding around y-axis labels       | number  | Optional | Any positive number |
-     *
-     * **Notes:**
-     * Default value: 5
-     */
-    yAxisLabelPadding: 5,
-    /**
-     * | Parameter          | Description                        | Type    | Required | Values              |
-     * | ------------------ | ---------------------------------- | ------- | -------- | ------------------- |
-     * | yAxisLabelFontSize | y-axis label font size             | number  | Optional | Any positive number |
-     *
-     * **Notes:**
-     * Default value: 16
-     */
-    yAxisLabelFontSize: 16,
-    /**
-     * | Parameter     | Description                     | Type    | Required | Values              |
-     * | ------------- | ------------------------------- | ------- | -------- | ------------------- |
-     * | yAxisPosition | position of y-axis labels       | string  | Optional | 'left' or 'right'   |
-     *
-     * **Notes:**
-     * Default value: left
-     */
-    yAxisPosition: 'left',
-    /**
-     * | Parameter              | Description                            | Type    | Required | Values              |
-     * | ---------------------- | -------------------------------------- | ------- | -------- | ------------------- |
-     * | pointTextPadding       | padding between point and point label  | number  | Optional | Any positive number |
-     *
-     * **Notes:**
-     * Default value: 5
-     */
-    pointTextPadding: 5,
-    /**
-     * | Parameter              | Description            | Type    | Required | Values              |
-     * | ---------------------- | ---------------------- | ------- | -------- | ------------------- |
-     * | pointTextPadding       | point title font size  | number  | Optional | Any positive number |
-     *
-     * **Notes:**
-     * Default value: 12
-     */
-    pointLabelFontSize: 12,
-    /**
-     * | Parameter     | Description                     | Type    | Required | Values              |
-     * | ------------- | ------------------------------- | ------- | -------- | ------------------- |
-     * | pointRadius   | radius of the point to be drawn | number  | Optional | Any positive number |
-     *
-     * **Notes:**
-     * Default value: 5
-     */
-    pointRadius: 5,
-    /**
-     * | Parameter   | Description | Type    | Required | Values      |
-     * | ----------- | ----------- | ------- | -------- | ----------- |
-     * | useMaxWidth | See Notes   | boolean | Required | true, false |
-     *
-     * **Notes:**
-     *
-     * When this flag is set to true, the diagram width is locked to 100% and scaled based on
-     * available space. If set to false, the diagram reserves its absolute width.
-     *
-     * Default value: true
-     */
-    useMaxWidth: true,
-  },
-
   /** The object containing configurations specific for req diagrams */
   requirement: {
     useWidth: undefined,

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

@@ -1,12 +1,12 @@
 // tests to check that comments are removed
 
-import { cleanupComments } from './comments.js';
+import { cleanupComments } from './comments';
 import { describe, it, expect } from 'vitest';
 
 describe('comments', () => {
   it('should remove comments', () => {
     const text = `
-
+		
 %% This is a comment
 %% This is another comment
 graph TD
@@ -27,7 +27,7 @@ graph TD
 %% This is another comment
 %%{init: {'theme': 'forest'}}%%
 %%{ init: {'theme': 'space before init'}}%%
-%%{init: {'theme': 'space after ending'}}%%
+%%{init: {'theme': 'space after ending'}}%% 
 graph TD
 	A-->B
 
@@ -37,7 +37,7 @@ graph TD
     expect(cleanupComments(text)).toMatchInlineSnapshot(`
       "%%{init: {'theme': 'forest'}}%%
       %%{ init: {'theme': 'space before init'}}%%
-      %%{init: {'theme': 'space after ending'}}%%
+      %%{init: {'theme': 'space after ending'}}%% 
       graph TD
       	A-->B
 

packages/mermaid/src/diagram-api/detectType.ts

@@ -1,14 +1,14 @@
-import { MermaidConfig } from '../config.type.js';
-import { log } from '../logger.js';
+import { MermaidConfig } from '../config.type';
+import { log } from '../logger';
 import type {
   DetectorRecord,
   DiagramDetector,
   DiagramLoader,
   ExternalDiagramDefinition,
-} from './types.js';
-import { frontMatterRegex } from './frontmatter.js';
-import { getDiagram, registerDiagram } from './diagramAPI.js';
-import { UnknownDiagramError } from '../errors.js';
+} from './types';
+import { frontMatterRegex } from './frontmatter';
+import { getDiagram, registerDiagram } from './diagramAPI';
+import { UnknownDiagramError } from '../errors';
 
 const directive = /%{2}{\s*(?:(\w+)\s*:|(\w+))\s*(?:(\w+)|((?:(?!}%{2}).|\r?\n)*))?\s*(?:}%{2})?/gi;
 const anyComment = /\s*%%.*\n/gm;

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

@@ -1,6 +1,6 @@
 import { it, describe, expect } from 'vitest';
-import { detectType } from './detectType.js';
-import { addDiagrams } from './diagram-orchestration.js';
+import { detectType } from './detectType';
+import { addDiagrams } from './diagram-orchestration';
 
 describe('diagram-orchestration', () => {
   it('should register diagrams', () => {

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

@@ -1,25 +1,24 @@
-import c4 from '../diagrams/c4/c4Detector.js';
-import flowchart from '../diagrams/flowchart/flowDetector.js';
-import flowchartV2 from '../diagrams/flowchart/flowDetector-v2.js';
-import er from '../diagrams/er/erDetector.js';
-import git from '../diagrams/git/gitGraphDetector.js';
-import gantt from '../diagrams/gantt/ganttDetector.js';
-import info from '../diagrams/info/infoDetector.js';
-import pie from '../diagrams/pie/pieDetector.js';
-import quadrantChart from '../diagrams/quadrant-chart/quadrantDetector.js';
-import requirement from '../diagrams/requirement/requirementDetector.js';
-import sequence from '../diagrams/sequence/sequenceDetector.js';
-import classDiagram from '../diagrams/class/classDetector.js';
-import classDiagramV2 from '../diagrams/class/classDetector-V2.js';
-import state from '../diagrams/state/stateDetector.js';
-import stateV2 from '../diagrams/state/stateDetector-V2.js';
-import journey from '../diagrams/user-journey/journeyDetector.js';
-import errorDiagram from '../diagrams/error/errorDiagram.js';
-import flowchartElk from '../diagrams/flowchart/elk/detector.js';
-import timeline from '../diagrams/timeline/detector.js';
-import mindmap from '../diagrams/mindmap/detector.js';
-import { registerLazyLoadedDiagrams } from './detectType.js';
-import { registerDiagram } from './diagramAPI.js';
+import c4 from '../diagrams/c4/c4Detector';
+import flowchart from '../diagrams/flowchart/flowDetector';
+import flowchartV2 from '../diagrams/flowchart/flowDetector-v2';
+import er from '../diagrams/er/erDetector';
+import git from '../diagrams/git/gitGraphDetector';
+import gantt from '../diagrams/gantt/ganttDetector';
+import info from '../diagrams/info/infoDetector';
+import pie from '../diagrams/pie/pieDetector';
+import requirement from '../diagrams/requirement/requirementDetector';
+import sequence from '../diagrams/sequence/sequenceDetector';
+import classDiagram from '../diagrams/class/classDetector';
+import classDiagramV2 from '../diagrams/class/classDetector-V2';
+import state from '../diagrams/state/stateDetector';
+import stateV2 from '../diagrams/state/stateDetector-V2';
+import journey from '../diagrams/user-journey/journeyDetector';
+import errorDiagram from '../diagrams/error/errorDiagram';
+import flowchartElk from '../diagrams/flowchart/elk/detector';
+import timeline from '../diagrams/timeline/detector';
+import mindmap from '../diagrams/mindmap/detector';
+import { registerLazyLoadedDiagrams } from './detectType';
+import { registerDiagram } from './diagramAPI';
 
 let hasLoadedDiagrams = false;
 export const addDiagrams = () => {
@@ -78,7 +77,6 @@ export const addDiagrams = () => {
     git,
     stateV2,
     state,
-    journey,
-    quadrantChart
+    journey
   );
 };

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

@@ -1,8 +1,8 @@
-import { detectType } from './detectType.js';
-import { getDiagram, registerDiagram } from './diagramAPI.js';
-import { addDiagrams } from './diagram-orchestration.js';
-import { DiagramDetector } from './types.js';
-import { getDiagramFromText } from '../Diagram.js';
+import { detectType } from './detectType';
+import { getDiagram, registerDiagram } from './diagramAPI';
+import { addDiagrams } from './diagram-orchestration';
+import { DiagramDetector } from './types';
+import { getDiagramFromText } from '../Diagram';
 import { it, describe, expect, beforeAll } from 'vitest';
 
 addDiagrams();

packages/mermaid/src/diagram-api/diagramAPI.ts

@@ -1,12 +1,12 @@
-import { addDetector } from './detectType.js';
-import { log as _log, setLogLevel as _setLogLevel } from '../logger.js';
-import { getConfig as _getConfig } from '../config.js';
-import { sanitizeText as _sanitizeText } from '../diagrams/common/common.js';
-import { setupGraphViewbox as _setupGraphViewbox } from '../setupGraphViewbox.js';
-import { addStylesForDiagram } from '../styles.js';
-import { DiagramDefinition, DiagramDetector } from './types.js';
-import * as _commonDb from '../commonDb.js';
-import { parseDirective as _parseDirective } from '../directiveUtils.js';
+import { addDetector } from './detectType';
+import { log as _log, setLogLevel as _setLogLevel } from '../logger';
+import { getConfig as _getConfig } from '../config';
+import { sanitizeText as _sanitizeText } from '../diagrams/common/common';
+import { setupGraphViewbox as _setupGraphViewbox } from '../setupGraphViewbox';
+import { addStylesForDiagram } from '../styles';
+import { DiagramDefinition, DiagramDetector } from './types';
+import * as _commonDb from '../commonDb';
+import { parseDirective as _parseDirective } from '../directiveUtils';
 
 /*
   Packaging and exposing resources for external diagrams so that they can import

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

@@ -1,5 +1,5 @@
 import { vi } from 'vitest';
-import { extractFrontMatter } from './frontmatter.js';
+import { extractFrontMatter } from './frontmatter';
 
 const dbMock = () => ({ setDiagramTitle: vi.fn() });
 

packages/mermaid/src/diagram-api/frontmatter.ts

@@ -1,4 +1,4 @@
-import { DiagramDb } from './types.js';
+import { DiagramDb } from './types';
 // The "* as yaml" part is necessary for tree-shaking
 import * as yaml from 'js-yaml';
 

packages/mermaid/src/diagram-api/types.ts

@@ -1,4 +1,4 @@
-import { MermaidConfig } from '../config.type.js';
+import { MermaidConfig } from '../config.type';
 
 export interface InjectUtils {
   _log: any;

packages/mermaid/src/diagram.spec.ts

@@ -1,7 +1,7 @@
 import { describe, test, expect } from 'vitest';
-import { Diagram, getDiagramFromText } from './Diagram.js';
-import { addDetector } from './diagram-api/detectType.js';
-import { addDiagrams } from './diagram-api/diagram-orchestration.js';
+import { Diagram, getDiagramFromText } from './Diagram';
+import { addDetector } from './diagram-api/detectType';
+import { addDiagrams } from './diagram-api/diagram-orchestration';
 
 addDiagrams();
 

packages/mermaid/src/diagrams/c4/c4Db.js

@@ -1,7 +1,7 @@
-import mermaidAPI from '../../mermaidAPI.js';
-import * as configApi from '../../config.js';
-import { sanitizeText } from '../common/common.js';
-import { setAccTitle, getAccTitle, getAccDescription, setAccDescription } from '../../commonDb.js';
+import mermaidAPI from '../../mermaidAPI';
+import * as configApi from '../../config';
+import { sanitizeText } from '../common/common';
+import { setAccTitle, getAccTitle, getAccDescription, setAccDescription } from '../../commonDb';
 
 let c4ShapeArray = [];
 let boundaryParseStack = [''];

packages/mermaid/src/diagrams/c4/c4Detector.ts

@@ -1,4 +1,4 @@
-import type { ExternalDiagramDefinition } from '../../diagram-api/types.js';
+import type { ExternalDiagramDefinition } from '../../diagram-api/types';
 
 const id = 'c4';
 
@@ -7,7 +7,7 @@ const detector = (txt: string) => {
 };
 
 const loader = async () => {
-  const { diagram } = await import('./c4Diagram.js');
+  const { diagram } = await import('./c4Diagram');
   return { id, diagram };
 };
 

packages/mermaid/src/diagrams/c4/c4Diagram.ts

@@ -1,10 +1,10 @@
 // @ts-ignore: TODO Fix ts errors
-import c4Parser from './parser/c4Diagram.jison';
-import c4Db from './c4Db.js';
-import c4Renderer from './c4Renderer.js';
-import c4Styles from './styles.js';
-import { MermaidConfig } from '../../config.type.js';
-import { DiagramDefinition } from '../../diagram-api/types.js';
+import c4Parser from './parser/c4Diagram';
+import c4Db from './c4Db';
+import c4Renderer from './c4Renderer';
+import c4Styles from './styles';
+import { MermaidConfig } from '../../config.type';
+import { DiagramDefinition } from '../../diagram-api/types';
 
 export const diagram: DiagramDefinition = {
   parser: c4Parser,

packages/mermaid/src/diagrams/c4/c4Renderer.js

@@ -1,13 +1,13 @@
 import { select } from 'd3';
-import svgDraw from './svgDraw.js';
-import { log } from '../../logger.js';
-import { parser } from './parser/c4Diagram.jison';
-import common from '../common/common.js';
-import c4Db from './c4Db.js';
-import * as configApi from '../../config.js';
-import assignWithDepth from '../../assignWithDepth.js';
-import { wrapLabel, calculateTextWidth, calculateTextHeight } from '../../utils.js';
-import { configureSvgSize } from '../../setupGraphViewbox.js';
+import svgDraw from './svgDraw';
+import { log } from '../../logger';
+import { parser } from './parser/c4Diagram';
+import common from '../common/common';
+import c4Db from './c4Db';
+import * as configApi from '../../config';
+import assignWithDepth from '../../assignWithDepth';
+import { wrapLabel, calculateTextWidth, calculateTextHeight } from '../../utils';
+import { configureSvgSize } from '../../setupGraphViewbox';
 
 let globalBoundaryMaxX = 0,
   globalBoundaryMaxY = 0;