` or `
` tags with `class="mermaid"`. From these tags mermaid will try to read the diagram/chart definitions and render them into SVG charts.**
+**Doing so commands the mermaid parser to look for the `` or `
` tags with `class="mermaid"`. From these tags, mermaid tries read the diagram/chart definitions and render them into SVG charts.**
-**Examples can be found at** [Other examples](../syntax/examples.md)
+**Examples can be found in** [Other examples](../syntax/examples.md)
## Sibling projects
diff --git a/package.json b/package.json
index 92b979d750..0485d6f6e0 100644
--- a/package.json
+++ b/package.json
@@ -58,6 +58,7 @@
"@commitlint/cli": "^17.2.0",
"@commitlint/config-conventional": "^17.2.0",
"@cspell/eslint-plugin": "^6.14.2",
+ "@rollup/plugin-typescript": "^11.0.0",
"@types/cors": "^2.8.13",
"@types/eslint": "^8.4.10",
"@types/express": "^4.17.17",
diff --git a/packages/mermaid-example-diagram/src/diagram-definition.ts b/packages/mermaid-example-diagram/src/diagram-definition.ts
index c31b3d6e71..f29c8ee7ff 100644
--- a/packages/mermaid-example-diagram/src/diagram-definition.ts
+++ b/packages/mermaid-example-diagram/src/diagram-definition.ts
@@ -1,9 +1,9 @@
// @ts-ignore: TODO Fix ts errors
-import parser from './parser/exampleDiagram';
-import * as db from './exampleDiagramDb';
-import renderer from './exampleDiagramRenderer';
-import styles from './styles';
-import { injectUtils } from './mermaidUtils';
+import parser from './parser/exampleDiagram.jison';
+import * as db from './exampleDiagramDb.js';
+import renderer from './exampleDiagramRenderer.js';
+import styles from './styles.js';
+import { injectUtils } from './mermaidUtils.js';
export const diagram = {
db,
diff --git a/packages/mermaid-example-diagram/src/exampleDiagram.spec.js b/packages/mermaid-example-diagram/src/exampleDiagram.spec.js
index 96c8cd5b26..9cfe33a1ba 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.js';
// Todo fix utils functions for tests
import {
log,
@@ -8,7 +8,7 @@ import {
getConfig,
sanitizeText,
setupGraphViewBox,
-} from '../../mermaid/src/diagram-api/diagramAPI';
+} from '../../mermaid/src/diagram-api/diagramAPI.js';
injectUtils(log, setLogLevel, getConfig, sanitizeText, setupGraphViewBox);
diff --git a/packages/mermaid-example-diagram/src/exampleDiagramDb.js b/packages/mermaid-example-diagram/src/exampleDiagramDb.js
index 8429ec5d6d..a5fa88e6d7 100644
--- a/packages/mermaid-example-diagram/src/exampleDiagramDb.js
+++ b/packages/mermaid-example-diagram/src/exampleDiagramDb.js
@@ -1,5 +1,5 @@
/** Created by knut on 15-01-14. */
-import { log } from './mermaidUtils';
+import { log } from './mermaidUtils.js';
var message = '';
var info = false;
diff --git a/packages/mermaid-example-diagram/src/exampleDiagramRenderer.js b/packages/mermaid-example-diagram/src/exampleDiagramRenderer.js
index 0d73406778..2c6839203e 100644
--- a/packages/mermaid-example-diagram/src/exampleDiagramRenderer.js
+++ b/packages/mermaid-example-diagram/src/exampleDiagramRenderer.js
@@ -1,6 +1,6 @@
/** Created by knut on 14-12-11. */
import { select } from 'd3';
-import { log, getConfig, setupGraphViewbox } from './mermaidUtils';
+import { log, getConfig, setupGraphViewbox } from './mermaidUtils.js';
/**
* Draws a an info picture in the tag with id: id based on the graph definition in text.
diff --git a/packages/mermaid-example-diagram/tsconfig.json b/packages/mermaid-example-diagram/tsconfig.json
index 310137cc0f..45076b7b52 100644
--- a/packages/mermaid-example-diagram/tsconfig.json
+++ b/packages/mermaid-example-diagram/tsconfig.json
@@ -1,6 +1,5 @@
{
"extends": "../../tsconfig.json",
- "module": "esnext",
"compilerOptions": {
"rootDir": "./src",
"outDir": "./dist"
diff --git a/packages/mermaid/src/Diagram.ts b/packages/mermaid/src/Diagram.ts
index adb596734a..4fb329b28e 100644
--- a/packages/mermaid/src/Diagram.ts
+++ b/packages/mermaid/src/Diagram.ts
@@ -1,11 +1,11 @@
-import * as configApi from './config';
-import { log } from './logger';
-import { getDiagram, registerDiagram } from './diagram-api/diagramAPI';
-import { detectType, getDiagramLoader } from './diagram-api/detectType';
-import { extractFrontMatter } from './diagram-api/frontmatter';
-import { UnknownDiagramError } from './errors';
-import { DetailedError } from './utils';
-import { cleanupComments } from './diagram-api/comments';
+import * as configApi from './config.js';
+import { log } from './logger.js';
+import { getDiagram, registerDiagram } from './diagram-api/diagramAPI.js';
+import { detectType, getDiagramLoader } from './diagram-api/detectType.js';
+import { extractFrontMatter } from './diagram-api/frontmatter.js';
+import { UnknownDiagramError } from './errors.js';
+import { DetailedError } from './utils.js';
+import { cleanupComments } from './diagram-api/comments.js';
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 95b87d990d..a2d19ef246 100644
--- a/packages/mermaid/src/__mocks__/mermaidAPI.ts
+++ b/packages/mermaid/src/__mocks__/mermaidAPI.ts
@@ -3,9 +3,9 @@
*
* We can't easily use `vi.spyOn(mermaidAPI, "function")` since the object is frozen with `Object.freeze()`.
*/
-import * as configApi from '../config';
+import * as configApi from '../config.js';
import { vi } from 'vitest';
-import { mermaidAPI as mAPI } from '../mermaidAPI';
+import { mermaidAPI as mAPI } from '../mermaidAPI.js';
// original version cannot be modified since it was frozen with `Object.freeze()`
export const mermaidAPI = {
diff --git a/packages/mermaid/src/accessibility.spec.ts b/packages/mermaid/src/accessibility.spec.ts
index 60415ea374..eac82ee340 100644
--- a/packages/mermaid/src/accessibility.spec.ts
+++ b/packages/mermaid/src/accessibility.spec.ts
@@ -1,6 +1,6 @@
-import { MockedD3 } from './tests/MockedD3';
-import { setA11yDiagramInfo, addSVGa11yTitleDescription } from './accessibility';
-import { D3Element } from './mermaidAPI';
+import { MockedD3 } from './tests/MockedD3.js';
+import { setA11yDiagramInfo, addSVGa11yTitleDescription } from './accessibility.js';
+import { D3Element } from './mermaidAPI.js';
describe('accessibility', () => {
const fauxSvgNode = new MockedD3();
diff --git a/packages/mermaid/src/accessibility.ts b/packages/mermaid/src/accessibility.ts
index 8e073aa76f..eba3ba9a75 100644
--- a/packages/mermaid/src/accessibility.ts
+++ b/packages/mermaid/src/accessibility.ts
@@ -5,7 +5,7 @@
* @see https://www.w3.org/TR/svg-aam-1.0/
*
*/
-import { D3Element } from './mermaidAPI';
+import { D3Element } from './mermaidAPI.js';
import isEmpty from 'lodash-es/isEmpty.js';
diff --git a/packages/mermaid/src/commonDb.ts b/packages/mermaid/src/commonDb.ts
index a9ad0f54bd..4e1e5141a6 100644
--- a/packages/mermaid/src/commonDb.ts
+++ b/packages/mermaid/src/commonDb.ts
@@ -1,5 +1,5 @@
-import { sanitizeText as _sanitizeText } from './diagrams/common/common';
-import { getConfig } from './config';
+import { sanitizeText as _sanitizeText } from './diagrams/common/common.js';
+import { getConfig } from './config.js';
let title = '';
let diagramTitle = '';
let description = '';
diff --git a/packages/mermaid/src/config.spec.js b/packages/mermaid/src/config.spec.js
index b104f37ccd..1f7fd976b3 100644
--- a/packages/mermaid/src/config.spec.js
+++ b/packages/mermaid/src/config.spec.js
@@ -1,4 +1,4 @@
-import * as configApi from './config';
+import * as configApi from './config.js';
describe('when working with site config', function () {
beforeEach(() => {
diff --git a/packages/mermaid/src/config.ts b/packages/mermaid/src/config.ts
index bc0066cec3..838716e2fb 100644
--- a/packages/mermaid/src/config.ts
+++ b/packages/mermaid/src/config.ts
@@ -1,8 +1,8 @@
-import assignWithDepth from './assignWithDepth';
-import { log } from './logger';
-import theme from './themes';
-import config from './defaultConfig';
-import type { MermaidConfig } from './config.type';
+import assignWithDepth from './assignWithDepth.js';
+import { log } from './logger.js';
+import theme from './themes/index.js';
+import config from './defaultConfig.js';
+import type { MermaidConfig } from './config.type.js';
export const defaultConfig: MermaidConfig = Object.freeze(config);
diff --git a/packages/mermaid/src/dagre-wrapper/clusters.js b/packages/mermaid/src/dagre-wrapper/clusters.js
index 2b87b91a6a..1ce7166890 100644
--- a/packages/mermaid/src/dagre-wrapper/clusters.js
+++ b/packages/mermaid/src/dagre-wrapper/clusters.js
@@ -1,10 +1,10 @@
-import intersectRect from './intersect/intersect-rect';
-import { log } from '../logger';
-import createLabel from './createLabel';
-import { createText } from '../rendering-util/createText';
+import intersectRect from './intersect/intersect-rect.js';
+import { log } from '../logger.js';
+import createLabel from './createLabel.js';
+import { createText } from '../rendering-util/createText.js';
import { select } from 'd3';
-import { getConfig } from '../config';
-import { evaluate } from '../diagrams/common/common';
+import { getConfig } from '../config.js';
+import { evaluate } from '../diagrams/common/common.js';
const rect = (parent, node) => {
log.info('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 ff7834c4f3..a8351c812f 100644
--- a/packages/mermaid/src/dagre-wrapper/createLabel.js
+++ b/packages/mermaid/src/dagre-wrapper/createLabel.js
@@ -1,8 +1,8 @@
import { select } from 'd3';
-import { log } from '../logger';
-import { getConfig } from '../config';
-import { evaluate } from '../diagrams/common/common';
-import { decodeEntities } from '../mermaidAPI';
+import { log } from '../logger.js';
+import { getConfig } from '../config.js';
+import { evaluate } from '../diagrams/common/common.js';
+import { decodeEntities } from '../mermaidAPI.js';
/**
* @param dom
diff --git a/packages/mermaid/src/dagre-wrapper/edges.js b/packages/mermaid/src/dagre-wrapper/edges.js
index d4b7d37b8a..1581658b05 100644
--- a/packages/mermaid/src/dagre-wrapper/edges.js
+++ b/packages/mermaid/src/dagre-wrapper/edges.js
@@ -1,10 +1,10 @@
-import { log } from '../logger';
-import createLabel from './createLabel';
-import { createText } from '../rendering-util/createText';
+import { log } from '../logger.js';
+import createLabel from './createLabel.js';
+import { createText } from '../rendering-util/createText.js';
import { line, curveBasis, select } from 'd3';
-import { getConfig } from '../config';
-import utils from '../utils';
-import { evaluate } from '../diagrams/common/common';
+import { getConfig } from '../config.js';
+import utils from '../utils.js';
+import { evaluate } from '../diagrams/common/common.js';
let edgeLabels = {};
let terminalLabels = {};
diff --git a/packages/mermaid/src/dagre-wrapper/edges.spec.js b/packages/mermaid/src/dagre-wrapper/edges.spec.js
index 627691a8e5..9b2772ecd8 100644
--- a/packages/mermaid/src/dagre-wrapper/edges.spec.js
+++ b/packages/mermaid/src/dagre-wrapper/edges.spec.js
@@ -1,5 +1,5 @@
-import { intersection } from './edges';
-import { setLogLevel } from '../logger';
+import { intersection } from './edges.js';
+import { setLogLevel } from '../logger.js';
describe('Graphlib decorations', () => {
let node;
diff --git a/packages/mermaid/src/dagre-wrapper/index.js b/packages/mermaid/src/dagre-wrapper/index.js
index f569fc8c53..590242b029 100644
--- a/packages/mermaid/src/dagre-wrapper/index.js
+++ b/packages/mermaid/src/dagre-wrapper/index.js
@@ -1,18 +1,18 @@
import { layout as dagreLayout } from 'dagre-d3-es/src/dagre/index.js';
import * as graphlibJson from 'dagre-d3-es/src/graphlib/json.js';
-import insertMarkers from './markers';
-import { updateNodeBounds } from './shapes/util';
+import insertMarkers from './markers.js';
+import { updateNodeBounds } from './shapes/util.js';
import {
clear as clearGraphlib,
clusterDb,
adjustClustersAndEdges,
findNonClusterChild,
sortNodesByHierarchy,
-} from './mermaid-graphlib';
-import { insertNode, positionNode, clear as clearNodes, setNodeElem } from './nodes';
-import { insertCluster, clear as clearClusters } from './clusters';
-import { insertEdgeLabel, positionEdgeLabel, insertEdge, clear as clearEdges } from './edges';
-import { log } from '../logger';
+} from './mermaid-graphlib.js';
+import { insertNode, positionNode, clear as clearNodes, setNodeElem } from './nodes.js';
+import { insertCluster, clear as clearClusters } from './clusters.js';
+import { insertEdgeLabel, positionEdgeLabel, insertEdge, clear as clearEdges } from './edges.js';
+import { log } from '../logger.js';
const recursiveRender = async (_elem, graph, diagramtype, parentCluster) => {
log.info('Graph in recursive render: XXX', graphlibJson.write(graph), parentCluster);
diff --git a/packages/mermaid/src/dagre-wrapper/intersect/intersect-circle.js b/packages/mermaid/src/dagre-wrapper/intersect/intersect-circle.js
index c4d320426c..8f5ba72dfc 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 cd124150fc..6941372c7d 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 c231eb3e5b..57d092fdfe 100644
--- a/packages/mermaid/src/dagre-wrapper/markers.js
+++ b/packages/mermaid/src/dagre-wrapper/markers.js
@@ -1,6 +1,6 @@
/** Setup arrow head and define the marker. The result is appended to the svg. */
-import { log } from '../logger';
+import { log } from '../logger.js';
// Only add the number of markers that the diagram needs
const insertMarkers = (elem, markerArray, type, id) => {
diff --git a/packages/mermaid/src/dagre-wrapper/mermaid-graphlib.js b/packages/mermaid/src/dagre-wrapper/mermaid-graphlib.js
index 875ac4deff..72ef969653 100644
--- a/packages/mermaid/src/dagre-wrapper/mermaid-graphlib.js
+++ b/packages/mermaid/src/dagre-wrapper/mermaid-graphlib.js
@@ -1,5 +1,5 @@
/** Decorates with functions required by mermaids dagre-wrapper. */
-import { log } from '../logger';
+import { log } from '../logger.js';
import * as graphlibJson from 'dagre-d3-es/src/graphlib/json.js';
import * as graphlib from 'dagre-d3-es/src/graphlib/index.js';
diff --git a/packages/mermaid/src/dagre-wrapper/mermaid-graphlib.spec.js b/packages/mermaid/src/dagre-wrapper/mermaid-graphlib.spec.js
index 25fb75d643..1444a82c48 100644
--- a/packages/mermaid/src/dagre-wrapper/mermaid-graphlib.spec.js
+++ b/packages/mermaid/src/dagre-wrapper/mermaid-graphlib.spec.js
@@ -5,8 +5,8 @@ import {
adjustClustersAndEdges,
extractDescendants,
sortNodesByHierarchy,
-} from './mermaid-graphlib';
-import { setLogLevel, log } from '../logger';
+} from './mermaid-graphlib.js';
+import { setLogLevel, log } from '../logger.js';
describe('Graphlib decorations', () => {
let g;
diff --git a/packages/mermaid/src/dagre-wrapper/nodes.js b/packages/mermaid/src/dagre-wrapper/nodes.js
index e0eafe0323..b842fa9a52 100644
--- a/packages/mermaid/src/dagre-wrapper/nodes.js
+++ b/packages/mermaid/src/dagre-wrapper/nodes.js
@@ -1,12 +1,12 @@
import { select } from 'd3';
-import { log } from '../logger';
-import { labelHelper, updateNodeBounds, insertPolygonShape } from './shapes/util';
-import { getConfig } from '../config';
+import { log } from '../logger.js';
+import { labelHelper, updateNodeBounds, insertPolygonShape } from './shapes/util.js';
+import { getConfig } from '../config.js';
import intersect from './intersect/index.js';
-import createLabel from './createLabel';
-import note from './shapes/note';
-import { parseMember } from '../diagrams/class/svgDraw';
-import { evaluate } from '../diagrams/common/common';
+import createLabel from './createLabel.js';
+import note from './shapes/note.js';
+import { parseMember } from '../diagrams/class/svgDraw.js';
+import { evaluate } from '../diagrams/common/common.js';
const question = async (parent, node) => {
const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
diff --git a/packages/mermaid/src/dagre-wrapper/patterns.js b/packages/mermaid/src/dagre-wrapper/patterns.js
index 75afa8bcc0..3025f8ef9c 100644
--- a/packages/mermaid/src/dagre-wrapper/patterns.js
+++ b/packages/mermaid/src/dagre-wrapper/patterns.js
@@ -1,6 +1,6 @@
/** Setup arrow head and define the marker. The result is appended to the svg. */
-// import { log } from '../logger';
+// import { log } from '../logger.js';
// Only add the number of markers that the diagram needs
const insertPatterns = (elem, patternArray, type, id) => {
diff --git a/packages/mermaid/src/dagre-wrapper/shapes/note.js b/packages/mermaid/src/dagre-wrapper/shapes/note.js
index 415df13e38..17661e1696 100644
--- a/packages/mermaid/src/dagre-wrapper/shapes/note.js
+++ b/packages/mermaid/src/dagre-wrapper/shapes/note.js
@@ -1,6 +1,6 @@
-import { updateNodeBounds, labelHelper } from './util';
-import { log } from '../../logger';
-import { getConfig } from '../../config';
+import { updateNodeBounds, labelHelper } from './util.js';
+import { log } from '../../logger.js';
+import { getConfig } from '../../config.js';
import intersect from '../intersect/index.js';
const note = async (parent, node) => {
diff --git a/packages/mermaid/src/dagre-wrapper/shapes/util.js b/packages/mermaid/src/dagre-wrapper/shapes/util.js
index d6cb4cd8d0..7ad412bdb7 100644
--- a/packages/mermaid/src/dagre-wrapper/shapes/util.js
+++ b/packages/mermaid/src/dagre-wrapper/shapes/util.js
@@ -1,9 +1,9 @@
-import createLabel from '../createLabel';
-import { createText } from '../../rendering-util/createText';
-import { getConfig } from '../../config';
-import { decodeEntities } from '../../mermaidAPI';
+import createLabel from '../createLabel.js';
+import { createText } from '../../rendering-util/createText.js';
+import { getConfig } from '../../config.js';
+import { decodeEntities } from '../../mermaidAPI.js';
import { select } from 'd3';
-import { evaluate, sanitizeText } from '../../diagrams/common/common';
+import { evaluate, sanitizeText } from '../../diagrams/common/common.js';
export const labelHelper = async (parent, node, _classes, isNode) => {
let classes;
diff --git a/packages/mermaid/src/defaultConfig.ts b/packages/mermaid/src/defaultConfig.ts
index 2ca9952516..9c6d6f46e3 100644
--- a/packages/mermaid/src/defaultConfig.ts
+++ b/packages/mermaid/src/defaultConfig.ts
@@ -1,5 +1,5 @@
-import theme from './themes';
-import { MermaidConfig } from './config.type';
+import theme from './themes/index.js';
+import { MermaidConfig } from './config.type.js';
/**
* **Configuration methods in Mermaid version 8.6.0 have been updated, to learn more[[click
* here](8.6.0_docs.md)].**
diff --git a/packages/mermaid/src/diagram-api/comments.spec.ts b/packages/mermaid/src/diagram-api/comments.spec.ts
index a2c896079b..57a7d4a348 100644
--- a/packages/mermaid/src/diagram-api/comments.spec.ts
+++ b/packages/mermaid/src/diagram-api/comments.spec.ts
@@ -1,12 +1,12 @@
// tests to check that comments are removed
-import { cleanupComments } from './comments';
+import { cleanupComments } from './comments.js';
import { describe, it, expect } from 'vitest';
describe('comments', () => {
it('should remove comments', () => {
const text = `
-
+
%% This is a comment
%% This is another comment
graph TD
@@ -27,7 +27,7 @@ graph TD
%% This is another comment
%%{init: {'theme': 'forest'}}%%
%%{ init: {'theme': 'space before init'}}%%
-%%{init: {'theme': 'space after ending'}}%%
+%%{init: {'theme': 'space after ending'}}%%
graph TD
A-->B
@@ -37,7 +37,7 @@ graph TD
expect(cleanupComments(text)).toMatchInlineSnapshot(`
"%%{init: {'theme': 'forest'}}%%
%%{ init: {'theme': 'space before init'}}%%
- %%{init: {'theme': 'space after ending'}}%%
+ %%{init: {'theme': 'space after ending'}}%%
graph TD
A-->B
diff --git a/packages/mermaid/src/diagram-api/detectType.ts b/packages/mermaid/src/diagram-api/detectType.ts
index 0d26487cfe..8351a67dff 100644
--- a/packages/mermaid/src/diagram-api/detectType.ts
+++ b/packages/mermaid/src/diagram-api/detectType.ts
@@ -1,14 +1,14 @@
-import { MermaidConfig } from '../config.type';
-import { log } from '../logger';
+import { MermaidConfig } from '../config.type.js';
+import { log } from '../logger.js';
import type {
DetectorRecord,
DiagramDetector,
DiagramLoader,
ExternalDiagramDefinition,
-} from './types';
-import { frontMatterRegex } from './frontmatter';
-import { getDiagram, registerDiagram } from './diagramAPI';
-import { UnknownDiagramError } from '../errors';
+} from './types.js';
+import { frontMatterRegex } from './frontmatter.js';
+import { getDiagram, registerDiagram } from './diagramAPI.js';
+import { UnknownDiagramError } from '../errors.js';
const directive = /%{2}{\s*(?:(\w+)\s*:|(\w+))\s*(?:(\w+)|((?:(?!}%{2}).|\r?\n)*))?\s*(?:}%{2})?/gi;
const anyComment = /\s*%%.*\n/gm;
diff --git a/packages/mermaid/src/diagram-api/diagram-orchestration.spec.ts b/packages/mermaid/src/diagram-api/diagram-orchestration.spec.ts
index 81909fe5ed..d6c6b30463 100644
--- a/packages/mermaid/src/diagram-api/diagram-orchestration.spec.ts
+++ b/packages/mermaid/src/diagram-api/diagram-orchestration.spec.ts
@@ -1,6 +1,6 @@
import { it, describe, expect } from 'vitest';
-import { detectType } from './detectType';
-import { addDiagrams } from './diagram-orchestration';
+import { detectType } from './detectType.js';
+import { addDiagrams } from './diagram-orchestration.js';
describe('diagram-orchestration', () => {
it('should register diagrams', () => {
diff --git a/packages/mermaid/src/diagram-api/diagram-orchestration.ts b/packages/mermaid/src/diagram-api/diagram-orchestration.ts
index a88a34f193..0d4e6159da 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 errorDiagram from '../diagrams/error/errorDiagram';
-import flowchartElk from '../diagrams/flowchart/elk/detector';
-import timeline from '../diagrams/timeline/detector';
-import mindmap from '../diagrams/mindmap/detector';
-import { registerLazyLoadedDiagrams } from './detectType';
-import { registerDiagram } from './diagramAPI';
+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 errorDiagram from '../diagrams/error/errorDiagram.js';
+import flowchartElk from '../diagrams/flowchart/elk/detector.js';
+import timeline from '../diagrams/timeline/detector.js';
+import mindmap from '../diagrams/mindmap/detector.js';
+import { registerLazyLoadedDiagrams } from './detectType.js';
+import { registerDiagram } from './diagramAPI.js';
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 4bdcc5e391..49bde1a66f 100644
--- a/packages/mermaid/src/diagram-api/diagramAPI.spec.ts
+++ b/packages/mermaid/src/diagram-api/diagramAPI.spec.ts
@@ -1,8 +1,8 @@
-import { detectType } from './detectType';
-import { getDiagram, registerDiagram } from './diagramAPI';
-import { addDiagrams } from './diagram-orchestration';
-import { DiagramDetector } from './types';
-import { getDiagramFromText } from '../Diagram';
+import { detectType } from './detectType.js';
+import { getDiagram, registerDiagram } from './diagramAPI.js';
+import { addDiagrams } from './diagram-orchestration.js';
+import { DiagramDetector } from './types.js';
+import { getDiagramFromText } from '../Diagram.js';
import { it, describe, expect, beforeAll } from 'vitest';
addDiagrams();
diff --git a/packages/mermaid/src/diagram-api/diagramAPI.ts b/packages/mermaid/src/diagram-api/diagramAPI.ts
index c5841b96bd..7e89d9cd79 100644
--- a/packages/mermaid/src/diagram-api/diagramAPI.ts
+++ b/packages/mermaid/src/diagram-api/diagramAPI.ts
@@ -1,12 +1,12 @@
-import { addDetector } from './detectType';
-import { log as _log, setLogLevel as _setLogLevel } from '../logger';
-import { getConfig as _getConfig } from '../config';
-import { sanitizeText as _sanitizeText } from '../diagrams/common/common';
-import { setupGraphViewbox as _setupGraphViewbox } from '../setupGraphViewbox';
-import { addStylesForDiagram } from '../styles';
-import { DiagramDefinition, DiagramDetector } from './types';
-import * as _commonDb from '../commonDb';
-import { parseDirective as _parseDirective } from '../directiveUtils';
+import { addDetector } from './detectType.js';
+import { log as _log, setLogLevel as _setLogLevel } from '../logger.js';
+import { getConfig as _getConfig } from '../config.js';
+import { sanitizeText as _sanitizeText } from '../diagrams/common/common.js';
+import { setupGraphViewbox as _setupGraphViewbox } from '../setupGraphViewbox.js';
+import { addStylesForDiagram } from '../styles.js';
+import { DiagramDefinition, DiagramDetector } from './types.js';
+import * as _commonDb from '../commonDb.js';
+import { parseDirective as _parseDirective } from '../directiveUtils.js';
/*
Packaging and exposing resources for external diagrams so that they can import
diff --git a/packages/mermaid/src/diagram-api/frontmatter.spec.ts b/packages/mermaid/src/diagram-api/frontmatter.spec.ts
index 4eb9789e2b..ef05c8f149 100644
--- a/packages/mermaid/src/diagram-api/frontmatter.spec.ts
+++ b/packages/mermaid/src/diagram-api/frontmatter.spec.ts
@@ -1,5 +1,5 @@
import { vi } from 'vitest';
-import { extractFrontMatter } from './frontmatter';
+import { extractFrontMatter } from './frontmatter.js';
const dbMock = () => ({ setDiagramTitle: vi.fn() });
diff --git a/packages/mermaid/src/diagram-api/frontmatter.ts b/packages/mermaid/src/diagram-api/frontmatter.ts
index a9c4995e63..8c0e998f69 100644
--- a/packages/mermaid/src/diagram-api/frontmatter.ts
+++ b/packages/mermaid/src/diagram-api/frontmatter.ts
@@ -1,4 +1,4 @@
-import { DiagramDb } from './types';
+import { DiagramDb } from './types.js';
// The "* as yaml" part is necessary for tree-shaking
import * as yaml from 'js-yaml';
diff --git a/packages/mermaid/src/diagram-api/types.ts b/packages/mermaid/src/diagram-api/types.ts
index 8c5d14eb83..f95ca5ab5d 100644
--- a/packages/mermaid/src/diagram-api/types.ts
+++ b/packages/mermaid/src/diagram-api/types.ts
@@ -1,4 +1,4 @@
-import { MermaidConfig } from '../config.type';
+import { MermaidConfig } from '../config.type.js';
export interface InjectUtils {
_log: any;
diff --git a/packages/mermaid/src/diagram.spec.ts b/packages/mermaid/src/diagram.spec.ts
index 5a4718d0bd..aa613d8e52 100644
--- a/packages/mermaid/src/diagram.spec.ts
+++ b/packages/mermaid/src/diagram.spec.ts
@@ -1,7 +1,7 @@
import { describe, test, expect } from 'vitest';
-import { Diagram, getDiagramFromText } from './Diagram';
-import { addDetector } from './diagram-api/detectType';
-import { addDiagrams } from './diagram-api/diagram-orchestration';
+import { Diagram, getDiagramFromText } from './Diagram.js';
+import { addDetector } from './diagram-api/detectType.js';
+import { addDiagrams } from './diagram-api/diagram-orchestration.js';
addDiagrams();
diff --git a/packages/mermaid/src/diagrams/c4/c4Db.js b/packages/mermaid/src/diagrams/c4/c4Db.js
index d337b15c0d..09dcc13cda 100644
--- a/packages/mermaid/src/diagrams/c4/c4Db.js
+++ b/packages/mermaid/src/diagrams/c4/c4Db.js
@@ -1,7 +1,7 @@
-import mermaidAPI from '../../mermaidAPI';
-import * as configApi from '../../config';
-import { sanitizeText } from '../common/common';
-import { setAccTitle, getAccTitle, getAccDescription, setAccDescription } from '../../commonDb';
+import mermaidAPI from '../../mermaidAPI.js';
+import * as configApi from '../../config.js';
+import { sanitizeText } from '../common/common.js';
+import { setAccTitle, getAccTitle, getAccDescription, setAccDescription } from '../../commonDb.js';
let c4ShapeArray = [];
let boundaryParseStack = [''];
diff --git a/packages/mermaid/src/diagrams/c4/c4Detector.ts b/packages/mermaid/src/diagrams/c4/c4Detector.ts
index 08b8bbf55d..e6e82c6bed 100644
--- a/packages/mermaid/src/diagrams/c4/c4Detector.ts
+++ b/packages/mermaid/src/diagrams/c4/c4Detector.ts
@@ -1,4 +1,4 @@
-import type { ExternalDiagramDefinition } from '../../diagram-api/types';
+import type { ExternalDiagramDefinition } from '../../diagram-api/types.js';
const id = 'c4';
@@ -7,7 +7,7 @@ const detector = (txt: string) => {
};
const loader = async () => {
- const { diagram } = await import('./c4Diagram');
+ const { diagram } = await import('./c4Diagram.js');
return { id, diagram };
};
diff --git a/packages/mermaid/src/diagrams/c4/c4Diagram.ts b/packages/mermaid/src/diagrams/c4/c4Diagram.ts
index 6f8f25db2c..04567fafa3 100644
--- a/packages/mermaid/src/diagrams/c4/c4Diagram.ts
+++ b/packages/mermaid/src/diagrams/c4/c4Diagram.ts
@@ -1,10 +1,10 @@
// @ts-ignore: TODO Fix ts errors
-import c4Parser from './parser/c4Diagram';
-import c4Db from './c4Db';
-import c4Renderer from './c4Renderer';
-import c4Styles from './styles';
-import { MermaidConfig } from '../../config.type';
-import { DiagramDefinition } from '../../diagram-api/types';
+import c4Parser from './parser/c4Diagram.jison';
+import c4Db from './c4Db.js';
+import c4Renderer from './c4Renderer.js';
+import c4Styles from './styles.js';
+import { MermaidConfig } from '../../config.type.js';
+import { DiagramDefinition } from '../../diagram-api/types.js';
export const diagram: DiagramDefinition = {
parser: c4Parser,
diff --git a/packages/mermaid/src/diagrams/c4/c4Renderer.js b/packages/mermaid/src/diagrams/c4/c4Renderer.js
index a51fe0b6af..28600241c1 100644
--- a/packages/mermaid/src/diagrams/c4/c4Renderer.js
+++ b/packages/mermaid/src/diagrams/c4/c4Renderer.js
@@ -1,13 +1,13 @@
import { select } from 'd3';
-import svgDraw from './svgDraw';
-import { log } from '../../logger';
-import { parser } from './parser/c4Diagram';
-import common from '../common/common';
-import c4Db from './c4Db';
-import * as configApi from '../../config';
-import assignWithDepth from '../../assignWithDepth';
-import { wrapLabel, calculateTextWidth, calculateTextHeight } from '../../utils';
-import { configureSvgSize } from '../../setupGraphViewbox';
+import svgDraw from './svgDraw.js';
+import { log } from '../../logger.js';
+import { parser } from './parser/c4Diagram.jison';
+import common from '../common/common.js';
+import c4Db from './c4Db.js';
+import * as configApi from '../../config.js';
+import assignWithDepth from '../../assignWithDepth.js';
+import { wrapLabel, calculateTextWidth, calculateTextHeight } from '../../utils.js';
+import { configureSvgSize } from '../../setupGraphViewbox.js';
let globalBoundaryMaxX = 0,
globalBoundaryMaxY = 0;
diff --git a/packages/mermaid/src/diagrams/c4/parser/c4Boundary.spec.js b/packages/mermaid/src/diagrams/c4/parser/c4Boundary.spec.js
index c7130f5579..f43f007489 100644
--- a/packages/mermaid/src/diagrams/c4/parser/c4Boundary.spec.js
+++ b/packages/mermaid/src/diagrams/c4/parser/c4Boundary.spec.js
@@ -1,6 +1,6 @@
-import c4Db from '../c4Db';
+import c4Db from '../c4Db.js';
import c4 from './c4Diagram.jison';
-import { setConfig } from '../../../config';
+import { setConfig } from '../../../config.js';
setConfig({
securityLevel: 'strict',
diff --git a/packages/mermaid/src/diagrams/c4/parser/c4Diagram.spec.js b/packages/mermaid/src/diagrams/c4/parser/c4Diagram.spec.js
index b79934b846..543e87a218 100644
--- a/packages/mermaid/src/diagrams/c4/parser/c4Diagram.spec.js
+++ b/packages/mermaid/src/diagrams/c4/parser/c4Diagram.spec.js
@@ -1,6 +1,6 @@
-import c4Db from '../c4Db';
+import c4Db from '../c4Db.js';
import c4 from './c4Diagram.jison';
-import { setConfig } from '../../../config';
+import { setConfig } from '../../../config.js';
setConfig({
securityLevel: 'strict',
diff --git a/packages/mermaid/src/diagrams/c4/parser/c4Person.spec.js b/packages/mermaid/src/diagrams/c4/parser/c4Person.spec.js
index b504c0384a..4eff0047c2 100644
--- a/packages/mermaid/src/diagrams/c4/parser/c4Person.spec.js
+++ b/packages/mermaid/src/diagrams/c4/parser/c4Person.spec.js
@@ -1,6 +1,6 @@
-import c4Db from '../c4Db';
+import c4Db from '../c4Db.js';
import c4 from './c4Diagram.jison';
-import { setConfig } from '../../../config';
+import { setConfig } from '../../../config.js';
setConfig({
securityLevel: 'strict',
diff --git a/packages/mermaid/src/diagrams/c4/parser/c4PersonExt.spec.js b/packages/mermaid/src/diagrams/c4/parser/c4PersonExt.spec.js
index 76547600af..f4b824e886 100644
--- a/packages/mermaid/src/diagrams/c4/parser/c4PersonExt.spec.js
+++ b/packages/mermaid/src/diagrams/c4/parser/c4PersonExt.spec.js
@@ -1,6 +1,6 @@
-import c4Db from '../c4Db';
+import c4Db from '../c4Db.js';
import c4 from './c4Diagram.jison';
-import { setConfig } from '../../../config';
+import { setConfig } from '../../../config.js';
setConfig({
securityLevel: 'strict',
diff --git a/packages/mermaid/src/diagrams/c4/parser/c4System.spec.js b/packages/mermaid/src/diagrams/c4/parser/c4System.spec.js
index 6d81c73799..e2c2b26f71 100644
--- a/packages/mermaid/src/diagrams/c4/parser/c4System.spec.js
+++ b/packages/mermaid/src/diagrams/c4/parser/c4System.spec.js
@@ -1,6 +1,6 @@
-import c4Db from '../c4Db';
+import c4Db from '../c4Db.js';
import c4 from './c4Diagram.jison';
-import { setConfig } from '../../../config';
+import { setConfig } from '../../../config.js';
setConfig({
securityLevel: 'strict',
diff --git a/packages/mermaid/src/diagrams/c4/svgDraw.js b/packages/mermaid/src/diagrams/c4/svgDraw.js
index 690dd26ad1..2d660e6e7f 100644
--- a/packages/mermaid/src/diagrams/c4/svgDraw.js
+++ b/packages/mermaid/src/diagrams/c4/svgDraw.js
@@ -1,4 +1,4 @@
-import common from '../common/common';
+import common from '../common/common.js';
import { sanitizeUrl } from '@braintree/sanitize-url';
export const drawRect = function (elem, rectData) {
diff --git a/packages/mermaid/src/diagrams/class/classDb.ts b/packages/mermaid/src/diagrams/class/classDb.ts
index 48ef7ccbed..8fa1eeb265 100644
--- a/packages/mermaid/src/diagrams/class/classDb.ts
+++ b/packages/mermaid/src/diagrams/class/classDb.ts
@@ -1,10 +1,10 @@
// @ts-expect-error - d3 types issue
import { select, Selection } from 'd3';
-import { log } from '../../logger';
-import * as configApi from '../../config';
-import common from '../common/common';
-import utils from '../../utils';
-import mermaidAPI from '../../mermaidAPI';
+import { log } from '../../logger.js';
+import * as configApi from '../../config.js';
+import common from '../common/common.js';
+import utils from '../../utils.js';
+import mermaidAPI from '../../mermaidAPI.js';
import {
setAccTitle,
getAccTitle,
@@ -13,8 +13,8 @@ import {
clear as commonClear,
setDiagramTitle,
getDiagramTitle,
-} from '../../commonDb';
-import { ClassRelation, ClassNode, ClassNote, ClassMap } from './classTypes';
+} from '../../commonDb.js';
+import { ClassRelation, ClassNode, ClassNote, ClassMap } from './classTypes.js';
const MERMAID_DOM_ID_PREFIX = 'classId-';
diff --git a/packages/mermaid/src/diagrams/class/classDetector-V2.ts b/packages/mermaid/src/diagrams/class/classDetector-V2.ts
index 1d42557193..9eda53a4ba 100644
--- a/packages/mermaid/src/diagrams/class/classDetector-V2.ts
+++ b/packages/mermaid/src/diagrams/class/classDetector-V2.ts
@@ -1,4 +1,4 @@
-import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types';
+import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types.js';
const id = 'classDiagram';
@@ -15,7 +15,7 @@ const detector: DiagramDetector = (txt, config) => {
};
const loader = async () => {
- const { diagram } = await import('./classDiagram-v2');
+ const { diagram } = await import('./classDiagram-v2.js');
return { id, diagram };
};
diff --git a/packages/mermaid/src/diagrams/class/classDetector.ts b/packages/mermaid/src/diagrams/class/classDetector.ts
index ef8ea61e76..e2eee9bb3e 100644
--- a/packages/mermaid/src/diagrams/class/classDetector.ts
+++ b/packages/mermaid/src/diagrams/class/classDetector.ts
@@ -1,4 +1,4 @@
-import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types';
+import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types.js';
const id = 'class';
@@ -12,7 +12,7 @@ const detector: DiagramDetector = (txt, config) => {
};
const loader = async () => {
- const { diagram } = await import('./classDiagram');
+ const { diagram } = await import('./classDiagram.js');
return { id, diagram };
};
diff --git a/packages/mermaid/src/diagrams/class/classDiagram-styles.spec.js b/packages/mermaid/src/diagrams/class/classDiagram-styles.spec.js
index 702fa3ac3c..a693fbbeab 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.js';
describe('class diagram, ', function () {
describe('when parsing data from a classDiagram it', function () {
diff --git a/packages/mermaid/src/diagrams/class/classDiagram-v2.ts b/packages/mermaid/src/diagrams/class/classDiagram-v2.ts
index 2f0bbf371a..5b952627cf 100644
--- a/packages/mermaid/src/diagrams/class/classDiagram-v2.ts
+++ b/packages/mermaid/src/diagrams/class/classDiagram-v2.ts
@@ -1,9 +1,9 @@
-import { DiagramDefinition } from '../../diagram-api/types';
+import { DiagramDefinition } from '../../diagram-api/types.js';
// @ts-ignore: TODO Fix ts errors
-import parser from './parser/classDiagram';
-import db from './classDb';
-import styles from './styles';
-import renderer from './classRenderer-v2';
+import parser from './parser/classDiagram.jison';
+import db from './classDb.js';
+import styles from './styles.js';
+import renderer from './classRenderer-v2.js';
export const diagram: DiagramDefinition = {
parser,
diff --git a/packages/mermaid/src/diagrams/class/classDiagram.spec.ts b/packages/mermaid/src/diagrams/class/classDiagram.spec.ts
index 24fbc41ea3..6dbf9c0818 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.js';
import { vi, describe, it, expect } from 'vitest';
const spyOn = vi.spyOn;
diff --git a/packages/mermaid/src/diagrams/class/classDiagram.ts b/packages/mermaid/src/diagrams/class/classDiagram.ts
index 250d04176f..0d2a246b4e 100644
--- a/packages/mermaid/src/diagrams/class/classDiagram.ts
+++ b/packages/mermaid/src/diagrams/class/classDiagram.ts
@@ -1,9 +1,9 @@
-import { DiagramDefinition } from '../../diagram-api/types';
+import { DiagramDefinition } from '../../diagram-api/types.js';
// @ts-ignore: TODO Fix ts errors
-import parser from './parser/classDiagram';
-import db from './classDb';
-import styles from './styles';
-import renderer from './classRenderer';
+import parser from './parser/classDiagram.jison';
+import db from './classDb.js';
+import styles from './styles.js';
+import renderer from './classRenderer.js';
export const diagram: DiagramDefinition = {
parser,
diff --git a/packages/mermaid/src/diagrams/class/classRenderer-v2.ts b/packages/mermaid/src/diagrams/class/classRenderer-v2.ts
index e2cd3ddf76..82447c54fa 100644
--- a/packages/mermaid/src/diagrams/class/classRenderer-v2.ts
+++ b/packages/mermaid/src/diagrams/class/classRenderer-v2.ts
@@ -1,14 +1,14 @@
// @ts-ignore d3 types are not available
import { select, curveLinear } from 'd3';
import * as graphlib from 'dagre-d3-es/src/graphlib/index.js';
-import { log } from '../../logger';
-import { getConfig } from '../../config';
+import { log } from '../../logger.js';
+import { getConfig } from '../../config.js';
import { render } from '../../dagre-wrapper/index.js';
-import utils from '../../utils';
-import { interpolateToCurve, getStylesFromArray } from '../../utils';
-import { setupGraphViewbox } from '../../setupGraphViewbox';
-import common from '../common/common';
-import { ClassRelation, ClassNote, ClassMap, EdgeData } from './classTypes';
+import utils from '../../utils.js';
+import { interpolateToCurve, getStylesFromArray } from '../../utils.js';
+import { setupGraphViewbox } from '../../setupGraphViewbox.js';
+import common from '../common/common.js';
+import { ClassRelation, ClassNote, ClassMap, EdgeData } from './classTypes.js';
const sanitizeText = (txt: string) => common.sanitizeText(txt, getConfig());
diff --git a/packages/mermaid/src/diagrams/class/classRenderer.js b/packages/mermaid/src/diagrams/class/classRenderer.js
index 80a7f26e46..3774f7b8ca 100644
--- a/packages/mermaid/src/diagrams/class/classRenderer.js
+++ b/packages/mermaid/src/diagrams/class/classRenderer.js
@@ -1,10 +1,10 @@
import { select } from 'd3';
import { layout as dagreLayout } from 'dagre-d3-es/src/dagre/index.js';
import * as graphlib from 'dagre-d3-es/src/graphlib/index.js';
-import { log } from '../../logger';
-import svgDraw from './svgDraw';
-import { configureSvgSize } from '../../setupGraphViewbox';
-import { getConfig } from '../../config';
+import { log } from '../../logger.js';
+import svgDraw from './svgDraw.js';
+import { configureSvgSize } from '../../setupGraphViewbox.js';
+import { getConfig } from '../../config.js';
let idCache = {};
const padding = 20;
diff --git a/packages/mermaid/src/diagrams/class/svgDraw.js b/packages/mermaid/src/diagrams/class/svgDraw.js
index cc6909280f..3ce8e980b0 100644
--- a/packages/mermaid/src/diagrams/class/svgDraw.js
+++ b/packages/mermaid/src/diagrams/class/svgDraw.js
@@ -1,7 +1,7 @@
import { line, curveBasis } from 'd3';
-import utils from '../../utils';
-import { log } from '../../logger';
-import { parseGenericTypes } from '../common/common';
+import utils from '../../utils.js';
+import { log } from '../../logger.js';
+import { parseGenericTypes } from '../common/common.js';
let edgeCount = 0;
export const drawEdge = function (elem, path, relation, conf, diagObj) {
diff --git a/packages/mermaid/src/diagrams/class/svgDraw.spec.js b/packages/mermaid/src/diagrams/class/svgDraw.spec.js
index ec8785559d..2e7c64fa0a 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 8fd6229da9..d1c68e8926 100644
--- a/packages/mermaid/src/diagrams/common/common.spec.js
+++ b/packages/mermaid/src/diagrams/common/common.spec.js
@@ -1,4 +1,4 @@
-import { sanitizeText, removeScript, parseGenericTypes } from './common';
+import { sanitizeText, removeScript, parseGenericTypes } from './common.js';
describe('when securityLevel is antiscript, all script must be removed', function () {
/**
diff --git a/packages/mermaid/src/diagrams/common/common.ts b/packages/mermaid/src/diagrams/common/common.ts
index d34a2df685..3b72e87182 100644
--- a/packages/mermaid/src/diagrams/common/common.ts
+++ b/packages/mermaid/src/diagrams/common/common.ts
@@ -1,5 +1,5 @@
import DOMPurify from 'dompurify';
-import { MermaidConfig } from '../../config.type';
+import { MermaidConfig } from '../../config.type.js';
/**
* Gets the rows of lines in a string
diff --git a/packages/mermaid/src/diagrams/er/erDb.js b/packages/mermaid/src/diagrams/er/erDb.js
index 026e084204..5f2af0da1b 100644
--- a/packages/mermaid/src/diagrams/er/erDb.js
+++ b/packages/mermaid/src/diagrams/er/erDb.js
@@ -1,6 +1,6 @@
-import { log } from '../../logger';
-import mermaidAPI from '../../mermaidAPI';
-import * as configApi from '../../config';
+import { log } from '../../logger.js';
+import mermaidAPI from '../../mermaidAPI.js';
+import * as configApi from '../../config.js';
import {
setAccTitle,
@@ -10,7 +10,7 @@ import {
clear as commonClear,
setDiagramTitle,
getDiagramTitle,
-} from '../../commonDb';
+} from '../../commonDb.js';
let entities = {};
let relationships = [];
diff --git a/packages/mermaid/src/diagrams/er/erDetector.ts b/packages/mermaid/src/diagrams/er/erDetector.ts
index f73baa4345..b8a191af2d 100644
--- a/packages/mermaid/src/diagrams/er/erDetector.ts
+++ b/packages/mermaid/src/diagrams/er/erDetector.ts
@@ -1,4 +1,4 @@
-import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types';
+import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types.js';
const id = 'er';
@@ -7,7 +7,7 @@ const detector: DiagramDetector = (txt) => {
};
const loader = async () => {
- const { diagram } = await import('./erDiagram');
+ const { diagram } = await import('./erDiagram.js');
return { id, diagram };
};
diff --git a/packages/mermaid/src/diagrams/er/erDiagram.ts b/packages/mermaid/src/diagrams/er/erDiagram.ts
index a5b0da9c15..da3d777ad0 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 5dd5024bb9..87d7ac607d 100644
--- a/packages/mermaid/src/diagrams/er/erRenderer.js
+++ b/packages/mermaid/src/diagrams/er/erRenderer.js
@@ -1,12 +1,12 @@
import * as graphlib from 'dagre-d3-es/src/graphlib/index.js';
import { line, curveBasis, select } from 'd3';
import { layout as dagreLayout } from 'dagre-d3-es/src/dagre/index.js';
-import { getConfig } from '../../config';
-import { log } from '../../logger';
-import utils from '../../utils';
-import erMarkers from './erMarkers';
-import { configureSvgSize } from '../../setupGraphViewbox';
-import { parseGenericTypes } from '../common/common';
+import { getConfig } from '../../config.js';
+import { log } from '../../logger.js';
+import utils from '../../utils.js';
+import erMarkers from './erMarkers.js';
+import { configureSvgSize } from '../../setupGraphViewbox.js';
+import { parseGenericTypes } from '../common/common.js';
import { v5 as uuid5 } from 'uuid';
/** Regex used to remove chars from the entity name so the result can be used in an id */
diff --git a/packages/mermaid/src/diagrams/er/erRenderer.spec.ts b/packages/mermaid/src/diagrams/er/erRenderer.spec.ts
index ca0f62bd28..0cba06b56a 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 ca497a2ac2..904521d501 100644
--- a/packages/mermaid/src/diagrams/er/parser/erDiagram.spec.js
+++ b/packages/mermaid/src/diagrams/er/parser/erDiagram.spec.js
@@ -1,6 +1,6 @@
-import { setConfig } from '../../../config';
-import erDb from '../erDb';
-import erDiagram from './erDiagram'; // jison file
+import { setConfig } from '../../../config.js';
+import erDb from '../erDb.js';
+import erDiagram from './erDiagram.jison'; // jison file
setConfig({
securityLevel: 'strict',
diff --git a/packages/mermaid/src/diagrams/error/errorDiagram.ts b/packages/mermaid/src/diagrams/error/errorDiagram.ts
index 7b9f18c3b4..76efdb0ae5 100644
--- a/packages/mermaid/src/diagrams/error/errorDiagram.ts
+++ b/packages/mermaid/src/diagrams/error/errorDiagram.ts
@@ -1,6 +1,6 @@
-import { DiagramDefinition } from '../../diagram-api/types';
-import styles from './styles';
-import renderer from './errorRenderer';
+import { DiagramDefinition } from '../../diagram-api/types.js';
+import styles from './styles.js';
+import renderer from './errorRenderer.js';
export const diagram: DiagramDefinition = {
db: {
clear: () => {
diff --git a/packages/mermaid/src/diagrams/error/errorRenderer.ts b/packages/mermaid/src/diagrams/error/errorRenderer.ts
index 046bcfdcf4..aa0e9e8164 100644
--- a/packages/mermaid/src/diagrams/error/errorRenderer.ts
+++ b/packages/mermaid/src/diagrams/error/errorRenderer.ts
@@ -1,8 +1,8 @@
/** Created by knut on 14-12-11. */
// @ts-ignore TODO: Investigate D3 issue
import { select } from 'd3';
-import { log } from '../../logger';
-import { getErrorMessage } from '../../utils';
+import { log } from '../../logger.js';
+import { getErrorMessage } from '../../utils.js';
/**
* Merges the value of `conf` with the passed `cnf`
diff --git a/packages/mermaid/src/diagrams/flowchart/elk/detector.spec.ts b/packages/mermaid/src/diagrams/flowchart/elk/detector.spec.ts
index 17cd5c0eae..6e949c57b9 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 c6fa779574..482bc961ca 100644
--- a/packages/mermaid/src/diagrams/flowchart/elk/detector.ts
+++ b/packages/mermaid/src/diagrams/flowchart/elk/detector.ts
@@ -1,5 +1,5 @@
-import type { MermaidConfig } from '../../../config.type';
-import type { ExternalDiagramDefinition, DiagramDetector } from '../../../diagram-api/types';
+import type { MermaidConfig } from '../../../config.type.js';
+import type { ExternalDiagramDefinition, DiagramDetector } from '../../../diagram-api/types.js';
const id = 'flowchart-elk';
diff --git a/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js b/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js
index efadb41992..b86c537dd9 100644
--- a/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js
+++ b/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js
@@ -2,14 +2,14 @@ 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 { labelHelper } from '../../../dagre-wrapper/shapes/util';
+import { findCommonAncestor } from './render-utils.js';
+import { labelHelper } from '../../../dagre-wrapper/shapes/util.js';
import { addHtmlLabel } from 'dagre-d3-es/src/dagre-js/label/add-html-label.js';
-import { getConfig } from '../../../config';
-import { log } from '../../../logger';
-import { setupGraphViewbox } from '../../../setupGraphViewbox';
-import common, { evaluate } from '../../common/common';
-import { interpolateToCurve, getStylesFromArray } from '../../../utils';
+import { getConfig } from '../../../config.js';
+import { log } from '../../../logger.js';
+import { setupGraphViewbox } from '../../../setupGraphViewbox.js';
+import common, { evaluate } from '../../common/common.js';
+import { interpolateToCurve, getStylesFromArray } from '../../../utils.js';
import ELK from 'elkjs/lib/elk.bundled.js';
const elk = new ELK();
diff --git a/packages/mermaid/src/diagrams/flowchart/elk/flowchart-elk-definition.ts b/packages/mermaid/src/diagrams/flowchart/elk/flowchart-elk-definition.ts
index c45873238d..9855c73899 100644
--- a/packages/mermaid/src/diagrams/flowchart/elk/flowchart-elk-definition.ts
+++ b/packages/mermaid/src/diagrams/flowchart/elk/flowchart-elk-definition.ts
@@ -1,9 +1,9 @@
// @ts-ignore: JISON typing missing
-import parser from '../parser/flow';
+import parser from '../parser/flow.jison';
-import * as db from '../flowDb';
-import renderer from './flowRenderer-elk';
-import styles from './styles';
+import * as db from '../flowDb.js';
+import renderer from './flowRenderer-elk.js';
+import styles from './styles.js';
export const diagram = {
db,
diff --git a/packages/mermaid/src/diagrams/flowchart/elk/render-utils.spec.ts b/packages/mermaid/src/diagrams/flowchart/elk/render-utils.spec.ts
index d845fa6974..d048b07a37 100644
--- a/packages/mermaid/src/diagrams/flowchart/elk/render-utils.spec.ts
+++ b/packages/mermaid/src/diagrams/flowchart/elk/render-utils.spec.ts
@@ -1,4 +1,4 @@
-import { findCommonAncestor, TreeData } from './render-utils';
+import { findCommonAncestor, TreeData } from './render-utils.js';
describe('when rendering a flowchart using elk ', () => {
let lookupDb: TreeData;
beforeEach(() => {
diff --git a/packages/mermaid/src/diagrams/flowchart/flowChartShapes.spec.js b/packages/mermaid/src/diagrams/flowchart/flowChartShapes.spec.js
index e7e535056b..96e6f6fd71 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 85dc5337e5..f7e1a38db5 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowDb.js
+++ b/packages/mermaid/src/diagrams/flowchart/flowDb.js
@@ -1,9 +1,9 @@
import { select } from 'd3';
-import utils from '../../utils';
-import * as configApi from '../../config';
-import common from '../common/common';
-import mermaidAPI from '../../mermaidAPI';
-import { log } from '../../logger';
+import utils from '../../utils.js';
+import * as configApi from '../../config.js';
+import common from '../common/common.js';
+import mermaidAPI from '../../mermaidAPI.js';
+import { log } from '../../logger.js';
import {
setAccTitle,
getAccTitle,
@@ -12,7 +12,7 @@ import {
clear as commonClear,
setDiagramTitle,
getDiagramTitle,
-} from '../../commonDb';
+} from '../../commonDb.js';
const MERMAID_DOM_ID_PREFIX = 'flowchart-';
let vertexCounter = 0;
diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.spec.js b/packages/mermaid/src/diagrams/flowchart/flowDb.spec.js
index c1aa640fcd..09f8c8678d 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 5b2aaf1bd1..9c00545bfe 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowDetector-v2.ts
+++ b/packages/mermaid/src/diagrams/flowchart/flowDetector-v2.ts
@@ -1,5 +1,5 @@
-import type { DiagramDetector } from '../../diagram-api/types';
-import type { ExternalDiagramDefinition } from '../../diagram-api/types';
+import type { DiagramDetector } from '../../diagram-api/types.js';
+import type { ExternalDiagramDefinition } from '../../diagram-api/types.js';
const id = 'flowchart-v2';
@@ -19,7 +19,7 @@ const detector: DiagramDetector = (txt, config) => {
};
const loader = async () => {
- const { diagram } = await import('./flowDiagram-v2');
+ const { diagram } = await import('./flowDiagram-v2.js');
return { id, diagram };
};
diff --git a/packages/mermaid/src/diagrams/flowchart/flowDetector.ts b/packages/mermaid/src/diagrams/flowchart/flowDetector.ts
index a8b116ccd3..84aafa249a 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowDetector.ts
+++ b/packages/mermaid/src/diagrams/flowchart/flowDetector.ts
@@ -1,4 +1,4 @@
-import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types';
+import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types.js';
const id = 'flowchart';
@@ -15,7 +15,7 @@ const detector: DiagramDetector = (txt, config) => {
};
const loader = async () => {
- const { diagram } = await import('./flowDiagram');
+ const { diagram } = await import('./flowDiagram.js');
return { id, diagram };
};
diff --git a/packages/mermaid/src/diagrams/flowchart/flowDiagram-v2.ts b/packages/mermaid/src/diagrams/flowchart/flowDiagram-v2.ts
index 8cd49de65a..7a2c0e0bc5 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowDiagram-v2.ts
+++ b/packages/mermaid/src/diagrams/flowchart/flowDiagram-v2.ts
@@ -1,10 +1,10 @@
// @ts-ignore: TODO Fix ts errors
-import flowParser from './parser/flow';
-import flowDb from './flowDb';
-import flowRendererV2 from './flowRenderer-v2';
-import flowStyles from './styles';
-import { MermaidConfig } from '../../config.type';
-import { setConfig } from '../../config';
+import flowParser from './parser/flow.jison';
+import flowDb from './flowDb.js';
+import flowRendererV2 from './flowRenderer-v2.js';
+import flowStyles from './styles.js';
+import { MermaidConfig } from '../../config.type.js';
+import { setConfig } from '../../config.js';
export const diagram = {
parser: flowParser,
diff --git a/packages/mermaid/src/diagrams/flowchart/flowDiagram.ts b/packages/mermaid/src/diagrams/flowchart/flowDiagram.ts
index d68a7c01df..7018e4890d 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowDiagram.ts
+++ b/packages/mermaid/src/diagrams/flowchart/flowDiagram.ts
@@ -1,10 +1,10 @@
// @ts-ignore: TODO Fix ts errors
-import flowParser from './parser/flow';
-import flowDb from './flowDb';
-import flowRenderer from './flowRenderer';
-import flowRendererV2 from './flowRenderer-v2';
-import flowStyles from './styles';
-import { MermaidConfig } from '../../config.type';
+import flowParser from './parser/flow.jison';
+import flowDb from './flowDb.js';
+import flowRenderer from './flowRenderer.js';
+import flowRendererV2 from './flowRenderer-v2.js';
+import flowStyles from './styles.js';
+import { MermaidConfig } from '../../config.type.js';
export const diagram = {
parser: flowParser,
diff --git a/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js b/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js
index ce7aebb5c5..0b8d475430 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js
+++ b/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js
@@ -1,16 +1,16 @@
import * as graphlib from 'dagre-d3-es/src/graphlib/index.js';
import { select, curveLinear, selectAll } from 'd3';
-import flowDb from './flowDb';
-import { getConfig } from '../../config';
-import utils from '../../utils';
+import flowDb from './flowDb.js';
+import { getConfig } from '../../config.js';
+import utils from '../../utils.js';
import { render } from '../../dagre-wrapper/index.js';
import { addHtmlLabel } from 'dagre-d3-es/src/dagre-js/label/add-html-label.js';
-import { log } from '../../logger';
-import common, { evaluate } from '../common/common';
-import { interpolateToCurve, getStylesFromArray } from '../../utils';
-import { setupGraphViewbox } from '../../setupGraphViewbox';
+import { log } from '../../logger.js';
+import common, { evaluate } from '../common/common.js';
+import { interpolateToCurve, getStylesFromArray } from '../../utils.js';
+import { setupGraphViewbox } from '../../setupGraphViewbox.js';
const conf = {};
export const setConf = function (cnf) {
diff --git a/packages/mermaid/src/diagrams/flowchart/flowRenderer.addEdges.spec.js b/packages/mermaid/src/diagrams/flowchart/flowRenderer.addEdges.spec.js
index 7744053f0f..4b7fe272d6 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.js';
const diag = {
db: flowDb,
diff --git a/packages/mermaid/src/diagrams/flowchart/flowRenderer.js b/packages/mermaid/src/diagrams/flowchart/flowRenderer.js
index 63234b57cc..5757069355 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowRenderer.js
+++ b/packages/mermaid/src/diagrams/flowchart/flowRenderer.js
@@ -1,14 +1,14 @@
import * as graphlib from 'dagre-d3-es/src/graphlib/index.js';
import { select, curveLinear, selectAll } from 'd3';
-import { getConfig } from '../../config';
+import { getConfig } from '../../config.js';
import { render as Render } from 'dagre-d3-es';
import { applyStyle } from 'dagre-d3-es/src/dagre-js/util.js';
import { addHtmlLabel } from 'dagre-d3-es/src/dagre-js/label/add-html-label.js';
-import { log } from '../../logger';
-import common, { evaluate } from '../common/common';
-import { interpolateToCurve, getStylesFromArray } from '../../utils';
-import { setupGraphViewbox } from '../../setupGraphViewbox';
-import flowChartShapes from './flowChartShapes';
+import { log } from '../../logger.js';
+import common, { evaluate } from '../common/common.js';
+import { interpolateToCurve, getStylesFromArray } from '../../utils.js';
+import { setupGraphViewbox } from '../../setupGraphViewbox.js';
+import flowChartShapes from './flowChartShapes.js';
const conf = {};
export const setConf = function (cnf) {
diff --git a/packages/mermaid/src/diagrams/flowchart/flowRenderer.spec.js b/packages/mermaid/src/diagrams/flowchart/flowRenderer.spec.js
index 4e1ce10193..0e9e8c0dea 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowRenderer.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/flowRenderer.spec.js
@@ -1,5 +1,5 @@
-import { addVertices, addEdges } from './flowRenderer';
-import { setConfig } from '../../config';
+import { addVertices, addEdges } from './flowRenderer.js';
+import { setConfig } from '../../config.js';
setConfig({
flowchart: {
diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow-arrows.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/flow-arrows.spec.js
index 594e7220b3..699aa333d0 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.js';
setConfig({
securityLevel: 'strict',
diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow-comments.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/flow-comments.spec.js
index cb1e4a9232..4b0b0c830b 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow-comments.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow-comments.spec.js
@@ -1,7 +1,7 @@
-import flowDb from '../flowDb';
-import flow from './flow';
-import { setConfig } from '../../../config';
-import { cleanupComments } from '../../../diagram-api/comments';
+import flowDb from '../flowDb.js';
+import flow from './flow.jison';
+import { setConfig } from '../../../config.js';
+import { cleanupComments } from '../../../diagram-api/comments.js';
setConfig({
securityLevel: 'strict',
diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow-direction.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/flow-direction.spec.js
index 7726ce0f79..ce6b0b0c47 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.js';
setConfig({
securityLevel: 'strict',
diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow-edges.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/flow-edges.spec.js
index e2ecec4d59..dcac21ee75 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.js';
setConfig({
securityLevel: 'strict',
diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow-huge.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/flow-huge.spec.js
index 9097c49e31..48fc2be168 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.js';
setConfig({
securityLevel: 'strict',
diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow-interactions.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/flow-interactions.spec.js
index 7d3e3ed047..cb3f48ccae 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.js';
import { vi } from 'vitest';
const spyOn = vi.spyOn;
diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow-lines.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/flow-lines.spec.js
index 0fd1e9e9c8..ec157e646f 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.js';
setConfig({
securityLevel: 'strict',
diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow-md-string.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/flow-md-string.spec.js
index 005d257e06..0e6efaef19 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow-md-string.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow-md-string.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.js';
setConfig({
securityLevel: 'strict',
diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow-singlenode.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/flow-singlenode.spec.js
index ee41a5c394..b959f019ea 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.js';
setConfig({
securityLevel: 'strict',
diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow-style.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/flow-style.spec.js
index 050d64f917..512a0b8338 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.js';
setConfig({
securityLevel: 'strict',
diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow-text.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/flow-text.spec.js
index e990f41b42..db43e75bf1 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.js';
setConfig({
securityLevel: 'strict',
diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow-vertice-chaining.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/flow-vertice-chaining.spec.js
index 36aaae7673..3f1078030d 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.js';
setConfig({
securityLevel: 'strict',
diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/flow.spec.js
index 692e72f372..3852c4f92c 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow.spec.js
@@ -1,7 +1,7 @@
-import flowDb from '../flowDb';
-import flow from './flow';
-import { setConfig } from '../../../config';
-import { cleanupComments } from '../../../diagram-api/comments';
+import flowDb from '../flowDb.js';
+import flow from './flow.jison';
+import { setConfig } from '../../../config.js';
+import { cleanupComments } from '../../../diagram-api/comments.js';
setConfig({
securityLevel: 'strict',
diff --git a/packages/mermaid/src/diagrams/flowchart/parser/subgraph.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/subgraph.spec.js
index ae6f178b89..12b2e4a39a 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.js';
setConfig({
securityLevel: 'strict',
diff --git a/packages/mermaid/src/diagrams/gantt/ganttDb.js b/packages/mermaid/src/diagrams/gantt/ganttDb.js
index 6ce5336fda..dc811cb649 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/esm/index.js';
import dayjsIsoWeek from 'dayjs/esm/plugin/isoWeek/index.js';
import dayjsCustomParseFormat from 'dayjs/esm/plugin/customParseFormat/index.js';
import dayjsAdvancedFormat from 'dayjs/esm/plugin/advancedFormat/index.js';
-import { log } from '../../logger';
-import * as configApi from '../../config';
-import utils from '../../utils';
-import mermaidAPI from '../../mermaidAPI';
+import { log } from '../../logger.js';
+import * as configApi from '../../config.js';
+import utils from '../../utils.js';
+import mermaidAPI from '../../mermaidAPI.js';
import {
setAccTitle,
@@ -16,7 +16,7 @@ import {
clear as commonClear,
setDiagramTitle,
getDiagramTitle,
-} from '../../commonDb';
+} from '../../commonDb.js';
dayjs.extend(dayjsIsoWeek);
dayjs.extend(dayjsCustomParseFormat);
diff --git a/packages/mermaid/src/diagrams/gantt/ganttDb.spec.ts b/packages/mermaid/src/diagrams/gantt/ganttDb.spec.ts
index 7dc2e2a59e..c7e00bf694 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/esm/index.js';
-import ganttDb from './ganttDb';
-import { convert } from '../../tests/util';
+import ganttDb from './ganttDb.js';
+import { convert } from '../../tests/util.js';
describe('when using the ganttDb', function () {
beforeEach(function () {
diff --git a/packages/mermaid/src/diagrams/gantt/ganttDetector.ts b/packages/mermaid/src/diagrams/gantt/ganttDetector.ts
index 3fe2bbe7ef..4a736cb90d 100644
--- a/packages/mermaid/src/diagrams/gantt/ganttDetector.ts
+++ b/packages/mermaid/src/diagrams/gantt/ganttDetector.ts
@@ -1,4 +1,4 @@
-import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types';
+import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types.js';
const id = 'gantt';
@@ -7,7 +7,7 @@ const detector: DiagramDetector = (txt) => {
};
const loader = async () => {
- const { diagram } = await import('./ganttDiagram');
+ const { diagram } = await import('./ganttDiagram.js');
return { id, diagram };
};
diff --git a/packages/mermaid/src/diagrams/gantt/ganttDiagram.ts b/packages/mermaid/src/diagrams/gantt/ganttDiagram.ts
index b1341052d1..0104c7d0c8 100644
--- a/packages/mermaid/src/diagrams/gantt/ganttDiagram.ts
+++ b/packages/mermaid/src/diagrams/gantt/ganttDiagram.ts
@@ -1,9 +1,9 @@
// @ts-ignore: TODO Fix ts errors
-import ganttParser from './parser/gantt';
-import ganttDb from './ganttDb';
-import ganttRenderer from './ganttRenderer';
-import ganttStyles from './styles';
-import { DiagramDefinition } from '../../diagram-api/types';
+import ganttParser from './parser/gantt.jison';
+import ganttDb from './ganttDb.js';
+import ganttRenderer from './ganttRenderer.js';
+import ganttStyles from './styles.js';
+import { DiagramDefinition } from '../../diagram-api/types.js';
export const diagram: DiagramDefinition = {
parser: ganttParser,
diff --git a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
index fb692828f4..a148d8a9e4 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/esm/index.js';
-import { log } from '../../logger';
+import { log } from '../../logger.js';
import {
select,
scaleTime,
@@ -16,9 +16,9 @@ import {
timeWeek,
timeMonth,
} from 'd3';
-import common from '../common/common';
-import { getConfig } from '../../config';
-import { configureSvgSize } from '../../setupGraphViewbox';
+import common from '../common/common.js';
+import { getConfig } from '../../config.js';
+import { configureSvgSize } from '../../setupGraphViewbox.js';
export const setConf = function () {
log.debug('Something is calling, setConf, remove the call');
diff --git a/packages/mermaid/src/diagrams/gantt/parser/gantt.spec.js b/packages/mermaid/src/diagrams/gantt/parser/gantt.spec.js
index 9a1401cada..020bab0ed3 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.js';
import { vi } from 'vitest';
const spyOn = vi.spyOn;
const parserFnConstructor = (str) => {
diff --git a/packages/mermaid/src/diagrams/git/gitGraphAst.js b/packages/mermaid/src/diagrams/git/gitGraphAst.js
index dded48efae..416479d151 100644
--- a/packages/mermaid/src/diagrams/git/gitGraphAst.js
+++ b/packages/mermaid/src/diagrams/git/gitGraphAst.js
@@ -1,9 +1,9 @@
-import { log } from '../../logger';
-import { random } from '../../utils';
-import mermaidAPI from '../../mermaidAPI';
-import * as configApi from '../../config';
-import { getConfig } from '../../config';
-import common from '../common/common';
+import { log } from '../../logger.js';
+import { random } from '../../utils.js';
+import mermaidAPI from '../../mermaidAPI.js';
+import * as configApi from '../../config.js';
+import { getConfig } from '../../config.js';
+import common from '../common/common.js';
import {
setAccTitle,
getAccTitle,
@@ -12,7 +12,7 @@ import {
clear as commonClear,
setDiagramTitle,
getDiagramTitle,
-} from '../../commonDb';
+} from '../../commonDb.js';
let mainBranchName = getConfig().gitGraph.mainBranchName;
let mainBranchOrder = getConfig().gitGraph.mainBranchOrder;
diff --git a/packages/mermaid/src/diagrams/git/gitGraphDetector.ts b/packages/mermaid/src/diagrams/git/gitGraphDetector.ts
index 46d09c6e5a..aeb37e5bc0 100644
--- a/packages/mermaid/src/diagrams/git/gitGraphDetector.ts
+++ b/packages/mermaid/src/diagrams/git/gitGraphDetector.ts
@@ -1,5 +1,5 @@
-import type { DiagramDetector } from '../../diagram-api/types';
-import type { ExternalDiagramDefinition } from '../../diagram-api/types';
+import type { DiagramDetector } from '../../diagram-api/types.js';
+import type { ExternalDiagramDefinition } from '../../diagram-api/types.js';
const id = 'gitGraph';
@@ -8,7 +8,7 @@ const detector: DiagramDetector = (txt) => {
};
const loader = async () => {
- const { diagram } = await import('./gitGraphDiagram');
+ const { diagram } = await import('./gitGraphDiagram.js');
return { id, diagram };
};
diff --git a/packages/mermaid/src/diagrams/git/gitGraphDiagram.ts b/packages/mermaid/src/diagrams/git/gitGraphDiagram.ts
index 9ef3506a02..08ff126c44 100644
--- a/packages/mermaid/src/diagrams/git/gitGraphDiagram.ts
+++ b/packages/mermaid/src/diagrams/git/gitGraphDiagram.ts
@@ -1,9 +1,9 @@
// @ts-ignore: TODO Fix ts errors
-import gitGraphParser from './parser/gitGraph';
-import gitGraphDb from './gitGraphAst';
-import gitGraphRenderer from './gitGraphRenderer';
-import gitGraphStyles from './styles';
-import { DiagramDefinition } from '../../diagram-api/types';
+import gitGraphParser from './parser/gitGraph.jison';
+import gitGraphDb from './gitGraphAst.js';
+import gitGraphRenderer from './gitGraphRenderer.js';
+import gitGraphStyles from './styles.js';
+import { DiagramDefinition } from '../../diagram-api/types.js';
export const diagram: DiagramDefinition = {
parser: gitGraphParser,
diff --git a/packages/mermaid/src/diagrams/git/gitGraphParserV2.spec.js b/packages/mermaid/src/diagrams/git/gitGraphParserV2.spec.js
index cad44ea1fd..764fbb214c 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 ca288bfae7..b8cff72ec2 100644
--- a/packages/mermaid/src/diagrams/git/gitGraphRenderer-old.js
+++ b/packages/mermaid/src/diagrams/git/gitGraphRenderer-old.js
@@ -1,9 +1,9 @@
import { curveBasis, line, select } from 'd3';
-import db from './gitGraphAst';
-import gitGraphParser from './parser/gitGraph';
-import { logger } from '../../logger';
-import { interpolateToCurve } from '../../utils';
+import db from './gitGraphAst.js';
+import gitGraphParser from './parser/gitGraph.js';
+import { logger } from '../../logger.js';
+import { interpolateToCurve } from '../../utils.js';
let allCommitsDict = {};
let branchNum;
diff --git a/packages/mermaid/src/diagrams/git/gitGraphRenderer.js b/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
index 787eb24901..8d88c601dd 100644
--- a/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
+++ b/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
@@ -1,7 +1,7 @@
import { select } from 'd3';
-import { getConfig, setupGraphViewbox } from '../../diagram-api/diagramAPI';
-import { log } from '../../logger';
-import utils from '../../utils';
+import { getConfig, setupGraphViewbox } from '../../diagram-api/diagramAPI.js';
+import { log } from '../../logger.js';
+import utils from '../../utils.js';
let allCommitsDict = {};
diff --git a/packages/mermaid/src/diagrams/git/layout.js b/packages/mermaid/src/diagrams/git/layout.js
index de866a72b5..0dbe577659 100644
--- a/packages/mermaid/src/diagrams/git/layout.js
+++ b/packages/mermaid/src/diagrams/git/layout.js
@@ -1,4 +1,4 @@
-import { getConfig } from '../../config';
+import { getConfig } from '../../config.js';
export default (dir, _branches) => {
const config = getConfig().gitGraph;
diff --git a/packages/mermaid/src/diagrams/info/info.spec.js b/packages/mermaid/src/diagrams/info/info.spec.js
index 8bcce51d4f..6f1a59d1cd 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 2a04f16335..81ba8057f5 100644
--- a/packages/mermaid/src/diagrams/info/infoDb.js
+++ b/packages/mermaid/src/diagrams/info/infoDb.js
@@ -1,6 +1,6 @@
/** Created by knut on 15-01-14. */
-import { log } from '../../logger';
-import { clear } from '../../commonDb';
+import { log } from '../../logger.js';
+import { clear } from '../../commonDb.js';
var message = '';
var info = false;
diff --git a/packages/mermaid/src/diagrams/info/infoDetector.ts b/packages/mermaid/src/diagrams/info/infoDetector.ts
index a022e3ccb7..ad9b9163d6 100644
--- a/packages/mermaid/src/diagrams/info/infoDetector.ts
+++ b/packages/mermaid/src/diagrams/info/infoDetector.ts
@@ -1,4 +1,4 @@
-import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types';
+import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types.js';
const id = 'info';
@@ -7,7 +7,7 @@ const detector: DiagramDetector = (txt) => {
};
const loader = async () => {
- const { diagram } = await import('./infoDiagram');
+ const { diagram } = await import('./infoDiagram.js');
return { id, diagram };
};
diff --git a/packages/mermaid/src/diagrams/info/infoDiagram.ts b/packages/mermaid/src/diagrams/info/infoDiagram.ts
index a8100a79fb..a26e915e52 100644
--- a/packages/mermaid/src/diagrams/info/infoDiagram.ts
+++ b/packages/mermaid/src/diagrams/info/infoDiagram.ts
@@ -1,9 +1,9 @@
-import { DiagramDefinition } from '../../diagram-api/types';
+import { DiagramDefinition } from '../../diagram-api/types.js';
// @ts-ignore: TODO Fix ts errors
-import parser from './parser/info';
-import db from './infoDb';
-import styles from './styles';
-import renderer from './infoRenderer';
+import parser from './parser/info.jison';
+import db from './infoDb.js';
+import styles from './styles.js';
+import renderer from './infoRenderer.js';
export const diagram: DiagramDefinition = {
parser,
diff --git a/packages/mermaid/src/diagrams/info/infoRenderer.js b/packages/mermaid/src/diagrams/info/infoRenderer.js
index 1caa7222cc..9441a3226e 100644
--- a/packages/mermaid/src/diagrams/info/infoRenderer.js
+++ b/packages/mermaid/src/diagrams/info/infoRenderer.js
@@ -1,7 +1,7 @@
/** Created by knut on 14-12-11. */
import { select } from 'd3';
-import { log } from '../../logger';
-import { getConfig } from '../../config';
+import { log } from '../../logger.js';
+import { getConfig } from '../../config.js';
/**
* Draws a an info picture in the tag with id: id based on the graph definition in text.
diff --git a/packages/mermaid/src/diagrams/mindmap/detector.ts b/packages/mermaid/src/diagrams/mindmap/detector.ts
index 2e2b1c7d6a..95e16dea94 100644
--- a/packages/mermaid/src/diagrams/mindmap/detector.ts
+++ b/packages/mermaid/src/diagrams/mindmap/detector.ts
@@ -1,4 +1,4 @@
-import type { ExternalDiagramDefinition } from '../../diagram-api/types';
+import type { ExternalDiagramDefinition } from '../../diagram-api/types.js';
const id = 'mindmap';
const detector = (txt: string) => {
diff --git a/packages/mermaid/src/diagrams/mindmap/mindmap-definition.ts b/packages/mermaid/src/diagrams/mindmap/mindmap-definition.ts
index 61b41d3471..846fd5dc58 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 e8793e86ab..845205f9b3 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.js';
describe('when parsing a mindmap ', function () {
beforeEach(function () {
diff --git a/packages/mermaid/src/diagrams/mindmap/mindmapDb.js b/packages/mermaid/src/diagrams/mindmap/mindmapDb.js
index 71aa449d92..9413581d64 100644
--- a/packages/mermaid/src/diagrams/mindmap/mindmapDb.js
+++ b/packages/mermaid/src/diagrams/mindmap/mindmapDb.js
@@ -1,6 +1,6 @@
-import { getConfig } from '../../config';
-import { sanitizeText as _sanitizeText } from '../../diagrams/common/common';
-import { log } from '../../logger';
+import { getConfig } from '../../config.js';
+import { sanitizeText as _sanitizeText } from '../../diagrams/common/common.js';
+import { log } from '../../logger.js';
export const sanitizeText = (text) => _sanitizeText(text, getConfig());
diff --git a/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.js b/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.js
index 86260e1558..01d675d839 100644
--- a/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.js
+++ b/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.js
@@ -1,12 +1,12 @@
/** Created by knut on 14-12-11. */
import { select } from 'd3';
-import { log } from '../../logger';
-import { getConfig } from '../../config';
-import { setupGraphViewbox } from '../../setupGraphViewbox';
-import svgDraw from './svgDraw';
+import { log } from '../../logger.js';
+import { getConfig } from '../../config.js';
+import { setupGraphViewbox } from '../../setupGraphViewbox.js';
+import svgDraw from './svgDraw.js';
import cytoscape from 'cytoscape/dist/cytoscape.umd.js';
import coseBilkent from 'cytoscape-cose-bilkent';
-import * as db from './mindmapDb';
+import * as db from './mindmapDb.js';
// Inject the layout algorithm into cytoscape
cytoscape.use(coseBilkent);
diff --git a/packages/mermaid/src/diagrams/mindmap/svgDraw.js b/packages/mermaid/src/diagrams/mindmap/svgDraw.js
index ab7dcc1e3b..22132dae6c 100644
--- a/packages/mermaid/src/diagrams/mindmap/svgDraw.js
+++ b/packages/mermaid/src/diagrams/mindmap/svgDraw.js
@@ -1,6 +1,6 @@
import { select } from 'd3';
-import * as db from './mindmapDb';
-import { createText } from '../../rendering-util/createText';
+import * as db from './mindmapDb.js';
+import { createText } from '../../rendering-util/createText.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 21523dde49..5e5c0b4f51 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.js';
setConfig({
securityLevel: 'strict',
diff --git a/packages/mermaid/src/diagrams/pie/pieDb.js b/packages/mermaid/src/diagrams/pie/pieDb.js
index 5ccf6d29ed..2c86752c66 100644
--- a/packages/mermaid/src/diagrams/pie/pieDb.js
+++ b/packages/mermaid/src/diagrams/pie/pieDb.js
@@ -1,7 +1,7 @@
-import { log } from '../../logger';
-import mermaidAPI from '../../mermaidAPI';
-import * as configApi from '../../config';
-import common from '../common/common';
+import { log } from '../../logger.js';
+import mermaidAPI from '../../mermaidAPI.js';
+import * as configApi from '../../config.js';
+import common from '../common/common.js';
import {
setAccTitle,
getAccTitle,
@@ -10,7 +10,7 @@ import {
getAccDescription,
setAccDescription,
clear as commonClear,
-} from '../../commonDb';
+} from '../../commonDb.js';
let sections = {};
let showData = false;
diff --git a/packages/mermaid/src/diagrams/pie/pieDetector.ts b/packages/mermaid/src/diagrams/pie/pieDetector.ts
index dd1224db96..34d3c0cf6a 100644
--- a/packages/mermaid/src/diagrams/pie/pieDetector.ts
+++ b/packages/mermaid/src/diagrams/pie/pieDetector.ts
@@ -1,4 +1,4 @@
-import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types';
+import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types.js';
const id = 'pie';
@@ -7,7 +7,7 @@ const detector: DiagramDetector = (txt) => {
};
const loader = async () => {
- const { diagram } = await import('./pieDiagram');
+ const { diagram } = await import('./pieDiagram.js');
return { id, diagram };
};
diff --git a/packages/mermaid/src/diagrams/pie/pieDiagram.ts b/packages/mermaid/src/diagrams/pie/pieDiagram.ts
index 3a586f6684..4c6b7d3bc9 100644
--- a/packages/mermaid/src/diagrams/pie/pieDiagram.ts
+++ b/packages/mermaid/src/diagrams/pie/pieDiagram.ts
@@ -1,9 +1,9 @@
-import { DiagramDefinition } from '../../diagram-api/types';
+import { DiagramDefinition } from '../../diagram-api/types.js';
// @ts-ignore: TODO Fix ts errors
-import parser from './parser/pie';
-import db from './pieDb';
-import styles from './styles';
-import renderer from './pieRenderer';
+import parser from './parser/pie.jison';
+import db from './pieDb.js';
+import styles from './styles.js';
+import renderer from './pieRenderer.js';
export const diagram: DiagramDefinition = {
parser,
diff --git a/packages/mermaid/src/diagrams/pie/pieRenderer.js b/packages/mermaid/src/diagrams/pie/pieRenderer.js
index 9b25f5f43c..1ee34e192a 100644
--- a/packages/mermaid/src/diagrams/pie/pieRenderer.js
+++ b/packages/mermaid/src/diagrams/pie/pieRenderer.js
@@ -1,9 +1,9 @@
/** Created by AshishJ on 11-09-2019. */
import { select, scaleOrdinal, pie as d3pie, arc } from 'd3';
-import { log } from '../../logger';
-import { configureSvgSize } from '../../setupGraphViewbox';
-import * as configApi from '../../config';
-import { parseFontSize } from '../../utils';
+import { log } from '../../logger.js';
+import { configureSvgSize } from '../../setupGraphViewbox.js';
+import * as configApi from '../../config.js';
+import { parseFontSize } from '../../utils.js';
let conf = configApi.getConfig();
diff --git a/packages/mermaid/src/diagrams/requirement/parser/requirementDiagram.spec.js b/packages/mermaid/src/diagrams/requirement/parser/requirementDiagram.spec.js
index 4857a37ef7..1b4c5da318 100644
--- a/packages/mermaid/src/diagrams/requirement/parser/requirementDiagram.spec.js
+++ b/packages/mermaid/src/diagrams/requirement/parser/requirementDiagram.spec.js
@@ -1,6 +1,6 @@
-import { setConfig } from '../../../config';
-import requirementDb from '../requirementDb';
-import reqDiagram from './requirementDiagram';
+import { setConfig } from '../../../config.js';
+import requirementDb from '../requirementDb.js';
+import reqDiagram from './requirementDiagram.jison';
setConfig({
securityLevel: 'strict',
diff --git a/packages/mermaid/src/diagrams/requirement/requirementDb.js b/packages/mermaid/src/diagrams/requirement/requirementDb.js
index df5eb0ab9d..1d0a3e2e12 100644
--- a/packages/mermaid/src/diagrams/requirement/requirementDb.js
+++ b/packages/mermaid/src/diagrams/requirement/requirementDb.js
@@ -1,6 +1,6 @@
-import * as configApi from '../../config';
-import { log } from '../../logger';
-import mermaidAPI from '../../mermaidAPI';
+import * as configApi from '../../config.js';
+import { log } from '../../logger.js';
+import mermaidAPI from '../../mermaidAPI.js';
import {
setAccTitle,
@@ -8,7 +8,7 @@ import {
getAccDescription,
setAccDescription,
clear as commonClear,
-} from '../../commonDb';
+} from '../../commonDb.js';
let relations = [];
let latestRequirement = {};
diff --git a/packages/mermaid/src/diagrams/requirement/requirementDetector.ts b/packages/mermaid/src/diagrams/requirement/requirementDetector.ts
index 1102fde0c8..87fcea790e 100644
--- a/packages/mermaid/src/diagrams/requirement/requirementDetector.ts
+++ b/packages/mermaid/src/diagrams/requirement/requirementDetector.ts
@@ -1,4 +1,4 @@
-import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types';
+import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types.js';
const id = 'requirement';
@@ -7,7 +7,7 @@ const detector: DiagramDetector = (txt) => {
};
const loader = async () => {
- const { diagram } = await import('./requirementDiagram');
+ const { diagram } = await import('./requirementDiagram.js');
return { id, diagram };
};
diff --git a/packages/mermaid/src/diagrams/requirement/requirementDiagram.ts b/packages/mermaid/src/diagrams/requirement/requirementDiagram.ts
index 37f6177b6e..4505afc568 100644
--- a/packages/mermaid/src/diagrams/requirement/requirementDiagram.ts
+++ b/packages/mermaid/src/diagrams/requirement/requirementDiagram.ts
@@ -1,9 +1,9 @@
-import { DiagramDefinition } from '../../diagram-api/types';
+import { DiagramDefinition } from '../../diagram-api/types.js';
// @ts-ignore: TODO Fix ts errors
-import parser from './parser/requirementDiagram';
-import db from './requirementDb';
-import styles from './styles';
-import renderer from './requirementRenderer';
+import parser from './parser/requirementDiagram.jison';
+import db from './requirementDb.js';
+import styles from './styles.js';
+import renderer from './requirementRenderer.js';
export const diagram: DiagramDefinition = {
parser,
diff --git a/packages/mermaid/src/diagrams/requirement/requirementRenderer.js b/packages/mermaid/src/diagrams/requirement/requirementRenderer.js
index 9fd746bd1a..b88f5c2033 100644
--- a/packages/mermaid/src/diagrams/requirement/requirementRenderer.js
+++ b/packages/mermaid/src/diagrams/requirement/requirementRenderer.js
@@ -1,11 +1,11 @@
import { line, select } from 'd3';
import { layout as dagreLayout } from 'dagre-d3-es/src/dagre/index.js';
import * as graphlib from 'dagre-d3-es/src/graphlib/index.js';
-import { log } from '../../logger';
-import { configureSvgSize } from '../../setupGraphViewbox';
-import common from '../common/common';
-import markers from './requirementMarkers';
-import { getConfig } from '../../config';
+import { log } from '../../logger.js';
+import { configureSvgSize } from '../../setupGraphViewbox.js';
+import common from '../common/common.js';
+import markers from './requirementMarkers.js';
+import { getConfig } from '../../config.js';
let conf = {};
let relCnt = 0;
diff --git a/packages/mermaid/src/diagrams/sequence/sequenceDb.js b/packages/mermaid/src/diagrams/sequence/sequenceDb.js
index 5c5554c721..6550df9fac 100644
--- a/packages/mermaid/src/diagrams/sequence/sequenceDb.js
+++ b/packages/mermaid/src/diagrams/sequence/sequenceDb.js
@@ -1,7 +1,7 @@
-import mermaidAPI from '../../mermaidAPI';
-import * as configApi from '../../config';
-import { log } from '../../logger';
-import { sanitizeText } from '../common/common';
+import mermaidAPI from '../../mermaidAPI.js';
+import * as configApi from '../../config.js';
+import { log } from '../../logger.js';
+import { sanitizeText } from '../common/common.js';
import {
setAccTitle,
getAccTitle,
@@ -10,7 +10,7 @@ import {
getAccDescription,
setAccDescription,
clear as commonClear,
-} from '../../commonDb';
+} from '../../commonDb.js';
let prevActor = undefined;
let actors = {};
diff --git a/packages/mermaid/src/diagrams/sequence/sequenceDetector.ts b/packages/mermaid/src/diagrams/sequence/sequenceDetector.ts
index c436e65d44..a808feea24 100644
--- a/packages/mermaid/src/diagrams/sequence/sequenceDetector.ts
+++ b/packages/mermaid/src/diagrams/sequence/sequenceDetector.ts
@@ -1,4 +1,4 @@
-import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types';
+import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types.js';
const id = 'sequence';
@@ -7,7 +7,7 @@ const detector: DiagramDetector = (txt) => {
};
const loader = async () => {
- const { diagram } = await import('./sequenceDiagram');
+ const { diagram } = await import('./sequenceDiagram.js');
return { id, diagram };
};
diff --git a/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js b/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js
index 08f6abee13..a6cff4a6cc 100644
--- a/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js
+++ b/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js
@@ -1,9 +1,9 @@
import { vi } from 'vitest';
-import * as configApi from '../../config';
-import mermaidAPI from '../../mermaidAPI';
-import { Diagram, getDiagramFromText } from '../../Diagram';
-import { addDiagrams } from '../../diagram-api/diagram-orchestration';
+import * as configApi from '../../config.js';
+import mermaidAPI from '../../mermaidAPI.js';
+import { Diagram, getDiagramFromText } from '../../Diagram.js';
+import { addDiagrams } from '../../diagram-api/diagram-orchestration.js';
beforeAll(async () => {
// Is required to load the sequence diagram
diff --git a/packages/mermaid/src/diagrams/sequence/sequenceDiagram.ts b/packages/mermaid/src/diagrams/sequence/sequenceDiagram.ts
index fdec7f86d9..382d47b619 100644
--- a/packages/mermaid/src/diagrams/sequence/sequenceDiagram.ts
+++ b/packages/mermaid/src/diagrams/sequence/sequenceDiagram.ts
@@ -1,9 +1,9 @@
-import { DiagramDefinition } from '../../diagram-api/types';
+import { DiagramDefinition } from '../../diagram-api/types.js';
// @ts-ignore: TODO Fix ts errors
-import parser from './parser/sequenceDiagram';
-import db from './sequenceDb';
-import styles from './styles';
-import renderer from './sequenceRenderer';
+import parser from './parser/sequenceDiagram.jison';
+import db from './sequenceDb.js';
+import styles from './styles.js';
+import renderer from './sequenceRenderer.js';
export const diagram: DiagramDefinition = {
parser,
diff --git a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts b/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
index acee7bbe52..eca6471538 100644
--- a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
+++ b/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
@@ -1,13 +1,13 @@
// @ts-nocheck TODO: fix file
import { select, selectAll } from 'd3';
-import svgDraw, { drawText, fixLifeLineHeights } from './svgDraw';
-import { log } from '../../logger';
-import common from '../common/common';
-import * as configApi from '../../config';
-import assignWithDepth from '../../assignWithDepth';
-import utils from '../../utils';
-import { configureSvgSize } from '../../setupGraphViewbox';
-import { Diagram } from '../../Diagram';
+import svgDraw, { drawText, fixLifeLineHeights } from './svgDraw.js';
+import { log } from '../../logger.js';
+import common from '../common/common.js';
+import * as configApi from '../../config.js';
+import assignWithDepth from '../../assignWithDepth.js';
+import utils from '../../utils.js';
+import { configureSvgSize } from '../../setupGraphViewbox.js';
+import { Diagram } from '../../Diagram.js';
let conf = {};
diff --git a/packages/mermaid/src/diagrams/sequence/svgDraw.js b/packages/mermaid/src/diagrams/sequence/svgDraw.js
index be34daf4b4..376ca61610 100644
--- a/packages/mermaid/src/diagrams/sequence/svgDraw.js
+++ b/packages/mermaid/src/diagrams/sequence/svgDraw.js
@@ -1,6 +1,6 @@
-import common from '../common/common';
-import { addFunction } from '../../interactionDb';
-import { parseFontSize } from '../../utils';
+import common from '../common/common.js';
+import { addFunction } from '../../interactionDb.js';
+import { parseFontSize } from '../../utils.js';
import { sanitizeUrl } from '@braintree/sanitize-url';
export const drawRect = function (elem, rectData) {
diff --git a/packages/mermaid/src/diagrams/sequence/svgDraw.spec.js b/packages/mermaid/src/diagrams/sequence/svgDraw.spec.js
index ed60285eda..04cde0a2cd 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 f8ea694a63..e56931ade7 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.js';
setConfig({
securityLevel: 'strict',
diff --git a/packages/mermaid/src/diagrams/state/parser/state-style.spec.js b/packages/mermaid/src/diagrams/state/parser/state-style.spec.js
index 75ecb4b13f..9ce41df503 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.js';
setConfig({
securityLevel: 'strict',
diff --git a/packages/mermaid/src/diagrams/state/shapes.js b/packages/mermaid/src/diagrams/state/shapes.js
index 0a495e56c6..e82a1ad61a 100644
--- a/packages/mermaid/src/diagrams/state/shapes.js
+++ b/packages/mermaid/src/diagrams/state/shapes.js
@@ -1,10 +1,10 @@
import { line, curveBasis } from 'd3';
import idCache from './id-cache.js';
-import stateDb from './stateDb';
-import utils from '../../utils';
-import common from '../common/common';
-import { getConfig } from '../../config';
-import { log } from '../../logger';
+import stateDb from './stateDb.js';
+import utils from '../../utils.js';
+import common from '../common/common.js';
+import { getConfig } from '../../config.js';
+import { log } from '../../logger.js';
/**
* Draws a start state as a black circle
diff --git a/packages/mermaid/src/diagrams/state/stateDb.js b/packages/mermaid/src/diagrams/state/stateDb.js
index 81b8ffb8bd..d9c789a99b 100644
--- a/packages/mermaid/src/diagrams/state/stateDb.js
+++ b/packages/mermaid/src/diagrams/state/stateDb.js
@@ -1,8 +1,8 @@
-import { log } from '../../logger';
-import { generateId } from '../../utils';
-import mermaidAPI from '../../mermaidAPI';
-import common from '../common/common';
-import * as configApi from '../../config';
+import { log } from '../../logger.js';
+import { generateId } from '../../utils.js';
+import mermaidAPI from '../../mermaidAPI.js';
+import common from '../common/common.js';
+import * as configApi from '../../config.js';
import {
setAccTitle,
getAccTitle,
@@ -11,7 +11,7 @@ import {
clear as commonClear,
setDiagramTitle,
getDiagramTitle,
-} from '../../commonDb';
+} from '../../commonDb.js';
import {
DEFAULT_DIAGRAM_DIRECTION,
@@ -21,7 +21,7 @@ import {
STMT_APPLYCLASS,
DEFAULT_STATE_TYPE,
DIVIDER_TYPE,
-} from './stateCommon';
+} from './stateCommon.js';
const START_NODE = '[*]';
const START_TYPE = 'start';
diff --git a/packages/mermaid/src/diagrams/state/stateDb.spec.js b/packages/mermaid/src/diagrams/state/stateDb.spec.js
index d51d919c33..0264c34cc5 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 5fa617a76a..8a96e93a27 100644
--- a/packages/mermaid/src/diagrams/state/stateDetector-V2.ts
+++ b/packages/mermaid/src/diagrams/state/stateDetector-V2.ts
@@ -1,4 +1,4 @@
-import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types';
+import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types.js';
const id = 'stateDiagram';
@@ -16,7 +16,7 @@ const detector: DiagramDetector = (text, config) => {
};
const loader = async () => {
- const { diagram } = await import('./stateDiagram-v2');
+ const { diagram } = await import('./stateDiagram-v2.js');
return { id, diagram };
};
diff --git a/packages/mermaid/src/diagrams/state/stateDetector.ts b/packages/mermaid/src/diagrams/state/stateDetector.ts
index ee6b3ac2c2..eb252305cf 100644
--- a/packages/mermaid/src/diagrams/state/stateDetector.ts
+++ b/packages/mermaid/src/diagrams/state/stateDetector.ts
@@ -1,4 +1,4 @@
-import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types';
+import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types.js';
const id = 'state';
@@ -12,7 +12,7 @@ const detector: DiagramDetector = (txt, config) => {
};
const loader = async () => {
- const { diagram } = await import('./stateDiagram');
+ const { diagram } = await import('./stateDiagram.js');
return { id, diagram };
};
diff --git a/packages/mermaid/src/diagrams/state/stateDiagram-v2.spec.js b/packages/mermaid/src/diagrams/state/stateDiagram-v2.spec.js
index 7ed5555dba..e64ecfdf89 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 f7ee4f0525..616a97556a 100644
--- a/packages/mermaid/src/diagrams/state/stateDiagram-v2.ts
+++ b/packages/mermaid/src/diagrams/state/stateDiagram-v2.ts
@@ -1,9 +1,9 @@
-import { DiagramDefinition } from '../../diagram-api/types';
+import { DiagramDefinition } from '../../diagram-api/types.js';
// @ts-ignore: TODO Fix ts errors
-import parser from './parser/stateDiagram';
-import db from './stateDb';
-import styles from './styles';
-import renderer from './stateRenderer-v2';
+import parser from './parser/stateDiagram.jison';
+import db from './stateDb.js';
+import styles from './styles.js';
+import renderer from './stateRenderer-v2.js';
export const diagram: DiagramDefinition = {
parser,
diff --git a/packages/mermaid/src/diagrams/state/stateDiagram.spec.js b/packages/mermaid/src/diagrams/state/stateDiagram.spec.js
index d2bbb409e3..e6e470140c 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 570d599deb..44552c2461 100644
--- a/packages/mermaid/src/diagrams/state/stateDiagram.ts
+++ b/packages/mermaid/src/diagrams/state/stateDiagram.ts
@@ -1,9 +1,9 @@
-import { DiagramDefinition } from '../../diagram-api/types';
+import { DiagramDefinition } from '../../diagram-api/types.js';
// @ts-ignore: TODO Fix ts errors
-import parser from './parser/stateDiagram';
-import db from './stateDb';
-import styles from './styles';
-import renderer from './stateRenderer';
+import parser from './parser/stateDiagram.jison';
+import db from './stateDb.js';
+import styles from './styles.js';
+import renderer from './stateRenderer.js';
export const diagram: DiagramDefinition = {
parser,
diff --git a/packages/mermaid/src/diagrams/state/stateRenderer-v2.js b/packages/mermaid/src/diagrams/state/stateRenderer-v2.js
index 1c617cfb4d..20ae0d1125 100644
--- a/packages/mermaid/src/diagrams/state/stateRenderer-v2.js
+++ b/packages/mermaid/src/diagrams/state/stateRenderer-v2.js
@@ -1,11 +1,11 @@
import * as graphlib from 'dagre-d3-es/src/graphlib/index.js';
import { select } from 'd3';
-import { getConfig } from '../../config';
+import { getConfig } from '../../config.js';
import { render } from '../../dagre-wrapper/index.js';
-import { log } from '../../logger';
-import { configureSvgSize } from '../../setupGraphViewbox';
-import common from '../common/common';
-import utils from '../../utils';
+import { log } from '../../logger.js';
+import { configureSvgSize } from '../../setupGraphViewbox.js';
+import common from '../common/common.js';
+import utils from '../../utils.js';
import {
DEFAULT_DIAGRAM_DIRECTION,
@@ -14,7 +14,7 @@ import {
STMT_RELATION,
DEFAULT_STATE_TYPE,
DIVIDER_TYPE,
-} from './stateCommon';
+} from './stateCommon.js';
// --------------------------------------
// Shapes
diff --git a/packages/mermaid/src/diagrams/state/stateRenderer-v2.spec.js b/packages/mermaid/src/diagrams/state/stateRenderer-v2.spec.js
index 3a118e607d..a190fe05be 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 8d410fdd98..74913a748a 100644
--- a/packages/mermaid/src/diagrams/state/stateRenderer.js
+++ b/packages/mermaid/src/diagrams/state/stateRenderer.js
@@ -1,11 +1,11 @@
import { select } from 'd3';
import { layout as dagreLayout } from 'dagre-d3-es/src/dagre/index.js';
import * as graphlib from 'dagre-d3-es/src/graphlib/index.js';
-import { log } from '../../logger';
-import common from '../common/common';
-import { drawState, addTitleAndBox, drawEdge } from './shapes';
-import { getConfig } from '../../config';
-import { configureSvgSize } from '../../setupGraphViewbox';
+import { log } from '../../logger.js';
+import common from '../common/common.js';
+import { drawState, addTitleAndBox, drawEdge } from './shapes.js';
+import { getConfig } from '../../config.js';
+import { configureSvgSize } from '../../setupGraphViewbox.js';
// TODO Move conf object to main conf in mermaidAPI
let conf;
diff --git a/packages/mermaid/src/diagrams/timeline/detector.ts b/packages/mermaid/src/diagrams/timeline/detector.ts
index 9bd2b5ece8..57d8f66ad5 100644
--- a/packages/mermaid/src/diagrams/timeline/detector.ts
+++ b/packages/mermaid/src/diagrams/timeline/detector.ts
@@ -1,4 +1,4 @@
-import type { ExternalDiagramDefinition } from '../../diagram-api/types';
+import type { ExternalDiagramDefinition } from '../../diagram-api/types.js';
const id = 'timeline';
diff --git a/packages/mermaid/src/diagrams/timeline/timeline-definition.ts b/packages/mermaid/src/diagrams/timeline/timeline-definition.ts
index 898af8b785..7f671291f2 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 0697b194e2..1f6a960244 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.js';
+import * as _commonDb from '../../commonDb.js';
+import { parseDirective as _parseDirective } from '../../directiveUtils.js';
import {
log,
@@ -10,7 +10,7 @@ import {
getConfig,
sanitizeText,
setupGraphViewBox,
-} from '../../diagram-api/diagramAPI';
+} from '../../diagram-api/diagramAPI.js';
// injectUtils(
// log,
diff --git a/packages/mermaid/src/diagrams/timeline/timelineDb.js b/packages/mermaid/src/diagrams/timeline/timelineDb.js
index 7bc5c26923..337cfe4416 100644
--- a/packages/mermaid/src/diagrams/timeline/timelineDb.js
+++ b/packages/mermaid/src/diagrams/timeline/timelineDb.js
@@ -1,5 +1,5 @@
-import { parseDirective as _parseDirective } from '../../directiveUtils';
-import * as commonDb from '../../commonDb';
+import { parseDirective as _parseDirective } from '../../directiveUtils.js';
+import * as commonDb from '../../commonDb.js';
let currentSection = '';
let currentTaskId = 0;
diff --git a/packages/mermaid/src/diagrams/timeline/timelineRenderer.ts b/packages/mermaid/src/diagrams/timeline/timelineRenderer.ts
index 272ecf0c1a..65abe8fd9c 100644
--- a/packages/mermaid/src/diagrams/timeline/timelineRenderer.ts
+++ b/packages/mermaid/src/diagrams/timeline/timelineRenderer.ts
@@ -1,11 +1,11 @@
// @ts-ignore - db not typed yet
import { select, Selection } from 'd3';
-import svgDraw from './svgDraw';
-import { log } from '../../logger';
-import { getConfig } from '../../config';
-import { setupGraphViewbox } from '../../setupGraphViewbox';
-import { Diagram } from '../../Diagram';
-import { MermaidConfig } from '../../config.type';
+import svgDraw from './svgDraw.js';
+import { log } from '../../logger.js';
+import { getConfig } from '../../config.js';
+import { setupGraphViewbox } from '../../setupGraphViewbox.js';
+import { Diagram } from '../../Diagram.js';
+import { MermaidConfig } from '../../config.type.js';
interface Block {
number: number;
diff --git a/packages/mermaid/src/diagrams/user-journey/journeyDb.js b/packages/mermaid/src/diagrams/user-journey/journeyDb.js
index ce87050948..d4f34e9422 100644
--- a/packages/mermaid/src/diagrams/user-journey/journeyDb.js
+++ b/packages/mermaid/src/diagrams/user-journey/journeyDb.js
@@ -1,5 +1,5 @@
-import mermaidAPI from '../../mermaidAPI';
-import * as configApi from '../../config';
+import mermaidAPI from '../../mermaidAPI.js';
+import * as configApi from '../../config.js';
import {
setAccTitle,
getAccTitle,
@@ -8,7 +8,7 @@ import {
getAccDescription,
setAccDescription,
clear as commonClear,
-} from '../../commonDb';
+} from '../../commonDb.js';
let currentSection = '';
diff --git a/packages/mermaid/src/diagrams/user-journey/journeyDb.spec.js b/packages/mermaid/src/diagrams/user-journey/journeyDb.spec.js
index 78955c794c..c740e40d0e 100644
--- a/packages/mermaid/src/diagrams/user-journey/journeyDb.spec.js
+++ b/packages/mermaid/src/diagrams/user-journey/journeyDb.spec.js
@@ -1,5 +1,5 @@
-import journeyDb from './journeyDb';
-import { convert } from '../../tests/util';
+import journeyDb from './journeyDb.js';
+import { convert } from '../../tests/util.js';
describe('when using the journeyDb', function () {
beforeEach(function () {
diff --git a/packages/mermaid/src/diagrams/user-journey/journeyDetector.ts b/packages/mermaid/src/diagrams/user-journey/journeyDetector.ts
index 90b2fd6e1b..0dd4887822 100644
--- a/packages/mermaid/src/diagrams/user-journey/journeyDetector.ts
+++ b/packages/mermaid/src/diagrams/user-journey/journeyDetector.ts
@@ -1,4 +1,4 @@
-import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types';
+import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types.js';
const id = 'journey';
@@ -7,7 +7,7 @@ const detector: DiagramDetector = (txt) => {
};
const loader = async () => {
- const { diagram } = await import('./journeyDiagram');
+ const { diagram } = await import('./journeyDiagram.js');
return { id, diagram };
};
diff --git a/packages/mermaid/src/diagrams/user-journey/journeyDiagram.ts b/packages/mermaid/src/diagrams/user-journey/journeyDiagram.ts
index c3a2a3c6b7..969cf0e5e3 100644
--- a/packages/mermaid/src/diagrams/user-journey/journeyDiagram.ts
+++ b/packages/mermaid/src/diagrams/user-journey/journeyDiagram.ts
@@ -1,9 +1,9 @@
-import { DiagramDefinition } from '../../diagram-api/types';
+import { DiagramDefinition } from '../../diagram-api/types.js';
// @ts-ignore: TODO Fix ts errors
-import parser from './parser/journey';
-import db from './journeyDb';
-import styles from './styles';
-import renderer from './journeyRenderer';
+import parser from './parser/journey.jison';
+import db from './journeyDb.js';
+import styles from './styles.js';
+import renderer from './journeyRenderer.js';
export const diagram: DiagramDefinition = {
parser,
diff --git a/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts b/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts
index c34f8f5b2f..9ea880f691 100644
--- a/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts
+++ b/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts
@@ -1,8 +1,8 @@
// @ts-nocheck TODO: fix file
import { select } from 'd3';
-import svgDraw from './svgDraw';
-import { getConfig } from '../../config';
-import { configureSvgSize } from '../../setupGraphViewbox';
+import svgDraw from './svgDraw.js';
+import { getConfig } from '../../config.js';
+import { configureSvgSize } from '../../setupGraphViewbox.js';
export const setConf = function (cnf) {
const keys = Object.keys(cnf);
diff --git a/packages/mermaid/src/diagrams/user-journey/parser/journey.spec.js b/packages/mermaid/src/diagrams/user-journey/parser/journey.spec.js
index cc54d9f78b..8ed342bb54 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 2d2971a857..563856631a 100644
--- a/packages/mermaid/src/directiveUtils.ts
+++ b/packages/mermaid/src/directiveUtils.ts
@@ -1,7 +1,7 @@
-import * as configApi from './config';
+import * as configApi from './config.js';
-import { log } from './logger';
-import { directiveSanitizer } from './utils';
+import { log } from './logger.js';
+import { directiveSanitizer } from './utils.js';
let currentDirective: { type?: string; args?: any } | undefined = {};
diff --git a/packages/mermaid/src/docs/.vitepress/config.ts b/packages/mermaid/src/docs/.vitepress/config.ts
index 040b6a71aa..2ca53b348a 100644
--- a/packages/mermaid/src/docs/.vitepress/config.ts
+++ b/packages/mermaid/src/docs/.vitepress/config.ts
@@ -1,5 +1,5 @@
import { version } from '../../../package.json';
-import MermaidExample from './mermaid-markdown-all';
+import MermaidExample from './mermaid-markdown-all.js';
import { defineConfig, MarkdownOptions } from 'vitepress';
const allMarkdownTransformers: MarkdownOptions = {
diff --git a/packages/mermaid/src/docs/.vitepress/theme/index.ts b/packages/mermaid/src/docs/.vitepress/theme/index.ts
index 273880d91a..0eebb82c55 100644
--- a/packages/mermaid/src/docs/.vitepress/theme/index.ts
+++ b/packages/mermaid/src/docs/.vitepress/theme/index.ts
@@ -2,7 +2,7 @@ import DefaultTheme from 'vitepress/theme';
import './custom.css';
// @ts-ignore
import Mermaid from './Mermaid.vue';
-import { getRedirect } from './redirect';
+import { getRedirect } from './redirect.js';
export default {
...DefaultTheme,
diff --git a/packages/mermaid/src/docs/.vitepress/theme/redirect.spec.ts b/packages/mermaid/src/docs/.vitepress/theme/redirect.spec.ts
index ec04042642..3d88913d1e 100644
--- a/packages/mermaid/src/docs/.vitepress/theme/redirect.spec.ts
+++ b/packages/mermaid/src/docs/.vitepress/theme/redirect.spec.ts
@@ -2,7 +2,7 @@
// Update https://github.com/mermaid-js/mermaid/blob/18c27c6f1d0537a738cbd95898df301b83c38ffc/packages/mermaid/src/docs.mts#L246 once fixed
import { expect, test } from 'vitest';
-import { getRedirect } from './redirect';
+import { getRedirect } from './redirect.js';
test.each([
// Old docs, localhost
diff --git a/packages/mermaid/src/docs/intro/index.md b/packages/mermaid/src/docs/intro/index.md
index eb6765ed93..e886b5f60f 100644
--- a/packages/mermaid/src/docs/intro/index.md
+++ b/packages/mermaid/src/docs/intro/index.md
@@ -74,7 +74,7 @@ To Deploy Mermaid:
- Yarn: `yarn add mermaid`
- Pnpm: `pnpm add mermaid`
-### [Mermaid API](../config/setup/README.md):
+### [Mermaid API](../config/setup/README.md):
**To deploy mermaid without a bundler, insert a `script` tag with an absolute address and a `mermaid.initialize` call into the HTML using the following example:**
diff --git a/packages/mermaid/src/docs/vite.config.ts b/packages/mermaid/src/docs/vite.config.ts
index 179e271fd7..63d2aa5fad 100644
--- a/packages/mermaid/src/docs/vite.config.ts
+++ b/packages/mermaid/src/docs/vite.config.ts
@@ -1,5 +1,6 @@
import { defineConfig, type PluginOption, searchForWorkspaceRoot } from 'vite';
import path from 'path';
+// @ts-expect-error This package has an incorrect export map.
import { SearchPlugin } from 'vitepress-plugin-search';
const virtualModuleId = 'virtual:mermaid-config';
diff --git a/packages/mermaid/src/mermaid.spec.ts b/packages/mermaid/src/mermaid.spec.ts
index 36490798bd..e27428545e 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.js';
+import './diagram-api/diagram-orchestration.js';
+import { addDiagrams } from './diagram-api/diagram-orchestration.js';
import { beforeAll, describe, it, expect, vi } from 'vitest';
beforeAll(async () => {
@@ -9,7 +9,7 @@ beforeAll(async () => {
});
const spyOn = vi.spyOn;
-vi.mock('./mermaidAPI');
+vi.mock('./mermaidAPI.js');
afterEach(() => {
vi.clearAllMocks();
diff --git a/packages/mermaid/src/mermaid.ts b/packages/mermaid/src/mermaid.ts
index 4b02adb1cc..30297e7b5e 100644
--- a/packages/mermaid/src/mermaid.ts
+++ b/packages/mermaid/src/mermaid.ts
@@ -2,21 +2,21 @@
* Web page integration module for the mermaid framework. It uses the mermaidAPI for mermaid
* functionality and to render the diagrams to svg code!
*/
-import dedent from 'ts-dedent';
-import { MermaidConfig } from './config.type';
-import { log } from './logger';
-import utils from './utils';
-import { mermaidAPI, ParseOptions, RenderResult } from './mermaidAPI';
+import { dedent } from 'ts-dedent';
+import { MermaidConfig } from './config.type.js';
+import { log } from './logger.js';
+import utils from './utils.js';
+import { mermaidAPI, ParseOptions, RenderResult } from './mermaidAPI.js';
import {
registerLazyLoadedDiagrams,
loadRegisteredDiagrams,
detectType,
-} from './diagram-api/detectType';
-import type { ParseErrorFunction } from './Diagram';
-import { isDetailedError } from './utils';
-import type { DetailedError } from './utils';
-import { ExternalDiagramDefinition } from './diagram-api/types';
-import { UnknownDiagramError } from './errors';
+} from './diagram-api/detectType.js';
+import type { ParseErrorFunction } from './Diagram.js';
+import { isDetailedError } from './utils.js';
+import type { DetailedError } from './utils.js';
+import { ExternalDiagramDefinition } from './diagram-api/types.js';
+import { UnknownDiagramError } from './errors.js';
export type {
MermaidConfig,
diff --git a/packages/mermaid/src/mermaidAPI.spec.ts b/packages/mermaid/src/mermaidAPI.spec.ts
index edd2d47bb9..48121f36eb 100644
--- a/packages/mermaid/src/mermaidAPI.spec.ts
+++ b/packages/mermaid/src/mermaidAPI.spec.ts
@@ -4,14 +4,14 @@ import { vi } from 'vitest';
// -------------------------------------
// Mocks and mocking
-import { MockedD3 } from './tests/MockedD3';
+import { MockedD3 } from './tests/MockedD3.js';
// Note: If running this directly from within an IDE, the mocks directory must be at packages/mermaid/mocks
vi.mock('d3');
vi.mock('dagre-d3');
// mermaidAPI.spec.ts:
-import * as accessibility from './accessibility'; // Import it this way so we can use spyOn(accessibility,...)
+import * as accessibility from './accessibility.js'; // Import it this way so we can use spyOn(accessibility,...)
vi.mock('./accessibility', () => ({
setA11yDiagramInfo: vi.fn(),
addSVGa11yTitleDescription: vi.fn(),
@@ -33,10 +33,10 @@ vi.mock('./diagrams/state/stateRenderer-v2');
// -------------------------------------
-import mermaid from './mermaid';
-import { MermaidConfig } from './config.type';
+import mermaid from './mermaid.js';
+import { MermaidConfig } from './config.type.js';
-import mermaidAPI, { removeExistingElements } from './mermaidAPI';
+import mermaidAPI, { removeExistingElements } from './mermaidAPI.js';
import {
encodeEntities,
decodeEntities,
@@ -45,9 +45,9 @@ import {
appendDivSvgG,
cleanUpSvgCode,
putIntoIFrame,
-} from './mermaidAPI';
+} from './mermaidAPI.js';
-import assignWithDepth from './assignWithDepth';
+import assignWithDepth from './assignWithDepth.js';
// --------------
// Mocks
@@ -58,7 +58,7 @@ vi.mock('./styles', () => {
default: vi.fn().mockReturnValue(' .userStyle { font-weight:bold; }'),
};
});
-import getStyles from './styles';
+import getStyles from './styles.js';
vi.mock('stylis', () => {
return {
diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts
index a037995df9..5e9d0ead6d 100644
--- a/packages/mermaid/src/mermaidAPI.ts
+++ b/packages/mermaid/src/mermaidAPI.ts
@@ -15,21 +15,21 @@ import { select } from 'd3';
import { compile, serialize, stringify } from 'stylis';
// @ts-ignore: TODO Fix ts errors
import { version } from '../package.json';
-import * as configApi from './config';
-import { addDiagrams } from './diagram-api/diagram-orchestration';
-import { Diagram, getDiagramFromText } from './Diagram';
-import errorRenderer from './diagrams/error/errorRenderer';
-import { attachFunctions } from './interactionDb';
-import { log, setLogLevel } from './logger';
-import getStyles from './styles';
-import theme from './themes';
-import utils, { directiveSanitizer } from './utils';
+import * as configApi from './config.js';
+import { addDiagrams } from './diagram-api/diagram-orchestration.js';
+import { Diagram, getDiagramFromText } from './Diagram.js';
+import errorRenderer from './diagrams/error/errorRenderer.js';
+import { attachFunctions } from './interactionDb.js';
+import { log, setLogLevel } from './logger.js';
+import getStyles from './styles.js';
+import theme from './themes/index.js';
+import utils, { directiveSanitizer } from './utils.js';
import DOMPurify from 'dompurify';
-import { MermaidConfig } from './config.type';
-import { evaluate } from './diagrams/common/common';
+import { MermaidConfig } from './config.type.js';
+import { evaluate } from './diagrams/common/common.js';
import isEmpty from 'lodash-es/isEmpty.js';
-import { setA11yDiagramInfo, addSVGa11yTitleDescription } from './accessibility';
-import { parseDirective } from './directiveUtils';
+import { setA11yDiagramInfo, addSVGa11yTitleDescription } from './accessibility.js';
+import { parseDirective } from './directiveUtils.js';
// diagram names that support classDef statements
const CLASSDEF_DIAGRAMS = [
diff --git a/packages/mermaid/src/rendering-util/createText.js b/packages/mermaid/src/rendering-util/createText.js
index f20736f3ad..a5438b5629 100644
--- a/packages/mermaid/src/rendering-util/createText.js
+++ b/packages/mermaid/src/rendering-util/createText.js
@@ -1,9 +1,9 @@
import { select } from 'd3';
-import { log } from '../logger';
-import { getConfig } from '../config';
-import { evaluate } from '../diagrams/common/common';
-import { decodeEntities } from '../mermaidAPI';
-import { markdownToHTML, markdownToLines } from '../rendering-util/handle-markdown-text';
+import { log } from '../logger.js';
+import { getConfig } from '../config.js';
+import { evaluate } from '../diagrams/common/common.js';
+import { decodeEntities } from '../mermaidAPI.js';
+import { markdownToHTML, markdownToLines } from '../rendering-util/handle-markdown-text.js';
/**
* @param dom
* @param styleFn
diff --git a/packages/mermaid/src/setupGraphViewbox.js b/packages/mermaid/src/setupGraphViewbox.js
index 14929d3d71..c4aeeceeac 100644
--- a/packages/mermaid/src/setupGraphViewbox.js
+++ b/packages/mermaid/src/setupGraphViewbox.js
@@ -1,4 +1,4 @@
-import { log } from './logger';
+import { log } from './logger.js';
/**
* Applies d3 attributes
diff --git a/packages/mermaid/src/setupGraphViewbox.spec.js b/packages/mermaid/src/setupGraphViewbox.spec.js
index 6b5c3e2108..36154e2dfd 100644
--- a/packages/mermaid/src/setupGraphViewbox.spec.js
+++ b/packages/mermaid/src/setupGraphViewbox.spec.js
@@ -1,8 +1,8 @@
-import utils from './utils';
-import assignWithDepth from './assignWithDepth';
-import { detectType } from './diagram-api/detectType';
-import { addDiagrams } from './diagram-api/diagram-orchestration';
-import { calculateSvgSizeAttrs } from './setupGraphViewbox';
+import utils from './utils.js';
+import assignWithDepth from './assignWithDepth.js';
+import { detectType } from './diagram-api/detectType.js';
+import { addDiagrams } from './diagram-api/diagram-orchestration.js';
+import { calculateSvgSizeAttrs } from './setupGraphViewbox.js';
addDiagrams();
describe('when calculating SVG size', function () {
diff --git a/packages/mermaid/src/styles.spec.ts b/packages/mermaid/src/styles.spec.ts
index 07997ad607..f827c611b3 100644
--- a/packages/mermaid/src/styles.spec.ts
+++ b/packages/mermaid/src/styles.spec.ts
@@ -4,8 +4,8 @@ import { vi } from 'vitest';
import { validate } from 'csstree-validator';
import { compile, serialize, stringify } from 'stylis';
-import { getConfig } from './config';
-import theme from './themes';
+import { getConfig } from './config.js';
+import theme from './themes/index.js';
/**
* Import the getStyles function from each diagram.
@@ -14,23 +14,23 @@ import theme from './themes';
* because many of the diagrams have a circular dependency import error
* (they import mermaidAPI.js, which imports diagramOrchestrator.js, which causes a loop)
*/
-import c4 from './diagrams/c4/styles';
-import classDiagram from './diagrams/class/styles';
-import flowchart from './diagrams/flowchart/styles';
-import flowchartElk from './diagrams/flowchart/elk/styles';
-import er from './diagrams/er/styles';
-import error from './diagrams/error/styles';
-import git from './diagrams/git/styles';
-import gantt from './diagrams/gantt/styles';
-import info from './diagrams/info/styles';
-import pie from './diagrams/pie/styles';
-import requirement from './diagrams/requirement/styles';
-import sequence from './diagrams/sequence/styles';
-import state from './diagrams/state/styles';
-import journey from './diagrams/user-journey/styles';
-import timeline from './diagrams/timeline/styles';
-import mindmap from './diagrams/mindmap/styles';
-import themes from './themes';
+import c4 from './diagrams/c4/styles.js';
+import classDiagram from './diagrams/class/styles.js';
+import flowchart from './diagrams/flowchart/styles.js';
+import flowchartElk from './diagrams/flowchart/elk/styles.js';
+import er from './diagrams/er/styles.js';
+import error from './diagrams/error/styles.js';
+import git from './diagrams/git/styles.js';
+import gantt from './diagrams/gantt/styles.js';
+import info from './diagrams/info/styles.js';
+import pie from './diagrams/pie/styles.js';
+import requirement from './diagrams/requirement/styles.js';
+import sequence from './diagrams/sequence/styles.js';
+import state from './diagrams/state/styles.js';
+import journey from './diagrams/user-journey/styles.js';
+import timeline from './diagrams/timeline/styles.js';
+import mindmap from './diagrams/mindmap/styles.js';
+import themes from './themes/index.js';
async function checkValidStylisCSSStyleSheet(stylisString: string) {
const cssString = serialize(compile(`#my-svg-id{${stylisString}}`), stringify);
@@ -67,7 +67,7 @@ describe('styles', () => {
describe('getStyles', () => {
test('should return a valid style for an empty type', async () => {
- const { default: getStyles, addStylesForDiagram } = await import('./styles');
+ const { default: getStyles, addStylesForDiagram } = await import('./styles.js');
const diagramType = 'my-custom-mocked-type-with-no-styles';
const myTypeGetStylesFunc = vi.fn().mockReturnValue('');
@@ -102,7 +102,7 @@ describe('styles', () => {
timeline,
})) {
test(`should return a valid style for diagram ${diagramId} and theme ${themeId}`, async () => {
- const { default: getStyles, addStylesForDiagram } = await import('./styles');
+ const { default: getStyles, addStylesForDiagram } = await import('./styles.js');
addStylesForDiagram(diagramId, getDiagramStyles);
const styles = getStyles(
diff --git a/packages/mermaid/src/styles.ts b/packages/mermaid/src/styles.ts
index 588c26cb18..a6e7524756 100644
--- a/packages/mermaid/src/styles.ts
+++ b/packages/mermaid/src/styles.ts
@@ -1,5 +1,5 @@
-import type { FlowChartStyleOptions } from './diagrams/flowchart/styles';
-import { log } from './logger';
+import type { FlowChartStyleOptions } from './diagrams/flowchart/styles.js';
+import { log } from './logger.js';
const themes: Record = {};
diff --git a/packages/mermaid/src/tests/MockedD3.ts b/packages/mermaid/src/tests/MockedD3.ts
index ccf21a269b..6d8d721e0f 100644
--- a/packages/mermaid/src/tests/MockedD3.ts
+++ b/packages/mermaid/src/tests/MockedD3.ts
@@ -1,4 +1,4 @@
-import type {} from '@vitest/spy/dist/index';
+import type {} from '@vitest/spy/dist/index.js';
/**
* This is a mocked/stubbed version of the d3 Selection type. Each of the main functions are all
diff --git a/packages/mermaid/src/themes/index.js b/packages/mermaid/src/themes/index.js
index 94e2b95a4a..6ffe6274d6 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 f3da6f1a49..6e26e12a2b 100644
--- a/packages/mermaid/src/themes/theme-base.js
+++ b/packages/mermaid/src/themes/theme-base.js
@@ -1,9 +1,9 @@
import { darken, lighten, adjust, invert } from 'khroma';
-import { mkBorder } from './theme-helpers';
+import { mkBorder } from './theme-helpers.js';
import {
oldAttributeBackgroundColorEven,
oldAttributeBackgroundColorOdd,
-} from './erDiagram-oldHardcodedValues';
+} from './erDiagram-oldHardcodedValues.js';
class Theme {
constructor() {
diff --git a/packages/mermaid/src/themes/theme-dark.js b/packages/mermaid/src/themes/theme-dark.js
index 201a380a1c..7298f3a0cc 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 460a1b9208..b29e93862e 100644
--- a/packages/mermaid/src/themes/theme-default.js
+++ b/packages/mermaid/src/themes/theme-default.js
@@ -1,9 +1,9 @@
import { invert, lighten, rgba, adjust, darken } from 'khroma';
-import { mkBorder } from './theme-helpers';
+import { mkBorder } from './theme-helpers.js';
import {
oldAttributeBackgroundColorEven,
oldAttributeBackgroundColorOdd,
-} from './erDiagram-oldHardcodedValues';
+} from './erDiagram-oldHardcodedValues.js';
class Theme {
constructor() {
diff --git a/packages/mermaid/src/themes/theme-forest.js b/packages/mermaid/src/themes/theme-forest.js
index c6eb9574c7..dbff069b75 100644
--- a/packages/mermaid/src/themes/theme-forest.js
+++ b/packages/mermaid/src/themes/theme-forest.js
@@ -1,9 +1,9 @@
import { darken, lighten, adjust, invert } from 'khroma';
-import { mkBorder } from './theme-helpers';
+import { mkBorder } from './theme-helpers.js';
import {
oldAttributeBackgroundColorEven,
oldAttributeBackgroundColorOdd,
-} from './erDiagram-oldHardcodedValues';
+} from './erDiagram-oldHardcodedValues.js';
class Theme {
constructor() {
diff --git a/packages/mermaid/src/themes/theme-neutral.js b/packages/mermaid/src/themes/theme-neutral.js
index d03d7be1df..bc0725276c 100644
--- a/packages/mermaid/src/themes/theme-neutral.js
+++ b/packages/mermaid/src/themes/theme-neutral.js
@@ -1,9 +1,9 @@
import { invert, darken, lighten, adjust } from 'khroma';
-import { mkBorder } from './theme-helpers';
+import { mkBorder } from './theme-helpers.js';
import {
oldAttributeBackgroundColorEven,
oldAttributeBackgroundColorOdd,
-} from './erDiagram-oldHardcodedValues';
+} from './erDiagram-oldHardcodedValues.js';
// const Color = require ( 'khroma/dist/color' ).default
// Color.format.hex.stringify(Color.parse('hsl(210, 66.6666666667%, 95%)')); // => "#EAF2FB"
diff --git a/packages/mermaid/src/utils.spec.js b/packages/mermaid/src/utils.spec.js
index 0f0bc1e92a..ae3234cb91 100644
--- a/packages/mermaid/src/utils.spec.js
+++ b/packages/mermaid/src/utils.spec.js
@@ -1,10 +1,10 @@
import { vi } from 'vitest';
-import utils from './utils';
-import assignWithDepth from './assignWithDepth';
-import { detectType } from './diagram-api/detectType';
-import { addDiagrams } from './diagram-api/diagram-orchestration';
+import utils from './utils.js';
+import assignWithDepth from './assignWithDepth.js';
+import { detectType } from './diagram-api/detectType.js';
+import { addDiagrams } from './diagram-api/diagram-orchestration.js';
import memoize from 'lodash-es/memoize.js';
-import { MockedD3 } from './tests/MockedD3';
+import { MockedD3 } from './tests/MockedD3.js';
addDiagrams();
diff --git a/packages/mermaid/src/utils.ts b/packages/mermaid/src/utils.ts
index 0c4b9d1a8c..6f824062d6 100644
--- a/packages/mermaid/src/utils.ts
+++ b/packages/mermaid/src/utils.ts
@@ -24,12 +24,12 @@ import {
curveStepBefore,
select,
} from 'd3';
-import common from './diagrams/common/common';
-import { configKeys } from './defaultConfig';
-import { log } from './logger';
-import { detectType } from './diagram-api/detectType';
-import assignWithDepth from './assignWithDepth';
-import { MermaidConfig } from './config.type';
+import common from './diagrams/common/common.js';
+import { configKeys } from './defaultConfig.js';
+import { log } from './logger.js';
+import { detectType } from './diagram-api/detectType.js';
+import assignWithDepth from './assignWithDepth.js';
+import { MermaidConfig } from './config.type.js';
import memoize from 'lodash-es/memoize.js';
// Effectively an enum of the supported curve types, accessible by name
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d3e9785134..1847115cdf 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,6 +8,7 @@ importers:
'@commitlint/cli': ^17.2.0
'@commitlint/config-conventional': ^17.2.0
'@cspell/eslint-plugin': ^6.14.2
+ '@rollup/plugin-typescript': ^11.0.0
'@types/cors': ^2.8.13
'@types/eslint': ^8.4.10
'@types/express': ^4.17.17
@@ -65,6 +66,7 @@ importers:
'@commitlint/cli': 17.2.0
'@commitlint/config-conventional': 17.2.0
'@cspell/eslint-plugin': 6.14.2
+ '@rollup/plugin-typescript': 11.0.0_typescript@4.8.4
'@types/cors': 2.8.13
'@types/eslint': 8.4.10
'@types/express': 4.17.17
@@ -2405,6 +2407,38 @@ packages:
resolution: {integrity: sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==}
dev: true
+ /@rollup/plugin-typescript/11.0.0_typescript@4.8.4:
+ resolution: {integrity: sha512-goPyCWBiimk1iJgSTgsehFD5OOFHiAknrRJjqFCudcW8JtWiBlK284Xnn4flqMqg6YAjVG/EE+3aVzrL5qNSzQ==}
+ engines: {node: '>=14.0.0'}
+ peerDependencies:
+ rollup: ^2.14.0||^3.0.0
+ tslib: '*'
+ typescript: '>=3.7.0'
+ peerDependenciesMeta:
+ rollup:
+ optional: true
+ tslib:
+ optional: true
+ dependencies:
+ '@rollup/pluginutils': 5.0.2
+ resolve: 1.22.1
+ typescript: 4.8.4
+ dev: true
+
+ /@rollup/pluginutils/5.0.2:
+ resolution: {integrity: sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==}
+ engines: {node: '>=14.0.0'}
+ peerDependencies:
+ rollup: ^1.20.0||^2.0.0||^3.0.0
+ peerDependenciesMeta:
+ rollup:
+ optional: true
+ dependencies:
+ '@types/estree': 1.0.0
+ estree-walker: 2.0.2
+ picomatch: 2.3.1
+ dev: true
+
/@sideway/address/4.1.4:
resolution: {integrity: sha512-7vwq+rOHVWjyXxVlR76Agnvhy8I9rpzjosTESvmhNeXOXdZZB15Fl+TI9x1SiHZH5Jv2wTGduSxFDIaq0m3DUw==}
dependencies:
@@ -3419,7 +3453,7 @@ packages:
'@vue/shared': 3.2.45
estree-walker: 2.0.2
magic-string: 0.25.9
- postcss: 8.4.20
+ postcss: 8.4.21
source-map: 0.6.1
dev: true
@@ -6668,6 +6702,16 @@ packages:
resolution: {integrity: sha512-XGozTsMPYkm+6b5QL3Z9wQcJjNYxp0CYn3U1gO7dwD6PAqU1SVWZxI9CCg3z+ml3YfqdPnrBehaBrnH2AGKbNA==}
dev: true
+ /follow-redirects/1.15.2:
+ resolution: {integrity: sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==}
+ engines: {node: '>=4.0'}
+ peerDependencies:
+ debug: '*'
+ peerDependenciesMeta:
+ debug:
+ optional: true
+ dev: true
+
/follow-redirects/1.15.2_debug@4.3.2:
resolution: {integrity: sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==}
engines: {node: '>=4.0'}
@@ -7229,7 +7273,7 @@ packages:
engines: {node: '>=8.0.0'}
dependencies:
eventemitter3: 4.0.7
- follow-redirects: 1.15.2_debug@4.3.4
+ follow-redirects: 1.15.2
requires-port: 1.0.0
transitivePeerDependencies:
- debug
@@ -9798,15 +9842,6 @@ packages:
resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
dev: true
- /postcss/8.4.20:
- resolution: {integrity: sha512-6Q04AXR1212bXr5fh03u8aAwbLxAQNGQ/Q1LNa0VfOI06ZAlhPHtQvE4OIdpj4kLThXilalPnmDSOD65DcHt+g==}
- engines: {node: ^10 || ^12 || >=14}
- dependencies:
- nanoid: 3.3.4
- picocolors: 1.0.0
- source-map-js: 1.0.2
- dev: true
-
/postcss/8.4.21:
resolution: {integrity: sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==}
engines: {node: ^10 || ^12 || >=14}
diff --git a/tsconfig.json b/tsconfig.json
index c66d627845..29c790cbbb 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -27,9 +27,8 @@
// "useDefineForClassFields": true, /* Emit ECMAScript-standard-compliant class fields. */
/* Modules */
- "module": "es2022" /* Specify what module code is generated. */,
+ "module": "nodenext",
// "rootDir": "./packages" /* Specify the root folder within your source files. */,
- "moduleResolution": "node" /* Specify how TypeScript looks up a file from a given module specifier. */,
// "baseUrl": "./src" /* Specify the base directory to resolve non-relative module names. */,
// "paths": {} /* Specify a set of entries that re-map imports to additional lookup locations. */,
// "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */
diff --git a/vite.config.ts b/vite.config.ts
index e792954254..dfd0431bbf 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,11 +1,16 @@
-import jison from './.vite/jisonPlugin';
+import jison from './.vite/jisonPlugin.js';
+import typescript from '@rollup/plugin-typescript';
import { defineConfig } from 'vitest/config';
export default defineConfig({
resolve: {
- extensions: ['.jison', '.js', '.ts', '.json'],
+ extensions: ['.js'],
},
- plugins: [jison()],
+ plugins: [
+ jison(),
+ // @ts-expect-error According to the type definitions, rollup plugins are incompatible with vite
+ typescript({ compilerOptions: { declaration: false } }),
+ ],
test: {
environment: 'jsdom',
globals: true,