diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index e6f99a8bf9c..816683a17c6 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -72,7 +72,15 @@ module.exports = {
       },
     ],
     'no-only-tests/no-only-tests': 'error',
-    'lodash/import-scope': ['error', 'method'],
+    'lodash/import-scope': [
+      /**
+       * Use `import {xxx} from 'lodash-es'`, due to TypeScript issues.
+       *
+       * Thanks to the magic of ESM, this is exactly the same as `import xxx from 'lodash-es/xxx'`
+       */
+      'error',
+      'member',
+    ],
     'unicorn/better-regex': 'error',
     'unicorn/no-abusive-eslint-disable': 'error',
     'unicorn/no-array-push-push': 'error',
diff --git a/__mocks__/d3.ts b/__mocks__/d3.ts
index af35020c574..9b8a8fd3549 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.ts';
 
 export const select = function () {
   return new MockedD3();
diff --git a/docs/community/newDiagram.md b/docs/community/newDiagram.md
index bb7e2a96159..c22705839dd 100644
--- a/docs/community/newDiagram.md
+++ b/docs/community/newDiagram.md
@@ -223,7 +223,7 @@ The functions for setting title and description are provided by a common module.
       getAccDescription,
       setAccDescription,
       clear as commonClear,
-    } from '../../commonDb';
+    } from '../../commonDb.ts';
 
 The accessibility title and description are inserted into the SVG element in the `render` function in mermaidAPI.
 
diff --git a/package.json b/package.json
index 89de9594987..be37d0bccd2 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
     "build:vite": "ts-node-esm --transpileOnly .vite/build.ts",
     "build:mermaid": "pnpm build:vite --mermaid",
     "build:viz": "pnpm build:mermaid --visualize",
-    "build:types": "tsc -p ./packages/mermaid/tsconfig.json --emitDeclarationOnly && tsc -p ./packages/mermaid-example-diagram/tsconfig.json --emitDeclarationOnly",
+    "build:types": "tsc -p ./packages/mermaid/tsconfig.json && tsc -p ./packages/mermaid-example-diagram/tsconfig.json",
     "build:watch": "pnpm build:vite --watch",
     "build": "pnpm run -r clean && pnpm build:types && pnpm build:vite",
     "dev": "concurrently \"pnpm build:vite --watch\" \"ts-node-esm .vite/server.ts\"",
@@ -107,7 +107,7 @@
     "rollup-plugin-visualizer": "^5.8.3",
     "start-server-and-test": "^1.15.4",
     "ts-node": "^10.9.1",
-    "typescript": "^4.8.4",
+    "typescript": "^5.0.1-rc",
     "vite": "^4.1.1",
     "vitest": "^0.29.0"
   },
diff --git a/packages/mermaid-example-diagram/src/diagram-definition.ts b/packages/mermaid-example-diagram/src/diagram-definition.ts
index c31b3d6e712..d36a3b43ec5 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.ts';
 
 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 96c8cd5b262..370d8eef1d0 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.jison';
+import * as db from './exampleDiagramDb.js';
+import { injectUtils } from './mermaidUtils.ts';
 // 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.ts';
 
 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 8429ec5d6d9..2643e951c5a 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.ts';
 
 var message = '';
 var info = false;
diff --git a/packages/mermaid-example-diagram/src/exampleDiagramRenderer.js b/packages/mermaid-example-diagram/src/exampleDiagramRenderer.js
index 0d73406778e..a0060b71ac1 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.ts';
 
 /**
  * Draws a an info picture in the tag with id: id based on the graph definition in text.
diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json
index e40912c2959..457979a0286 100644
--- a/packages/mermaid/package.json
+++ b/packages/mermaid/package.json
@@ -100,7 +100,7 @@
     "start-server-and-test": "^1.14.0",
     "typedoc": "^0.23.18",
     "typedoc-plugin-markdown": "^3.13.6",
-    "typescript": "^4.8.4",
+    "typescript": "^5.0.1-rc",
     "unist-util-flatmap": "^1.0.0",
     "vitepress": "^1.0.0-alpha.46",
     "vitepress-plugin-search": "^1.0.4-alpha.19"
diff --git a/packages/mermaid/src/Diagram.ts b/packages/mermaid/src/Diagram.ts
index 3010ce13028..3a3933e889a 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.ts';
+import { log } from './logger.ts';
+import { getDiagram, registerDiagram } from './diagram-api/diagramAPI.ts';
+import { detectType, getDiagramLoader } from './diagram-api/detectType.ts';
+import { extractFrontMatter } from './diagram-api/frontmatter.ts';
+import { UnknownDiagramError } from './errors.ts';
+import { DetailedError } from './utils.ts';
 
 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 95b87d990db..a4f0e4dc75b 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.ts';
 import { vi } from 'vitest';
-import { mermaidAPI as mAPI } from '../mermaidAPI';
+import { mermaidAPI as mAPI } from '../mermaidAPI.ts';
 
 // 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 60415ea3749..2f75c3a69a1 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.ts';
+import { setA11yDiagramInfo, addSVGa11yTitleDescription } from './accessibility.ts';
+import { D3Element } from './mermaidAPI.ts';
 
 describe('accessibility', () => {
   const fauxSvgNode = new MockedD3();
diff --git a/packages/mermaid/src/accessibility.ts b/packages/mermaid/src/accessibility.ts
index 8e073aa76f2..feefe209822 100644
--- a/packages/mermaid/src/accessibility.ts
+++ b/packages/mermaid/src/accessibility.ts
@@ -5,9 +5,9 @@
  * @see https://www.w3.org/TR/svg-aam-1.0/
  *
  */
-import { D3Element } from './mermaidAPI';
+import { D3Element } from './mermaidAPI.ts';
 
-import isEmpty from 'lodash-es/isEmpty.js';
+import { isEmpty } from 'lodash-es';
 
 /**
  * SVG element role:
diff --git a/packages/mermaid/src/commonDb.ts b/packages/mermaid/src/commonDb.ts
index 42ffde0044e..1c25742dd14 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.ts';
+import { getConfig } from './config.ts';
 let title = '';
 let diagramTitle = '';
 let description = '';
diff --git a/packages/mermaid/src/config.spec.js b/packages/mermaid/src/config.spec.js
index b104f37ccd1..1ae88fafe60 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.ts';
 
 describe('when working with site config', function () {
   beforeEach(() => {
diff --git a/packages/mermaid/src/config.ts b/packages/mermaid/src/config.ts
index bc0066cec39..d52ccc60632 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.ts';
+import theme from './themes/index.js';
+import config from './defaultConfig.js';
+import type { MermaidConfig } from './config.type.ts';
 
 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 57c3ff51380..5dadc31f8f9 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.ts';
+import createLabel from './createLabel.js';
 import { select } from 'd3';
-import { getConfig } from '../config';
-import { evaluate } from '../diagrams/common/common';
+import { getConfig } from '../config.ts';
+import { evaluate } from '../diagrams/common/common.ts';
 
 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 af5032096b8..f7883244c80 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.ts';
+import { getConfig } from '../config.ts';
+import { evaluate } from '../diagrams/common/common.ts';
+import { decodeEntities } from '../mermaidAPI.ts';
 
 /**
  * @param dom
diff --git a/packages/mermaid/src/dagre-wrapper/edges.js b/packages/mermaid/src/dagre-wrapper/edges.js
index f8c113694fe..02acb9f98f9 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.ts';
+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.ts';
+import utils from '../utils.ts';
+import { evaluate } from '../diagrams/common/common.ts';
 
 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 627691a8e5c..93302e68d33 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.ts';
 
 describe('Graphlib decorations', () => {
   let node;
diff --git a/packages/mermaid/src/dagre-wrapper/index.js b/packages/mermaid/src/dagre-wrapper/index.js
index ce3ef6014a3..59b872941ef 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.ts';
 
 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.js b/packages/mermaid/src/dagre-wrapper/intersect.js
index 41bcb5a532f..20bc777edfb 100644
--- a/packages/mermaid/src/dagre-wrapper/intersect.js
+++ b/packages/mermaid/src/dagre-wrapper/intersect.js
@@ -1,7 +1,7 @@
 module.exports = {
-  node: require('./intersect-node'),
-  circle: require('./intersect-circle'),
-  ellipse: require('./intersect-ellipse'),
-  polygon: require('./intersect-polygon'),
-  rect: require('./intersect-rect'),
+  node: require('./intersect-node.js'),
+  circle: require('./intersect-circle.js'),
+  ellipse: require('./intersect-ellipse.js'),
+  polygon: require('./intersect-polygon.js'),
+  rect: require('./intersect-rect.js'),
 };
diff --git a/packages/mermaid/src/dagre-wrapper/intersect/intersect-circle.js b/packages/mermaid/src/dagre-wrapper/intersect/intersect-circle.js
index c4d320426c4..8f5ba72dfc1 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 cd124150fc9..6941372c7d6 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 1a3f74bee67..8bd398734f7 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.ts';
 
 // 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 875ac4deff1..c75e04eac33 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.ts';
 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 25fb75d6431..196d74c0b8d 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.ts';
 
 describe('Graphlib decorations', () => {
   let g;
diff --git a/packages/mermaid/src/dagre-wrapper/nodes.js b/packages/mermaid/src/dagre-wrapper/nodes.js
index 49b96b685a9..7c2ddfa51d8 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.ts';
+import { labelHelper, updateNodeBounds, insertPolygonShape } from './shapes/util.js';
+import { getConfig } from '../config.ts';
 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.ts';
 
 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 75afa8bcc08..49f0014ff50 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.ts';
 
 // 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 6b693fdf6a2..485c3b301ab 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.ts';
 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 6de0da63828..4ee2c281ac9 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.ts';
+import { decodeEntities } from '../../mermaidAPI.ts';
 import { select } from 'd3';
-import { evaluate, sanitizeText } from '../../diagrams/common/common';
+import { evaluate, sanitizeText } from '../../diagrams/common/common.ts';
 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 666efc3649f..68ef0f00a12 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.ts';
 /**
  * **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 0d26487cfe8..b2e30a1b718 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.ts';
+import { log } from '../logger.ts';
 import type {
   DetectorRecord,
   DiagramDetector,
   DiagramLoader,
   ExternalDiagramDefinition,
-} from './types';
-import { frontMatterRegex } from './frontmatter';
-import { getDiagram, registerDiagram } from './diagramAPI';
-import { UnknownDiagramError } from '../errors';
+} from './types.ts';
+import { frontMatterRegex } from './frontmatter.ts';
+import { getDiagram, registerDiagram } from './diagramAPI.ts';
+import { UnknownDiagramError } from '../errors.ts';
 
 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 81909fe5ed5..c4b0c1c03cc 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.ts';
+import { addDiagrams } from './diagram-orchestration.ts';
 
 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 73bfcf084d0..94e8e24b66d 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.ts';
+import { registerDiagram } from './diagramAPI.ts';
 
 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 4bdcc5e3916..24c79d7b9bb 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.ts';
+import { getDiagram, registerDiagram } from './diagramAPI.ts';
+import { addDiagrams } from './diagram-orchestration.ts';
+import { DiagramDetector } from './types.ts';
+import { getDiagramFromText } from '../Diagram.ts';
 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 c5841b96bd2..4a5e2b5c7a0 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.ts';
+import { log as _log, setLogLevel as _setLogLevel } from '../logger.ts';
+import { getConfig as _getConfig } from '../config.ts';
+import { sanitizeText as _sanitizeText } from '../diagrams/common/common.ts';
+import { setupGraphViewbox as _setupGraphViewbox } from '../setupGraphViewbox.js';
+import { addStylesForDiagram } from '../styles.ts';
+import { DiagramDefinition, DiagramDetector } from './types.ts';
+import * as _commonDb from '../commonDb.ts';
+import { parseDirective as _parseDirective } from '../directiveUtils.ts';
 
 /*
   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 4eb9789e2bc..ef9a3e7ff09 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.ts';
 
 const dbMock = () => ({ setDiagramTitle: vi.fn() });
 
diff --git a/packages/mermaid/src/diagram-api/frontmatter.ts b/packages/mermaid/src/diagram-api/frontmatter.ts
index d6811388c13..89fc59ce197 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.ts';
 // 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 08113656386..66db665a3e4 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.ts';
 
 export interface InjectUtils {
   _log: any;
diff --git a/packages/mermaid/src/diagram.spec.ts b/packages/mermaid/src/diagram.spec.ts
index 5a4718d0bdc..204c2da171a 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.ts';
+import { addDetector } from './diagram-api/detectType.ts';
+import { addDiagrams } from './diagram-api/diagram-orchestration.ts';
 
 addDiagrams();
 
diff --git a/packages/mermaid/src/diagrams/c4/c4Db.js b/packages/mermaid/src/diagrams/c4/c4Db.js
index d337b15c0de..f807996512d 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.ts';
+import * as configApi from '../../config.ts';
+import { sanitizeText } from '../common/common.ts';
+import { setAccTitle, getAccTitle, getAccDescription, setAccDescription } from '../../commonDb.ts';
 
 let c4ShapeArray = [];
 let boundaryParseStack = [''];
diff --git a/packages/mermaid/src/diagrams/c4/c4Detector.ts b/packages/mermaid/src/diagrams/c4/c4Detector.ts
index 08b8bbf55d9..7d2879b927c 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.ts';
 
 const id = 'c4';
 
@@ -7,7 +7,7 @@ const detector = (txt: string) => {
 };
 
 const loader = async () => {
-  const { diagram } = await import('./c4Diagram');
+  const { diagram } = await import('./c4Diagram.ts');
   return { id, diagram };
 };
 
diff --git a/packages/mermaid/src/diagrams/c4/c4Diagram.ts b/packages/mermaid/src/diagrams/c4/c4Diagram.ts
index 6f8f25db2c0..7232947a613 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.ts';
+import { DiagramDefinition } from '../../diagram-api/types.ts';
 
 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 a51fe0b6afa..b5c08d60989 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.ts';
+import { parser } from './parser/c4Diagram.jison';
+import common from '../common/common.ts';
+import c4Db from './c4Db.js';
+import * as configApi from '../../config.ts';
+import assignWithDepth from '../../assignWithDepth.js';
+import { wrapLabel, calculateTextWidth, calculateTextHeight } from '../../utils.ts';
+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 c7130f5579f..835805e321b 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.ts';
 
 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 b79934b8469..037d150472b 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.ts';
 
 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 b504c0384aa..abff2be7ca4 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.ts';
 
 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 76547600afe..6c1afb0e47f 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.ts';
 
 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 6d81c737999..5d6469513f4 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.ts';
 
 setConfig({
   securityLevel: 'strict',
diff --git a/packages/mermaid/src/diagrams/c4/svgDraw.js b/packages/mermaid/src/diagrams/c4/svgDraw.js
index 690dd26ad16..6cdd521fee7 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.ts';
 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 48ef7ccbedd..db358491f1b 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.ts';
+import * as configApi from '../../config.ts';
+import common from '../common/common.ts';
+import utils from '../../utils.ts';
+import mermaidAPI from '../../mermaidAPI.ts';
 import {
   setAccTitle,
   getAccTitle,
@@ -13,8 +13,8 @@ import {
   clear as commonClear,
   setDiagramTitle,
   getDiagramTitle,
-} from '../../commonDb';
-import { ClassRelation, ClassNode, ClassNote, ClassMap } from './classTypes';
+} from '../../commonDb.ts';
+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 1d42557193c..ed17c420ac4 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.ts';
 
 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 ef8ea61e763..a8282224618 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.ts';
 
 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.ts');
   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 702fa3ac3c6..761b4c7d8e4 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.jison';
+import classDb from './classDb.ts';
 
 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 2f0bbf371ac..02a15ae3ee5 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.ts';
+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 24fbc41ea30..b4b3f07e49d 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.jison';
+import classDb from './classDb.ts';
 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 250d04176f5..7bf73b26455 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.ts';
 // @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.ts';
+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 e308990c601..6d81a382ce5 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.ts';
+import { getConfig } from '../../config.ts';
 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.ts';
+import { interpolateToCurve, getStylesFromArray } from '../../utils.ts';
+import { setupGraphViewbox } from '../../setupGraphViewbox.js';
+import common from '../common/common.ts';
+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 80a7f26e461..b272d20cb7c 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.ts';
+import svgDraw from './svgDraw.js';
+import { configureSvgSize } from '../../setupGraphViewbox.js';
+import { getConfig } from '../../config.ts';
 
 let idCache = {};
 const padding = 20;
diff --git a/packages/mermaid/src/diagrams/class/svgDraw.js b/packages/mermaid/src/diagrams/class/svgDraw.js
index cc6909280f3..820591a9fc6 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.ts';
+import { log } from '../../logger.ts';
+import { parseGenericTypes } from '../common/common.ts';
 
 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 ec8785559d9..2e7c64fa0a5 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 8fd6229da90..acfc1f2385e 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.ts';
 
 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 d34a2df685d..ba85cb0693a 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.ts';
 
 /**
  * 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 026e0842040..44e8497b8dc 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.ts';
+import mermaidAPI from '../../mermaidAPI.ts';
+import * as configApi from '../../config.ts';
 
 import {
   setAccTitle,
@@ -10,7 +10,7 @@ import {
   clear as commonClear,
   setDiagramTitle,
   getDiagramTitle,
-} from '../../commonDb';
+} from '../../commonDb.ts';
 
 let entities = {};
 let relationships = [];
diff --git a/packages/mermaid/src/diagrams/er/erDetector.ts b/packages/mermaid/src/diagrams/er/erDetector.ts
index f73baa43450..e6938f9b4e1 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.ts';
 
 const id = 'er';
 
@@ -7,7 +7,7 @@ const detector: DiagramDetector = (txt) => {
 };
 
 const loader = async () => {
-  const { diagram } = await import('./erDiagram');
+  const { diagram } = await import('./erDiagram.ts');
   return { id, diagram };
 };
 
diff --git a/packages/mermaid/src/diagrams/er/erDiagram.ts b/packages/mermaid/src/diagrams/er/erDiagram.ts
index a5b0da9c151..da3d777ad07 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 5dd5024bb92..752d245203e 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.ts';
+import { log } from '../../logger.ts';
+import utils from '../../utils.ts';
+import erMarkers from './erMarkers.js';
+import { configureSvgSize } from '../../setupGraphViewbox.js';
+import { parseGenericTypes } from '../common/common.ts';
 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 ca0f62bd288..0cba06b56ae 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 ca497a2ac26..9e2b3f1da76 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.ts';
+import erDb from '../erDb.js';
+import erDiagram from './erDiagram.jison';
 
 setConfig({
   securityLevel: 'strict',
diff --git a/packages/mermaid/src/diagrams/error/errorDetector.ts b/packages/mermaid/src/diagrams/error/errorDetector.ts
index 2bdcd702837..110dcf3e595 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.ts';
 
 const id = 'error';
 
@@ -7,7 +7,7 @@ const detector: DiagramDetector = (text) => {
 };
 
 const loader = async () => {
-  const { diagram } = await import('./errorDiagram');
+  const { diagram } = await import('./errorDiagram.ts');
   return { id, diagram };
 };
 
diff --git a/packages/mermaid/src/diagrams/error/errorDiagram.ts b/packages/mermaid/src/diagrams/error/errorDiagram.ts
index d081e10287e..4f9ecc658a7 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.ts';
+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 60877cb8d00..a2f30aa0c75 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.ts';
+import { getErrorMessage } from '../../utils.ts';
 
 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 17cd5c0eae4..6e949c57b99 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 c6fa7795743..8bc47ad81c4 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.ts';
+import type { ExternalDiagramDefinition, DiagramDetector } from '../../../diagram-api/types.ts';
 
 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 426d22dbbc1..da4148f146b 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.ts';
 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.ts';
+import { log } from '../../../logger.ts';
+import { setupGraphViewbox } from '../../../setupGraphViewbox.js';
+import common, { evaluate } from '../../common/common.ts';
+import { interpolateToCurve, getStylesFromArray } from '../../../utils.ts';
 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 c45873238da..eebf1c82e6a 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.ts';
 
 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 d845fa69748..375b1db9b18 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.ts';
 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 e7e535056b4..96e6f6fd71b 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 31196ba9647..9aeee7a3a5f 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.ts';
+import * as configApi from '../../config.ts';
+import common from '../common/common.ts';
+import mermaidAPI from '../../mermaidAPI.ts';
+import { log } from '../../logger.ts';
 import {
   setAccTitle,
   getAccTitle,
@@ -12,7 +12,7 @@ import {
   clear as commonClear,
   setDiagramTitle,
   getDiagramTitle,
-} from '../../commonDb';
+} from '../../commonDb.ts';
 
 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 c1aa640fcd7..09f8c8678d4 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 5b2aaf1bd11..130728d721e 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.ts';
+import type { ExternalDiagramDefinition } from '../../diagram-api/types.ts';
 
 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 a8b116ccd38..8bd409097ac 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.ts';
 
 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.ts');
   return { id, diagram };
 };
 
diff --git a/packages/mermaid/src/diagrams/flowchart/flowDiagram-v2.ts b/packages/mermaid/src/diagrams/flowchart/flowDiagram-v2.ts
index 8cd49de65a1..6f8a819f246 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.ts';
+import { MermaidConfig } from '../../config.type.ts';
+import { setConfig } from '../../config.ts';
 
 export const diagram = {
   parser: flowParser,
diff --git a/packages/mermaid/src/diagrams/flowchart/flowDiagram.ts b/packages/mermaid/src/diagrams/flowchart/flowDiagram.ts
index d68a7c01dfb..ef60f731d59 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.ts';
+import { MermaidConfig } from '../../config.type.ts';
 
 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 2d3e21a44b3..8bcb3b217d1 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.ts';
+import utils from '../../utils.ts';
 
 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.ts';
+import common, { evaluate } from '../common/common.ts';
+import { interpolateToCurve, getStylesFromArray } from '../../utils.ts';
+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 7744053f0f8..bdf690f1585 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.jison';
+import flowRenderer from './flowRenderer.js';
+import { addDiagrams } from '../../diagram-api/diagram-orchestration.ts';
 
 const diag = {
   db: flowDb,
diff --git a/packages/mermaid/src/diagrams/flowchart/flowRenderer.js b/packages/mermaid/src/diagrams/flowchart/flowRenderer.js
index 63234b57cc1..a2e5f30f93b 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.ts';
 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.ts';
+import common, { evaluate } from '../common/common.ts';
+import { interpolateToCurve, getStylesFromArray } from '../../utils.ts';
+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 4e1ce10193e..095c4b1560a 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.ts';
 
 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 594e7220b35..96e2c4d0da1 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.jison';
+import { setConfig } from '../../../config.ts';
 
 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 7aeed304cc5..95c5d781da5 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.jison';
+import { setConfig } from '../../../config.ts';
 
 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 7726ce0f791..180ca51ef35 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.jison';
+import { setConfig } from '../../../config.ts';
 
 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 e2ecec4d59c..993feabee6b 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.jison';
+import { setConfig } from '../../../config.ts';
 
 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 9097c49e312..6c2c31b0b50 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.jison';
+import { setConfig } from '../../../config.ts';
 
 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 7d3e3ed0476..13c6204fc2d 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.jison';
+import { setConfig } from '../../../config.ts';
 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 0fd1e9e9c87..eb171ba0902 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.jison';
+import { setConfig } from '../../../config.ts';
 
 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 ee41a5c394f..e220cda4ac4 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.jison';
+import { setConfig } from '../../../config.ts';
 
 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 050d64f917d..a48b0c25ca2 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.jison';
+import { setConfig } from '../../../config.ts';
 
 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 e990f41b42b..356bf343daf 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.jison';
+import { setConfig } from '../../../config.ts';
 
 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 36aaae76731..d233762e98c 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.jison';
+import { setConfig } from '../../../config.ts';
 
 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 6b440da7987..1b95efb0c24 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.jison';
+import { setConfig } from '../../../config.ts';
 
 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 ae6f178b896..4ef4b51f9d8 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.jison';
+import { setConfig } from '../../../config.ts';
 
 setConfig({
   securityLevel: 'strict',
diff --git a/packages/mermaid/src/diagrams/gantt/ganttDb.js b/packages/mermaid/src/diagrams/gantt/ganttDb.js
index 475ee4de4ea..df283595b3b 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.ts';
+import * as configApi from '../../config.ts';
+import utils from '../../utils.ts';
+import mermaidAPI from '../../mermaidAPI.ts';
 
 import {
   setAccTitle,
@@ -16,7 +16,7 @@ import {
   clear as commonClear,
   setDiagramTitle,
   getDiagramTitle,
-} from '../../commonDb';
+} from '../../commonDb.ts';
 
 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 d65f2fdfda6..3f5e5d17767 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.ts';
 
 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 3fe2bbe7ef7..1b03578f155 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.ts';
 
 const id = 'gantt';
 
@@ -7,7 +7,7 @@ const detector: DiagramDetector = (txt) => {
 };
 
 const loader = async () => {
-  const { diagram } = await import('./ganttDiagram');
+  const { diagram } = await import('./ganttDiagram.ts');
   return { id, diagram };
 };
 
diff --git a/packages/mermaid/src/diagrams/gantt/ganttDiagram.ts b/packages/mermaid/src/diagrams/gantt/ganttDiagram.ts
index b1341052d1c..920d4b8fddd 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.ts';
 
 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 7a012beb53e..86910cdb4f1 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.ts';
 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.ts';
+import { getConfig } from '../../config.ts';
+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 9a1401cadaa..c77e48e4137 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.jison';
+import ganttDb from '../ganttDb.js';
+import { convert } from '../../../tests/util.ts';
 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 dded48efae7..0c4db289df4 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.ts';
+import { random } from '../../utils.ts';
+import mermaidAPI from '../../mermaidAPI.ts';
+import * as configApi from '../../config.ts';
+import { getConfig } from '../../config.ts';
+import common from '../common/common.ts';
 import {
   setAccTitle,
   getAccTitle,
@@ -12,7 +12,7 @@ import {
   clear as commonClear,
   setDiagramTitle,
   getDiagramTitle,
-} from '../../commonDb';
+} from '../../commonDb.ts';
 
 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 46d09c6e5a2..5b273ab4b7a 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.ts';
+import type { ExternalDiagramDefinition } from '../../diagram-api/types.ts';
 
 const id = 'gitGraph';
 
@@ -8,7 +8,7 @@ const detector: DiagramDetector = (txt) => {
 };
 
 const loader = async () => {
-  const { diagram } = await import('./gitGraphDiagram');
+  const { diagram } = await import('./gitGraphDiagram.ts');
   return { id, diagram };
 };
 
diff --git a/packages/mermaid/src/diagrams/git/gitGraphDiagram.ts b/packages/mermaid/src/diagrams/git/gitGraphDiagram.ts
index 9ef3506a02b..f4c941b60b3 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.ts';
 
 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 cad44ea1fdf..764fbb214cf 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.jison';
 //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 ca288bfae75..52890cc1a12 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.jison';
+import { logger } from '../../logger.ts';
+import { interpolateToCurve } from '../../utils.ts';
 
 let allCommitsDict = {};
 let branchNum;
diff --git a/packages/mermaid/src/diagrams/git/gitGraphRenderer.js b/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
index 787eb24901f..5eebd7d4e7e 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.ts';
+import { log } from '../../logger.ts';
+import utils from '../../utils.ts';
 
 let allCommitsDict = {};
 
diff --git a/packages/mermaid/src/diagrams/git/layout.js b/packages/mermaid/src/diagrams/git/layout.js
index de866a72b5c..a2b378c9a93 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.ts';
 
 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 8bcce51d4f0..6f1a59d1cda 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.jison';
+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 2a04f163356..2d7942227e9 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.ts';
+import { clear } from '../../commonDb.ts';
 
 var message = '';
 var info = false;
diff --git a/packages/mermaid/src/diagrams/info/infoDetector.ts b/packages/mermaid/src/diagrams/info/infoDetector.ts
index a022e3ccb75..f7b07131c66 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.ts';
 
 const id = 'info';
 
@@ -7,7 +7,7 @@ const detector: DiagramDetector = (txt) => {
 };
 
 const loader = async () => {
-  const { diagram } = await import('./infoDiagram');
+  const { diagram } = await import('./infoDiagram.ts');
   return { id, diagram };
 };
 
diff --git a/packages/mermaid/src/diagrams/info/infoDiagram.ts b/packages/mermaid/src/diagrams/info/infoDiagram.ts
index a8100a79fb3..f934bf0f856 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.ts';
 // @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 1caa7222cc9..3366bc2e74d 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.ts';
+import { getConfig } from '../../config.ts';
 
 /**
  * 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 2e2b1c7d6a9..46d08eeb59c 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.ts';
 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 61b41d34716..846fd5dc588 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 e8793e86abf..da03943b883 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.jison';
+import * as mindmapDB from './mindmapDb.js';
 // Todo fix utils functions for tests
-import { setLogLevel } from '../../diagram-api/diagramAPI';
+import { setLogLevel } from '../../diagram-api/diagramAPI.ts';
 
 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 71aa449d925..9edc9c519ba 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.ts';
+import { sanitizeText as _sanitizeText } from '../../diagrams/common/common.ts';
+import { log } from '../../logger.ts';
 
 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 c5b5fede1fb..3eecc017f9d 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.ts';
+import { getConfig } from '../../config.ts';
+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 2b1aa021e22..69975e6bbb3 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 21523dde492..1305decea71 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.jison';
+import { setConfig } from '../../../config.ts';
 
 setConfig({
   securityLevel: 'strict',
diff --git a/packages/mermaid/src/diagrams/pie/pieDb.js b/packages/mermaid/src/diagrams/pie/pieDb.js
index 5ccf6d29edf..aad21ace343 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.ts';
+import mermaidAPI from '../../mermaidAPI.ts';
+import * as configApi from '../../config.ts';
+import common from '../common/common.ts';
 import {
   setAccTitle,
   getAccTitle,
@@ -10,7 +10,7 @@ import {
   getAccDescription,
   setAccDescription,
   clear as commonClear,
-} from '../../commonDb';
+} from '../../commonDb.ts';
 
 let sections = {};
 let showData = false;
diff --git a/packages/mermaid/src/diagrams/pie/pieDetector.ts b/packages/mermaid/src/diagrams/pie/pieDetector.ts
index dd1224db961..4e90857e0c3 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.ts';
 
 const id = 'pie';
 
@@ -7,7 +7,7 @@ const detector: DiagramDetector = (txt) => {
 };
 
 const loader = async () => {
-  const { diagram } = await import('./pieDiagram');
+  const { diagram } = await import('./pieDiagram.ts');
   return { id, diagram };
 };
 
diff --git a/packages/mermaid/src/diagrams/pie/pieDiagram.ts b/packages/mermaid/src/diagrams/pie/pieDiagram.ts
index 3a586f66844..c97e49c532d 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.ts';
 // @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 9b25f5f43c3..a3a27c3ba17 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.ts';
+import { configureSvgSize } from '../../setupGraphViewbox.js';
+import * as configApi from '../../config.ts';
+import { parseFontSize } from '../../utils.ts';
 
 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 4857a37ef77..b220e0ea789 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.ts';
+import requirementDb from '../requirementDb.js';
+import reqDiagram from './requirementDiagram.jison';
 
 setConfig({
   securityLevel: 'strict',
diff --git a/packages/mermaid/src/diagrams/requirement/requirementDb.js b/packages/mermaid/src/diagrams/requirement/requirementDb.js
index df5eb0ab9d4..7d80e7f2a7a 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.ts';
+import { log } from '../../logger.ts';
+import mermaidAPI from '../../mermaidAPI.ts';
 
 import {
   setAccTitle,
@@ -8,7 +8,7 @@ import {
   getAccDescription,
   setAccDescription,
   clear as commonClear,
-} from '../../commonDb';
+} from '../../commonDb.ts';
 
 let relations = [];
 let latestRequirement = {};
diff --git a/packages/mermaid/src/diagrams/requirement/requirementDetector.ts b/packages/mermaid/src/diagrams/requirement/requirementDetector.ts
index 1102fde0c88..ab2aa7d7e04 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.ts';
 
 const id = 'requirement';
 
@@ -7,7 +7,7 @@ const detector: DiagramDetector = (txt) => {
 };
 
 const loader = async () => {
-  const { diagram } = await import('./requirementDiagram');
+  const { diagram } = await import('./requirementDiagram.ts');
   return { id, diagram };
 };
 
diff --git a/packages/mermaid/src/diagrams/requirement/requirementDiagram.ts b/packages/mermaid/src/diagrams/requirement/requirementDiagram.ts
index 37f6177b6ef..a5ddc9cab34 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.ts';
 // @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 9fd746bd1af..25ea6f28554 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.ts';
+import { configureSvgSize } from '../../setupGraphViewbox.js';
+import common from '../common/common.ts';
+import markers from './requirementMarkers.js';
+import { getConfig } from '../../config.ts';
 
 let conf = {};
 let relCnt = 0;
diff --git a/packages/mermaid/src/diagrams/sequence/sequenceDb.js b/packages/mermaid/src/diagrams/sequence/sequenceDb.js
index 5c5554c7215..fb17f038c54 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.ts';
+import * as configApi from '../../config.ts';
+import { log } from '../../logger.ts';
+import { sanitizeText } from '../common/common.ts';
 import {
   setAccTitle,
   getAccTitle,
@@ -10,7 +10,7 @@ import {
   getAccDescription,
   setAccDescription,
   clear as commonClear,
-} from '../../commonDb';
+} from '../../commonDb.ts';
 
 let prevActor = undefined;
 let actors = {};
diff --git a/packages/mermaid/src/diagrams/sequence/sequenceDetector.ts b/packages/mermaid/src/diagrams/sequence/sequenceDetector.ts
index c436e65d446..57372a82d28 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.ts';
 
 const id = 'sequence';
 
@@ -7,7 +7,7 @@ const detector: DiagramDetector = (txt) => {
 };
 
 const loader = async () => {
-  const { diagram } = await import('./sequenceDiagram');
+  const { diagram } = await import('./sequenceDiagram.ts');
   return { id, diagram };
 };
 
diff --git a/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js b/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js
index 08f6abee139..339769486e9 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.ts';
+import mermaidAPI from '../../mermaidAPI.ts';
+import { Diagram, getDiagramFromText } from '../../Diagram.ts';
+import { addDiagrams } from '../../diagram-api/diagram-orchestration.ts';
 
 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 fdec7f86d9b..6fd6f608b75 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.ts';
 // @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 acee7bbe526..8dd1161e445 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.ts';
+import common from '../common/common.ts';
+import * as configApi from '../../config.ts';
+import assignWithDepth from '../../assignWithDepth.js';
+import utils from '../../utils.ts';
+import { configureSvgSize } from '../../setupGraphViewbox.js';
+import { Diagram } from '../../Diagram.ts';
 
 let conf = {};
 
diff --git a/packages/mermaid/src/diagrams/sequence/svgDraw.js b/packages/mermaid/src/diagrams/sequence/svgDraw.js
index be34daf4b40..b8aaea35333 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.ts';
+import { addFunction } from '../../interactionDb.ts';
+import { parseFontSize } from '../../utils.ts';
 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 ed60285edaf..04cde0a2cda 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 f8ea694a63d..7040a19a21a 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.jison';
+import { setConfig } from '../../../config.ts';
 
 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 75ecb4b13f5..9fed68bcc72 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.jison';
+import { setConfig } from '../../../config.ts';
 
 setConfig({
   securityLevel: 'strict',
diff --git a/packages/mermaid/src/diagrams/state/shapes.js b/packages/mermaid/src/diagrams/state/shapes.js
index 0a495e56c65..4d23cb5d4e0 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.ts';
+import common from '../common/common.ts';
+import { getConfig } from '../../config.ts';
+import { log } from '../../logger.ts';
 
 /**
  * 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 81b8ffb8bdf..ca7adfa9fce 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.ts';
+import { generateId } from '../../utils.ts';
+import mermaidAPI from '../../mermaidAPI.ts';
+import common from '../common/common.ts';
+import * as configApi from '../../config.ts';
 import {
   setAccTitle,
   getAccTitle,
@@ -11,7 +11,7 @@ import {
   clear as commonClear,
   setDiagramTitle,
   getDiagramTitle,
-} from '../../commonDb';
+} from '../../commonDb.ts';
 
 import {
   DEFAULT_DIAGRAM_DIRECTION,
@@ -21,7 +21,7 @@ import {
   STMT_APPLYCLASS,
   DEFAULT_STATE_TYPE,
   DIVIDER_TYPE,
-} from './stateCommon';
+} from './stateCommon.ts';
 
 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 d51d919c33f..0264c34cc5d 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 5fa617a76a4..e9aca1d611b 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.ts';
 
 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 ee6b3ac2c21..79dfd057301 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.ts';
 
 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.ts');
   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 7ed5555dbaf..e64ecfdf89a 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.jison';
+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 f7ee4f0525b..55c3f8d946e 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.ts';
 // @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 d2bbb409e31..e6e470140c8 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.jison';
+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 570d599deb2..4c29e839816 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.ts';
 // @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 8629f74db45..96d4d5d94e0 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.ts';
 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.ts';
+import { configureSvgSize } from '../../setupGraphViewbox.js';
+import common from '../common/common.ts';
+import utils from '../../utils.ts';
 
 import {
   DEFAULT_DIAGRAM_DIRECTION,
@@ -14,7 +14,7 @@ import {
   STMT_RELATION,
   DEFAULT_STATE_TYPE,
   DIVIDER_TYPE,
-} from './stateCommon';
+} from './stateCommon.ts';
 
 // --------------------------------------
 // Shapes
diff --git a/packages/mermaid/src/diagrams/state/stateRenderer-v2.spec.js b/packages/mermaid/src/diagrams/state/stateRenderer-v2.spec.js
index 3a118e607d2..a190fe05bee 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.jison';
+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 8d410fdd988..7076d0c1c92 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.ts';
+import common from '../common/common.ts';
+import { drawState, addTitleAndBox, drawEdge } from './shapes.js';
+import { getConfig } from '../../config.ts';
+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 9bd2b5ece86..ed9931b80a1 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.ts';
 
 const id = 'timeline';
 
diff --git a/packages/mermaid/src/diagrams/timeline/timeline-definition.ts b/packages/mermaid/src/diagrams/timeline/timeline-definition.ts
index 898af8b7854..7f671291f25 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 0697b194e24..2cda8c211f0 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.jison';
+import * as timelineDB from './timelineDb.js';
+// import { injectUtils } from './mermaidUtils.ts';
+import * as _commonDb from '../../commonDb.ts';
+import { parseDirective as _parseDirective } from '../../directiveUtils.ts';
 
 import {
   log,
@@ -10,7 +10,7 @@ import {
   getConfig,
   sanitizeText,
   setupGraphViewBox,
-} from '../../diagram-api/diagramAPI';
+} from '../../diagram-api/diagramAPI.ts';
 
 // injectUtils(
 //   log,
diff --git a/packages/mermaid/src/diagrams/timeline/timelineDb.js b/packages/mermaid/src/diagrams/timeline/timelineDb.js
index 7bc5c269230..8d899e0bb8f 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.ts';
+import * as commonDb from '../../commonDb.ts';
 let currentSection = '';
 let currentTaskId = 0;
 
diff --git a/packages/mermaid/src/diagrams/timeline/timelineRenderer.ts b/packages/mermaid/src/diagrams/timeline/timelineRenderer.ts
index 272ecf0c1ad..061e101ad94 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.ts';
+import { getConfig } from '../../config.ts';
+import { setupGraphViewbox } from '../../setupGraphViewbox.js';
+import { Diagram } from '../../Diagram.ts';
+import { MermaidConfig } from '../../config.type.ts';
 
 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 ce870509486..5734e052f2a 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.ts';
+import * as configApi from '../../config.ts';
 import {
   setAccTitle,
   getAccTitle,
@@ -8,7 +8,7 @@ import {
   getAccDescription,
   setAccDescription,
   clear as commonClear,
-} from '../../commonDb';
+} from '../../commonDb.ts';
 
 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 78955c794ce..8f08bd3647a 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.ts';
 
 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 90b2fd6e1b8..a23a1011685 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.ts';
 
 const id = 'journey';
 
@@ -7,7 +7,7 @@ const detector: DiagramDetector = (txt) => {
 };
 
 const loader = async () => {
-  const { diagram } = await import('./journeyDiagram');
+  const { diagram } = await import('./journeyDiagram.ts');
   return { id, diagram };
 };
 
diff --git a/packages/mermaid/src/diagrams/user-journey/journeyDiagram.ts b/packages/mermaid/src/diagrams/user-journey/journeyDiagram.ts
index c3a2a3c6b75..10442d35abc 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.ts';
 // @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 c34f8f5b2fb..a21532f58e2 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.ts';
+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 cc54d9f78bd..8ed342bb544 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.jison';
+import journeyDb from '../journeyDb.js';
 
 const parserFnConstructor = (str) => {
   return () => {
diff --git a/packages/mermaid/src/directiveUtils.ts b/packages/mermaid/src/directiveUtils.ts
index 2d2971a8573..10bd7765359 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.ts';
 
-import { log } from './logger';
-import { directiveSanitizer } from './utils';
+import { log } from './logger.ts';
+import { directiveSanitizer } from './utils.ts';
 
 let currentDirective: { type?: string; args?: any } | undefined = {};
 
diff --git a/packages/mermaid/src/docs/.vitepress/theme/redirect.spec.ts b/packages/mermaid/src/docs/.vitepress/theme/redirect.spec.ts
index ec04042642f..da4c2fdb7a5 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.ts';
 
 test.each([
   // Old docs, localhost
diff --git a/packages/mermaid/src/docs/community/newDiagram.md b/packages/mermaid/src/docs/community/newDiagram.md
index 75e17e4c9b8..ef5241f5c87 100644
--- a/packages/mermaid/src/docs/community/newDiagram.md
+++ b/packages/mermaid/src/docs/community/newDiagram.md
@@ -219,7 +219,7 @@ import {
   getAccDescription,
   setAccDescription,
   clear as commonClear,
-} from '../../commonDb';
+} from '../../commonDb.ts';
 ```
 
 The accessibility title and description are inserted into the SVG element in the `render` function in mermaidAPI.
diff --git a/packages/mermaid/src/docs/vite.config.ts b/packages/mermaid/src/docs/vite.config.ts
index 179e271fd75..4bcdc24316e 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 vitepress-plugin-search doesn't expose their `types` in the new Node16 way
 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 36490798bda..c72ec0361cf 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 './diagram-api/diagram-orchestration';
-import { addDiagrams } from './diagram-api/diagram-orchestration';
+import mermaid from './mermaid.js';
+import { mermaidAPI } from './mermaidAPI.ts';
+import './diagram-api/diagram-orchestration.ts';
+import { addDiagrams } from './diagram-api/diagram-orchestration.ts';
 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 bd99877b68c..8e237a7195a 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.ts';
+import { log } from './logger.ts';
+import utils from './utils.ts';
+import { mermaidAPI, ParseOptions, RenderResult } from './mermaidAPI.ts';
 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.ts';
+import type { ParseErrorFunction } from './Diagram.ts';
+import { isDetailedError } from './utils.ts';
+import type { DetailedError } from './utils.ts';
+import { ExternalDiagramDefinition } from './diagram-api/types.ts';
+import { UnknownDiagramError } from './errors.ts';
 
 export type {
   MermaidConfig,
diff --git a/packages/mermaid/src/mermaidAPI.spec.ts b/packages/mermaid/src/mermaidAPI.spec.ts
index edd2d47bb97..f0fc254c332 100644
--- a/packages/mermaid/src/mermaidAPI.spec.ts
+++ b/packages/mermaid/src/mermaidAPI.spec.ts
@@ -4,39 +4,39 @@ import { vi } from 'vitest';
 // -------------------------------------
 //  Mocks and mocking
 
-import { MockedD3 } from './tests/MockedD3';
+import { MockedD3 } from './tests/MockedD3.ts';
 
 // 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,...)
-vi.mock('./accessibility', () => ({
+import * as accessibility from './accessibility.ts'; // Import it this way so we can use spyOn(accessibility,...)
+vi.mock('./accessibility.ts', () => ({
   setA11yDiagramInfo: vi.fn(),
   addSVGa11yTitleDescription: vi.fn(),
 }));
 
 // Mock the renderers specifically so we can test render(). Need to mock draw() for each renderer
-vi.mock('./diagrams/c4/c4Renderer');
-vi.mock('./diagrams/class/classRenderer');
-vi.mock('./diagrams/class/classRenderer-v2');
-vi.mock('./diagrams/er/erRenderer');
-vi.mock('./diagrams/flowchart/flowRenderer-v2');
-vi.mock('./diagrams/git/gitGraphRenderer');
-vi.mock('./diagrams/gantt/ganttRenderer');
-vi.mock('./diagrams/user-journey/journeyRenderer');
-vi.mock('./diagrams/pie/pieRenderer');
-vi.mock('./diagrams/requirement/requirementRenderer');
-vi.mock('./diagrams/sequence/sequenceRenderer');
-vi.mock('./diagrams/state/stateRenderer-v2');
+vi.mock('./diagrams/c4/c4Renderer.js');
+vi.mock('./diagrams/class/classRenderer.js');
+vi.mock('./diagrams/class/classRenderer-v2.js');
+vi.mock('./diagrams/er/erRenderer.js');
+vi.mock('./diagrams/flowchart/flowRenderer-v2.js');
+vi.mock('./diagrams/git/gitGraphRenderer.js');
+vi.mock('./diagrams/gantt/ganttRenderer.js');
+vi.mock('./diagrams/user-journey/journeyRenderer.js');
+vi.mock('./diagrams/pie/pieRenderer.js');
+vi.mock('./diagrams/requirement/requirementRenderer.js');
+vi.mock('./diagrams/sequence/sequenceRenderer.js');
+vi.mock('./diagrams/state/stateRenderer-v2.js');
 
 // -------------------------------------
 
-import mermaid from './mermaid';
-import { MermaidConfig } from './config.type';
+import mermaid from './mermaid.js';
+import { MermaidConfig } from './config.type.ts';
 
-import mermaidAPI, { removeExistingElements } from './mermaidAPI';
+import mermaidAPI, { removeExistingElements } from './mermaidAPI.ts';
 import {
   encodeEntities,
   decodeEntities,
@@ -45,20 +45,20 @@ import {
   appendDivSvgG,
   cleanUpSvgCode,
   putIntoIFrame,
-} from './mermaidAPI';
+} from './mermaidAPI.ts';
 
-import assignWithDepth from './assignWithDepth';
+import assignWithDepth from './assignWithDepth.js';
 
 // --------------
 // Mocks
 //   To mock a module, first define a mock for it, then (if used explicitly in the tests) import it. Be sure the path points to exactly the same file as is imported in mermaidAPI (the module being tested)
-vi.mock('./styles', () => {
+vi.mock('./styles.ts', () => {
   return {
     addStylesForDiagram: vi.fn(),
     default: vi.fn().mockReturnValue(' .userStyle { font-weight:bold; }'),
   };
 });
-import getStyles from './styles';
+import getStyles from './styles.ts';
 
 vi.mock('stylis', () => {
   return {
diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts
index 1b440672a6f..e26cd790546 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.ts';
+import { addDiagrams } from './diagram-api/diagram-orchestration.ts';
+import { Diagram, getDiagramFromText } from './Diagram.ts';
+import errorRenderer from './diagrams/error/errorRenderer.js';
+import { attachFunctions } from './interactionDb.ts';
+import { log, setLogLevel } from './logger.ts';
+import getStyles from './styles.ts';
+import theme from './themes/index.js';
+import utils, { directiveSanitizer } from './utils.ts';
 import DOMPurify from 'dompurify';
-import { MermaidConfig } from './config.type';
-import { evaluate } from './diagrams/common/common';
-import isEmpty from 'lodash-es/isEmpty.js';
-import { setA11yDiagramInfo, addSVGa11yTitleDescription } from './accessibility';
-import { parseDirective } from './directiveUtils';
+import { MermaidConfig } from './config.type.ts';
+import { evaluate } from './diagrams/common/common.ts';
+import { isEmpty } from 'lodash-es';
+import { setA11yDiagramInfo, addSVGa11yTitleDescription } from './accessibility.ts';
+import { parseDirective } from './directiveUtils.ts';
 
 // diagram names that support classDef statements
 const CLASSDEF_DIAGRAMS = ['graph', 'flowchart', 'flowchart-v2', 'stateDiagram', 'stateDiagram-v2'];
diff --git a/packages/mermaid/src/setupGraphViewbox.js b/packages/mermaid/src/setupGraphViewbox.js
index 14929d3d71a..5743b050e4c 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.ts';
 
 /**
  * Applies d3 attributes
diff --git a/packages/mermaid/src/setupGraphViewbox.spec.js b/packages/mermaid/src/setupGraphViewbox.spec.js
index 6b5c3e2108a..5a1d647fe3f 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.ts';
+import assignWithDepth from './assignWithDepth.js';
+import { detectType } from './diagram-api/detectType.ts';
+import { addDiagrams } from './diagram-api/diagram-orchestration.ts';
+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 588c26cb181..5098e98ad87 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.ts';
+import { log } from './logger.ts';
 
 const themes: Record<string, any> = {};
 
diff --git a/packages/mermaid/src/tests/MockedD3.ts b/packages/mermaid/src/tests/MockedD3.ts
index ccf21a269b8..6d8d721e0f9 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/erDiagram-oldHardcodedValues.ts b/packages/mermaid/src/themes/erDiagram-oldHardcodedValues.ts
index 95ce40e79b4..58547d5d186 100644
--- a/packages/mermaid/src/themes/erDiagram-oldHardcodedValues.ts
+++ b/packages/mermaid/src/themes/erDiagram-oldHardcodedValues.ts
@@ -1,5 +1,5 @@
 /**
- * Values that have been hardcoded in src/diagrams/er/styles.js. These can be used by
+ * Values that have been hardcoded in src/diagrams/er/styles.ts. These can be used by
  *   theme-_._ files to maintain display styles until themes, styles, renderers are revised. --
  *   2022-09-22
  */
diff --git a/packages/mermaid/src/themes/index.js b/packages/mermaid/src/themes/index.js
index 94e2b95a4ad..6ffe6274d68 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 01f8a9c0b48..f7861bd0e38 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.ts';
 
 class Theme {
   constructor() {
diff --git a/packages/mermaid/src/themes/theme-dark.js b/packages/mermaid/src/themes/theme-dark.js
index 9585a2e27c7..a645847e0a1 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 c91029de37e..ce5f4cc5e3e 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.ts';
 
 class Theme {
   constructor() {
diff --git a/packages/mermaid/src/themes/theme-forest.js b/packages/mermaid/src/themes/theme-forest.js
index 96d6c35c116..7769c61521d 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.ts';
 
 class Theme {
   constructor() {
diff --git a/packages/mermaid/src/themes/theme-neutral.js b/packages/mermaid/src/themes/theme-neutral.js
index 8bb5ff69357..253adf10774 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.ts';
 
 // 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 0f0bc1e92a2..811df467edf 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 memoize from 'lodash-es/memoize.js';
-import { MockedD3 } from './tests/MockedD3';
+import utils from './utils.ts';
+import assignWithDepth from './assignWithDepth.js';
+import { detectType } from './diagram-api/detectType.ts';
+import { addDiagrams } from './diagram-api/diagram-orchestration.ts';
+import { memoize } from 'lodash-es';
+import { MockedD3 } from './tests/MockedD3.ts';
 
 addDiagrams();
 
diff --git a/packages/mermaid/src/utils.ts b/packages/mermaid/src/utils.ts
index 0c4b9d1a8c6..5ce2c513a81 100644
--- a/packages/mermaid/src/utils.ts
+++ b/packages/mermaid/src/utils.ts
@@ -24,13 +24,13 @@ 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 memoize from 'lodash-es/memoize.js';
+import common from './diagrams/common/common.ts';
+import { configKeys } from './defaultConfig.js';
+import { log } from './logger.ts';
+import { detectType } from './diagram-api/detectType.ts';
+import assignWithDepth from './assignWithDepth.js';
+import { MermaidConfig } from './config.type.ts';
+import { memoize } from 'lodash-es';
 
 // Effectively an enum of the supported curve types, accessible by name
 const d3CurveTypes = {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a7a3a68e426..ce21b31660b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -48,10 +48,10 @@ importers:
         version: 4.2.1
       '@typescript-eslint/eslint-plugin':
         specifier: ^5.48.2
-        version: 5.48.2_iljmjqxcygjq3saipl7gerxpvi
+        version: 5.48.2_a7vej7oc6hh2ocwmwvqmnazx4i
       '@typescript-eslint/parser':
         specifier: ^5.48.2
-        version: 5.48.2_yygwinqv3a2io74xmwofqb7uka
+        version: 5.48.2_uzrczp7j3g6yfuwxvyxa54h6uu
       '@vitest/coverage-c8':
         specifier: ^0.29.0
         version: 0.29.2_vitest@0.29.2
@@ -93,7 +93,7 @@ importers:
         version: 7.1.0
       eslint-plugin-jest:
         specifier: ^27.1.5
-        version: 27.1.5_5rcd23qw3h5vuffwo2owxb3hw4
+        version: 27.1.5_zqbx7n34hjqf6dg5zxcwtay5wu
       eslint-plugin-jsdoc:
         specifier: ^39.6.2
         version: 39.6.2_eslint@8.32.0
@@ -162,10 +162,10 @@ importers:
         version: 1.15.4
       ts-node:
         specifier: ^10.9.1
-        version: 10.9.1_cbe7ovvae6zqfnmtgctpgpys54
+        version: 10.9.1_b6uwiy5v3234vnrcoqehlbbouy
       typescript:
-        specifier: ^4.8.4
-        version: 4.8.4
+        specifier: ^5.0.1-rc
+        version: 5.0.1-rc
       vite:
         specifier: ^4.1.1
         version: 4.1.1_@types+node@18.11.9
@@ -253,10 +253,10 @@ importers:
         version: 9.0.0
       '@typescript-eslint/eslint-plugin':
         specifier: ^5.42.1
-        version: 5.42.1_qxgr6oy2qtsmmpo3f6iejuryuq
+        version: 5.42.1_73dygoi7fqrujmrv6ho2t4o6ce
       '@typescript-eslint/parser':
         specifier: ^5.42.1
-        version: 5.42.1_yygwinqv3a2io74xmwofqb7uka
+        version: 5.42.1_uzrczp7j3g6yfuwxvyxa54h6uu
       chokidar:
         specifier: ^3.5.3
         version: 3.5.3
@@ -310,13 +310,13 @@ importers:
         version: 1.14.0
       typedoc:
         specifier: ^0.23.18
-        version: 0.23.18_typescript@4.8.4
+        version: 0.23.18_typescript@5.0.1-rc
       typedoc-plugin-markdown:
         specifier: ^3.13.6
         version: 3.13.6_typedoc@0.23.18
       typescript:
-        specifier: ^4.8.4
-        version: 4.8.4
+        specifier: ^5.0.1-rc
+        version: 5.0.1-rc
       unist-util-flatmap:
         specifier: ^1.0.0
         version: 1.0.0
@@ -3155,7 +3155,7 @@ packages:
     dev: true
     optional: true
 
-  /@typescript-eslint/eslint-plugin/5.42.1_qxgr6oy2qtsmmpo3f6iejuryuq:
+  /@typescript-eslint/eslint-plugin/5.42.1_73dygoi7fqrujmrv6ho2t4o6ce:
     resolution: {integrity: sha512-LyR6x784JCiJ1j6sH5Y0K6cdExqCCm8DJUTcwG5ThNXJj/G8o5E56u5EdG4SLy+bZAwZBswC+GYn3eGdttBVCg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -3166,23 +3166,23 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/parser': 5.42.1_yygwinqv3a2io74xmwofqb7uka
+      '@typescript-eslint/parser': 5.42.1_uzrczp7j3g6yfuwxvyxa54h6uu
       '@typescript-eslint/scope-manager': 5.42.1
-      '@typescript-eslint/type-utils': 5.42.1_yygwinqv3a2io74xmwofqb7uka
-      '@typescript-eslint/utils': 5.42.1_yygwinqv3a2io74xmwofqb7uka
+      '@typescript-eslint/type-utils': 5.42.1_uzrczp7j3g6yfuwxvyxa54h6uu
+      '@typescript-eslint/utils': 5.42.1_uzrczp7j3g6yfuwxvyxa54h6uu
       debug: 4.3.4
       eslint: 8.32.0
       ignore: 5.2.0
       natural-compare-lite: 1.4.0
       regexpp: 3.2.0
       semver: 7.3.8
-      tsutils: 3.21.0_typescript@4.8.4
-      typescript: 4.8.4
+      tsutils: 3.21.0_typescript@5.0.1-rc
+      typescript: 5.0.1-rc
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@typescript-eslint/eslint-plugin/5.48.2_iljmjqxcygjq3saipl7gerxpvi:
+  /@typescript-eslint/eslint-plugin/5.48.2_a7vej7oc6hh2ocwmwvqmnazx4i:
     resolution: {integrity: sha512-sR0Gja9Ky1teIq4qJOl0nC+Tk64/uYdX+mi+5iB//MH8gwyx8e3SOyhEzeLZEFEEfCaLf8KJq+Bd/6je1t+CAg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -3193,23 +3193,23 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/parser': 5.48.2_yygwinqv3a2io74xmwofqb7uka
+      '@typescript-eslint/parser': 5.48.2_uzrczp7j3g6yfuwxvyxa54h6uu
       '@typescript-eslint/scope-manager': 5.48.2
-      '@typescript-eslint/type-utils': 5.48.2_yygwinqv3a2io74xmwofqb7uka
-      '@typescript-eslint/utils': 5.48.2_yygwinqv3a2io74xmwofqb7uka
+      '@typescript-eslint/type-utils': 5.48.2_uzrczp7j3g6yfuwxvyxa54h6uu
+      '@typescript-eslint/utils': 5.48.2_uzrczp7j3g6yfuwxvyxa54h6uu
       debug: 4.3.4
       eslint: 8.32.0
       ignore: 5.2.0
       natural-compare-lite: 1.4.0
       regexpp: 3.2.0
       semver: 7.3.8
-      tsutils: 3.21.0_typescript@4.8.4
-      typescript: 4.8.4
+      tsutils: 3.21.0_typescript@5.0.1-rc
+      typescript: 5.0.1-rc
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@typescript-eslint/parser/5.42.1_yygwinqv3a2io74xmwofqb7uka:
+  /@typescript-eslint/parser/5.42.1_uzrczp7j3g6yfuwxvyxa54h6uu:
     resolution: {integrity: sha512-kAV+NiNBWVQDY9gDJDToTE/NO8BHi4f6b7zTsVAJoTkmB/zlfOpiEVBzHOKtlgTndCKe8vj9F/PuolemZSh50Q==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -3221,15 +3221,15 @@ packages:
     dependencies:
       '@typescript-eslint/scope-manager': 5.42.1
       '@typescript-eslint/types': 5.42.1
-      '@typescript-eslint/typescript-estree': 5.42.1_typescript@4.8.4
+      '@typescript-eslint/typescript-estree': 5.42.1_typescript@5.0.1-rc
       debug: 4.3.4
       eslint: 8.32.0
-      typescript: 4.8.4
+      typescript: 5.0.1-rc
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@typescript-eslint/parser/5.48.2_yygwinqv3a2io74xmwofqb7uka:
+  /@typescript-eslint/parser/5.48.2_uzrczp7j3g6yfuwxvyxa54h6uu:
     resolution: {integrity: sha512-38zMsKsG2sIuM5Oi/olurGwYJXzmtdsHhn5mI/pQogP+BjYVkK5iRazCQ8RGS0V+YLk282uWElN70zAAUmaYHw==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -3241,10 +3241,10 @@ packages:
     dependencies:
       '@typescript-eslint/scope-manager': 5.48.2
       '@typescript-eslint/types': 5.48.2
-      '@typescript-eslint/typescript-estree': 5.48.2_typescript@4.8.4
+      '@typescript-eslint/typescript-estree': 5.48.2_typescript@5.0.1-rc
       debug: 4.3.4
       eslint: 8.32.0
-      typescript: 4.8.4
+      typescript: 5.0.1-rc
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -3265,7 +3265,7 @@ packages:
       '@typescript-eslint/visitor-keys': 5.48.2
     dev: true
 
-  /@typescript-eslint/type-utils/5.42.1_yygwinqv3a2io74xmwofqb7uka:
+  /@typescript-eslint/type-utils/5.42.1_uzrczp7j3g6yfuwxvyxa54h6uu:
     resolution: {integrity: sha512-WWiMChneex5w4xPIX56SSnQQo0tEOy5ZV2dqmj8Z371LJ0E+aymWD25JQ/l4FOuuX+Q49A7pzh/CGIQflxMVXg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -3275,17 +3275,17 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/typescript-estree': 5.42.1_typescript@4.8.4
-      '@typescript-eslint/utils': 5.42.1_yygwinqv3a2io74xmwofqb7uka
+      '@typescript-eslint/typescript-estree': 5.42.1_typescript@5.0.1-rc
+      '@typescript-eslint/utils': 5.42.1_uzrczp7j3g6yfuwxvyxa54h6uu
       debug: 4.3.4
       eslint: 8.32.0
-      tsutils: 3.21.0_typescript@4.8.4
-      typescript: 4.8.4
+      tsutils: 3.21.0_typescript@5.0.1-rc
+      typescript: 5.0.1-rc
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@typescript-eslint/type-utils/5.48.2_yygwinqv3a2io74xmwofqb7uka:
+  /@typescript-eslint/type-utils/5.48.2_uzrczp7j3g6yfuwxvyxa54h6uu:
     resolution: {integrity: sha512-QVWx7J5sPMRiOMJp5dYshPxABRoZV1xbRirqSk8yuIIsu0nvMTZesKErEA3Oix1k+uvsk8Cs8TGJ6kQ0ndAcew==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -3295,12 +3295,12 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/typescript-estree': 5.48.2_typescript@4.8.4
-      '@typescript-eslint/utils': 5.48.2_yygwinqv3a2io74xmwofqb7uka
+      '@typescript-eslint/typescript-estree': 5.48.2_typescript@5.0.1-rc
+      '@typescript-eslint/utils': 5.48.2_uzrczp7j3g6yfuwxvyxa54h6uu
       debug: 4.3.4
       eslint: 8.32.0
-      tsutils: 3.21.0_typescript@4.8.4
-      typescript: 4.8.4
+      tsutils: 3.21.0_typescript@5.0.1-rc
+      typescript: 5.0.1-rc
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -3315,7 +3315,7 @@ packages:
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dev: true
 
-  /@typescript-eslint/typescript-estree/5.42.1_typescript@4.8.4:
+  /@typescript-eslint/typescript-estree/5.42.1_typescript@5.0.1-rc:
     resolution: {integrity: sha512-qElc0bDOuO0B8wDhhW4mYVgi/LZL+igPwXtV87n69/kYC/7NG3MES0jHxJNCr4EP7kY1XVsRy8C/u3DYeTKQmw==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -3330,13 +3330,13 @@ packages:
       globby: 11.1.0
       is-glob: 4.0.3
       semver: 7.3.8
-      tsutils: 3.21.0_typescript@4.8.4
-      typescript: 4.8.4
+      tsutils: 3.21.0_typescript@5.0.1-rc
+      typescript: 5.0.1-rc
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@typescript-eslint/typescript-estree/5.48.2_typescript@4.8.4:
+  /@typescript-eslint/typescript-estree/5.48.2_typescript@5.0.1-rc:
     resolution: {integrity: sha512-bibvD3z6ilnoVxUBFEgkO0k0aFvUc4Cttt0dAreEr+nrAHhWzkO83PEVVuieK3DqcgL6VAK5dkzK8XUVja5Zcg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -3351,13 +3351,13 @@ packages:
       globby: 11.1.0
       is-glob: 4.0.3
       semver: 7.3.8
-      tsutils: 3.21.0_typescript@4.8.4
-      typescript: 4.8.4
+      tsutils: 3.21.0_typescript@5.0.1-rc
+      typescript: 5.0.1-rc
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@typescript-eslint/utils/5.42.1_yygwinqv3a2io74xmwofqb7uka:
+  /@typescript-eslint/utils/5.42.1_uzrczp7j3g6yfuwxvyxa54h6uu:
     resolution: {integrity: sha512-Gxvf12xSp3iYZd/fLqiQRD4uKZjDNR01bQ+j8zvhPjpsZ4HmvEFL/tC4amGNyxN9Rq+iqvpHLhlqx6KTxz9ZyQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -3367,7 +3367,7 @@ packages:
       '@types/semver': 7.3.12
       '@typescript-eslint/scope-manager': 5.42.1
       '@typescript-eslint/types': 5.42.1
-      '@typescript-eslint/typescript-estree': 5.42.1_typescript@4.8.4
+      '@typescript-eslint/typescript-estree': 5.42.1_typescript@5.0.1-rc
       eslint: 8.32.0
       eslint-scope: 5.1.1
       eslint-utils: 3.0.0_eslint@8.32.0
@@ -3377,7 +3377,7 @@ packages:
       - typescript
     dev: true
 
-  /@typescript-eslint/utils/5.48.2_yygwinqv3a2io74xmwofqb7uka:
+  /@typescript-eslint/utils/5.48.2_uzrczp7j3g6yfuwxvyxa54h6uu:
     resolution: {integrity: sha512-2h18c0d7jgkw6tdKTlNaM7wyopbLRBiit8oAxoP89YnuBOzCZ8g8aBCaCqq7h208qUTroL7Whgzam7UY3HVLow==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -3387,7 +3387,7 @@ packages:
       '@types/semver': 7.3.12
       '@typescript-eslint/scope-manager': 5.48.2
       '@typescript-eslint/types': 5.48.2
-      '@typescript-eslint/typescript-estree': 5.48.2_typescript@4.8.4
+      '@typescript-eslint/typescript-estree': 5.48.2_typescript@5.0.1-rc
       eslint: 8.32.0
       eslint-scope: 5.1.1
       eslint-utils: 3.0.0_eslint@8.32.0
@@ -6148,7 +6148,7 @@ packages:
       htmlparser2: 8.0.1
     dev: true
 
-  /eslint-plugin-jest/27.1.5_5rcd23qw3h5vuffwo2owxb3hw4:
+  /eslint-plugin-jest/27.1.5_zqbx7n34hjqf6dg5zxcwtay5wu:
     resolution: {integrity: sha512-CK2dekZ5VBdzsOSOH5Fc1rwC+cWXjkcyrmf1RV714nDUDKu+o73TTJiDxpbILG8PtPPpAAl3ywzh5QA7Ft0mjA==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     peerDependencies:
@@ -6161,8 +6161,8 @@ packages:
       jest:
         optional: true
     dependencies:
-      '@typescript-eslint/eslint-plugin': 5.48.2_iljmjqxcygjq3saipl7gerxpvi
-      '@typescript-eslint/utils': 5.42.1_yygwinqv3a2io74xmwofqb7uka
+      '@typescript-eslint/eslint-plugin': 5.48.2_a7vej7oc6hh2ocwmwvqmnazx4i
+      '@typescript-eslint/utils': 5.42.1_uzrczp7j3g6yfuwxvyxa54h6uu
       eslint: 8.32.0
       jest: 29.3.1_odkjkoia5xunhxkdrka32ib6vi
     transitivePeerDependencies:
@@ -7812,7 +7812,7 @@ packages:
       pretty-format: 29.3.1
       slash: 3.0.0
       strip-json-comments: 3.1.1
-      ts-node: 10.9.1_cbe7ovvae6zqfnmtgctpgpys54
+      ts-node: 10.9.1_b6uwiy5v3234vnrcoqehlbbouy
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -11278,7 +11278,7 @@ packages:
     engines: {node: '>=6.10'}
     dev: false
 
-  /ts-node/10.9.1_cbe7ovvae6zqfnmtgctpgpys54:
+  /ts-node/10.9.1_b6uwiy5v3234vnrcoqehlbbouy:
     resolution: {integrity: sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==}
     hasBin: true
     peerDependencies:
@@ -11304,7 +11304,7 @@ packages:
       create-require: 1.1.1
       diff: 4.0.2
       make-error: 1.3.6
-      typescript: 4.8.4
+      typescript: 5.0.1-rc
       v8-compile-cache-lib: 3.0.1
       yn: 3.1.1
     dev: true
@@ -11348,14 +11348,14 @@ packages:
     resolution: {integrity: sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==}
     dev: true
 
-  /tsutils/3.21.0_typescript@4.8.4:
+  /tsutils/3.21.0_typescript@5.0.1-rc:
     resolution: {integrity: sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==}
     engines: {node: '>= 6'}
     peerDependencies:
       typescript: '>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta'
     dependencies:
       tslib: 1.14.1
-      typescript: 4.8.4
+      typescript: 5.0.1-rc
     dev: true
 
   /tunnel-agent/0.6.0:
@@ -11437,10 +11437,10 @@ packages:
       typedoc: '>=0.23.0'
     dependencies:
       handlebars: 4.7.7
-      typedoc: 0.23.18_typescript@4.8.4
+      typedoc: 0.23.18_typescript@5.0.1-rc
     dev: true
 
-  /typedoc/0.23.18_typescript@4.8.4:
+  /typedoc/0.23.18_typescript@5.0.1-rc:
     resolution: {integrity: sha512-0Tq/uFkUuWyRYyjOShTkhsOm6u5E8wf0i6L76/k5znEaxvWKHGeT2ywZThGrDrryV/skO/REM824D1gm8ccQuA==}
     engines: {node: '>= 14.14'}
     hasBin: true
@@ -11451,7 +11451,7 @@ packages:
       marked: 4.1.1
       minimatch: 5.1.0
       shiki: 0.11.1
-      typescript: 4.8.4
+      typescript: 5.0.1-rc
     dev: true
 
   /typescript/4.8.4:
@@ -11460,6 +11460,12 @@ packages:
     hasBin: true
     dev: true
 
+  /typescript/5.0.1-rc:
+    resolution: {integrity: sha512-zh75jY8gPo/y7fpmlTVN2bb2MigoLx4hGk+Cla9pY6lgSTvzJrmQQrRt5S80VTsEt6biWPZJgLK2nm6f0Ya+mA==}
+    engines: {node: '>=4.2.0'}
+    hasBin: true
+    dev: true
+
   /uc.micro/1.0.6:
     resolution: {integrity: sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==}
     dev: true
diff --git a/tsconfig.json b/tsconfig.json
index c66d627845a..47c49f495b4 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -29,7 +29,7 @@
     /* Modules */
     "module": "es2022" /* Specify what module code is generated. */,
     // "rootDir": "./packages" /* Specify the root folder within your source files. */,
-    "moduleResolution": "node" /* Specify how TypeScript looks up a file from a given module specifier. */,
+    "moduleResolution": "nodenext" /* 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. */
@@ -49,8 +49,9 @@
 
     /* Emit */
     "declaration": true /* Generate .d.ts files from TypeScript and JavaScript files in your project. */,
+    "allowImportingTsExtensions": true /* Allow importing *.ts files (Vite requires it) */,
     // "declarationMap": true,                           /* Create sourcemaps for d.ts files. */
-    // "emitDeclarationOnly": true,                      /* Only output d.ts files and not JavaScript files. */
+    "emitDeclarationOnly": true /* Only output d.ts files and not JavaScript files (Vite creates our JavaScript files) */,
     // "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */
     // "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If `declaration` is true, also designates a file that bundles all .d.ts output. */
     // "outDir": "./dist" /* Specify an output folder for all emitted files. */,
@@ -104,5 +105,15 @@
     // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
     "skipLibCheck": true /* Skip type checking all .d.ts files. */
   },
+  "ts-node": {
+    "compilerOptions": {
+      /**
+       * These two values are `true` for source-code generated by Vite,
+       * but must be `false` for scripts ran by ts-node
+       */
+      "allowImportingTsExtensions": false,
+      "emitDeclarationOnly": false
+    }
+  },
   "include": ["./package.json"]
 }