diff --git a/.vite/build.ts b/.vite/build.ts
index 268db3270..b3f1f64a4 100644
--- a/.vite/build.ts
+++ b/.vite/build.ts
@@ -3,6 +3,7 @@ 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';
 
@@ -102,9 +103,14 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
       },
     },
     resolve: {
-      extensions: ['.jison', '.js', '.ts', '.json'],
+      extensions: [],
     },
-    plugins: [jisonPlugin(), ...visualizerOptions(packageName, core)],
+    plugins: [
+      jisonPlugin(),
+      // @ts-expect-error
+      typescript({ compilerOptions: { declaration: false } }),
+      ...visualizerOptions(packageName, core),
+    ],
   };
 
   if (watch && config.build) {
diff --git a/__mocks__/d3.ts b/__mocks__/d3.ts
index af35020c5..b472a3181 100644
--- a/__mocks__/d3.ts
+++ b/__mocks__/d3.ts
@@ -1,5 +1,5 @@
 // @ts-nocheck TODO: Fix TS
-import { MockedD3 } from '../packages/mermaid/src/tests/MockedD3';
+import { MockedD3 } from '../packages/mermaid/src/tests/MockedD3.js';
 
 export const select = function () {
   return new MockedD3();
diff --git a/cypress/integration/other/configuration.spec.js b/cypress/integration/other/configuration.spec.js
index 513cf0714..6df7edd84 100644
--- a/cypress/integration/other/configuration.spec.js
+++ b/cypress/integration/other/configuration.spec.js
@@ -1,4 +1,4 @@
-import { renderGraph } from '../../helpers/util';
+import { renderGraph } from '../../helpers/util.js';
 describe('Configuration', () => {
   describe('arrowMarkerAbsolute', () => {
     it('should handle default value false of arrowMarkerAbsolute', () => {
diff --git a/cypress/integration/other/external-diagrams.spec.js b/cypress/integration/other/external-diagrams.spec.js
index c94235162..4ade11e81 100644
--- a/cypress/integration/other/external-diagrams.spec.js
+++ b/cypress/integration/other/external-diagrams.spec.js
@@ -1,4 +1,4 @@
-import { urlSnapshotTest } from '../../helpers/util';
+import { urlSnapshotTest } from '../../helpers/util.js';
 
 describe('mermaid', () => {
   describe('registerDiagram', () => {
diff --git a/cypress/integration/other/ghsa.spec.js b/cypress/integration/other/ghsa.spec.js
index 4fadc7855..8f28d9f53 100644
--- a/cypress/integration/other/ghsa.spec.js
+++ b/cypress/integration/other/ghsa.spec.js
@@ -1,4 +1,4 @@
-import { urlSnapshotTest } from '../../helpers/util';
+import { urlSnapshotTest } from '../../helpers/util.js';
 
 describe('CSS injections', () => {
   it('should not allow CSS injections outside of the diagram', () => {
diff --git a/cypress/integration/rendering/classDiagram-v2.spec.js b/cypress/integration/rendering/classDiagram-v2.spec.js
index 71810cfa4..a11571814 100644
--- a/cypress/integration/rendering/classDiagram-v2.spec.js
+++ b/cypress/integration/rendering/classDiagram-v2.spec.js
@@ -1,4 +1,4 @@
-import { imgSnapshotTest } from '../../helpers/util';
+import { imgSnapshotTest } from '../../helpers/util.js';
 describe('Class diagram V2', () => {
   it('0: should render a simple class diagram', () => {
     imgSnapshotTest(
diff --git a/cypress/integration/rendering/classDiagram.spec.js b/cypress/integration/rendering/classDiagram.spec.js
index e21be67ec..cda455f0e 100644
--- a/cypress/integration/rendering/classDiagram.spec.js
+++ b/cypress/integration/rendering/classDiagram.spec.js
@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
 
 describe('Class diagram', () => {
   it('1: should render a simple class diagram', () => {
diff --git a/cypress/integration/rendering/current.spec.js b/cypress/integration/rendering/current.spec.js
index 033752c66..e0b36d53a 100644
--- a/cypress/integration/rendering/current.spec.js
+++ b/cypress/integration/rendering/current.spec.js
@@ -1,4 +1,4 @@
-import { imgSnapshotTest } from '../../helpers/util';
+import { imgSnapshotTest } from '../../helpers/util.js';
 
 describe('Current diagram', () => {
   it('should render a state with states in it', () => {
diff --git a/cypress/integration/rendering/debug.spec.js b/cypress/integration/rendering/debug.spec.js
index 673cadf3e..afde4af3e 100644
--- a/cypress/integration/rendering/debug.spec.js
+++ b/cypress/integration/rendering/debug.spec.js
@@ -1,4 +1,4 @@
-import { imgSnapshotTest } from '../../helpers/util';
+import { imgSnapshotTest } from '../../helpers/util.js';
 
 describe('Flowchart', () => {
   it('34: testing the label width in percy', () => {
diff --git a/cypress/integration/rendering/erDiagram.spec.js b/cypress/integration/rendering/erDiagram.spec.js
index df1fac0cd..82b2920bc 100644
--- a/cypress/integration/rendering/erDiagram.spec.js
+++ b/cypress/integration/rendering/erDiagram.spec.js
@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
 
 describe('Entity Relationship Diagram', () => {
   it('should render a simple ER diagram', () => {
diff --git a/cypress/integration/rendering/flowchart-elk.spec.js b/cypress/integration/rendering/flowchart-elk.spec.js
index 414037651..b11182d90 100644
--- a/cypress/integration/rendering/flowchart-elk.spec.js
+++ b/cypress/integration/rendering/flowchart-elk.spec.js
@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
 
 describe.skip('Flowchart ELK', () => {
   it('1-elk: should render a simple flowchart', () => {
diff --git a/cypress/integration/rendering/flowchart-v2.spec.js b/cypress/integration/rendering/flowchart-v2.spec.js
index abdb22265..d396d45e7 100644
--- a/cypress/integration/rendering/flowchart-v2.spec.js
+++ b/cypress/integration/rendering/flowchart-v2.spec.js
@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
 
 describe('Flowchart v2', () => {
   it('1: should render a simple flowchart', () => {
diff --git a/cypress/integration/rendering/flowchart.spec.js b/cypress/integration/rendering/flowchart.spec.js
index c4ef54fcf..d25043d28 100644
--- a/cypress/integration/rendering/flowchart.spec.js
+++ b/cypress/integration/rendering/flowchart.spec.js
@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
 
 describe('Graph', () => {
   it('1: should render a simple flowchart no htmlLabels', () => {
diff --git a/cypress/integration/rendering/sequencediagram.spec.js b/cypress/integration/rendering/sequencediagram.spec.js
index f8948240a..687fc245b 100644
--- a/cypress/integration/rendering/sequencediagram.spec.js
+++ b/cypress/integration/rendering/sequencediagram.spec.js
@@ -1,6 +1,6 @@
 /// <reference types="Cypress" />
 
-import { imgSnapshotTest, renderGraph } from '../../helpers/util';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
 
 context('Sequence diagram', () => {
   it('should render a sequence diagram with boxes', () => {
diff --git a/cypress/integration/rendering/stateDiagram-v2.spec.js b/cypress/integration/rendering/stateDiagram-v2.spec.js
index 047e240fc..700791621 100644
--- a/cypress/integration/rendering/stateDiagram-v2.spec.js
+++ b/cypress/integration/rendering/stateDiagram-v2.spec.js
@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
 
 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
diff --git a/cypress/integration/rendering/stateDiagram.spec.js b/cypress/integration/rendering/stateDiagram.spec.js
index cdcc48a07..28c24d398 100644
--- a/cypress/integration/rendering/stateDiagram.spec.js
+++ b/cypress/integration/rendering/stateDiagram.spec.js
@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
 
 describe('State diagram', () => {
   it('should render a simple state diagrams', () => {
diff --git a/cypress/platform/bundle-test.js b/cypress/platform/bundle-test.js
index edd3dfbc4..33677cd97 100644
--- a/cypress/platform/bundle-test.js
+++ b/cypress/platform/bundle-test.js
@@ -1,4 +1,4 @@
-import mermaid from '../../packages/mermaid/src/mermaid';
+import mermaid from '../../packages/mermaid/src/mermaid.js';
 
 let code = `flowchart LR
 Power_Supply --> Transmitter_A
diff --git a/cypress/platform/viewer.js b/cypress/platform/viewer.js
index 2e1093519..395769c87 100644
--- a/cypress/platform/viewer.js
+++ b/cypress/platform/viewer.js
@@ -1,5 +1,5 @@
-import mermaid2 from '../../packages/mermaid/src/mermaid';
-import externalExample from '../../packages/mermaid-example-diagram/src/detector';
+import mermaid2 from '../../packages/mermaid/src/mermaid.js';
+import externalExample from '../../packages/mermaid-example-diagram/src/detector.js';
 
 function b64ToUtf8(str) {
   return decodeURIComponent(escape(window.atob(str)));
diff --git a/docs/config/setup/modules/mermaidAPI.md b/docs/config/setup/modules/mermaidAPI.md
index 4b8f57bd7..bcfcef235 100644
--- a/docs/config/setup/modules/mermaidAPI.md
+++ b/docs/config/setup/modules/mermaidAPI.md
@@ -95,7 +95,7 @@ mermaid.initialize(config);
 
 #### Defined in
 
-[mermaidAPI.ts:659](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L659)
+[mermaidAPI.ts:662](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L662)
 
 ## Functions
 
@@ -126,7 +126,7 @@ Return the last node appended
 
 #### Defined in
 
-[mermaidAPI.ts:305](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L305)
+[mermaidAPI.ts:308](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L308)
 
 ---
 
@@ -152,7 +152,7 @@ the cleaned up svgCode
 
 #### Defined in
 
-[mermaidAPI.ts:256](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L256)
+[mermaidAPI.ts:259](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L259)
 
 ---
 
@@ -201,7 +201,7 @@ the string with all the user styles
 
 #### Defined in
 
-[mermaidAPI.ts:233](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L233)
+[mermaidAPI.ts:236](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L236)
 
 ---
 
@@ -294,7 +294,7 @@ Put the svgCode into an iFrame. Return the iFrame code
 
 #### Defined in
 
-[mermaidAPI.ts:284](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L284)
+[mermaidAPI.ts:287](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L287)
 
 ---
 
@@ -319,4 +319,4 @@ Remove any existing elements from the given document
 
 #### Defined in
 
-[mermaidAPI.ts:355](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L355)
+[mermaidAPI.ts:358](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L358)
diff --git a/package.json b/package.json
index 89de95949..95bd68b0a 100644
--- a/package.json
+++ b/package.json
@@ -58,6 +58,7 @@
     "@commitlint/cli": "^17.2.0",
     "@commitlint/config-conventional": "^17.2.0",
     "@cspell/eslint-plugin": "^6.14.2",
+    "@rollup/plugin-typescript": "^11.0.0",
     "@types/cors": "^2.8.13",
     "@types/eslint": "^8.4.10",
     "@types/express": "^4.17.17",
diff --git a/packages/mermaid-example-diagram/src/diagram-definition.ts b/packages/mermaid-example-diagram/src/diagram-definition.ts
index c31b3d6e7..f29c8ee7f 100644
--- a/packages/mermaid-example-diagram/src/diagram-definition.ts
+++ b/packages/mermaid-example-diagram/src/diagram-definition.ts
@@ -1,9 +1,9 @@
 // @ts-ignore: TODO Fix ts errors
-import parser from './parser/exampleDiagram';
-import * as db from './exampleDiagramDb';
-import renderer from './exampleDiagramRenderer';
-import styles from './styles';
-import { injectUtils } from './mermaidUtils';
+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';
 
 export const diagram = {
   db,
diff --git a/packages/mermaid-example-diagram/src/exampleDiagram.spec.js b/packages/mermaid-example-diagram/src/exampleDiagram.spec.js
index 96c8cd5b2..6ea655404 100644
--- a/packages/mermaid-example-diagram/src/exampleDiagram.spec.js
+++ b/packages/mermaid-example-diagram/src/exampleDiagram.spec.js
@@ -1,6 +1,6 @@
-import { parser } from './parser/exampleDiagram';
-import * as db from './exampleDiagramDb';
-import { injectUtils } from './mermaidUtils';
+import { parser } from './parser/exampleDiagram.js';
+import * as db from './exampleDiagramDb.js';
+import { injectUtils } from './mermaidUtils.js';
 // Todo fix utils functions for tests
 import {
   log,
@@ -8,7 +8,7 @@ import {
   getConfig,
   sanitizeText,
   setupGraphViewBox,
-} from '../../mermaid/src/diagram-api/diagramAPI';
+} from '../../mermaid/src/diagram-api/diagramAPI.js';
 
 injectUtils(log, setLogLevel, getConfig, sanitizeText, setupGraphViewBox);
 
diff --git a/packages/mermaid-example-diagram/src/exampleDiagramDb.js b/packages/mermaid-example-diagram/src/exampleDiagramDb.js
index 8429ec5d6..a5fa88e6d 100644
--- a/packages/mermaid-example-diagram/src/exampleDiagramDb.js
+++ b/packages/mermaid-example-diagram/src/exampleDiagramDb.js
@@ -1,5 +1,5 @@
 /** Created by knut on 15-01-14. */
-import { log } from './mermaidUtils';
+import { log } from './mermaidUtils.js';
 
 var message = '';
 var info = false;
diff --git a/packages/mermaid-example-diagram/src/exampleDiagramRenderer.js b/packages/mermaid-example-diagram/src/exampleDiagramRenderer.js
index 0d7340677..2c6839203 100644
--- a/packages/mermaid-example-diagram/src/exampleDiagramRenderer.js
+++ b/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';
+import { log, getConfig, setupGraphViewbox } from './mermaidUtils.js';
 
 /**
  * Draws a an info picture in the tag with id: id based on the graph definition in text.
diff --git a/packages/mermaid-example-diagram/tsconfig.json b/packages/mermaid-example-diagram/tsconfig.json
index 310137cc0..45076b7b5 100644
--- a/packages/mermaid-example-diagram/tsconfig.json
+++ b/packages/mermaid-example-diagram/tsconfig.json
@@ -1,6 +1,5 @@
 {
   "extends": "../../tsconfig.json",
-  "module": "esnext",
   "compilerOptions": {
     "rootDir": "./src",
     "outDir": "./dist"
diff --git a/packages/mermaid/src/Diagram.ts b/packages/mermaid/src/Diagram.ts
index 3010ce130..e2a9a3816 100644
--- a/packages/mermaid/src/Diagram.ts
+++ b/packages/mermaid/src/Diagram.ts
@@ -1,10 +1,10 @@
-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 * 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';
 
 export type ParseErrorFunction = (err: string | DetailedError | unknown, hash?: any) => void;
 
diff --git a/packages/mermaid/src/__mocks__/mermaidAPI.ts b/packages/mermaid/src/__mocks__/mermaidAPI.ts
index 95b87d990..a2d19ef24 100644
--- a/packages/mermaid/src/__mocks__/mermaidAPI.ts
+++ b/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';
+import * as configApi from '../config.js';
 import { vi } from 'vitest';
-import { mermaidAPI as mAPI } from '../mermaidAPI';
+import { mermaidAPI as mAPI } from '../mermaidAPI.js';
 
 // original version cannot be modified since it was frozen with `Object.freeze()`
 export const mermaidAPI = {
diff --git a/packages/mermaid/src/accessibility.spec.ts b/packages/mermaid/src/accessibility.spec.ts
index 60415ea37..eac82ee34 100644
--- a/packages/mermaid/src/accessibility.spec.ts
+++ b/packages/mermaid/src/accessibility.spec.ts
@@ -1,6 +1,6 @@
-import { MockedD3 } from './tests/MockedD3';
-import { setA11yDiagramInfo, addSVGa11yTitleDescription } from './accessibility';
-import { D3Element } from './mermaidAPI';
+import { MockedD3 } from './tests/MockedD3.js';
+import { setA11yDiagramInfo, addSVGa11yTitleDescription } from './accessibility.js';
+import { D3Element } from './mermaidAPI.js';
 
 describe('accessibility', () => {
   const fauxSvgNode = new MockedD3();
diff --git a/packages/mermaid/src/accessibility.ts b/packages/mermaid/src/accessibility.ts
index 8e073aa76..3518c9722 100644
--- a/packages/mermaid/src/accessibility.ts
+++ b/packages/mermaid/src/accessibility.ts
@@ -5,7 +5,7 @@
  * @see https://www.w3.org/TR/svg-aam-1.0/
  *
  */
-import { D3Element } from './mermaidAPI';
+import { D3Element } from './mermaidAPI.js';
 
 import isEmpty from 'lodash-es/isEmpty.js';
 
@@ -28,6 +28,7 @@ const SVG_ROLE = 'graphics-document document';
  */
 export function setA11yDiagramInfo(svg: D3Element, diagramType: string | null | undefined) {
   svg.attr('role', SVG_ROLE);
+  // @ts-expect-error https://github.com/DefinitelyTyped/DefinitelyTyped/pull/64684
   if (!isEmpty(diagramType)) {
     svg.attr('aria-roledescription', diagramType);
   }
diff --git a/packages/mermaid/src/commonDb.ts b/packages/mermaid/src/commonDb.ts
index 42ffde004..19b16d11e 100644
--- a/packages/mermaid/src/commonDb.ts
+++ b/packages/mermaid/src/commonDb.ts
@@ -1,5 +1,5 @@
-import { sanitizeText as _sanitizeText } from './diagrams/common/common';
-import { getConfig } from './config';
+import { sanitizeText as _sanitizeText } from './diagrams/common/common.js';
+import { getConfig } from './config.js';
 let title = '';
 let diagramTitle = '';
 let description = '';
diff --git a/packages/mermaid/src/config.spec.js b/packages/mermaid/src/config.spec.js
index b104f37cc..1f7fd976b 100644
--- a/packages/mermaid/src/config.spec.js
+++ b/packages/mermaid/src/config.spec.js
@@ -1,4 +1,4 @@
-import * as configApi from './config';
+import * as configApi from './config.js';
 
 describe('when working with site config', function () {
   beforeEach(() => {
diff --git a/packages/mermaid/src/config.ts b/packages/mermaid/src/config.ts
index bc0066cec..838716e2f 100644
--- a/packages/mermaid/src/config.ts
+++ b/packages/mermaid/src/config.ts
@@ -1,8 +1,8 @@
-import assignWithDepth from './assignWithDepth';
-import { log } from './logger';
-import theme from './themes';
-import config from './defaultConfig';
-import type { MermaidConfig } from './config.type';
+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';
 
 export const defaultConfig: MermaidConfig = Object.freeze(config);
 
diff --git a/packages/mermaid/src/dagre-wrapper/clusters.js b/packages/mermaid/src/dagre-wrapper/clusters.js
index 57c3ff513..959fff73d 100644
--- a/packages/mermaid/src/dagre-wrapper/clusters.js
+++ b/packages/mermaid/src/dagre-wrapper/clusters.js
@@ -1,9 +1,9 @@
-import intersectRect from './intersect/intersect-rect';
-import { log } from '../logger';
-import createLabel from './createLabel';
+import intersectRect from './intersect/intersect-rect.js';
+import { log } from '../logger.js';
+import createLabel from './createLabel.js';
 import { select } from 'd3';
-import { getConfig } from '../config';
-import { evaluate } from '../diagrams/common/common';
+import { getConfig } from '../config.js';
+import { evaluate } from '../diagrams/common/common.js';
 
 const rect = (parent, node) => {
   log.trace('Creating subgraph rect for ', node.id, node);
diff --git a/packages/mermaid/src/dagre-wrapper/createLabel.js b/packages/mermaid/src/dagre-wrapper/createLabel.js
index af5032096..330da31c1 100644
--- a/packages/mermaid/src/dagre-wrapper/createLabel.js
+++ b/packages/mermaid/src/dagre-wrapper/createLabel.js
@@ -1,8 +1,8 @@
 import { select } from 'd3';
-import { log } from '../logger';
-import { getConfig } from '../config';
-import { evaluate } from '../diagrams/common/common';
-import { decodeEntities } from '../mermaidAPI';
+import { log } from '../logger.js';
+import { getConfig } from '../config.js';
+import { evaluate } from '../diagrams/common/common.js';
+import { decodeEntities } from '../mermaidAPI.js';
 
 /**
  * @param dom
diff --git a/packages/mermaid/src/dagre-wrapper/edges.js b/packages/mermaid/src/dagre-wrapper/edges.js
index f8c113694..fc4864624 100644
--- a/packages/mermaid/src/dagre-wrapper/edges.js
+++ b/packages/mermaid/src/dagre-wrapper/edges.js
@@ -1,9 +1,9 @@
-import { log } from '../logger';
-import createLabel from './createLabel';
+import { log } from '../logger.js';
+import createLabel from './createLabel.js';
 import { line, curveBasis, select } from 'd3';
-import { getConfig } from '../config';
-import utils from '../utils';
-import { evaluate } from '../diagrams/common/common';
+import { getConfig } from '../config.js';
+import utils from '../utils.js';
+import { evaluate } from '../diagrams/common/common.js';
 
 let edgeLabels = {};
 let terminalLabels = {};
diff --git a/packages/mermaid/src/dagre-wrapper/edges.spec.js b/packages/mermaid/src/dagre-wrapper/edges.spec.js
index 627691a8e..9b2772ecd 100644
--- a/packages/mermaid/src/dagre-wrapper/edges.spec.js
+++ b/packages/mermaid/src/dagre-wrapper/edges.spec.js
@@ -1,5 +1,5 @@
-import { intersection } from './edges';
-import { setLogLevel } from '../logger';
+import { intersection } from './edges.js';
+import { setLogLevel } from '../logger.js';
 
 describe('Graphlib decorations', () => {
   let node;
diff --git a/packages/mermaid/src/dagre-wrapper/index.js b/packages/mermaid/src/dagre-wrapper/index.js
index ce3ef6014..dd764dd9e 100644
--- a/packages/mermaid/src/dagre-wrapper/index.js
+++ b/packages/mermaid/src/dagre-wrapper/index.js
@@ -1,18 +1,18 @@
 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';
-import { updateNodeBounds } from './shapes/util';
+import insertMarkers from './markers.js';
+import { updateNodeBounds } from './shapes/util.js';
 import {
   clear as clearGraphlib,
   clusterDb,
   adjustClustersAndEdges,
   findNonClusterChild,
   sortNodesByHierarchy,
-} 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';
+} 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';
 
 const recursiveRender = (_elem, graph, diagramtype, parentCluster) => {
   log.info('Graph in recursive render: XXX', graphlibJson.write(graph), parentCluster);
diff --git a/packages/mermaid/src/dagre-wrapper/intersect/intersect-circle.js b/packages/mermaid/src/dagre-wrapper/intersect/intersect-circle.js
index c4d320426..8f5ba72df 100644
--- a/packages/mermaid/src/dagre-wrapper/intersect/intersect-circle.js
+++ b/packages/mermaid/src/dagre-wrapper/intersect/intersect-circle.js
@@ -1,4 +1,4 @@
-import intersectEllipse from './intersect-ellipse';
+import intersectEllipse from './intersect-ellipse.js';
 
 /**
  * @param node
diff --git a/packages/mermaid/src/dagre-wrapper/intersect/intersect-polygon.js b/packages/mermaid/src/dagre-wrapper/intersect/intersect-polygon.js
index cd124150f..6941372c7 100644
--- a/packages/mermaid/src/dagre-wrapper/intersect/intersect-polygon.js
+++ b/packages/mermaid/src/dagre-wrapper/intersect/intersect-polygon.js
@@ -1,6 +1,6 @@
 /* eslint "no-console": off */
 
-import intersectLine from './intersect-line';
+import intersectLine from './intersect-line.js';
 
 export default intersectPolygon;
 
diff --git a/packages/mermaid/src/dagre-wrapper/markers.js b/packages/mermaid/src/dagre-wrapper/markers.js
index 1a3f74bee..5ae70148d 100644
--- a/packages/mermaid/src/dagre-wrapper/markers.js
+++ b/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';
+import { log } from '../logger.js';
 
 // Only add the number of markers that the diagram needs
 const insertMarkers = (elem, markerArray, type, id) => {
diff --git a/packages/mermaid/src/dagre-wrapper/mermaid-graphlib.js b/packages/mermaid/src/dagre-wrapper/mermaid-graphlib.js
index 875ac4def..72ef96965 100644
--- a/packages/mermaid/src/dagre-wrapper/mermaid-graphlib.js
+++ b/packages/mermaid/src/dagre-wrapper/mermaid-graphlib.js
@@ -1,5 +1,5 @@
 /** Decorates with functions required by mermaids dagre-wrapper. */
-import { log } from '../logger';
+import { log } from '../logger.js';
 import * as graphlibJson from 'dagre-d3-es/src/graphlib/json.js';
 import * as graphlib from 'dagre-d3-es/src/graphlib/index.js';
 
diff --git a/packages/mermaid/src/dagre-wrapper/mermaid-graphlib.spec.js b/packages/mermaid/src/dagre-wrapper/mermaid-graphlib.spec.js
index 25fb75d64..1444a82c4 100644
--- a/packages/mermaid/src/dagre-wrapper/mermaid-graphlib.spec.js
+++ b/packages/mermaid/src/dagre-wrapper/mermaid-graphlib.spec.js
@@ -5,8 +5,8 @@ import {
   adjustClustersAndEdges,
   extractDescendants,
   sortNodesByHierarchy,
-} from './mermaid-graphlib';
-import { setLogLevel, log } from '../logger';
+} from './mermaid-graphlib.js';
+import { setLogLevel, log } from '../logger.js';
 
 describe('Graphlib decorations', () => {
   let g;
diff --git a/packages/mermaid/src/dagre-wrapper/nodes.js b/packages/mermaid/src/dagre-wrapper/nodes.js
index 49b96b685..51764d818 100644
--- a/packages/mermaid/src/dagre-wrapper/nodes.js
+++ b/packages/mermaid/src/dagre-wrapper/nodes.js
@@ -1,12 +1,12 @@
 import { select } from 'd3';
-import { log } from '../logger';
-import { labelHelper, updateNodeBounds, insertPolygonShape } from './shapes/util';
-import { getConfig } from '../config';
+import { log } from '../logger.js';
+import { labelHelper, updateNodeBounds, insertPolygonShape } from './shapes/util.js';
+import { getConfig } from '../config.js';
 import intersect from './intersect/index.js';
-import createLabel from './createLabel';
-import note from './shapes/note';
-import { parseMember } from '../diagrams/class/svgDraw';
-import { evaluate } from '../diagrams/common/common';
+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';
 
 const question = (parent, node) => {
   const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
diff --git a/packages/mermaid/src/dagre-wrapper/patterns.js b/packages/mermaid/src/dagre-wrapper/patterns.js
index 75afa8bcc..3025f8ef9 100644
--- a/packages/mermaid/src/dagre-wrapper/patterns.js
+++ b/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';
+// import { log } from '../logger.js';
 
 // Only add the number of markers that the diagram needs
 const insertPatterns = (elem, patternArray, type, id) => {
diff --git a/packages/mermaid/src/dagre-wrapper/shapes/note.js b/packages/mermaid/src/dagre-wrapper/shapes/note.js
index 6b693fdf6..0051fbb11 100644
--- a/packages/mermaid/src/dagre-wrapper/shapes/note.js
+++ b/packages/mermaid/src/dagre-wrapper/shapes/note.js
@@ -1,5 +1,5 @@
-import { updateNodeBounds, labelHelper } from './util';
-import { log } from '../../logger';
+import { updateNodeBounds, labelHelper } from './util.js';
+import { log } from '../../logger.js';
 import intersect from '../intersect/index.js';
 
 const note = (parent, node) => {
diff --git a/packages/mermaid/src/dagre-wrapper/shapes/util.js b/packages/mermaid/src/dagre-wrapper/shapes/util.js
index 6de0da638..38300bb44 100644
--- a/packages/mermaid/src/dagre-wrapper/shapes/util.js
+++ b/packages/mermaid/src/dagre-wrapper/shapes/util.js
@@ -1,8 +1,8 @@
-import createLabel from '../createLabel';
-import { getConfig } from '../../config';
-import { decodeEntities } from '../../mermaidAPI';
+import createLabel from '../createLabel.js';
+import { getConfig } from '../../config.js';
+import { decodeEntities } from '../../mermaidAPI.js';
 import { select } from 'd3';
-import { evaluate, sanitizeText } from '../../diagrams/common/common';
+import { evaluate, sanitizeText } from '../../diagrams/common/common.js';
 export const labelHelper = (parent, node, _classes, isNode) => {
   let classes;
   if (!_classes) {
diff --git a/packages/mermaid/src/defaultConfig.ts b/packages/mermaid/src/defaultConfig.ts
index 666efc364..35527bf4d 100644
--- a/packages/mermaid/src/defaultConfig.ts
+++ b/packages/mermaid/src/defaultConfig.ts
@@ -1,5 +1,5 @@
-import theme from './themes';
-import { MermaidConfig } from './config.type';
+import theme from './themes/index.js';
+import { MermaidConfig } from './config.type.js';
 /**
  * **Configuration methods in Mermaid version 8.6.0 have been updated, to learn more[[click
  * here](8.6.0_docs.md)].**
diff --git a/packages/mermaid/src/diagram-api/detectType.ts b/packages/mermaid/src/diagram-api/detectType.ts
index 0d26487cf..8351a67df 100644
--- a/packages/mermaid/src/diagram-api/detectType.ts
+++ b/packages/mermaid/src/diagram-api/detectType.ts
@@ -1,14 +1,14 @@
-import { MermaidConfig } from '../config.type';
-import { log } from '../logger';
+import { MermaidConfig } from '../config.type.js';
+import { log } from '../logger.js';
 import type {
   DetectorRecord,
   DiagramDetector,
   DiagramLoader,
   ExternalDiagramDefinition,
-} from './types';
-import { frontMatterRegex } from './frontmatter';
-import { getDiagram, registerDiagram } from './diagramAPI';
-import { UnknownDiagramError } from '../errors';
+} from './types.js';
+import { frontMatterRegex } from './frontmatter.js';
+import { getDiagram, registerDiagram } from './diagramAPI.js';
+import { UnknownDiagramError } from '../errors.js';
 
 const directive = /%{2}{\s*(?:(\w+)\s*:|(\w+))\s*(?:(\w+)|((?:(?!}%{2}).|\r?\n)*))?\s*(?:}%{2})?/gi;
 const anyComment = /\s*%%.*\n/gm;
diff --git a/packages/mermaid/src/diagram-api/diagram-orchestration.spec.ts b/packages/mermaid/src/diagram-api/diagram-orchestration.spec.ts
index 81909fe5e..d6c6b3046 100644
--- a/packages/mermaid/src/diagram-api/diagram-orchestration.spec.ts
+++ b/packages/mermaid/src/diagram-api/diagram-orchestration.spec.ts
@@ -1,6 +1,6 @@
 import { it, describe, expect } from 'vitest';
-import { detectType } from './detectType';
-import { addDiagrams } from './diagram-orchestration';
+import { detectType } from './detectType.js';
+import { addDiagrams } from './diagram-orchestration.js';
 
 describe('diagram-orchestration', () => {
   it('should register diagrams', () => {
diff --git a/packages/mermaid/src/diagram-api/diagram-orchestration.ts b/packages/mermaid/src/diagram-api/diagram-orchestration.ts
index 73bfcf084..91d54f11b 100644
--- a/packages/mermaid/src/diagram-api/diagram-orchestration.ts
+++ b/packages/mermaid/src/diagram-api/diagram-orchestration.ts
@@ -1,24 +1,24 @@
-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 error from '../diagrams/error/errorDetector';
-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';
+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 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 error from '../diagrams/error/errorDetector.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';
 
 let hasLoadedDiagrams = false;
 export const addDiagrams = () => {
diff --git a/packages/mermaid/src/diagram-api/diagramAPI.spec.ts b/packages/mermaid/src/diagram-api/diagramAPI.spec.ts
index 4bdcc5e39..49bde1a66 100644
--- a/packages/mermaid/src/diagram-api/diagramAPI.spec.ts
+++ b/packages/mermaid/src/diagram-api/diagramAPI.spec.ts
@@ -1,8 +1,8 @@
-import { detectType } from './detectType';
-import { getDiagram, registerDiagram } from './diagramAPI';
-import { addDiagrams } from './diagram-orchestration';
-import { DiagramDetector } from './types';
-import { getDiagramFromText } from '../Diagram';
+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 { it, describe, expect, beforeAll } from 'vitest';
 
 addDiagrams();
diff --git a/packages/mermaid/src/diagram-api/diagramAPI.ts b/packages/mermaid/src/diagram-api/diagramAPI.ts
index c5841b96b..7e89d9cd7 100644
--- a/packages/mermaid/src/diagram-api/diagramAPI.ts
+++ b/packages/mermaid/src/diagram-api/diagramAPI.ts
@@ -1,12 +1,12 @@
-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';
+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';
 
 /*
   Packaging and exposing resources for external diagrams so that they can import
diff --git a/packages/mermaid/src/diagram-api/frontmatter.spec.ts b/packages/mermaid/src/diagram-api/frontmatter.spec.ts
index 4eb9789e2..ef05c8f14 100644
--- a/packages/mermaid/src/diagram-api/frontmatter.spec.ts
+++ b/packages/mermaid/src/diagram-api/frontmatter.spec.ts
@@ -1,5 +1,5 @@
 import { vi } from 'vitest';
-import { extractFrontMatter } from './frontmatter';
+import { extractFrontMatter } from './frontmatter.js';
 
 const dbMock = () => ({ setDiagramTitle: vi.fn() });
 
diff --git a/packages/mermaid/src/diagram-api/frontmatter.ts b/packages/mermaid/src/diagram-api/frontmatter.ts
index d6811388c..da32acf47 100644
--- a/packages/mermaid/src/diagram-api/frontmatter.ts
+++ b/packages/mermaid/src/diagram-api/frontmatter.ts
@@ -1,4 +1,4 @@
-import { DiagramDb } from './types';
+import { DiagramDb } from './types.js';
 // The "* as yaml" part is necessary for tree-shaking
 import * as yaml from 'js-yaml';
 
diff --git a/packages/mermaid/src/diagram-api/types.ts b/packages/mermaid/src/diagram-api/types.ts
index 081136563..33d30e786 100644
--- a/packages/mermaid/src/diagram-api/types.ts
+++ b/packages/mermaid/src/diagram-api/types.ts
@@ -1,4 +1,4 @@
-import { MermaidConfig } from '../config.type';
+import { MermaidConfig } from '../config.type.js';
 
 export interface InjectUtils {
   _log: any;
diff --git a/packages/mermaid/src/diagram.spec.ts b/packages/mermaid/src/diagram.spec.ts
index 5a4718d0b..aa613d8e5 100644
--- a/packages/mermaid/src/diagram.spec.ts
+++ b/packages/mermaid/src/diagram.spec.ts
@@ -1,7 +1,7 @@
 import { describe, test, expect } from 'vitest';
-import { Diagram, getDiagramFromText } from './Diagram';
-import { addDetector } from './diagram-api/detectType';
-import { addDiagrams } from './diagram-api/diagram-orchestration';
+import { Diagram, getDiagramFromText } from './Diagram.js';
+import { addDetector } from './diagram-api/detectType.js';
+import { addDiagrams } from './diagram-api/diagram-orchestration.js';
 
 addDiagrams();
 
diff --git a/packages/mermaid/src/diagrams/c4/c4Db.js b/packages/mermaid/src/diagrams/c4/c4Db.js
index d337b15c0..09dcc13cd 100644
--- a/packages/mermaid/src/diagrams/c4/c4Db.js
+++ b/packages/mermaid/src/diagrams/c4/c4Db.js
@@ -1,7 +1,7 @@
-import mermaidAPI from '../../mermaidAPI';
-import * as configApi from '../../config';
-import { sanitizeText } from '../common/common';
-import { setAccTitle, getAccTitle, getAccDescription, setAccDescription } from '../../commonDb';
+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';
 
 let c4ShapeArray = [];
 let boundaryParseStack = [''];
diff --git a/packages/mermaid/src/diagrams/c4/c4Detector.ts b/packages/mermaid/src/diagrams/c4/c4Detector.ts
index 08b8bbf55..e6e82c6be 100644
--- a/packages/mermaid/src/diagrams/c4/c4Detector.ts
+++ b/packages/mermaid/src/diagrams/c4/c4Detector.ts
@@ -1,4 +1,4 @@
-import type { ExternalDiagramDefinition } from '../../diagram-api/types';
+import type { ExternalDiagramDefinition } from '../../diagram-api/types.js';
 
 const id = 'c4';
 
@@ -7,7 +7,7 @@ const detector = (txt: string) => {
 };
 
 const loader = async () => {
-  const { diagram } = await import('./c4Diagram');
+  const { diagram } = await import('./c4Diagram.js');
   return { id, diagram };
 };
 
diff --git a/packages/mermaid/src/diagrams/c4/c4Diagram.ts b/packages/mermaid/src/diagrams/c4/c4Diagram.ts
index 6f8f25db2..04567fafa 100644
--- a/packages/mermaid/src/diagrams/c4/c4Diagram.ts
+++ b/packages/mermaid/src/diagrams/c4/c4Diagram.ts
@@ -1,10 +1,10 @@
 // @ts-ignore: TODO Fix ts errors
-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';
+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';
 
 export const diagram: DiagramDefinition = {
   parser: c4Parser,
diff --git a/packages/mermaid/src/diagrams/c4/c4Renderer.js b/packages/mermaid/src/diagrams/c4/c4Renderer.js
index a51fe0b6a..28600241c 100644
--- a/packages/mermaid/src/diagrams/c4/c4Renderer.js
+++ b/packages/mermaid/src/diagrams/c4/c4Renderer.js
@@ -1,13 +1,13 @@
 import { select } from 'd3';
-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';
+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';
 
 let globalBoundaryMaxX = 0,
   globalBoundaryMaxY = 0;
diff --git a/packages/mermaid/src/diagrams/c4/parser/c4Boundary.spec.js b/packages/mermaid/src/diagrams/c4/parser/c4Boundary.spec.js
index c7130f557..f43f00748 100644
--- a/packages/mermaid/src/diagrams/c4/parser/c4Boundary.spec.js
+++ b/packages/mermaid/src/diagrams/c4/parser/c4Boundary.spec.js
@@ -1,6 +1,6 @@
-import c4Db from '../c4Db';
+import c4Db from '../c4Db.js';
 import c4 from './c4Diagram.jison';
-import { setConfig } from '../../../config';
+import { setConfig } from '../../../config.js';
 
 setConfig({
   securityLevel: 'strict',
diff --git a/packages/mermaid/src/diagrams/c4/parser/c4Diagram.spec.js b/packages/mermaid/src/diagrams/c4/parser/c4Diagram.spec.js
index b79934b84..543e87a21 100644
--- a/packages/mermaid/src/diagrams/c4/parser/c4Diagram.spec.js
+++ b/packages/mermaid/src/diagrams/c4/parser/c4Diagram.spec.js
@@ -1,6 +1,6 @@
-import c4Db from '../c4Db';
+import c4Db from '../c4Db.js';
 import c4 from './c4Diagram.jison';
-import { setConfig } from '../../../config';
+import { setConfig } from '../../../config.js';
 
 setConfig({
   securityLevel: 'strict',
diff --git a/packages/mermaid/src/diagrams/c4/parser/c4Person.spec.js b/packages/mermaid/src/diagrams/c4/parser/c4Person.spec.js
index b504c0384..4eff0047c 100644
--- a/packages/mermaid/src/diagrams/c4/parser/c4Person.spec.js
+++ b/packages/mermaid/src/diagrams/c4/parser/c4Person.spec.js
@@ -1,6 +1,6 @@
-import c4Db from '../c4Db';
+import c4Db from '../c4Db.js';
 import c4 from './c4Diagram.jison';
-import { setConfig } from '../../../config';
+import { setConfig } from '../../../config.js';
 
 setConfig({
   securityLevel: 'strict',
diff --git a/packages/mermaid/src/diagrams/c4/parser/c4PersonExt.spec.js b/packages/mermaid/src/diagrams/c4/parser/c4PersonExt.spec.js
index 76547600a..f4b824e88 100644
--- a/packages/mermaid/src/diagrams/c4/parser/c4PersonExt.spec.js
+++ b/packages/mermaid/src/diagrams/c4/parser/c4PersonExt.spec.js
@@ -1,6 +1,6 @@
-import c4Db from '../c4Db';
+import c4Db from '../c4Db.js';
 import c4 from './c4Diagram.jison';
-import { setConfig } from '../../../config';
+import { setConfig } from '../../../config.js';
 
 setConfig({
   securityLevel: 'strict',
diff --git a/packages/mermaid/src/diagrams/c4/parser/c4System.spec.js b/packages/mermaid/src/diagrams/c4/parser/c4System.spec.js
index 6d81c7379..e2c2b26f7 100644
--- a/packages/mermaid/src/diagrams/c4/parser/c4System.spec.js
+++ b/packages/mermaid/src/diagrams/c4/parser/c4System.spec.js
@@ -1,6 +1,6 @@
-import c4Db from '../c4Db';
+import c4Db from '../c4Db.js';
 import c4 from './c4Diagram.jison';
-import { setConfig } from '../../../config';
+import { setConfig } from '../../../config.js';
 
 setConfig({
   securityLevel: 'strict',
diff --git a/packages/mermaid/src/diagrams/c4/svgDraw.js b/packages/mermaid/src/diagrams/c4/svgDraw.js
index 690dd26ad..2d660e6e7 100644
--- a/packages/mermaid/src/diagrams/c4/svgDraw.js
+++ b/packages/mermaid/src/diagrams/c4/svgDraw.js
@@ -1,4 +1,4 @@
-import common from '../common/common';
+import common from '../common/common.js';
 import { sanitizeUrl } from '@braintree/sanitize-url';
 
 export const drawRect = function (elem, rectData) {
diff --git a/packages/mermaid/src/diagrams/class/classDb.ts b/packages/mermaid/src/diagrams/class/classDb.ts
index 48ef7ccbe..8fa1eeb26 100644
--- a/packages/mermaid/src/diagrams/class/classDb.ts
+++ b/packages/mermaid/src/diagrams/class/classDb.ts
@@ -1,10 +1,10 @@
 // @ts-expect-error - d3 types issue
 import { select, Selection } from 'd3';
-import { log } from '../../logger';
-import * as configApi from '../../config';
-import common from '../common/common';
-import utils from '../../utils';
-import mermaidAPI from '../../mermaidAPI';
+import { log } from '../../logger.js';
+import * as configApi from '../../config.js';
+import common from '../common/common.js';
+import utils from '../../utils.js';
+import mermaidAPI from '../../mermaidAPI.js';
 import {
   setAccTitle,
   getAccTitle,
@@ -13,8 +13,8 @@ import {
   clear as commonClear,
   setDiagramTitle,
   getDiagramTitle,
-} from '../../commonDb';
-import { ClassRelation, ClassNode, ClassNote, ClassMap } from './classTypes';
+} from '../../commonDb.js';
+import { ClassRelation, ClassNode, ClassNote, ClassMap } from './classTypes.js';
 
 const MERMAID_DOM_ID_PREFIX = 'classId-';
 
diff --git a/packages/mermaid/src/diagrams/class/classDetector-V2.ts b/packages/mermaid/src/diagrams/class/classDetector-V2.ts
index 1d4255719..9eda53a4b 100644
--- a/packages/mermaid/src/diagrams/class/classDetector-V2.ts
+++ b/packages/mermaid/src/diagrams/class/classDetector-V2.ts
@@ -1,4 +1,4 @@
-import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types';
+import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types.js';
 
 const id = 'classDiagram';
 
@@ -15,7 +15,7 @@ const detector: DiagramDetector = (txt, config) => {
 };
 
 const loader = async () => {
-  const { diagram } = await import('./classDiagram-v2');
+  const { diagram } = await import('./classDiagram-v2.js');
   return { id, diagram };
 };
 
diff --git a/packages/mermaid/src/diagrams/class/classDetector.ts b/packages/mermaid/src/diagrams/class/classDetector.ts
index ef8ea61e7..e2eee9bb3 100644
--- a/packages/mermaid/src/diagrams/class/classDetector.ts
+++ b/packages/mermaid/src/diagrams/class/classDetector.ts
@@ -1,4 +1,4 @@
-import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types';
+import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types.js';
 
 const id = 'class';
 
@@ -12,7 +12,7 @@ const detector: DiagramDetector = (txt, config) => {
 };
 
 const loader = async () => {
-  const { diagram } = await import('./classDiagram');
+  const { diagram } = await import('./classDiagram.js');
   return { id, diagram };
 };
 
diff --git a/packages/mermaid/src/diagrams/class/classDiagram-styles.spec.js b/packages/mermaid/src/diagrams/class/classDiagram-styles.spec.js
index 702fa3ac3..3b3da12ed 100644
--- a/packages/mermaid/src/diagrams/class/classDiagram-styles.spec.js
+++ b/packages/mermaid/src/diagrams/class/classDiagram-styles.spec.js
@@ -1,5 +1,5 @@
-import { parser } from './parser/classDiagram';
-import classDb from './classDb';
+import { parser } from './parser/classDiagram.js';
+import classDb from './classDb.js';
 
 describe('class diagram, ', function () {
   describe('when parsing data from a classDiagram it', function () {
diff --git a/packages/mermaid/src/diagrams/class/classDiagram-v2.ts b/packages/mermaid/src/diagrams/class/classDiagram-v2.ts
index 2f0bbf371..5b952627c 100644
--- a/packages/mermaid/src/diagrams/class/classDiagram-v2.ts
+++ b/packages/mermaid/src/diagrams/class/classDiagram-v2.ts
@@ -1,9 +1,9 @@
-import { DiagramDefinition } from '../../diagram-api/types';
+import { DiagramDefinition } from '../../diagram-api/types.js';
 // @ts-ignore: TODO Fix ts errors
-import parser from './parser/classDiagram';
-import db from './classDb';
-import styles from './styles';
-import renderer from './classRenderer-v2';
+import parser from './parser/classDiagram.jison';
+import db from './classDb.js';
+import styles from './styles.js';
+import renderer from './classRenderer-v2.js';
 
 export const diagram: DiagramDefinition = {
   parser,
diff --git a/packages/mermaid/src/diagrams/class/classDiagram.spec.ts b/packages/mermaid/src/diagrams/class/classDiagram.spec.ts
index 24fbc41ea..30faf7cd6 100644
--- a/packages/mermaid/src/diagrams/class/classDiagram.spec.ts
+++ b/packages/mermaid/src/diagrams/class/classDiagram.spec.ts
@@ -1,6 +1,6 @@
 // @ts-expect-error Jison doesn't export types
-import { parser } from './parser/classDiagram';
-import classDb from './classDb';
+import { parser } from './parser/classDiagram.js';
+import classDb from './classDb.js';
 import { vi, describe, it, expect } from 'vitest';
 const spyOn = vi.spyOn;
 
diff --git a/packages/mermaid/src/diagrams/class/classDiagram.ts b/packages/mermaid/src/diagrams/class/classDiagram.ts
index 250d04176..0d2a246b4 100644
--- a/packages/mermaid/src/diagrams/class/classDiagram.ts
+++ b/packages/mermaid/src/diagrams/class/classDiagram.ts
@@ -1,9 +1,9 @@
-import { DiagramDefinition } from '../../diagram-api/types';
+import { DiagramDefinition } from '../../diagram-api/types.js';
 // @ts-ignore: TODO Fix ts errors
-import parser from './parser/classDiagram';
-import db from './classDb';
-import styles from './styles';
-import renderer from './classRenderer';
+import parser from './parser/classDiagram.jison';
+import db from './classDb.js';
+import styles from './styles.js';
+import renderer from './classRenderer.js';
 
 export const diagram: DiagramDefinition = {
   parser,
diff --git a/packages/mermaid/src/diagrams/class/classRenderer-v2.ts b/packages/mermaid/src/diagrams/class/classRenderer-v2.ts
index e308990c6..8c4ac8b5b 100644
--- a/packages/mermaid/src/diagrams/class/classRenderer-v2.ts
+++ b/packages/mermaid/src/diagrams/class/classRenderer-v2.ts
@@ -1,14 +1,14 @@
 // @ts-ignore d3 types are not available
 import { select, curveLinear } from 'd3';
 import * as graphlib from 'dagre-d3-es/src/graphlib/index.js';
-import { log } from '../../logger';
-import { getConfig } from '../../config';
+import { log } from '../../logger.js';
+import { getConfig } from '../../config.js';
 import { render } from '../../dagre-wrapper/index.js';
-import utils from '../../utils';
-import { interpolateToCurve, getStylesFromArray } from '../../utils';
-import { setupGraphViewbox } from '../../setupGraphViewbox';
-import common from '../common/common';
-import { ClassRelation, ClassNote, ClassMap, EdgeData } from './classTypes';
+import utils from '../../utils.js';
+import { interpolateToCurve, getStylesFromArray } from '../../utils.js';
+import { setupGraphViewbox } from '../../setupGraphViewbox.js';
+import common from '../common/common.js';
+import { ClassRelation, ClassNote, ClassMap, EdgeData } from './classTypes.js';
 
 const sanitizeText = (txt: string) => common.sanitizeText(txt, getConfig());
 
diff --git a/packages/mermaid/src/diagrams/class/classRenderer.js b/packages/mermaid/src/diagrams/class/classRenderer.js
index 80a7f26e4..3774f7b8c 100644
--- a/packages/mermaid/src/diagrams/class/classRenderer.js
+++ b/packages/mermaid/src/diagrams/class/classRenderer.js
@@ -1,10 +1,10 @@
 import { select } from 'd3';
 import { layout as dagreLayout } from 'dagre-d3-es/src/dagre/index.js';
 import * as graphlib from 'dagre-d3-es/src/graphlib/index.js';
-import { log } from '../../logger';
-import svgDraw from './svgDraw';
-import { configureSvgSize } from '../../setupGraphViewbox';
-import { getConfig } from '../../config';
+import { log } from '../../logger.js';
+import svgDraw from './svgDraw.js';
+import { configureSvgSize } from '../../setupGraphViewbox.js';
+import { getConfig } from '../../config.js';
 
 let idCache = {};
 const padding = 20;
diff --git a/packages/mermaid/src/diagrams/class/svgDraw.js b/packages/mermaid/src/diagrams/class/svgDraw.js
index cc6909280..3ce8e980b 100644
--- a/packages/mermaid/src/diagrams/class/svgDraw.js
+++ b/packages/mermaid/src/diagrams/class/svgDraw.js
@@ -1,7 +1,7 @@
 import { line, curveBasis } from 'd3';
-import utils from '../../utils';
-import { log } from '../../logger';
-import { parseGenericTypes } from '../common/common';
+import utils from '../../utils.js';
+import { log } from '../../logger.js';
+import { parseGenericTypes } from '../common/common.js';
 
 let edgeCount = 0;
 export const drawEdge = function (elem, path, relation, conf, diagObj) {
diff --git a/packages/mermaid/src/diagrams/class/svgDraw.spec.js b/packages/mermaid/src/diagrams/class/svgDraw.spec.js
index ec8785559..2e7c64fa0 100644
--- a/packages/mermaid/src/diagrams/class/svgDraw.spec.js
+++ b/packages/mermaid/src/diagrams/class/svgDraw.spec.js
@@ -1,4 +1,4 @@
-import svgDraw from './svgDraw';
+import svgDraw from './svgDraw.js';
 
 describe('class member Renderer, ', function () {
   describe('when parsing text to build method display string', function () {
diff --git a/packages/mermaid/src/diagrams/common/common.spec.js b/packages/mermaid/src/diagrams/common/common.spec.js
index 8fd6229da..d1c68e892 100644
--- a/packages/mermaid/src/diagrams/common/common.spec.js
+++ b/packages/mermaid/src/diagrams/common/common.spec.js
@@ -1,4 +1,4 @@
-import { sanitizeText, removeScript, parseGenericTypes } from './common';
+import { sanitizeText, removeScript, parseGenericTypes } from './common.js';
 
 describe('when securityLevel is antiscript, all script must be removed', function () {
   /**
diff --git a/packages/mermaid/src/diagrams/common/common.ts b/packages/mermaid/src/diagrams/common/common.ts
index d34a2df68..3b72e8718 100644
--- a/packages/mermaid/src/diagrams/common/common.ts
+++ b/packages/mermaid/src/diagrams/common/common.ts
@@ -1,5 +1,5 @@
 import DOMPurify from 'dompurify';
-import { MermaidConfig } from '../../config.type';
+import { MermaidConfig } from '../../config.type.js';
 
 /**
  * Gets the rows of lines in a string
diff --git a/packages/mermaid/src/diagrams/er/erDb.js b/packages/mermaid/src/diagrams/er/erDb.js
index 026e08420..5f2af0da1 100644
--- a/packages/mermaid/src/diagrams/er/erDb.js
+++ b/packages/mermaid/src/diagrams/er/erDb.js
@@ -1,6 +1,6 @@
-import { log } from '../../logger';
-import mermaidAPI from '../../mermaidAPI';
-import * as configApi from '../../config';
+import { log } from '../../logger.js';
+import mermaidAPI from '../../mermaidAPI.js';
+import * as configApi from '../../config.js';
 
 import {
   setAccTitle,
@@ -10,7 +10,7 @@ import {
   clear as commonClear,
   setDiagramTitle,
   getDiagramTitle,
-} from '../../commonDb';
+} from '../../commonDb.js';
 
 let entities = {};
 let relationships = [];
diff --git a/packages/mermaid/src/diagrams/er/erDetector.ts b/packages/mermaid/src/diagrams/er/erDetector.ts
index f73baa434..b8a191af2 100644
--- a/packages/mermaid/src/diagrams/er/erDetector.ts
+++ b/packages/mermaid/src/diagrams/er/erDetector.ts
@@ -1,4 +1,4 @@
-import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types';
+import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types.js';
 
 const id = 'er';
 
@@ -7,7 +7,7 @@ const detector: DiagramDetector = (txt) => {
 };
 
 const loader = async () => {
-  const { diagram } = await import('./erDiagram');
+  const { diagram } = await import('./erDiagram.js');
   return { id, diagram };
 };
 
diff --git a/packages/mermaid/src/diagrams/er/erDiagram.ts b/packages/mermaid/src/diagrams/er/erDiagram.ts
index a5b0da9c1..da3d777ad 100644
--- a/packages/mermaid/src/diagrams/er/erDiagram.ts
+++ b/packages/mermaid/src/diagrams/er/erDiagram.ts
@@ -1,8 +1,8 @@
 // @ts-ignore: TODO Fix ts errors
-import erParser from './parser/erDiagram';
-import erDb from './erDb';
-import erRenderer from './erRenderer';
-import erStyles from './styles';
+import erParser from './parser/erDiagram.jison';
+import erDb from './erDb.js';
+import erRenderer from './erRenderer.js';
+import erStyles from './styles.js';
 
 export const diagram = {
   parser: erParser,
diff --git a/packages/mermaid/src/diagrams/er/erRenderer.js b/packages/mermaid/src/diagrams/er/erRenderer.js
index 5dd5024bb..87d7ac607 100644
--- a/packages/mermaid/src/diagrams/er/erRenderer.js
+++ b/packages/mermaid/src/diagrams/er/erRenderer.js
@@ -1,12 +1,12 @@
 import * as graphlib from 'dagre-d3-es/src/graphlib/index.js';
 import { line, curveBasis, select } from 'd3';
 import { layout as dagreLayout } from 'dagre-d3-es/src/dagre/index.js';
-import { getConfig } from '../../config';
-import { log } from '../../logger';
-import utils from '../../utils';
-import erMarkers from './erMarkers';
-import { configureSvgSize } from '../../setupGraphViewbox';
-import { parseGenericTypes } from '../common/common';
+import { getConfig } from '../../config.js';
+import { log } from '../../logger.js';
+import utils from '../../utils.js';
+import erMarkers from './erMarkers.js';
+import { configureSvgSize } from '../../setupGraphViewbox.js';
+import { parseGenericTypes } from '../common/common.js';
 import { v5 as uuid5 } from 'uuid';
 
 /** Regex used to remove chars from the entity name so the result can be used in an id */
diff --git a/packages/mermaid/src/diagrams/er/erRenderer.spec.ts b/packages/mermaid/src/diagrams/er/erRenderer.spec.ts
index ca0f62bd2..0cba06b56 100644
--- a/packages/mermaid/src/diagrams/er/erRenderer.spec.ts
+++ b/packages/mermaid/src/diagrams/er/erRenderer.spec.ts
@@ -1,4 +1,4 @@
-import { generateId } from './erRenderer';
+import { generateId } from './erRenderer.js';
 
 describe('erRenderer', () => {
   describe('generateId', () => {
diff --git a/packages/mermaid/src/diagrams/er/parser/erDiagram.spec.js b/packages/mermaid/src/diagrams/er/parser/erDiagram.spec.js
index ca497a2ac..53273b885 100644
--- a/packages/mermaid/src/diagrams/er/parser/erDiagram.spec.js
+++ b/packages/mermaid/src/diagrams/er/parser/erDiagram.spec.js
@@ -1,6 +1,6 @@
-import { setConfig } from '../../../config';
-import erDb from '../erDb';
-import erDiagram from './erDiagram'; // jison file
+import { setConfig } from '../../../config.js';
+import erDb from '../erDb.js';
+import erDiagram from './erDiagram.js'; // jison file
 
 setConfig({
   securityLevel: 'strict',
diff --git a/packages/mermaid/src/diagrams/error/errorDetector.ts b/packages/mermaid/src/diagrams/error/errorDetector.ts
index 2bdcd7028..e1d447c10 100644
--- a/packages/mermaid/src/diagrams/error/errorDetector.ts
+++ b/packages/mermaid/src/diagrams/error/errorDetector.ts
@@ -1,4 +1,4 @@
-import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types';
+import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types.js';
 
 const id = 'error';
 
@@ -7,7 +7,7 @@ const detector: DiagramDetector = (text) => {
 };
 
 const loader = async () => {
-  const { diagram } = await import('./errorDiagram');
+  const { diagram } = await import('./errorDiagram.js');
   return { id, diagram };
 };
 
diff --git a/packages/mermaid/src/diagrams/error/errorDiagram.ts b/packages/mermaid/src/diagrams/error/errorDiagram.ts
index d081e1028..c2462e224 100644
--- a/packages/mermaid/src/diagrams/error/errorDiagram.ts
+++ b/packages/mermaid/src/diagrams/error/errorDiagram.ts
@@ -1,6 +1,6 @@
-import { DiagramDefinition } from '../../diagram-api/types';
-import styles from './styles';
-import renderer from './errorRenderer';
+import { DiagramDefinition } from '../../diagram-api/types.js';
+import styles from './styles.js';
+import renderer from './errorRenderer.js';
 export const diagram: DiagramDefinition = {
   db: {
     clear: () => {
diff --git a/packages/mermaid/src/diagrams/error/errorRenderer.ts b/packages/mermaid/src/diagrams/error/errorRenderer.ts
index 60877cb8d..b0ab4f105 100644
--- a/packages/mermaid/src/diagrams/error/errorRenderer.ts
+++ b/packages/mermaid/src/diagrams/error/errorRenderer.ts
@@ -1,8 +1,8 @@
 /** Created by knut on 14-12-11. */
 // @ts-ignore TODO: Investigate D3 issue
 import { select } from 'd3';
-import { log } from '../../logger';
-import { getErrorMessage } from '../../utils';
+import { log } from '../../logger.js';
+import { getErrorMessage } from '../../utils.js';
 
 let conf = {};
 
diff --git a/packages/mermaid/src/diagrams/flowchart/elk/detector.spec.ts b/packages/mermaid/src/diagrams/flowchart/elk/detector.spec.ts
index 17cd5c0ea..6e949c57b 100644
--- a/packages/mermaid/src/diagrams/flowchart/elk/detector.spec.ts
+++ b/packages/mermaid/src/diagrams/flowchart/elk/detector.spec.ts
@@ -1,4 +1,4 @@
-import plugin from './detector';
+import plugin from './detector.js';
 import { describe, it } from 'vitest';
 
 const { detector } = plugin;
diff --git a/packages/mermaid/src/diagrams/flowchart/elk/detector.ts b/packages/mermaid/src/diagrams/flowchart/elk/detector.ts
index c6fa77957..482bc961c 100644
--- a/packages/mermaid/src/diagrams/flowchart/elk/detector.ts
+++ b/packages/mermaid/src/diagrams/flowchart/elk/detector.ts
@@ -1,5 +1,5 @@
-import type { MermaidConfig } from '../../../config.type';
-import type { ExternalDiagramDefinition, DiagramDetector } from '../../../diagram-api/types';
+import type { MermaidConfig } from '../../../config.type.js';
+import type { ExternalDiagramDefinition, DiagramDetector } from '../../../diagram-api/types.js';
 
 const id = 'flowchart-elk';
 
diff --git a/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js b/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js
index 426d22dbb..539f2d230 100644
--- a/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js
+++ b/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js
@@ -2,13 +2,13 @@ import { select, line, curveLinear } from 'd3';
 import { insertNode } from '../../../dagre-wrapper/nodes.js';
 import insertMarkers from '../../../dagre-wrapper/markers.js';
 import { insertEdgeLabel } from '../../../dagre-wrapper/edges.js';
-import { findCommonAncestor } from './render-utils';
+import { findCommonAncestor } from './render-utils.js';
 import { addHtmlLabel } from 'dagre-d3-es/src/dagre-js/label/add-html-label.js';
-import { getConfig } from '../../../config';
-import { log } from '../../../logger';
-import { setupGraphViewbox } from '../../../setupGraphViewbox';
-import common, { evaluate } from '../../common/common';
-import { interpolateToCurve, getStylesFromArray } from '../../../utils';
+import { getConfig } from '../../../config.js';
+import { log } from '../../../logger.js';
+import { setupGraphViewbox } from '../../../setupGraphViewbox.js';
+import common, { evaluate } from '../../common/common.js';
+import { interpolateToCurve, getStylesFromArray } from '../../../utils.js';
 import ELK from 'elkjs/lib/elk.bundled.js';
 const elk = new ELK();
 
diff --git a/packages/mermaid/src/diagrams/flowchart/elk/flowchart-elk-definition.ts b/packages/mermaid/src/diagrams/flowchart/elk/flowchart-elk-definition.ts
index c45873238..9855c7389 100644
--- a/packages/mermaid/src/diagrams/flowchart/elk/flowchart-elk-definition.ts
+++ b/packages/mermaid/src/diagrams/flowchart/elk/flowchart-elk-definition.ts
@@ -1,9 +1,9 @@
 // @ts-ignore: JISON typing missing
-import parser from '../parser/flow';
+import parser from '../parser/flow.jison';
 
-import * as db from '../flowDb';
-import renderer from './flowRenderer-elk';
-import styles from './styles';
+import * as db from '../flowDb.js';
+import renderer from './flowRenderer-elk.js';
+import styles from './styles.js';
 
 export const diagram = {
   db,
diff --git a/packages/mermaid/src/diagrams/flowchart/elk/render-utils.spec.ts b/packages/mermaid/src/diagrams/flowchart/elk/render-utils.spec.ts
index d845fa697..d048b07a3 100644
--- a/packages/mermaid/src/diagrams/flowchart/elk/render-utils.spec.ts
+++ b/packages/mermaid/src/diagrams/flowchart/elk/render-utils.spec.ts
@@ -1,4 +1,4 @@
-import { findCommonAncestor, TreeData } from './render-utils';
+import { findCommonAncestor, TreeData } from './render-utils.js';
 describe('when rendering a flowchart using elk ', () => {
   let lookupDb: TreeData;
   beforeEach(() => {
diff --git a/packages/mermaid/src/diagrams/flowchart/flowChartShapes.spec.js b/packages/mermaid/src/diagrams/flowchart/flowChartShapes.spec.js
index e7e535056..96e6f6fd7 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowChartShapes.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/flowChartShapes.spec.js
@@ -1,4 +1,4 @@
-import { addToRender } from './flowChartShapes';
+import { addToRender } from './flowChartShapes.js';
 
 describe('flowchart shapes', function () {
   // rect-based shapes
diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.js b/packages/mermaid/src/diagrams/flowchart/flowDb.js
index 31196ba96..b11c0811b 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowDb.js
+++ b/packages/mermaid/src/diagrams/flowchart/flowDb.js
@@ -1,9 +1,9 @@
 import { select } from 'd3';
-import utils from '../../utils';
-import * as configApi from '../../config';
-import common from '../common/common';
-import mermaidAPI from '../../mermaidAPI';
-import { log } from '../../logger';
+import utils from '../../utils.js';
+import * as configApi from '../../config.js';
+import common from '../common/common.js';
+import mermaidAPI from '../../mermaidAPI.js';
+import { log } from '../../logger.js';
 import {
   setAccTitle,
   getAccTitle,
@@ -12,7 +12,7 @@ import {
   clear as commonClear,
   setDiagramTitle,
   getDiagramTitle,
-} from '../../commonDb';
+} from '../../commonDb.js';
 
 const MERMAID_DOM_ID_PREFIX = 'flowchart-';
 let vertexCounter = 0;
diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.spec.js b/packages/mermaid/src/diagrams/flowchart/flowDb.spec.js
index c1aa640fc..09f8c8678 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowDb.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/flowDb.spec.js
@@ -1,4 +1,4 @@
-import flowDb from './flowDb';
+import flowDb from './flowDb.js';
 
 describe('flow db subgraphs', () => {
   let subgraphs;
diff --git a/packages/mermaid/src/diagrams/flowchart/flowDetector-v2.ts b/packages/mermaid/src/diagrams/flowchart/flowDetector-v2.ts
index 5b2aaf1bd..9c00545bf 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowDetector-v2.ts
+++ b/packages/mermaid/src/diagrams/flowchart/flowDetector-v2.ts
@@ -1,5 +1,5 @@
-import type { DiagramDetector } from '../../diagram-api/types';
-import type { ExternalDiagramDefinition } from '../../diagram-api/types';
+import type { DiagramDetector } from '../../diagram-api/types.js';
+import type { ExternalDiagramDefinition } from '../../diagram-api/types.js';
 
 const id = 'flowchart-v2';
 
@@ -19,7 +19,7 @@ const detector: DiagramDetector = (txt, config) => {
 };
 
 const loader = async () => {
-  const { diagram } = await import('./flowDiagram-v2');
+  const { diagram } = await import('./flowDiagram-v2.js');
   return { id, diagram };
 };
 
diff --git a/packages/mermaid/src/diagrams/flowchart/flowDetector.ts b/packages/mermaid/src/diagrams/flowchart/flowDetector.ts
index a8b116ccd..84aafa249 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowDetector.ts
+++ b/packages/mermaid/src/diagrams/flowchart/flowDetector.ts
@@ -1,4 +1,4 @@
-import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types';
+import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types.js';
 
 const id = 'flowchart';
 
@@ -15,7 +15,7 @@ const detector: DiagramDetector = (txt, config) => {
 };
 
 const loader = async () => {
-  const { diagram } = await import('./flowDiagram');
+  const { diagram } = await import('./flowDiagram.js');
   return { id, diagram };
 };
 
diff --git a/packages/mermaid/src/diagrams/flowchart/flowDiagram-v2.ts b/packages/mermaid/src/diagrams/flowchart/flowDiagram-v2.ts
index 8cd49de65..7a2c0e0bc 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowDiagram-v2.ts
+++ b/packages/mermaid/src/diagrams/flowchart/flowDiagram-v2.ts
@@ -1,10 +1,10 @@
 // @ts-ignore: TODO Fix ts errors
-import flowParser from './parser/flow';
-import flowDb from './flowDb';
-import flowRendererV2 from './flowRenderer-v2';
-import flowStyles from './styles';
-import { MermaidConfig } from '../../config.type';
-import { setConfig } from '../../config';
+import flowParser from './parser/flow.jison';
+import flowDb from './flowDb.js';
+import flowRendererV2 from './flowRenderer-v2.js';
+import flowStyles from './styles.js';
+import { MermaidConfig } from '../../config.type.js';
+import { setConfig } from '../../config.js';
 
 export const diagram = {
   parser: flowParser,
diff --git a/packages/mermaid/src/diagrams/flowchart/flowDiagram.ts b/packages/mermaid/src/diagrams/flowchart/flowDiagram.ts
index d68a7c01d..7018e4890 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowDiagram.ts
+++ b/packages/mermaid/src/diagrams/flowchart/flowDiagram.ts
@@ -1,10 +1,10 @@
 // @ts-ignore: TODO Fix ts errors
-import flowParser from './parser/flow';
-import flowDb from './flowDb';
-import flowRenderer from './flowRenderer';
-import flowRendererV2 from './flowRenderer-v2';
-import flowStyles from './styles';
-import { MermaidConfig } from '../../config.type';
+import flowParser from './parser/flow.jison';
+import flowDb from './flowDb.js';
+import flowRenderer from './flowRenderer.js';
+import flowRendererV2 from './flowRenderer-v2.js';
+import flowStyles from './styles.js';
+import { MermaidConfig } from '../../config.type.js';
 
 export const diagram = {
   parser: flowParser,
diff --git a/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js b/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js
index 2d3e21a44..d7f5e442d 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js
+++ b/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js
@@ -1,16 +1,16 @@
 import * as graphlib from 'dagre-d3-es/src/graphlib/index.js';
 import { select, curveLinear, selectAll } from 'd3';
 
-import flowDb from './flowDb';
-import { getConfig } from '../../config';
-import utils from '../../utils';
+import flowDb from './flowDb.js';
+import { getConfig } from '../../config.js';
+import utils from '../../utils.js';
 
 import { render } from '../../dagre-wrapper/index.js';
 import { addHtmlLabel } from 'dagre-d3-es/src/dagre-js/label/add-html-label.js';
-import { log } from '../../logger';
-import common, { evaluate } from '../common/common';
-import { interpolateToCurve, getStylesFromArray } from '../../utils';
-import { setupGraphViewbox } from '../../setupGraphViewbox';
+import { log } from '../../logger.js';
+import common, { evaluate } from '../common/common.js';
+import { interpolateToCurve, getStylesFromArray } from '../../utils.js';
+import { setupGraphViewbox } from '../../setupGraphViewbox.js';
 
 const conf = {};
 export const setConf = function (cnf) {
diff --git a/packages/mermaid/src/diagrams/flowchart/flowRenderer.addEdges.spec.js b/packages/mermaid/src/diagrams/flowchart/flowRenderer.addEdges.spec.js
index 7744053f0..cbe661950 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowRenderer.addEdges.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/flowRenderer.addEdges.spec.js
@@ -1,7 +1,7 @@
-import flowDb from './flowDb';
-import { parser } from './parser/flow';
-import flowRenderer from './flowRenderer';
-import { addDiagrams } from '../../diagram-api/diagram-orchestration';
+import flowDb from './flowDb.js';
+import { parser } from './parser/flow.js';
+import flowRenderer from './flowRenderer.js';
+import { addDiagrams } from '../../diagram-api/diagram-orchestration.js';
 
 const diag = {
   db: flowDb,
diff --git a/packages/mermaid/src/diagrams/flowchart/flowRenderer.js b/packages/mermaid/src/diagrams/flowchart/flowRenderer.js
index 63234b57c..575706935 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowRenderer.js
+++ b/packages/mermaid/src/diagrams/flowchart/flowRenderer.js
@@ -1,14 +1,14 @@
 import * as graphlib from 'dagre-d3-es/src/graphlib/index.js';
 import { select, curveLinear, selectAll } from 'd3';
-import { getConfig } from '../../config';
+import { getConfig } from '../../config.js';
 import { render as Render } from 'dagre-d3-es';
 import { applyStyle } from 'dagre-d3-es/src/dagre-js/util.js';
 import { addHtmlLabel } from 'dagre-d3-es/src/dagre-js/label/add-html-label.js';
-import { log } from '../../logger';
-import common, { evaluate } from '../common/common';
-import { interpolateToCurve, getStylesFromArray } from '../../utils';
-import { setupGraphViewbox } from '../../setupGraphViewbox';
-import flowChartShapes from './flowChartShapes';
+import { log } from '../../logger.js';
+import common, { evaluate } from '../common/common.js';
+import { interpolateToCurve, getStylesFromArray } from '../../utils.js';
+import { setupGraphViewbox } from '../../setupGraphViewbox.js';
+import flowChartShapes from './flowChartShapes.js';
 
 const conf = {};
 export const setConf = function (cnf) {
diff --git a/packages/mermaid/src/diagrams/flowchart/flowRenderer.spec.js b/packages/mermaid/src/diagrams/flowchart/flowRenderer.spec.js
index 4e1ce1019..0e9e8c0de 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowRenderer.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/flowRenderer.spec.js
@@ -1,5 +1,5 @@
-import { addVertices, addEdges } from './flowRenderer';
-import { setConfig } from '../../config';
+import { addVertices, addEdges } from './flowRenderer.js';
+import { setConfig } from '../../config.js';
 
 setConfig({
   flowchart: {
diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow-arrows.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/flow-arrows.spec.js
index 594e7220b..9754f8909 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow-arrows.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow-arrows.spec.js
@@ -1,6 +1,6 @@
-import flowDb from '../flowDb';
-import flow from './flow';
-import { setConfig } from '../../../config';
+import flowDb from '../flowDb.js';
+import flow from './flow.js';
+import { setConfig } from '../../../config.js';
 
 setConfig({
   securityLevel: 'strict',
diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow-comments.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/flow-comments.spec.js
index 7aeed304c..05ed738cc 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow-comments.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow-comments.spec.js
@@ -1,6 +1,6 @@
-import flowDb from '../flowDb';
-import flow from './flow';
-import { setConfig } from '../../../config';
+import flowDb from '../flowDb.js';
+import flow from './flow.js';
+import { setConfig } from '../../../config.js';
 
 setConfig({
   securityLevel: 'strict',
diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow-direction.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/flow-direction.spec.js
index 7726ce0f7..0fbc013ff 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow-direction.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow-direction.spec.js
@@ -1,6 +1,6 @@
-import flowDb from '../flowDb';
-import flow from './flow';
-import { setConfig } from '../../../config';
+import flowDb from '../flowDb.js';
+import flow from './flow.js';
+import { setConfig } from '../../../config.js';
 
 setConfig({
   securityLevel: 'strict',
diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow-edges.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/flow-edges.spec.js
index e2ecec4d5..5af5f144a 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow-edges.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow-edges.spec.js
@@ -1,6 +1,6 @@
-import flowDb from '../flowDb';
-import flow from './flow';
-import { setConfig } from '../../../config';
+import flowDb from '../flowDb.js';
+import flow from './flow.js';
+import { setConfig } from '../../../config.js';
 
 setConfig({
   securityLevel: 'strict',
diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow-huge.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/flow-huge.spec.js
index 9097c49e3..49a733182 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow-huge.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow-huge.spec.js
@@ -1,6 +1,6 @@
-import flowDb from '../flowDb';
-import flow from './flow';
-import { setConfig } from '../../../config';
+import flowDb from '../flowDb.js';
+import flow from './flow.js';
+import { setConfig } from '../../../config.js';
 
 setConfig({
   securityLevel: 'strict',
diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow-interactions.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/flow-interactions.spec.js
index 7d3e3ed04..7fd2e6b19 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow-interactions.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow-interactions.spec.js
@@ -1,6 +1,6 @@
-import flowDb from '../flowDb';
-import flow from './flow';
-import { setConfig } from '../../../config';
+import flowDb from '../flowDb.js';
+import flow from './flow.js';
+import { setConfig } from '../../../config.js';
 import { vi } from 'vitest';
 const spyOn = vi.spyOn;
 
diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow-lines.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/flow-lines.spec.js
index 0fd1e9e9c..13aecc7c6 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow-lines.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow-lines.spec.js
@@ -1,6 +1,6 @@
-import flowDb from '../flowDb';
-import flow from './flow';
-import { setConfig } from '../../../config';
+import flowDb from '../flowDb.js';
+import flow from './flow.js';
+import { setConfig } from '../../../config.js';
 
 setConfig({
   securityLevel: 'strict',
diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow-singlenode.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/flow-singlenode.spec.js
index ee41a5c39..04b1ff01c 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow-singlenode.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow-singlenode.spec.js
@@ -1,6 +1,6 @@
-import flowDb from '../flowDb';
-import flow from './flow';
-import { setConfig } from '../../../config';
+import flowDb from '../flowDb.js';
+import flow from './flow.js';
+import { setConfig } from '../../../config.js';
 
 setConfig({
   securityLevel: 'strict',
diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow-style.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/flow-style.spec.js
index 050d64f91..e4f49b526 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow-style.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow-style.spec.js
@@ -1,6 +1,6 @@
-import flowDb from '../flowDb';
-import flow from './flow';
-import { setConfig } from '../../../config';
+import flowDb from '../flowDb.js';
+import flow from './flow.js';
+import { setConfig } from '../../../config.js';
 
 setConfig({
   securityLevel: 'strict',
diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow-text.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/flow-text.spec.js
index e990f41b4..76a119fc1 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow-text.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow-text.spec.js
@@ -1,6 +1,6 @@
-import flowDb from '../flowDb';
-import flow from './flow';
-import { setConfig } from '../../../config';
+import flowDb from '../flowDb.js';
+import flow from './flow.js';
+import { setConfig } from '../../../config.js';
 
 setConfig({
   securityLevel: 'strict',
diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow-vertice-chaining.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/flow-vertice-chaining.spec.js
index 36aaae767..7c6441d7b 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow-vertice-chaining.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow-vertice-chaining.spec.js
@@ -1,6 +1,6 @@
-import flowDb from '../flowDb';
-import flow from './flow';
-import { setConfig } from '../../../config';
+import flowDb from '../flowDb.js';
+import flow from './flow.js';
+import { setConfig } from '../../../config.js';
 
 setConfig({
   securityLevel: 'strict',
diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/flow.spec.js
index 6b440da79..526c9edfe 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow.spec.js
@@ -1,6 +1,6 @@
-import flowDb from '../flowDb';
-import flow from './flow';
-import { setConfig } from '../../../config';
+import flowDb from '../flowDb.js';
+import flow from './flow.js';
+import { setConfig } from '../../../config.js';
 
 setConfig({
   securityLevel: 'strict',
diff --git a/packages/mermaid/src/diagrams/flowchart/parser/subgraph.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/subgraph.spec.js
index ae6f178b8..3dc0785ca 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/subgraph.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/parser/subgraph.spec.js
@@ -1,6 +1,6 @@
-import flowDb from '../flowDb';
-import flow from './flow';
-import { setConfig } from '../../../config';
+import flowDb from '../flowDb.js';
+import flow from './flow.js';
+import { setConfig } from '../../../config.js';
 
 setConfig({
   securityLevel: 'strict',
diff --git a/packages/mermaid/src/diagrams/gantt/ganttDb.js b/packages/mermaid/src/diagrams/gantt/ganttDb.js
index 475ee4de4..8bdec4507 100644
--- a/packages/mermaid/src/diagrams/gantt/ganttDb.js
+++ b/packages/mermaid/src/diagrams/gantt/ganttDb.js
@@ -3,10 +3,10 @@ import dayjs from 'dayjs';
 import dayjsIsoWeek from 'dayjs/plugin/isoWeek.js';
 import dayjsCustomParseFormat from 'dayjs/plugin/customParseFormat.js';
 import dayjsAdvancedFormat from 'dayjs/plugin/advancedFormat.js';
-import { log } from '../../logger';
-import * as configApi from '../../config';
-import utils from '../../utils';
-import mermaidAPI from '../../mermaidAPI';
+import { log } from '../../logger.js';
+import * as configApi from '../../config.js';
+import utils from '../../utils.js';
+import mermaidAPI from '../../mermaidAPI.js';
 
 import {
   setAccTitle,
@@ -16,7 +16,7 @@ import {
   clear as commonClear,
   setDiagramTitle,
   getDiagramTitle,
-} from '../../commonDb';
+} from '../../commonDb.js';
 
 dayjs.extend(dayjsIsoWeek);
 dayjs.extend(dayjsCustomParseFormat);
diff --git a/packages/mermaid/src/diagrams/gantt/ganttDb.spec.ts b/packages/mermaid/src/diagrams/gantt/ganttDb.spec.ts
index d65f2fdfd..f409793ab 100644
--- a/packages/mermaid/src/diagrams/gantt/ganttDb.spec.ts
+++ b/packages/mermaid/src/diagrams/gantt/ganttDb.spec.ts
@@ -1,7 +1,7 @@
 // @ts-nocheck TODO: Fix TS
 import dayjs from 'dayjs';
-import ganttDb from './ganttDb';
-import { convert } from '../../tests/util';
+import ganttDb from './ganttDb.js';
+import { convert } from '../../tests/util.js';
 
 describe('when using the ganttDb', function () {
   beforeEach(function () {
diff --git a/packages/mermaid/src/diagrams/gantt/ganttDetector.ts b/packages/mermaid/src/diagrams/gantt/ganttDetector.ts
index 3fe2bbe7e..4a736cb90 100644
--- a/packages/mermaid/src/diagrams/gantt/ganttDetector.ts
+++ b/packages/mermaid/src/diagrams/gantt/ganttDetector.ts
@@ -1,4 +1,4 @@
-import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types';
+import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types.js';
 
 const id = 'gantt';
 
@@ -7,7 +7,7 @@ const detector: DiagramDetector = (txt) => {
 };
 
 const loader = async () => {
-  const { diagram } = await import('./ganttDiagram');
+  const { diagram } = await import('./ganttDiagram.js');
   return { id, diagram };
 };
 
diff --git a/packages/mermaid/src/diagrams/gantt/ganttDiagram.ts b/packages/mermaid/src/diagrams/gantt/ganttDiagram.ts
index b1341052d..0104c7d0c 100644
--- a/packages/mermaid/src/diagrams/gantt/ganttDiagram.ts
+++ b/packages/mermaid/src/diagrams/gantt/ganttDiagram.ts
@@ -1,9 +1,9 @@
 // @ts-ignore: TODO Fix ts errors
-import ganttParser from './parser/gantt';
-import ganttDb from './ganttDb';
-import ganttRenderer from './ganttRenderer';
-import ganttStyles from './styles';
-import { DiagramDefinition } from '../../diagram-api/types';
+import ganttParser from './parser/gantt.jison';
+import ganttDb from './ganttDb.js';
+import ganttRenderer from './ganttRenderer.js';
+import ganttStyles from './styles.js';
+import { DiagramDefinition } from '../../diagram-api/types.js';
 
 export const diagram: DiagramDefinition = {
   parser: ganttParser,
diff --git a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
index 7a012beb5..eaaae574b 100644
--- a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
+++ b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
@@ -1,5 +1,5 @@
 import dayjs from 'dayjs';
-import { log } from '../../logger';
+import { log } from '../../logger.js';
 import {
   select,
   scaleTime,
@@ -16,9 +16,9 @@ import {
   timeWeek,
   timeMonth,
 } from 'd3';
-import common from '../common/common';
-import { getConfig } from '../../config';
-import { configureSvgSize } from '../../setupGraphViewbox';
+import common from '../common/common.js';
+import { getConfig } from '../../config.js';
+import { configureSvgSize } from '../../setupGraphViewbox.js';
 
 export const setConf = function () {
   log.debug('Something is calling, setConf, remove the call');
diff --git a/packages/mermaid/src/diagrams/gantt/parser/gantt.spec.js b/packages/mermaid/src/diagrams/gantt/parser/gantt.spec.js
index 9a1401cad..cb05bdbaf 100644
--- a/packages/mermaid/src/diagrams/gantt/parser/gantt.spec.js
+++ b/packages/mermaid/src/diagrams/gantt/parser/gantt.spec.js
@@ -1,6 +1,6 @@
-import { parser } from './gantt';
-import ganttDb from '../ganttDb';
-import { convert } from '../../../tests/util';
+import { parser } from './gantt.js';
+import ganttDb from '../ganttDb.js';
+import { convert } from '../../../tests/util.js';
 import { vi } from 'vitest';
 const spyOn = vi.spyOn;
 const parserFnConstructor = (str) => {
diff --git a/packages/mermaid/src/diagrams/git/gitGraphAst.js b/packages/mermaid/src/diagrams/git/gitGraphAst.js
index dded48efa..416479d15 100644
--- a/packages/mermaid/src/diagrams/git/gitGraphAst.js
+++ b/packages/mermaid/src/diagrams/git/gitGraphAst.js
@@ -1,9 +1,9 @@
-import { log } from '../../logger';
-import { random } from '../../utils';
-import mermaidAPI from '../../mermaidAPI';
-import * as configApi from '../../config';
-import { getConfig } from '../../config';
-import common from '../common/common';
+import { log } from '../../logger.js';
+import { random } from '../../utils.js';
+import mermaidAPI from '../../mermaidAPI.js';
+import * as configApi from '../../config.js';
+import { getConfig } from '../../config.js';
+import common from '../common/common.js';
 import {
   setAccTitle,
   getAccTitle,
@@ -12,7 +12,7 @@ import {
   clear as commonClear,
   setDiagramTitle,
   getDiagramTitle,
-} from '../../commonDb';
+} from '../../commonDb.js';
 
 let mainBranchName = getConfig().gitGraph.mainBranchName;
 let mainBranchOrder = getConfig().gitGraph.mainBranchOrder;
diff --git a/packages/mermaid/src/diagrams/git/gitGraphDetector.ts b/packages/mermaid/src/diagrams/git/gitGraphDetector.ts
index 46d09c6e5..aeb37e5bc 100644
--- a/packages/mermaid/src/diagrams/git/gitGraphDetector.ts
+++ b/packages/mermaid/src/diagrams/git/gitGraphDetector.ts
@@ -1,5 +1,5 @@
-import type { DiagramDetector } from '../../diagram-api/types';
-import type { ExternalDiagramDefinition } from '../../diagram-api/types';
+import type { DiagramDetector } from '../../diagram-api/types.js';
+import type { ExternalDiagramDefinition } from '../../diagram-api/types.js';
 
 const id = 'gitGraph';
 
@@ -8,7 +8,7 @@ const detector: DiagramDetector = (txt) => {
 };
 
 const loader = async () => {
-  const { diagram } = await import('./gitGraphDiagram');
+  const { diagram } = await import('./gitGraphDiagram.js');
   return { id, diagram };
 };
 
diff --git a/packages/mermaid/src/diagrams/git/gitGraphDiagram.ts b/packages/mermaid/src/diagrams/git/gitGraphDiagram.ts
index 9ef3506a0..08ff126c4 100644
--- a/packages/mermaid/src/diagrams/git/gitGraphDiagram.ts
+++ b/packages/mermaid/src/diagrams/git/gitGraphDiagram.ts
@@ -1,9 +1,9 @@
 // @ts-ignore: TODO Fix ts errors
-import gitGraphParser from './parser/gitGraph';
-import gitGraphDb from './gitGraphAst';
-import gitGraphRenderer from './gitGraphRenderer';
-import gitGraphStyles from './styles';
-import { DiagramDefinition } from '../../diagram-api/types';
+import gitGraphParser from './parser/gitGraph.jison';
+import gitGraphDb from './gitGraphAst.js';
+import gitGraphRenderer from './gitGraphRenderer.js';
+import gitGraphStyles from './styles.js';
+import { DiagramDefinition } from '../../diagram-api/types.js';
 
 export const diagram: DiagramDefinition = {
   parser: gitGraphParser,
diff --git a/packages/mermaid/src/diagrams/git/gitGraphParserV2.spec.js b/packages/mermaid/src/diagrams/git/gitGraphParserV2.spec.js
index cad44ea1f..3ff8487af 100644
--- a/packages/mermaid/src/diagrams/git/gitGraphParserV2.spec.js
+++ b/packages/mermaid/src/diagrams/git/gitGraphParserV2.spec.js
@@ -1,7 +1,7 @@
 /* eslint-env jasmine */
 // Todo reintroduce without cryptoRandomString
-import gitGraphAst from './gitGraphAst';
-import { parser } from './parser/gitGraph';
+import gitGraphAst from './gitGraphAst.js';
+import { parser } from './parser/gitGraph.js';
 //import randomString from 'crypto-random-string';
 //import cryptoRandomString from 'crypto-random-string';
 
diff --git a/packages/mermaid/src/diagrams/git/gitGraphRenderer-old.js b/packages/mermaid/src/diagrams/git/gitGraphRenderer-old.js
index ca288bfae..b8cff72ec 100644
--- a/packages/mermaid/src/diagrams/git/gitGraphRenderer-old.js
+++ b/packages/mermaid/src/diagrams/git/gitGraphRenderer-old.js
@@ -1,9 +1,9 @@
 import { curveBasis, line, select } from 'd3';
 
-import db from './gitGraphAst';
-import gitGraphParser from './parser/gitGraph';
-import { logger } from '../../logger';
-import { interpolateToCurve } from '../../utils';
+import db from './gitGraphAst.js';
+import gitGraphParser from './parser/gitGraph.js';
+import { logger } from '../../logger.js';
+import { interpolateToCurve } from '../../utils.js';
 
 let allCommitsDict = {};
 let branchNum;
diff --git a/packages/mermaid/src/diagrams/git/gitGraphRenderer.js b/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
index 787eb2490..8d88c601d 100644
--- a/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
+++ b/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
@@ -1,7 +1,7 @@
 import { select } from 'd3';
-import { getConfig, setupGraphViewbox } from '../../diagram-api/diagramAPI';
-import { log } from '../../logger';
-import utils from '../../utils';
+import { getConfig, setupGraphViewbox } from '../../diagram-api/diagramAPI.js';
+import { log } from '../../logger.js';
+import utils from '../../utils.js';
 
 let allCommitsDict = {};
 
diff --git a/packages/mermaid/src/diagrams/git/layout.js b/packages/mermaid/src/diagrams/git/layout.js
index de866a72b..0dbe57765 100644
--- a/packages/mermaid/src/diagrams/git/layout.js
+++ b/packages/mermaid/src/diagrams/git/layout.js
@@ -1,4 +1,4 @@
-import { getConfig } from '../../config';
+import { getConfig } from '../../config.js';
 
 export default (dir, _branches) => {
   const config = getConfig().gitGraph;
diff --git a/packages/mermaid/src/diagrams/info/info.spec.js b/packages/mermaid/src/diagrams/info/info.spec.js
index 8bcce51d4..352392bea 100644
--- a/packages/mermaid/src/diagrams/info/info.spec.js
+++ b/packages/mermaid/src/diagrams/info/info.spec.js
@@ -1,5 +1,5 @@
-import { parser } from './parser/info';
-import infoDb from './infoDb';
+import { parser } from './parser/info.js';
+import infoDb from './infoDb.js';
 describe('when parsing an info graph it', function () {
   let ex;
   beforeEach(function () {
diff --git a/packages/mermaid/src/diagrams/info/infoDb.js b/packages/mermaid/src/diagrams/info/infoDb.js
index 2a04f1633..81ba8057f 100644
--- a/packages/mermaid/src/diagrams/info/infoDb.js
+++ b/packages/mermaid/src/diagrams/info/infoDb.js
@@ -1,6 +1,6 @@
 /** Created by knut on 15-01-14. */
-import { log } from '../../logger';
-import { clear } from '../../commonDb';
+import { log } from '../../logger.js';
+import { clear } from '../../commonDb.js';
 
 var message = '';
 var info = false;
diff --git a/packages/mermaid/src/diagrams/info/infoDetector.ts b/packages/mermaid/src/diagrams/info/infoDetector.ts
index a022e3ccb..ad9b9163d 100644
--- a/packages/mermaid/src/diagrams/info/infoDetector.ts
+++ b/packages/mermaid/src/diagrams/info/infoDetector.ts
@@ -1,4 +1,4 @@
-import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types';
+import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types.js';
 
 const id = 'info';
 
@@ -7,7 +7,7 @@ const detector: DiagramDetector = (txt) => {
 };
 
 const loader = async () => {
-  const { diagram } = await import('./infoDiagram');
+  const { diagram } = await import('./infoDiagram.js');
   return { id, diagram };
 };
 
diff --git a/packages/mermaid/src/diagrams/info/infoDiagram.ts b/packages/mermaid/src/diagrams/info/infoDiagram.ts
index a8100a79f..a26e915e5 100644
--- a/packages/mermaid/src/diagrams/info/infoDiagram.ts
+++ b/packages/mermaid/src/diagrams/info/infoDiagram.ts
@@ -1,9 +1,9 @@
-import { DiagramDefinition } from '../../diagram-api/types';
+import { DiagramDefinition } from '../../diagram-api/types.js';
 // @ts-ignore: TODO Fix ts errors
-import parser from './parser/info';
-import db from './infoDb';
-import styles from './styles';
-import renderer from './infoRenderer';
+import parser from './parser/info.jison';
+import db from './infoDb.js';
+import styles from './styles.js';
+import renderer from './infoRenderer.js';
 
 export const diagram: DiagramDefinition = {
   parser,
diff --git a/packages/mermaid/src/diagrams/info/infoRenderer.js b/packages/mermaid/src/diagrams/info/infoRenderer.js
index 1caa7222c..9441a3226 100644
--- a/packages/mermaid/src/diagrams/info/infoRenderer.js
+++ b/packages/mermaid/src/diagrams/info/infoRenderer.js
@@ -1,7 +1,7 @@
 /** Created by knut on 14-12-11. */
 import { select } from 'd3';
-import { log } from '../../logger';
-import { getConfig } from '../../config';
+import { log } from '../../logger.js';
+import { getConfig } from '../../config.js';
 
 /**
  * Draws a an info picture in the tag with id: id based on the graph definition in text.
diff --git a/packages/mermaid/src/diagrams/mindmap/detector.ts b/packages/mermaid/src/diagrams/mindmap/detector.ts
index 2e2b1c7d6..95e16dea9 100644
--- a/packages/mermaid/src/diagrams/mindmap/detector.ts
+++ b/packages/mermaid/src/diagrams/mindmap/detector.ts
@@ -1,4 +1,4 @@
-import type { ExternalDiagramDefinition } from '../../diagram-api/types';
+import type { ExternalDiagramDefinition } from '../../diagram-api/types.js';
 const id = 'mindmap';
 
 const detector = (txt: string) => {
diff --git a/packages/mermaid/src/diagrams/mindmap/mindmap-definition.ts b/packages/mermaid/src/diagrams/mindmap/mindmap-definition.ts
index 61b41d347..846fd5dc5 100644
--- a/packages/mermaid/src/diagrams/mindmap/mindmap-definition.ts
+++ b/packages/mermaid/src/diagrams/mindmap/mindmap-definition.ts
@@ -1,8 +1,8 @@
 // @ts-ignore: TODO Fix ts errors
-import mindmapParser from './parser/mindmap';
-import * as mindmapDb from './mindmapDb';
-import mindmapRenderer from './mindmapRenderer';
-import mindmapStyles from './styles';
+import mindmapParser from './parser/mindmap.jison';
+import * as mindmapDb from './mindmapDb.js';
+import mindmapRenderer from './mindmapRenderer.js';
+import mindmapStyles from './styles.js';
 
 export const diagram = {
   db: mindmapDb,
diff --git a/packages/mermaid/src/diagrams/mindmap/mindmap.spec.js b/packages/mermaid/src/diagrams/mindmap/mindmap.spec.js
index e8793e86a..e4777250f 100644
--- a/packages/mermaid/src/diagrams/mindmap/mindmap.spec.js
+++ b/packages/mermaid/src/diagrams/mindmap/mindmap.spec.js
@@ -1,7 +1,7 @@
-import { parser as mindmap } from './parser/mindmap';
-import * as mindmapDB from './mindmapDb';
+import { parser as mindmap } from './parser/mindmap.js';
+import * as mindmapDB from './mindmapDb.js';
 // Todo fix utils functions for tests
-import { setLogLevel } from '../../diagram-api/diagramAPI';
+import { setLogLevel } from '../../diagram-api/diagramAPI.js';
 
 describe('when parsing a mindmap ', function () {
   beforeEach(function () {
diff --git a/packages/mermaid/src/diagrams/mindmap/mindmapDb.js b/packages/mermaid/src/diagrams/mindmap/mindmapDb.js
index 71aa449d9..9413581d6 100644
--- a/packages/mermaid/src/diagrams/mindmap/mindmapDb.js
+++ b/packages/mermaid/src/diagrams/mindmap/mindmapDb.js
@@ -1,6 +1,6 @@
-import { getConfig } from '../../config';
-import { sanitizeText as _sanitizeText } from '../../diagrams/common/common';
-import { log } from '../../logger';
+import { getConfig } from '../../config.js';
+import { sanitizeText as _sanitizeText } from '../../diagrams/common/common.js';
+import { log } from '../../logger.js';
 
 export const sanitizeText = (text) => _sanitizeText(text, getConfig());
 
diff --git a/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.js b/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.js
index c5b5fede1..e462f2fc3 100644
--- a/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.js
+++ b/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.js
@@ -1,12 +1,12 @@
 /** Created by knut on 14-12-11. */
 import { select } from 'd3';
-import { log } from '../../logger';
-import { getConfig } from '../../config';
-import { setupGraphViewbox } from '../../setupGraphViewbox';
-import svgDraw from './svgDraw';
+import { log } from '../../logger.js';
+import { getConfig } from '../../config.js';
+import { setupGraphViewbox } from '../../setupGraphViewbox.js';
+import svgDraw from './svgDraw.js';
 import cytoscape from 'cytoscape/dist/cytoscape.umd.js';
 import coseBilkent from 'cytoscape-cose-bilkent';
-import * as db from './mindmapDb';
+import * as db from './mindmapDb.js';
 
 // Inject the layout algorithm into cytoscape
 cytoscape.use(coseBilkent);
diff --git a/packages/mermaid/src/diagrams/mindmap/svgDraw.js b/packages/mermaid/src/diagrams/mindmap/svgDraw.js
index 2b1aa021e..69975e6bb 100644
--- a/packages/mermaid/src/diagrams/mindmap/svgDraw.js
+++ b/packages/mermaid/src/diagrams/mindmap/svgDraw.js
@@ -1,5 +1,5 @@
 import { select } from 'd3';
-import * as db from './mindmapDb';
+import * as db from './mindmapDb.js';
 const MAX_SECTIONS = 12;
 
 /**
diff --git a/packages/mermaid/src/diagrams/pie/parser/pie.spec.js b/packages/mermaid/src/diagrams/pie/parser/pie.spec.js
index 21523dde4..a365268dd 100644
--- a/packages/mermaid/src/diagrams/pie/parser/pie.spec.js
+++ b/packages/mermaid/src/diagrams/pie/parser/pie.spec.js
@@ -1,6 +1,6 @@
-import pieDb from '../pieDb';
-import pie from './pie';
-import { setConfig } from '../../../config';
+import pieDb from '../pieDb.js';
+import pie from './pie.js';
+import { setConfig } from '../../../config.js';
 
 setConfig({
   securityLevel: 'strict',
diff --git a/packages/mermaid/src/diagrams/pie/pieDb.js b/packages/mermaid/src/diagrams/pie/pieDb.js
index 5ccf6d29e..2c86752c6 100644
--- a/packages/mermaid/src/diagrams/pie/pieDb.js
+++ b/packages/mermaid/src/diagrams/pie/pieDb.js
@@ -1,7 +1,7 @@
-import { log } from '../../logger';
-import mermaidAPI from '../../mermaidAPI';
-import * as configApi from '../../config';
-import common from '../common/common';
+import { log } from '../../logger.js';
+import mermaidAPI from '../../mermaidAPI.js';
+import * as configApi from '../../config.js';
+import common from '../common/common.js';
 import {
   setAccTitle,
   getAccTitle,
@@ -10,7 +10,7 @@ import {
   getAccDescription,
   setAccDescription,
   clear as commonClear,
-} from '../../commonDb';
+} from '../../commonDb.js';
 
 let sections = {};
 let showData = false;
diff --git a/packages/mermaid/src/diagrams/pie/pieDetector.ts b/packages/mermaid/src/diagrams/pie/pieDetector.ts
index dd1224db9..34d3c0cf6 100644
--- a/packages/mermaid/src/diagrams/pie/pieDetector.ts
+++ b/packages/mermaid/src/diagrams/pie/pieDetector.ts
@@ -1,4 +1,4 @@
-import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types';
+import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types.js';
 
 const id = 'pie';
 
@@ -7,7 +7,7 @@ const detector: DiagramDetector = (txt) => {
 };
 
 const loader = async () => {
-  const { diagram } = await import('./pieDiagram');
+  const { diagram } = await import('./pieDiagram.js');
   return { id, diagram };
 };
 
diff --git a/packages/mermaid/src/diagrams/pie/pieDiagram.ts b/packages/mermaid/src/diagrams/pie/pieDiagram.ts
index 3a586f668..4c6b7d3bc 100644
--- a/packages/mermaid/src/diagrams/pie/pieDiagram.ts
+++ b/packages/mermaid/src/diagrams/pie/pieDiagram.ts
@@ -1,9 +1,9 @@
-import { DiagramDefinition } from '../../diagram-api/types';
+import { DiagramDefinition } from '../../diagram-api/types.js';
 // @ts-ignore: TODO Fix ts errors
-import parser from './parser/pie';
-import db from './pieDb';
-import styles from './styles';
-import renderer from './pieRenderer';
+import parser from './parser/pie.jison';
+import db from './pieDb.js';
+import styles from './styles.js';
+import renderer from './pieRenderer.js';
 
 export const diagram: DiagramDefinition = {
   parser,
diff --git a/packages/mermaid/src/diagrams/pie/pieRenderer.js b/packages/mermaid/src/diagrams/pie/pieRenderer.js
index 9b25f5f43..1ee34e192 100644
--- a/packages/mermaid/src/diagrams/pie/pieRenderer.js
+++ b/packages/mermaid/src/diagrams/pie/pieRenderer.js
@@ -1,9 +1,9 @@
 /** Created by AshishJ on 11-09-2019. */
 import { select, scaleOrdinal, pie as d3pie, arc } from 'd3';
-import { log } from '../../logger';
-import { configureSvgSize } from '../../setupGraphViewbox';
-import * as configApi from '../../config';
-import { parseFontSize } from '../../utils';
+import { log } from '../../logger.js';
+import { configureSvgSize } from '../../setupGraphViewbox.js';
+import * as configApi from '../../config.js';
+import { parseFontSize } from '../../utils.js';
 
 let conf = configApi.getConfig();
 
diff --git a/packages/mermaid/src/diagrams/requirement/parser/requirementDiagram.spec.js b/packages/mermaid/src/diagrams/requirement/parser/requirementDiagram.spec.js
index 4857a37ef..823b476ac 100644
--- a/packages/mermaid/src/diagrams/requirement/parser/requirementDiagram.spec.js
+++ b/packages/mermaid/src/diagrams/requirement/parser/requirementDiagram.spec.js
@@ -1,6 +1,6 @@
-import { setConfig } from '../../../config';
-import requirementDb from '../requirementDb';
-import reqDiagram from './requirementDiagram';
+import { setConfig } from '../../../config.js';
+import requirementDb from '../requirementDb.js';
+import reqDiagram from './requirementDiagram.js';
 
 setConfig({
   securityLevel: 'strict',
diff --git a/packages/mermaid/src/diagrams/requirement/requirementDb.js b/packages/mermaid/src/diagrams/requirement/requirementDb.js
index df5eb0ab9..1d0a3e2e1 100644
--- a/packages/mermaid/src/diagrams/requirement/requirementDb.js
+++ b/packages/mermaid/src/diagrams/requirement/requirementDb.js
@@ -1,6 +1,6 @@
-import * as configApi from '../../config';
-import { log } from '../../logger';
-import mermaidAPI from '../../mermaidAPI';
+import * as configApi from '../../config.js';
+import { log } from '../../logger.js';
+import mermaidAPI from '../../mermaidAPI.js';
 
 import {
   setAccTitle,
@@ -8,7 +8,7 @@ import {
   getAccDescription,
   setAccDescription,
   clear as commonClear,
-} from '../../commonDb';
+} from '../../commonDb.js';
 
 let relations = [];
 let latestRequirement = {};
diff --git a/packages/mermaid/src/diagrams/requirement/requirementDetector.ts b/packages/mermaid/src/diagrams/requirement/requirementDetector.ts
index 1102fde0c..87fcea790 100644
--- a/packages/mermaid/src/diagrams/requirement/requirementDetector.ts
+++ b/packages/mermaid/src/diagrams/requirement/requirementDetector.ts
@@ -1,4 +1,4 @@
-import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types';
+import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types.js';
 
 const id = 'requirement';
 
@@ -7,7 +7,7 @@ const detector: DiagramDetector = (txt) => {
 };
 
 const loader = async () => {
-  const { diagram } = await import('./requirementDiagram');
+  const { diagram } = await import('./requirementDiagram.js');
   return { id, diagram };
 };
 
diff --git a/packages/mermaid/src/diagrams/requirement/requirementDiagram.ts b/packages/mermaid/src/diagrams/requirement/requirementDiagram.ts
index 37f6177b6..4505afc56 100644
--- a/packages/mermaid/src/diagrams/requirement/requirementDiagram.ts
+++ b/packages/mermaid/src/diagrams/requirement/requirementDiagram.ts
@@ -1,9 +1,9 @@
-import { DiagramDefinition } from '../../diagram-api/types';
+import { DiagramDefinition } from '../../diagram-api/types.js';
 // @ts-ignore: TODO Fix ts errors
-import parser from './parser/requirementDiagram';
-import db from './requirementDb';
-import styles from './styles';
-import renderer from './requirementRenderer';
+import parser from './parser/requirementDiagram.jison';
+import db from './requirementDb.js';
+import styles from './styles.js';
+import renderer from './requirementRenderer.js';
 
 export const diagram: DiagramDefinition = {
   parser,
diff --git a/packages/mermaid/src/diagrams/requirement/requirementRenderer.js b/packages/mermaid/src/diagrams/requirement/requirementRenderer.js
index 9fd746bd1..b88f5c203 100644
--- a/packages/mermaid/src/diagrams/requirement/requirementRenderer.js
+++ b/packages/mermaid/src/diagrams/requirement/requirementRenderer.js
@@ -1,11 +1,11 @@
 import { line, select } from 'd3';
 import { layout as dagreLayout } from 'dagre-d3-es/src/dagre/index.js';
 import * as graphlib from 'dagre-d3-es/src/graphlib/index.js';
-import { log } from '../../logger';
-import { configureSvgSize } from '../../setupGraphViewbox';
-import common from '../common/common';
-import markers from './requirementMarkers';
-import { getConfig } from '../../config';
+import { log } from '../../logger.js';
+import { configureSvgSize } from '../../setupGraphViewbox.js';
+import common from '../common/common.js';
+import markers from './requirementMarkers.js';
+import { getConfig } from '../../config.js';
 
 let conf = {};
 let relCnt = 0;
diff --git a/packages/mermaid/src/diagrams/sequence/sequenceDb.js b/packages/mermaid/src/diagrams/sequence/sequenceDb.js
index 5c5554c72..6550df9fa 100644
--- a/packages/mermaid/src/diagrams/sequence/sequenceDb.js
+++ b/packages/mermaid/src/diagrams/sequence/sequenceDb.js
@@ -1,7 +1,7 @@
-import mermaidAPI from '../../mermaidAPI';
-import * as configApi from '../../config';
-import { log } from '../../logger';
-import { sanitizeText } from '../common/common';
+import mermaidAPI from '../../mermaidAPI.js';
+import * as configApi from '../../config.js';
+import { log } from '../../logger.js';
+import { sanitizeText } from '../common/common.js';
 import {
   setAccTitle,
   getAccTitle,
@@ -10,7 +10,7 @@ import {
   getAccDescription,
   setAccDescription,
   clear as commonClear,
-} from '../../commonDb';
+} from '../../commonDb.js';
 
 let prevActor = undefined;
 let actors = {};
diff --git a/packages/mermaid/src/diagrams/sequence/sequenceDetector.ts b/packages/mermaid/src/diagrams/sequence/sequenceDetector.ts
index c436e65d4..a808feea2 100644
--- a/packages/mermaid/src/diagrams/sequence/sequenceDetector.ts
+++ b/packages/mermaid/src/diagrams/sequence/sequenceDetector.ts
@@ -1,4 +1,4 @@
-import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types';
+import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types.js';
 
 const id = 'sequence';
 
@@ -7,7 +7,7 @@ const detector: DiagramDetector = (txt) => {
 };
 
 const loader = async () => {
-  const { diagram } = await import('./sequenceDiagram');
+  const { diagram } = await import('./sequenceDiagram.js');
   return { id, diagram };
 };
 
diff --git a/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js b/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js
index 08f6abee1..a6cff4a6c 100644
--- a/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js
+++ b/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js
@@ -1,9 +1,9 @@
 import { vi } from 'vitest';
 
-import * as configApi from '../../config';
-import mermaidAPI from '../../mermaidAPI';
-import { Diagram, getDiagramFromText } from '../../Diagram';
-import { addDiagrams } from '../../diagram-api/diagram-orchestration';
+import * as configApi from '../../config.js';
+import mermaidAPI from '../../mermaidAPI.js';
+import { Diagram, getDiagramFromText } from '../../Diagram.js';
+import { addDiagrams } from '../../diagram-api/diagram-orchestration.js';
 
 beforeAll(async () => {
   // Is required to load the sequence diagram
diff --git a/packages/mermaid/src/diagrams/sequence/sequenceDiagram.ts b/packages/mermaid/src/diagrams/sequence/sequenceDiagram.ts
index fdec7f86d..382d47b61 100644
--- a/packages/mermaid/src/diagrams/sequence/sequenceDiagram.ts
+++ b/packages/mermaid/src/diagrams/sequence/sequenceDiagram.ts
@@ -1,9 +1,9 @@
-import { DiagramDefinition } from '../../diagram-api/types';
+import { DiagramDefinition } from '../../diagram-api/types.js';
 // @ts-ignore: TODO Fix ts errors
-import parser from './parser/sequenceDiagram';
-import db from './sequenceDb';
-import styles from './styles';
-import renderer from './sequenceRenderer';
+import parser from './parser/sequenceDiagram.jison';
+import db from './sequenceDb.js';
+import styles from './styles.js';
+import renderer from './sequenceRenderer.js';
 
 export const diagram: DiagramDefinition = {
   parser,
diff --git a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts b/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
index acee7bbe5..eca647153 100644
--- a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
+++ b/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
@@ -1,13 +1,13 @@
 // @ts-nocheck TODO: fix file
 import { select, selectAll } from 'd3';
-import svgDraw, { drawText, fixLifeLineHeights } from './svgDraw';
-import { log } from '../../logger';
-import common from '../common/common';
-import * as configApi from '../../config';
-import assignWithDepth from '../../assignWithDepth';
-import utils from '../../utils';
-import { configureSvgSize } from '../../setupGraphViewbox';
-import { Diagram } from '../../Diagram';
+import svgDraw, { drawText, fixLifeLineHeights } from './svgDraw.js';
+import { log } from '../../logger.js';
+import common from '../common/common.js';
+import * as configApi from '../../config.js';
+import assignWithDepth from '../../assignWithDepth.js';
+import utils from '../../utils.js';
+import { configureSvgSize } from '../../setupGraphViewbox.js';
+import { Diagram } from '../../Diagram.js';
 
 let conf = {};
 
diff --git a/packages/mermaid/src/diagrams/sequence/svgDraw.js b/packages/mermaid/src/diagrams/sequence/svgDraw.js
index be34daf4b..376ca6161 100644
--- a/packages/mermaid/src/diagrams/sequence/svgDraw.js
+++ b/packages/mermaid/src/diagrams/sequence/svgDraw.js
@@ -1,6 +1,6 @@
-import common from '../common/common';
-import { addFunction } from '../../interactionDb';
-import { parseFontSize } from '../../utils';
+import common from '../common/common.js';
+import { addFunction } from '../../interactionDb.js';
+import { parseFontSize } from '../../utils.js';
 import { sanitizeUrl } from '@braintree/sanitize-url';
 
 export const drawRect = function (elem, rectData) {
diff --git a/packages/mermaid/src/diagrams/sequence/svgDraw.spec.js b/packages/mermaid/src/diagrams/sequence/svgDraw.spec.js
index ed60285ed..04cde0a2c 100644
--- a/packages/mermaid/src/diagrams/sequence/svgDraw.spec.js
+++ b/packages/mermaid/src/diagrams/sequence/svgDraw.spec.js
@@ -1,5 +1,5 @@
 import { vi } from 'vitest';
-import svgDraw from './svgDraw';
+import svgDraw from './svgDraw.js';
 
 // This is the only place that uses this mock
 export const MockD3 = (name, parent) => {
diff --git a/packages/mermaid/src/diagrams/state/parser/state-parser.spec.js b/packages/mermaid/src/diagrams/state/parser/state-parser.spec.js
index f8ea694a6..0d334da8e 100644
--- a/packages/mermaid/src/diagrams/state/parser/state-parser.spec.js
+++ b/packages/mermaid/src/diagrams/state/parser/state-parser.spec.js
@@ -1,6 +1,6 @@
-import stateDb from '../stateDb';
-import stateDiagram from './stateDiagram';
-import { setConfig } from '../../../config';
+import stateDb from '../stateDb.js';
+import stateDiagram from './stateDiagram.js';
+import { setConfig } from '../../../config.js';
 
 setConfig({
   securityLevel: 'strict',
diff --git a/packages/mermaid/src/diagrams/state/parser/state-style.spec.js b/packages/mermaid/src/diagrams/state/parser/state-style.spec.js
index 75ecb4b13..fec5f9900 100644
--- a/packages/mermaid/src/diagrams/state/parser/state-style.spec.js
+++ b/packages/mermaid/src/diagrams/state/parser/state-style.spec.js
@@ -1,6 +1,6 @@
-import stateDb from '../stateDb';
-import stateDiagram from './stateDiagram';
-import { setConfig } from '../../../config';
+import stateDb from '../stateDb.js';
+import stateDiagram from './stateDiagram.js';
+import { setConfig } from '../../../config.js';
 
 setConfig({
   securityLevel: 'strict',
diff --git a/packages/mermaid/src/diagrams/state/shapes.js b/packages/mermaid/src/diagrams/state/shapes.js
index 0a495e56c..e82a1ad61 100644
--- a/packages/mermaid/src/diagrams/state/shapes.js
+++ b/packages/mermaid/src/diagrams/state/shapes.js
@@ -1,10 +1,10 @@
 import { line, curveBasis } from 'd3';
 import idCache from './id-cache.js';
-import stateDb from './stateDb';
-import utils from '../../utils';
-import common from '../common/common';
-import { getConfig } from '../../config';
-import { log } from '../../logger';
+import stateDb from './stateDb.js';
+import utils from '../../utils.js';
+import common from '../common/common.js';
+import { getConfig } from '../../config.js';
+import { log } from '../../logger.js';
 
 /**
  * Draws a start state as a black circle
diff --git a/packages/mermaid/src/diagrams/state/stateDb.js b/packages/mermaid/src/diagrams/state/stateDb.js
index 81b8ffb8b..d9c789a99 100644
--- a/packages/mermaid/src/diagrams/state/stateDb.js
+++ b/packages/mermaid/src/diagrams/state/stateDb.js
@@ -1,8 +1,8 @@
-import { log } from '../../logger';
-import { generateId } from '../../utils';
-import mermaidAPI from '../../mermaidAPI';
-import common from '../common/common';
-import * as configApi from '../../config';
+import { log } from '../../logger.js';
+import { generateId } from '../../utils.js';
+import mermaidAPI from '../../mermaidAPI.js';
+import common from '../common/common.js';
+import * as configApi from '../../config.js';
 import {
   setAccTitle,
   getAccTitle,
@@ -11,7 +11,7 @@ import {
   clear as commonClear,
   setDiagramTitle,
   getDiagramTitle,
-} from '../../commonDb';
+} from '../../commonDb.js';
 
 import {
   DEFAULT_DIAGRAM_DIRECTION,
@@ -21,7 +21,7 @@ import {
   STMT_APPLYCLASS,
   DEFAULT_STATE_TYPE,
   DIVIDER_TYPE,
-} from './stateCommon';
+} from './stateCommon.js';
 
 const START_NODE = '[*]';
 const START_TYPE = 'start';
diff --git a/packages/mermaid/src/diagrams/state/stateDb.spec.js b/packages/mermaid/src/diagrams/state/stateDb.spec.js
index d51d919c3..0264c34cc 100644
--- a/packages/mermaid/src/diagrams/state/stateDb.spec.js
+++ b/packages/mermaid/src/diagrams/state/stateDb.spec.js
@@ -1,4 +1,4 @@
-import stateDb from './stateDb';
+import stateDb from './stateDb.js';
 
 describe('State Diagram stateDb', () => {
   beforeEach(() => {
diff --git a/packages/mermaid/src/diagrams/state/stateDetector-V2.ts b/packages/mermaid/src/diagrams/state/stateDetector-V2.ts
index 5fa617a76..8a96e93a2 100644
--- a/packages/mermaid/src/diagrams/state/stateDetector-V2.ts
+++ b/packages/mermaid/src/diagrams/state/stateDetector-V2.ts
@@ -1,4 +1,4 @@
-import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types';
+import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types.js';
 
 const id = 'stateDiagram';
 
@@ -16,7 +16,7 @@ const detector: DiagramDetector = (text, config) => {
 };
 
 const loader = async () => {
-  const { diagram } = await import('./stateDiagram-v2');
+  const { diagram } = await import('./stateDiagram-v2.js');
   return { id, diagram };
 };
 
diff --git a/packages/mermaid/src/diagrams/state/stateDetector.ts b/packages/mermaid/src/diagrams/state/stateDetector.ts
index ee6b3ac2c..eb252305c 100644
--- a/packages/mermaid/src/diagrams/state/stateDetector.ts
+++ b/packages/mermaid/src/diagrams/state/stateDetector.ts
@@ -1,4 +1,4 @@
-import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types';
+import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types.js';
 
 const id = 'state';
 
@@ -12,7 +12,7 @@ const detector: DiagramDetector = (txt, config) => {
 };
 
 const loader = async () => {
-  const { diagram } = await import('./stateDiagram');
+  const { diagram } = await import('./stateDiagram.js');
   return { id, diagram };
 };
 
diff --git a/packages/mermaid/src/diagrams/state/stateDiagram-v2.spec.js b/packages/mermaid/src/diagrams/state/stateDiagram-v2.spec.js
index 7ed5555db..fdc36ce3e 100644
--- a/packages/mermaid/src/diagrams/state/stateDiagram-v2.spec.js
+++ b/packages/mermaid/src/diagrams/state/stateDiagram-v2.spec.js
@@ -1,5 +1,5 @@
-import { parser } from './parser/stateDiagram';
-import stateDb from './stateDb';
+import { parser } from './parser/stateDiagram.js';
+import stateDb from './stateDb.js';
 import stateDiagram from './parser/stateDiagram.jison';
 
 describe('state diagram V2, ', function () {
diff --git a/packages/mermaid/src/diagrams/state/stateDiagram-v2.ts b/packages/mermaid/src/diagrams/state/stateDiagram-v2.ts
index f7ee4f052..616a97556 100644
--- a/packages/mermaid/src/diagrams/state/stateDiagram-v2.ts
+++ b/packages/mermaid/src/diagrams/state/stateDiagram-v2.ts
@@ -1,9 +1,9 @@
-import { DiagramDefinition } from '../../diagram-api/types';
+import { DiagramDefinition } from '../../diagram-api/types.js';
 // @ts-ignore: TODO Fix ts errors
-import parser from './parser/stateDiagram';
-import db from './stateDb';
-import styles from './styles';
-import renderer from './stateRenderer-v2';
+import parser from './parser/stateDiagram.jison';
+import db from './stateDb.js';
+import styles from './styles.js';
+import renderer from './stateRenderer-v2.js';
 
 export const diagram: DiagramDefinition = {
   parser,
diff --git a/packages/mermaid/src/diagrams/state/stateDiagram.spec.js b/packages/mermaid/src/diagrams/state/stateDiagram.spec.js
index d2bbb409e..b8c44ae2e 100644
--- a/packages/mermaid/src/diagrams/state/stateDiagram.spec.js
+++ b/packages/mermaid/src/diagrams/state/stateDiagram.spec.js
@@ -1,5 +1,5 @@
-import { parser } from './parser/stateDiagram';
-import stateDb from './stateDb';
+import { parser } from './parser/stateDiagram.js';
+import stateDb from './stateDb.js';
 
 describe('state diagram, ', function () {
   describe('when parsing an info graph it', function () {
diff --git a/packages/mermaid/src/diagrams/state/stateDiagram.ts b/packages/mermaid/src/diagrams/state/stateDiagram.ts
index 570d599de..44552c246 100644
--- a/packages/mermaid/src/diagrams/state/stateDiagram.ts
+++ b/packages/mermaid/src/diagrams/state/stateDiagram.ts
@@ -1,9 +1,9 @@
-import { DiagramDefinition } from '../../diagram-api/types';
+import { DiagramDefinition } from '../../diagram-api/types.js';
 // @ts-ignore: TODO Fix ts errors
-import parser from './parser/stateDiagram';
-import db from './stateDb';
-import styles from './styles';
-import renderer from './stateRenderer';
+import parser from './parser/stateDiagram.jison';
+import db from './stateDb.js';
+import styles from './styles.js';
+import renderer from './stateRenderer.js';
 
 export const diagram: DiagramDefinition = {
   parser,
diff --git a/packages/mermaid/src/diagrams/state/stateRenderer-v2.js b/packages/mermaid/src/diagrams/state/stateRenderer-v2.js
index 8629f74db..47e0afe87 100644
--- a/packages/mermaid/src/diagrams/state/stateRenderer-v2.js
+++ b/packages/mermaid/src/diagrams/state/stateRenderer-v2.js
@@ -1,11 +1,11 @@
 import * as graphlib from 'dagre-d3-es/src/graphlib/index.js';
 import { select } from 'd3';
-import { getConfig } from '../../config';
+import { getConfig } from '../../config.js';
 import { render } from '../../dagre-wrapper/index.js';
-import { log } from '../../logger';
-import { configureSvgSize } from '../../setupGraphViewbox';
-import common from '../common/common';
-import utils from '../../utils';
+import { log } from '../../logger.js';
+import { configureSvgSize } from '../../setupGraphViewbox.js';
+import common from '../common/common.js';
+import utils from '../../utils.js';
 
 import {
   DEFAULT_DIAGRAM_DIRECTION,
@@ -14,7 +14,7 @@ import {
   STMT_RELATION,
   DEFAULT_STATE_TYPE,
   DIVIDER_TYPE,
-} from './stateCommon';
+} from './stateCommon.js';
 
 // --------------------------------------
 // Shapes
diff --git a/packages/mermaid/src/diagrams/state/stateRenderer-v2.spec.js b/packages/mermaid/src/diagrams/state/stateRenderer-v2.spec.js
index 3a118e607..2333fc48f 100644
--- a/packages/mermaid/src/diagrams/state/stateRenderer-v2.spec.js
+++ b/packages/mermaid/src/diagrams/state/stateRenderer-v2.spec.js
@@ -1,8 +1,8 @@
 import { expectTypeOf } from 'vitest';
 
-import { parser } from './parser/stateDiagram';
-import stateDb from './stateDb';
-import stateRendererV2 from './stateRenderer-v2';
+import { parser } from './parser/stateDiagram.js';
+import stateDb from './stateDb.js';
+import stateRendererV2 from './stateRenderer-v2.js';
 
 // Can use this instead of having to register diagrams and load/orchestrate them, etc.
 class FauxDiagramObj {
diff --git a/packages/mermaid/src/diagrams/state/stateRenderer.js b/packages/mermaid/src/diagrams/state/stateRenderer.js
index 8d410fdd9..74913a748 100644
--- a/packages/mermaid/src/diagrams/state/stateRenderer.js
+++ b/packages/mermaid/src/diagrams/state/stateRenderer.js
@@ -1,11 +1,11 @@
 import { select } from 'd3';
 import { layout as dagreLayout } from 'dagre-d3-es/src/dagre/index.js';
 import * as graphlib from 'dagre-d3-es/src/graphlib/index.js';
-import { log } from '../../logger';
-import common from '../common/common';
-import { drawState, addTitleAndBox, drawEdge } from './shapes';
-import { getConfig } from '../../config';
-import { configureSvgSize } from '../../setupGraphViewbox';
+import { log } from '../../logger.js';
+import common from '../common/common.js';
+import { drawState, addTitleAndBox, drawEdge } from './shapes.js';
+import { getConfig } from '../../config.js';
+import { configureSvgSize } from '../../setupGraphViewbox.js';
 
 // TODO Move conf object to main conf in mermaidAPI
 let conf;
diff --git a/packages/mermaid/src/diagrams/timeline/detector.ts b/packages/mermaid/src/diagrams/timeline/detector.ts
index 9bd2b5ece..57d8f66ad 100644
--- a/packages/mermaid/src/diagrams/timeline/detector.ts
+++ b/packages/mermaid/src/diagrams/timeline/detector.ts
@@ -1,4 +1,4 @@
-import type { ExternalDiagramDefinition } from '../../diagram-api/types';
+import type { ExternalDiagramDefinition } from '../../diagram-api/types.js';
 
 const id = 'timeline';
 
diff --git a/packages/mermaid/src/diagrams/timeline/timeline-definition.ts b/packages/mermaid/src/diagrams/timeline/timeline-definition.ts
index 898af8b78..7f671291f 100644
--- a/packages/mermaid/src/diagrams/timeline/timeline-definition.ts
+++ b/packages/mermaid/src/diagrams/timeline/timeline-definition.ts
@@ -1,8 +1,8 @@
 // @ts-ignore: TODO Fix ts errors
 import parser from './parser/timeline.jison';
-import * as db from './timelineDb';
-import renderer from './timelineRenderer';
-import styles from './styles';
+import * as db from './timelineDb.js';
+import renderer from './timelineRenderer.js';
+import styles from './styles.js';
 
 export const diagram = {
   db,
diff --git a/packages/mermaid/src/diagrams/timeline/timeline.spec.js b/packages/mermaid/src/diagrams/timeline/timeline.spec.js
index 0697b194e..609bb7a47 100644
--- a/packages/mermaid/src/diagrams/timeline/timeline.spec.js
+++ b/packages/mermaid/src/diagrams/timeline/timeline.spec.js
@@ -1,8 +1,8 @@
-import { parser as timeline } from './parser/timeline';
-import * as timelineDB from './timelineDb';
-// import { injectUtils } from './mermaidUtils';
-import * as _commonDb from '../../commonDb';
-import { parseDirective as _parseDirective } from '../../directiveUtils';
+import { parser as timeline } from './parser/timeline.js';
+import * as timelineDB from './timelineDb.js';
+// import { injectUtils } from './mermaidUtils.js';
+import * as _commonDb from '../../commonDb.js';
+import { parseDirective as _parseDirective } from '../../directiveUtils.js';
 
 import {
   log,
@@ -10,7 +10,7 @@ import {
   getConfig,
   sanitizeText,
   setupGraphViewBox,
-} from '../../diagram-api/diagramAPI';
+} from '../../diagram-api/diagramAPI.js';
 
 // injectUtils(
 //   log,
diff --git a/packages/mermaid/src/diagrams/timeline/timelineDb.js b/packages/mermaid/src/diagrams/timeline/timelineDb.js
index 7bc5c2692..337cfe441 100644
--- a/packages/mermaid/src/diagrams/timeline/timelineDb.js
+++ b/packages/mermaid/src/diagrams/timeline/timelineDb.js
@@ -1,5 +1,5 @@
-import { parseDirective as _parseDirective } from '../../directiveUtils';
-import * as commonDb from '../../commonDb';
+import { parseDirective as _parseDirective } from '../../directiveUtils.js';
+import * as commonDb from '../../commonDb.js';
 let currentSection = '';
 let currentTaskId = 0;
 
diff --git a/packages/mermaid/src/diagrams/timeline/timelineRenderer.ts b/packages/mermaid/src/diagrams/timeline/timelineRenderer.ts
index 272ecf0c1..65abe8fd9 100644
--- a/packages/mermaid/src/diagrams/timeline/timelineRenderer.ts
+++ b/packages/mermaid/src/diagrams/timeline/timelineRenderer.ts
@@ -1,11 +1,11 @@
 // @ts-ignore - db not typed yet
 import { select, Selection } from 'd3';
-import svgDraw from './svgDraw';
-import { log } from '../../logger';
-import { getConfig } from '../../config';
-import { setupGraphViewbox } from '../../setupGraphViewbox';
-import { Diagram } from '../../Diagram';
-import { MermaidConfig } from '../../config.type';
+import svgDraw from './svgDraw.js';
+import { log } from '../../logger.js';
+import { getConfig } from '../../config.js';
+import { setupGraphViewbox } from '../../setupGraphViewbox.js';
+import { Diagram } from '../../Diagram.js';
+import { MermaidConfig } from '../../config.type.js';
 
 interface Block<TDesc, TSection> {
   number: number;
diff --git a/packages/mermaid/src/diagrams/user-journey/journeyDb.js b/packages/mermaid/src/diagrams/user-journey/journeyDb.js
index ce8705094..d4f34e942 100644
--- a/packages/mermaid/src/diagrams/user-journey/journeyDb.js
+++ b/packages/mermaid/src/diagrams/user-journey/journeyDb.js
@@ -1,5 +1,5 @@
-import mermaidAPI from '../../mermaidAPI';
-import * as configApi from '../../config';
+import mermaidAPI from '../../mermaidAPI.js';
+import * as configApi from '../../config.js';
 import {
   setAccTitle,
   getAccTitle,
@@ -8,7 +8,7 @@ import {
   getAccDescription,
   setAccDescription,
   clear as commonClear,
-} from '../../commonDb';
+} from '../../commonDb.js';
 
 let currentSection = '';
 
diff --git a/packages/mermaid/src/diagrams/user-journey/journeyDb.spec.js b/packages/mermaid/src/diagrams/user-journey/journeyDb.spec.js
index 78955c794..c740e40d0 100644
--- a/packages/mermaid/src/diagrams/user-journey/journeyDb.spec.js
+++ b/packages/mermaid/src/diagrams/user-journey/journeyDb.spec.js
@@ -1,5 +1,5 @@
-import journeyDb from './journeyDb';
-import { convert } from '../../tests/util';
+import journeyDb from './journeyDb.js';
+import { convert } from '../../tests/util.js';
 
 describe('when using the journeyDb', function () {
   beforeEach(function () {
diff --git a/packages/mermaid/src/diagrams/user-journey/journeyDetector.ts b/packages/mermaid/src/diagrams/user-journey/journeyDetector.ts
index 90b2fd6e1..0dd488782 100644
--- a/packages/mermaid/src/diagrams/user-journey/journeyDetector.ts
+++ b/packages/mermaid/src/diagrams/user-journey/journeyDetector.ts
@@ -1,4 +1,4 @@
-import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types';
+import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types.js';
 
 const id = 'journey';
 
@@ -7,7 +7,7 @@ const detector: DiagramDetector = (txt) => {
 };
 
 const loader = async () => {
-  const { diagram } = await import('./journeyDiagram');
+  const { diagram } = await import('./journeyDiagram.js');
   return { id, diagram };
 };
 
diff --git a/packages/mermaid/src/diagrams/user-journey/journeyDiagram.ts b/packages/mermaid/src/diagrams/user-journey/journeyDiagram.ts
index c3a2a3c6b..969cf0e5e 100644
--- a/packages/mermaid/src/diagrams/user-journey/journeyDiagram.ts
+++ b/packages/mermaid/src/diagrams/user-journey/journeyDiagram.ts
@@ -1,9 +1,9 @@
-import { DiagramDefinition } from '../../diagram-api/types';
+import { DiagramDefinition } from '../../diagram-api/types.js';
 // @ts-ignore: TODO Fix ts errors
-import parser from './parser/journey';
-import db from './journeyDb';
-import styles from './styles';
-import renderer from './journeyRenderer';
+import parser from './parser/journey.jison';
+import db from './journeyDb.js';
+import styles from './styles.js';
+import renderer from './journeyRenderer.js';
 
 export const diagram: DiagramDefinition = {
   parser,
diff --git a/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts b/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts
index c34f8f5b2..9ea880f69 100644
--- a/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts
+++ b/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts
@@ -1,8 +1,8 @@
 // @ts-nocheck TODO: fix file
 import { select } from 'd3';
-import svgDraw from './svgDraw';
-import { getConfig } from '../../config';
-import { configureSvgSize } from '../../setupGraphViewbox';
+import svgDraw from './svgDraw.js';
+import { getConfig } from '../../config.js';
+import { configureSvgSize } from '../../setupGraphViewbox.js';
 
 export const setConf = function (cnf) {
   const keys = Object.keys(cnf);
diff --git a/packages/mermaid/src/diagrams/user-journey/parser/journey.spec.js b/packages/mermaid/src/diagrams/user-journey/parser/journey.spec.js
index cc54d9f78..9a66572b2 100644
--- a/packages/mermaid/src/diagrams/user-journey/parser/journey.spec.js
+++ b/packages/mermaid/src/diagrams/user-journey/parser/journey.spec.js
@@ -1,5 +1,5 @@
-import { parser } from './journey';
-import journeyDb from '../journeyDb';
+import { parser } from './journey.js';
+import journeyDb from '../journeyDb.js';
 
 const parserFnConstructor = (str) => {
   return () => {
diff --git a/packages/mermaid/src/directiveUtils.ts b/packages/mermaid/src/directiveUtils.ts
index 2d2971a85..563856631 100644
--- a/packages/mermaid/src/directiveUtils.ts
+++ b/packages/mermaid/src/directiveUtils.ts
@@ -1,7 +1,7 @@
-import * as configApi from './config';
+import * as configApi from './config.js';
 
-import { log } from './logger';
-import { directiveSanitizer } from './utils';
+import { log } from './logger.js';
+import { directiveSanitizer } from './utils.js';
 
 let currentDirective: { type?: string; args?: any } | undefined = {};
 
diff --git a/packages/mermaid/src/docs/.vitepress/config.ts b/packages/mermaid/src/docs/.vitepress/config.ts
index 9b01fdbde..ec5154fc4 100644
--- a/packages/mermaid/src/docs/.vitepress/config.ts
+++ b/packages/mermaid/src/docs/.vitepress/config.ts
@@ -1,5 +1,5 @@
 import { version } from '../../../package.json';
-import MermaidExample from './mermaid-markdown-all';
+import MermaidExample from './mermaid-markdown-all.js';
 import { defineConfig, MarkdownOptions } from 'vitepress';
 
 const allMarkdownTransformers: MarkdownOptions = {
diff --git a/packages/mermaid/src/docs/.vitepress/theme/index.ts b/packages/mermaid/src/docs/.vitepress/theme/index.ts
index 273880d91..cc9c92183 100644
--- a/packages/mermaid/src/docs/.vitepress/theme/index.ts
+++ b/packages/mermaid/src/docs/.vitepress/theme/index.ts
@@ -1,8 +1,8 @@
 import DefaultTheme from 'vitepress/theme';
 import './custom.css';
 // @ts-ignore
-import Mermaid from './Mermaid.vue';
-import { getRedirect } from './redirect';
+import Mermaid from './Mermaid.vue.js';
+import { getRedirect } from './redirect.js';
 
 export default {
   ...DefaultTheme,
diff --git a/packages/mermaid/src/docs/.vitepress/theme/redirect.spec.ts b/packages/mermaid/src/docs/.vitepress/theme/redirect.spec.ts
index ec0404264..3d88913d1 100644
--- a/packages/mermaid/src/docs/.vitepress/theme/redirect.spec.ts
+++ b/packages/mermaid/src/docs/.vitepress/theme/redirect.spec.ts
@@ -2,7 +2,7 @@
 // Update https://github.com/mermaid-js/mermaid/blob/18c27c6f1d0537a738cbd95898df301b83c38ffc/packages/mermaid/src/docs.mts#L246 once fixed
 
 import { expect, test } from 'vitest';
-import { getRedirect } from './redirect';
+import { getRedirect } from './redirect.js';
 
 test.each([
   // Old docs, localhost
diff --git a/packages/mermaid/src/docs/vite.config.ts b/packages/mermaid/src/docs/vite.config.ts
index 179e271fd..63d2aa5fa 100644
--- a/packages/mermaid/src/docs/vite.config.ts
+++ b/packages/mermaid/src/docs/vite.config.ts
@@ -1,5 +1,6 @@
 import { defineConfig, type PluginOption, searchForWorkspaceRoot } from 'vite';
 import path from 'path';
+// @ts-expect-error This package has an incorrect export map.
 import { SearchPlugin } from 'vitepress-plugin-search';
 
 const virtualModuleId = 'virtual:mermaid-config';
diff --git a/packages/mermaid/src/mermaid.spec.ts b/packages/mermaid/src/mermaid.spec.ts
index 36490798b..8bd380e62 100644
--- a/packages/mermaid/src/mermaid.spec.ts
+++ b/packages/mermaid/src/mermaid.spec.ts
@@ -1,7 +1,7 @@
-import mermaid from './mermaid';
-import { mermaidAPI } from './mermaidAPI';
+import mermaid from './mermaid.js';
+import { mermaidAPI } from './mermaidAPI.js';
 import './diagram-api/diagram-orchestration';
-import { addDiagrams } from './diagram-api/diagram-orchestration';
+import { addDiagrams } from './diagram-api/diagram-orchestration.js';
 import { beforeAll, describe, it, expect, vi } from 'vitest';
 
 beforeAll(async () => {
diff --git a/packages/mermaid/src/mermaid.ts b/packages/mermaid/src/mermaid.ts
index bd99877b6..bedc4ce8c 100644
--- a/packages/mermaid/src/mermaid.ts
+++ b/packages/mermaid/src/mermaid.ts
@@ -2,21 +2,21 @@
  * Web page integration module for the mermaid framework. It uses the mermaidAPI for mermaid
  * functionality and to render the diagrams to svg code!
  */
-import dedent from 'ts-dedent';
-import { MermaidConfig } from './config.type';
-import { log } from './logger';
-import utils from './utils';
-import { mermaidAPI, ParseOptions, RenderResult } from './mermaidAPI';
+import { dedent } from 'ts-dedent';
+import { MermaidConfig } from './config.type.js';
+import { log } from './logger.js';
+import utils from './utils.js';
+import { mermaidAPI, ParseOptions, RenderResult } from './mermaidAPI.js';
 import {
   registerLazyLoadedDiagrams,
   loadRegisteredDiagrams,
   detectType,
-} from './diagram-api/detectType';
-import type { ParseErrorFunction } from './Diagram';
-import { isDetailedError } from './utils';
-import type { DetailedError } from './utils';
-import { ExternalDiagramDefinition } from './diagram-api/types';
-import { UnknownDiagramError } from './errors';
+} from './diagram-api/detectType.js';
+import type { ParseErrorFunction } from './Diagram.js';
+import { isDetailedError } from './utils.js';
+import type { DetailedError } from './utils.js';
+import { ExternalDiagramDefinition } from './diagram-api/types.js';
+import { UnknownDiagramError } from './errors.js';
 
 export type {
   MermaidConfig,
diff --git a/packages/mermaid/src/mermaidAPI.spec.ts b/packages/mermaid/src/mermaidAPI.spec.ts
index edd2d47bb..48121f36e 100644
--- a/packages/mermaid/src/mermaidAPI.spec.ts
+++ b/packages/mermaid/src/mermaidAPI.spec.ts
@@ -4,14 +4,14 @@ import { vi } from 'vitest';
 // -------------------------------------
 //  Mocks and mocking
 
-import { MockedD3 } from './tests/MockedD3';
+import { MockedD3 } from './tests/MockedD3.js';
 
 // Note: If running this directly from within an IDE, the mocks directory must be at packages/mermaid/mocks
 vi.mock('d3');
 vi.mock('dagre-d3');
 
 // mermaidAPI.spec.ts:
-import * as accessibility from './accessibility'; // Import it this way so we can use spyOn(accessibility,...)
+import * as accessibility from './accessibility.js'; // Import it this way so we can use spyOn(accessibility,...)
 vi.mock('./accessibility', () => ({
   setA11yDiagramInfo: vi.fn(),
   addSVGa11yTitleDescription: vi.fn(),
@@ -33,10 +33,10 @@ vi.mock('./diagrams/state/stateRenderer-v2');
 
 // -------------------------------------
 
-import mermaid from './mermaid';
-import { MermaidConfig } from './config.type';
+import mermaid from './mermaid.js';
+import { MermaidConfig } from './config.type.js';
 
-import mermaidAPI, { removeExistingElements } from './mermaidAPI';
+import mermaidAPI, { removeExistingElements } from './mermaidAPI.js';
 import {
   encodeEntities,
   decodeEntities,
@@ -45,9 +45,9 @@ import {
   appendDivSvgG,
   cleanUpSvgCode,
   putIntoIFrame,
-} from './mermaidAPI';
+} from './mermaidAPI.js';
 
-import assignWithDepth from './assignWithDepth';
+import assignWithDepth from './assignWithDepth.js';
 
 // --------------
 // Mocks
@@ -58,7 +58,7 @@ vi.mock('./styles', () => {
     default: vi.fn().mockReturnValue(' .userStyle { font-weight:bold; }'),
   };
 });
-import getStyles from './styles';
+import getStyles from './styles.js';
 
 vi.mock('stylis', () => {
   return {
diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts
index 1b440672a..0b9792837 100644
--- a/packages/mermaid/src/mermaidAPI.ts
+++ b/packages/mermaid/src/mermaidAPI.ts
@@ -15,21 +15,21 @@ import { select } from 'd3';
 import { compile, serialize, stringify } from 'stylis';
 // @ts-ignore: TODO Fix ts errors
 import { version } from '../package.json';
-import * as configApi from './config';
-import { addDiagrams } from './diagram-api/diagram-orchestration';
-import { Diagram, getDiagramFromText } from './Diagram';
-import errorRenderer from './diagrams/error/errorRenderer';
-import { attachFunctions } from './interactionDb';
-import { log, setLogLevel } from './logger';
-import getStyles from './styles';
-import theme from './themes';
-import utils, { directiveSanitizer } from './utils';
+import * as configApi from './config.js';
+import { addDiagrams } from './diagram-api/diagram-orchestration.js';
+import { Diagram, getDiagramFromText } from './Diagram.js';
+import errorRenderer from './diagrams/error/errorRenderer.js';
+import { attachFunctions } from './interactionDb.js';
+import { log, setLogLevel } from './logger.js';
+import getStyles from './styles.js';
+import theme from './themes/index.js';
+import utils, { directiveSanitizer } from './utils.js';
 import DOMPurify from 'dompurify';
-import { MermaidConfig } from './config.type';
-import { evaluate } from './diagrams/common/common';
+import { MermaidConfig } from './config.type.js';
+import { evaluate } from './diagrams/common/common.js';
 import isEmpty from 'lodash-es/isEmpty.js';
-import { setA11yDiagramInfo, addSVGa11yTitleDescription } from './accessibility';
-import { parseDirective } from './directiveUtils';
+import { setA11yDiagramInfo, addSVGa11yTitleDescription } from './accessibility.js';
+import { parseDirective } from './directiveUtils.js';
 
 // diagram names that support classDef statements
 const CLASSDEF_DIAGRAMS = ['graph', 'flowchart', 'flowchart-v2', 'stateDiagram', 'stateDiagram-v2'];
@@ -204,6 +204,7 @@ export const createCssStyles = (
   }
 
   // classDefs defined in the diagram text
+  // @ts-expect-error https://github.com/DefinitelyTyped/DefinitelyTyped/pull/64684
   if (!isEmpty(classDefs) && CLASSDEF_DIAGRAMS.includes(graphType)) {
     const htmlLabels = config.htmlLabels || config.flowchart?.htmlLabels; // TODO why specifically check the Flowchart diagram config?
 
@@ -216,12 +217,14 @@ export const createCssStyles = (
     for (const classId in classDefs) {
       const styleClassDef = classDefs[classId];
       // create the css styles for each cssElement and the styles (only if there are styles)
+      // @ts-expect-error https://github.com/DefinitelyTyped/DefinitelyTyped/pull/64684
       if (!isEmpty(styleClassDef.styles)) {
         cssElements.forEach((cssElement) => {
           cssStyles += cssImportantStyles(styleClassDef.id, cssElement, styleClassDef.styles);
         });
       }
       // create the css styles for the tspan element and the text styles (only if there are textStyles)
+      // @ts-expect-error https://github.com/DefinitelyTyped/DefinitelyTyped/pull/64684
       if (!isEmpty(styleClassDef.textStyles)) {
         cssStyles += cssImportantStyles(styleClassDef.id, 'tspan', styleClassDef.textStyles);
       }
diff --git a/packages/mermaid/src/setupGraphViewbox.js b/packages/mermaid/src/setupGraphViewbox.js
index 14929d3d7..c4aeeceea 100644
--- a/packages/mermaid/src/setupGraphViewbox.js
+++ b/packages/mermaid/src/setupGraphViewbox.js
@@ -1,4 +1,4 @@
-import { log } from './logger';
+import { log } from './logger.js';
 
 /**
  * Applies d3 attributes
diff --git a/packages/mermaid/src/setupGraphViewbox.spec.js b/packages/mermaid/src/setupGraphViewbox.spec.js
index 6b5c3e210..36154e2df 100644
--- a/packages/mermaid/src/setupGraphViewbox.spec.js
+++ b/packages/mermaid/src/setupGraphViewbox.spec.js
@@ -1,8 +1,8 @@
-import utils from './utils';
-import assignWithDepth from './assignWithDepth';
-import { detectType } from './diagram-api/detectType';
-import { addDiagrams } from './diagram-api/diagram-orchestration';
-import { calculateSvgSizeAttrs } from './setupGraphViewbox';
+import utils from './utils.js';
+import assignWithDepth from './assignWithDepth.js';
+import { detectType } from './diagram-api/detectType.js';
+import { addDiagrams } from './diagram-api/diagram-orchestration.js';
+import { calculateSvgSizeAttrs } from './setupGraphViewbox.js';
 addDiagrams();
 
 describe('when calculating SVG size', function () {
diff --git a/packages/mermaid/src/styles.ts b/packages/mermaid/src/styles.ts
index 588c26cb1..a6e752475 100644
--- a/packages/mermaid/src/styles.ts
+++ b/packages/mermaid/src/styles.ts
@@ -1,5 +1,5 @@
-import type { FlowChartStyleOptions } from './diagrams/flowchart/styles';
-import { log } from './logger';
+import type { FlowChartStyleOptions } from './diagrams/flowchart/styles.js';
+import { log } from './logger.js';
 
 const themes: Record<string, any> = {};
 
diff --git a/packages/mermaid/src/tests/MockedD3.ts b/packages/mermaid/src/tests/MockedD3.ts
index ccf21a269..6d8d721e0 100644
--- a/packages/mermaid/src/tests/MockedD3.ts
+++ b/packages/mermaid/src/tests/MockedD3.ts
@@ -1,4 +1,4 @@
-import type {} from '@vitest/spy/dist/index';
+import type {} from '@vitest/spy/dist/index.js';
 
 /**
  * This is a mocked/stubbed version of the d3 Selection type. Each of the main functions are all
diff --git a/packages/mermaid/src/themes/index.js b/packages/mermaid/src/themes/index.js
index 94e2b95a4..6ffe6274d 100644
--- a/packages/mermaid/src/themes/index.js
+++ b/packages/mermaid/src/themes/index.js
@@ -1,8 +1,8 @@
-import { getThemeVariables as baseThemeVariables } from './theme-base';
-import { getThemeVariables as darkThemeVariables } from './theme-dark';
-import { getThemeVariables as defaultThemeVariables } from './theme-default';
-import { getThemeVariables as forestThemeVariables } from './theme-forest';
-import { getThemeVariables as neutralThemeVariables } from './theme-neutral';
+import { getThemeVariables as baseThemeVariables } from './theme-base.js';
+import { getThemeVariables as darkThemeVariables } from './theme-dark.js';
+import { getThemeVariables as defaultThemeVariables } from './theme-default.js';
+import { getThemeVariables as forestThemeVariables } from './theme-forest.js';
+import { getThemeVariables as neutralThemeVariables } from './theme-neutral.js';
 
 export default {
   base: {
diff --git a/packages/mermaid/src/themes/theme-base.js b/packages/mermaid/src/themes/theme-base.js
index 01f8a9c0b..b70ea8294 100644
--- a/packages/mermaid/src/themes/theme-base.js
+++ b/packages/mermaid/src/themes/theme-base.js
@@ -1,9 +1,9 @@
 import { darken, lighten, adjust, invert } from 'khroma';
-import { mkBorder } from './theme-helpers';
+import { mkBorder } from './theme-helpers.js';
 import {
   oldAttributeBackgroundColorEven,
   oldAttributeBackgroundColorOdd,
-} from './erDiagram-oldHardcodedValues';
+} from './erDiagram-oldHardcodedValues.js';
 
 class Theme {
   constructor() {
diff --git a/packages/mermaid/src/themes/theme-dark.js b/packages/mermaid/src/themes/theme-dark.js
index 9585a2e27..a645847e0 100644
--- a/packages/mermaid/src/themes/theme-dark.js
+++ b/packages/mermaid/src/themes/theme-dark.js
@@ -1,5 +1,5 @@
 import { invert, lighten, darken, rgba, adjust } from 'khroma';
-import { mkBorder } from './theme-helpers';
+import { mkBorder } from './theme-helpers.js';
 
 class Theme {
   constructor() {
diff --git a/packages/mermaid/src/themes/theme-default.js b/packages/mermaid/src/themes/theme-default.js
index c91029de3..1215f2c50 100644
--- a/packages/mermaid/src/themes/theme-default.js
+++ b/packages/mermaid/src/themes/theme-default.js
@@ -1,9 +1,9 @@
 import { invert, lighten, rgba, adjust, darken } from 'khroma';
-import { mkBorder } from './theme-helpers';
+import { mkBorder } from './theme-helpers.js';
 import {
   oldAttributeBackgroundColorEven,
   oldAttributeBackgroundColorOdd,
-} from './erDiagram-oldHardcodedValues';
+} from './erDiagram-oldHardcodedValues.js';
 
 class Theme {
   constructor() {
diff --git a/packages/mermaid/src/themes/theme-forest.js b/packages/mermaid/src/themes/theme-forest.js
index 96d6c35c1..2ba0a8333 100644
--- a/packages/mermaid/src/themes/theme-forest.js
+++ b/packages/mermaid/src/themes/theme-forest.js
@@ -1,9 +1,9 @@
 import { darken, lighten, adjust, invert } from 'khroma';
-import { mkBorder } from './theme-helpers';
+import { mkBorder } from './theme-helpers.js';
 import {
   oldAttributeBackgroundColorEven,
   oldAttributeBackgroundColorOdd,
-} from './erDiagram-oldHardcodedValues';
+} from './erDiagram-oldHardcodedValues.js';
 
 class Theme {
   constructor() {
diff --git a/packages/mermaid/src/themes/theme-neutral.js b/packages/mermaid/src/themes/theme-neutral.js
index 8bb5ff693..8184c0170 100644
--- a/packages/mermaid/src/themes/theme-neutral.js
+++ b/packages/mermaid/src/themes/theme-neutral.js
@@ -1,9 +1,9 @@
 import { invert, darken, lighten, adjust } from 'khroma';
-import { mkBorder } from './theme-helpers';
+import { mkBorder } from './theme-helpers.js';
 import {
   oldAttributeBackgroundColorEven,
   oldAttributeBackgroundColorOdd,
-} from './erDiagram-oldHardcodedValues';
+} from './erDiagram-oldHardcodedValues.js';
 
 // const Color = require ( 'khroma/dist/color' ).default
 // Color.format.hex.stringify(Color.parse('hsl(210, 66.6666666667%, 95%)')); // => "#EAF2FB"
diff --git a/packages/mermaid/src/utils.spec.js b/packages/mermaid/src/utils.spec.js
index 0f0bc1e92..ae3234cb9 100644
--- a/packages/mermaid/src/utils.spec.js
+++ b/packages/mermaid/src/utils.spec.js
@@ -1,10 +1,10 @@
 import { vi } from 'vitest';
-import utils from './utils';
-import assignWithDepth from './assignWithDepth';
-import { detectType } from './diagram-api/detectType';
-import { addDiagrams } from './diagram-api/diagram-orchestration';
+import utils from './utils.js';
+import assignWithDepth from './assignWithDepth.js';
+import { detectType } from './diagram-api/detectType.js';
+import { addDiagrams } from './diagram-api/diagram-orchestration.js';
 import memoize from 'lodash-es/memoize.js';
-import { MockedD3 } from './tests/MockedD3';
+import { MockedD3 } from './tests/MockedD3.js';
 
 addDiagrams();
 
diff --git a/packages/mermaid/src/utils.ts b/packages/mermaid/src/utils.ts
index 0c4b9d1a8..6f824062d 100644
--- a/packages/mermaid/src/utils.ts
+++ b/packages/mermaid/src/utils.ts
@@ -24,12 +24,12 @@ import {
   curveStepBefore,
   select,
 } from 'd3';
-import common from './diagrams/common/common';
-import { configKeys } from './defaultConfig';
-import { log } from './logger';
-import { detectType } from './diagram-api/detectType';
-import assignWithDepth from './assignWithDepth';
-import { MermaidConfig } from './config.type';
+import common from './diagrams/common/common.js';
+import { configKeys } from './defaultConfig.js';
+import { log } from './logger.js';
+import { detectType } from './diagram-api/detectType.js';
+import assignWithDepth from './assignWithDepth.js';
+import { MermaidConfig } from './config.type.js';
 import memoize from 'lodash-es/memoize.js';
 
 // Effectively an enum of the supported curve types, accessible by name
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a7a3a68e4..af18cde76 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -16,6 +16,9 @@ importers:
       '@cspell/eslint-plugin':
         specifier: ^6.14.2
         version: 6.14.2
+      '@rollup/plugin-typescript':
+        specifier: ^11.0.0
+        version: 11.0.0_typescript@4.8.4
       '@types/cors':
         specifier: ^2.8.13
         version: 2.8.13
@@ -2506,6 +2509,38 @@ packages:
     resolution: {integrity: sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==}
     dev: true
 
+  /@rollup/plugin-typescript/11.0.0_typescript@4.8.4:
+    resolution: {integrity: sha512-goPyCWBiimk1iJgSTgsehFD5OOFHiAknrRJjqFCudcW8JtWiBlK284Xnn4flqMqg6YAjVG/EE+3aVzrL5qNSzQ==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^2.14.0||^3.0.0
+      tslib: '*'
+      typescript: '>=3.7.0'
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+      tslib:
+        optional: true
+    dependencies:
+      '@rollup/pluginutils': 5.0.2
+      resolve: 1.22.1
+      typescript: 4.8.4
+    dev: true
+
+  /@rollup/pluginutils/5.0.2:
+    resolution: {integrity: sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0||^3.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+    dependencies:
+      '@types/estree': 1.0.0
+      estree-walker: 2.0.2
+      picomatch: 2.3.1
+    dev: true
+
   /@sideway/address/4.1.4:
     resolution: {integrity: sha512-7vwq+rOHVWjyXxVlR76Agnvhy8I9rpzjosTESvmhNeXOXdZZB15Fl+TI9x1SiHZH5Jv2wTGduSxFDIaq0m3DUw==}
     dependencies:
diff --git a/tsconfig.json b/tsconfig.json
index c66d62784..29c790cbb 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -27,9 +27,8 @@
     // "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */
 
     /* Modules */
-    "module": "es2022" /* Specify what module code is generated. */,
+    "module": "nodenext",
     // "rootDir": "./packages" /* Specify the root folder within your source files. */,
-    "moduleResolution": "node" /* Specify how TypeScript looks up a file from a given module specifier. */,
     // "baseUrl": "./src" /* Specify the base directory to resolve non-relative module names. */,
     // "paths": {} /* Specify a set of entries that re-map imports to additional lookup locations. */,
     // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
diff --git a/vite.config.ts b/vite.config.ts
index e79295425..ec6cf3fd3 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,9 +1,9 @@
-import jison from './.vite/jisonPlugin';
+import jison from './.vite/jisonPlugin.js';
 import { defineConfig } from 'vitest/config';
 
 export default defineConfig({
   resolve: {
-    extensions: ['.jison', '.js', '.ts', '.json'],
+    extensions: [],
   },
   plugins: [jison()],
   test: {