diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index 375d5fada3..026ca0fb7f 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -38,6 +38,10 @@ jobs:
         run: |
           pnpm exec vitest run ./packages/mermaid/src/diagrams/gantt/ganttDb.spec.ts --coverage
 
+      - name: Verify out-of-tree build with TypeScript
+        run: |
+          pnpm test:check:tsc
+
       - name: Upload Coverage to Codecov
         uses: codecov/codecov-action@e28ff129e5465c2c0dcc6f003fc735cb6ae0c673 # v4.5.0
         # Run step only pushes to develop and pull_requests
diff --git a/package.json b/package.json
index 5683b6ed98..6d4478be75 100644
--- a/package.json
+++ b/package.json
@@ -42,6 +42,7 @@
     "test": "pnpm lint && vitest run",
     "test:watch": "vitest --watch",
     "test:coverage": "vitest --coverage",
+    "test:check:tsc": "tsx scripts/tsc-check.ts",
     "prepare": "husky && pnpm build",
     "pre-commit": "lint-staged"
   },
diff --git a/packages/mermaid/src/diagrams/architecture/architectureIcons.ts b/packages/mermaid/src/diagrams/architecture/architectureIcons.ts
index dd6c99f9c9..bf6bfd4f1c 100644
--- a/packages/mermaid/src/diagrams/architecture/architectureIcons.ts
+++ b/packages/mermaid/src/diagrams/architecture/architectureIcons.ts
@@ -1,4 +1,4 @@
-import { unknownIcon } from '$root/rendering-util/icons.js';
+import { unknownIcon } from 'mermaid/dist/rendering-util/icons.js';
 import type { IconifyJSON } from '@iconify/types';
 
 const wrapIcon = (icon: string) => {
diff --git a/packages/mermaid/src/diagrams/architecture/architectureRenderer.ts b/packages/mermaid/src/diagrams/architecture/architectureRenderer.ts
index 3abb69b9f7..f7dcd325ce 100644
--- a/packages/mermaid/src/diagrams/architecture/architectureRenderer.ts
+++ b/packages/mermaid/src/diagrams/architecture/architectureRenderer.ts
@@ -1,4 +1,4 @@
-import { registerIconPacks } from '$root/rendering-util/icons.js';
+import { registerIconPacks } from 'mermaid/dist/rendering-util/icons.js';
 import type { Position } from 'cytoscape';
 import cytoscape from 'cytoscape';
 import type { FcoseLayoutOptions } from 'cytoscape-fcose';
diff --git a/packages/mermaid/src/diagrams/architecture/svgDraw.ts b/packages/mermaid/src/diagrams/architecture/svgDraw.ts
index 3578393949..0a4a44d9cd 100644
--- a/packages/mermaid/src/diagrams/architecture/svgDraw.ts
+++ b/packages/mermaid/src/diagrams/architecture/svgDraw.ts
@@ -1,4 +1,4 @@
-import { getIconSVG } from '$root/rendering-util/icons.js';
+import { getIconSVG } from 'mermaid/dist/rendering-util/icons.js';
 import type cytoscape from 'cytoscape';
 import { getConfig } from '../../diagram-api/diagramAPI.js';
 import { createText } from '../../rendering-util/createText.js';
@@ -170,8 +170,8 @@ export const drawEdges = async function (edgesEl: D3Element, cy: cytoscape.Core)
               textElem.attr(
                 'transform',
                 `
-                translate(${midX}, ${midY - bboxOrig.height / 2}) 
-                translate(${(x * bboxNew.width) / 2}, ${(y * bboxNew.height) / 2}) 
+                translate(${midX}, ${midY - bboxOrig.height / 2})
+                translate(${(x * bboxNew.width) / 2}, ${(y * bboxNew.height) / 2})
                 rotate(${-1 * x * y * 45}, 0, ${bboxOrig.height / 2})
               `
               );
diff --git a/packages/mermaid/src/mermaid.ts b/packages/mermaid/src/mermaid.ts
index 52cca1cfe4..6a7efb3754 100644
--- a/packages/mermaid/src/mermaid.ts
+++ b/packages/mermaid/src/mermaid.ts
@@ -2,7 +2,7 @@
  * Web page integration module for the mermaid framework. It uses the mermaidAPI for mermaid
  * functionality and to render the diagrams to svg code!
  */
-import { registerIconPacks } from '$root/rendering-util/icons.js';
+import { registerIconPacks } from 'mermaid/dist/rendering-util/icons.js';
 import { dedent } from 'ts-dedent';
 import type { MermaidConfig } from './config.type.js';
 import { detectType, registerLazyLoadedDiagrams } from './diagram-api/detectType.js';
diff --git a/packages/mermaid/src/rendering-util/createText.ts b/packages/mermaid/src/rendering-util/createText.ts
index a6ad7fa1c0..0a205ea317 100644
--- a/packages/mermaid/src/rendering-util/createText.ts
+++ b/packages/mermaid/src/rendering-util/createText.ts
@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 // @ts-nocheck TODO: Fix types
-import { getConfig } from '$root/diagram-api/diagramAPI.js';
-import common, { hasKatex, renderKatex } from '$root/diagrams/common/common.js';
+import { getConfig } from 'mermaid/dist/diagram-api/diagramAPI.js';
+import common, { hasKatex, renderKatex } from 'mermaid/dist/diagrams/common/common.js';
 import { select } from 'd3';
 import type { MermaidConfig } from '../config.type.js';
 import type { SVGGroup } from '../diagram-api/types.js';
diff --git a/packages/mermaid/src/rendering-util/icons.ts b/packages/mermaid/src/rendering-util/icons.ts
index 27709b8229..d08d55f430 100644
--- a/packages/mermaid/src/rendering-util/icons.ts
+++ b/packages/mermaid/src/rendering-util/icons.ts
@@ -1,4 +1,4 @@
-import { log } from '$root/logger.js';
+import { log } from 'mermaid/dist/logger.js';
 import type { ExtendedIconifyIcon, IconifyIcon, IconifyJSON } from '@iconify/types';
 import type { IconifyIconCustomisations } from '@iconify/utils';
 import { getIconData, iconToHTML, iconToSVG, replaceIDs, stringToIcon } from '@iconify/utils';
diff --git a/packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js b/packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js
index 0d754f6614..afd1f4a9c9 100644
--- a/packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js
+++ b/packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js
@@ -23,7 +23,7 @@ import {
   insertEdge,
   clear as clearEdges,
 } from '../../rendering-elements/edges.js';
-import { log } from '$root/logger.js';
+import { log } from 'mermaid/dist/logger.js';
 import { getSubGraphTitleMargins } from '../../../utils/subGraphTitleMargins.js';
 import { getConfig } from '../../../diagram-api/diagramAPI.js';
 
diff --git a/packages/mermaid/src/rendering-util/layout-algorithms/dagre/mermaid-graphlib.js b/packages/mermaid/src/rendering-util/layout-algorithms/dagre/mermaid-graphlib.js
index 54ad5d27f8..0cde897ae7 100644
--- a/packages/mermaid/src/rendering-util/layout-algorithms/dagre/mermaid-graphlib.js
+++ b/packages/mermaid/src/rendering-util/layout-algorithms/dagre/mermaid-graphlib.js
@@ -1,5 +1,5 @@
 /** Decorates with functions required by mermaids dagre-wrapper. */
-import { log } from '$root/logger.js';
+import { log } from 'mermaid/dist/logger.js';
 import * as graphlib from 'dagre-d3-es/src/graphlib/index.js';
 import * as graphlibJson from 'dagre-d3-es/src/graphlib/json.js';
 
diff --git a/packages/mermaid/src/rendering-util/layout-algorithms/dagre/mermaid-graphlib.spec.js b/packages/mermaid/src/rendering-util/layout-algorithms/dagre/mermaid-graphlib.spec.js
index dd71a2f7e3..545a35a928 100644
--- a/packages/mermaid/src/rendering-util/layout-algorithms/dagre/mermaid-graphlib.spec.js
+++ b/packages/mermaid/src/rendering-util/layout-algorithms/dagre/mermaid-graphlib.spec.js
@@ -6,7 +6,7 @@ import {
   extractDescendants,
   sortNodesByHierarchy,
 } from './mermaid-graphlib.js';
-import { setLogLevel, log } from '$root/logger.js';
+import { setLogLevel, log } from 'mermaid/dist/logger.js';
 
 describe('Graphlib decorations', () => {
   let g;
diff --git a/packages/mermaid/src/rendering-util/render.ts b/packages/mermaid/src/rendering-util/render.ts
index 013be7ba40..8306bc15a0 100644
--- a/packages/mermaid/src/rendering-util/render.ts
+++ b/packages/mermaid/src/rendering-util/render.ts
@@ -1,7 +1,7 @@
-import type { SVG } from '$root/diagram-api/types.js';
-import type { InternalHelpers } from '$root/internals.js';
-import { internalHelpers } from '$root/internals.js';
-import { log } from '$root/logger.js';
+import type { SVG } from 'mermaid/dist/diagram-api/types.js';
+import type { InternalHelpers } from 'mermaid/dist/internals.js';
+import { internalHelpers } from 'mermaid/dist/internals.js';
+import { log } from 'mermaid/dist/logger.js';
 import type { LayoutData } from './types.js';
 
 export interface RenderOptions {
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/clusters.js b/packages/mermaid/src/rendering-util/rendering-elements/clusters.js
index ba87f78f53..a963bba9b8 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/clusters.js
+++ b/packages/mermaid/src/rendering-util/rendering-elements/clusters.js
@@ -1,7 +1,7 @@
-import { getConfig } from '$root/diagram-api/diagramAPI.js';
-import { evaluate } from '$root/diagrams/common/common.js';
-import { log } from '$root/logger.js';
-import { getSubGraphTitleMargins } from '$root/utils/subGraphTitleMargins.js';
+import { getConfig } from 'mermaid/dist/diagram-api/diagramAPI.js';
+import { evaluate } from 'mermaid/dist/diagrams/common/common.js';
+import { log } from 'mermaid/dist/logger.js';
+import { getSubGraphTitleMargins } from 'mermaid/dist/utils/subGraphTitleMargins.js';
 import { select } from 'd3';
 import rough from 'roughjs';
 import { createText } from '../createText.ts';
@@ -11,7 +11,7 @@ import { createRoundedRectPathD } from './shapes/roundedRectPath.ts';
 import {
   styles2String,
   userNodeOverrides,
-} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
+} from 'mermaid/dist/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
 
 const rect = async (parent, node) => {
   log.info('Creating subgraph rect for ', node.id, node);
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/createLabel.js b/packages/mermaid/src/rendering-util/rendering-elements/createLabel.js
index 0afdbb7145..2d560e85da 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/createLabel.js
+++ b/packages/mermaid/src/rendering-util/rendering-elements/createLabel.js
@@ -1,8 +1,8 @@
 import { select } from 'd3';
-import { log } from '$root/logger.js';
-import { getConfig } from '$root/diagram-api/diagramAPI.js';
-import common, { evaluate, renderKatex, hasKatex } from '$root/diagrams/common/common.js';
-import { decodeEntities } from '$root/utils.js';
+import { log } from 'mermaid/dist/logger.js';
+import { getConfig } from 'mermaid/dist/diagram-api/diagramAPI.js';
+import common, { evaluate, renderKatex, hasKatex } from 'mermaid/dist/diagrams/common/common.js';
+import { decodeEntities } from 'mermaid/dist/utils.js';
 
 /**
  * @param dom
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/edgeMarker.spec.ts b/packages/mermaid/src/rendering-util/rendering-elements/edgeMarker.spec.ts
index 05c7472c95..313dc1d018 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/edgeMarker.spec.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/edgeMarker.spec.ts
@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/unbound-method */
-import type { SVG } from '$root/diagram-api/types.js';
+import type { SVG } from 'mermaid/dist/diagram-api/types.js';
 import type { Mocked } from 'vitest';
 import { addEdgeMarkers } from './edgeMarker.js';
 
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/edgeMarker.ts b/packages/mermaid/src/rendering-util/rendering-elements/edgeMarker.ts
index ea748d8aae..032b3989c1 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/edgeMarker.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/edgeMarker.ts
@@ -1,6 +1,6 @@
-import type { SVG } from '$root/diagram-api/types.js';
-import { log } from '$root/logger.js';
-import type { EdgeData } from '$root/types.js';
+import type { SVG } from 'mermaid/dist/diagram-api/types.js';
+import { log } from 'mermaid/dist/logger.js';
+import type { EdgeData } from 'mermaid/dist/types.js';
 /**
  * Adds SVG markers to a path element based on the arrow types specified in the edge.
  *
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/edges.js b/packages/mermaid/src/rendering-util/rendering-elements/edges.js
index 087fcf0bec..999dc3d1cc 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/edges.js
+++ b/packages/mermaid/src/rendering-util/rendering-elements/edges.js
@@ -1,10 +1,10 @@
-import { getConfig } from '$root/diagram-api/diagramAPI.js';
-import { evaluate } from '$root/diagrams/common/common.js';
-import { log } from '$root/logger.js';
-import { createText } from '$root/rendering-util/createText.ts';
-import utils from '$root/utils.js';
-import { getLineFunctionsWithOffset } from '$root/utils/lineWithOffset.js';
-import { getSubGraphTitleMargins } from '$root/utils/subGraphTitleMargins.js';
+import { getConfig } from 'mermaid/dist/diagram-api/diagramAPI.js';
+import { evaluate } from 'mermaid/dist/diagrams/common/common.js';
+import { log } from 'mermaid/dist/logger.js';
+import { createText } from 'mermaid/dist/rendering-util/createText.ts';
+import utils from 'mermaid/dist/utils.js';
+import { getLineFunctionsWithOffset } from 'mermaid/dist/utils/lineWithOffset.js';
+import { getSubGraphTitleMargins } from 'mermaid/dist/utils/subGraphTitleMargins.js';
 import { curveBasis, line, select } from 'd3';
 import rough from 'roughjs';
 import createLabel from './createLabel.js';
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/markers.js b/packages/mermaid/src/rendering-util/rendering-elements/markers.js
index 0b0972a8ad..b9494c4c1a 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/markers.js
+++ b/packages/mermaid/src/rendering-util/rendering-elements/markers.js
@@ -1,5 +1,5 @@
 /** Setup arrow head and define the marker. The result is appended to the svg. */
-import { log } from '$root/logger.js';
+import { log } from 'mermaid/dist/logger.js';
 
 // Only add the number of markers that the diagram needs
 const insertMarkers = (elem, markerArray, type, id) => {
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/nodes.js b/packages/mermaid/src/rendering-util/rendering-elements/nodes.js
index 54d4ddf3ee..830639f0c7 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/nodes.js
+++ b/packages/mermaid/src/rendering-util/rendering-elements/nodes.js
@@ -1,4 +1,4 @@
-import { log } from '$root/logger.js';
+import { log } from 'mermaid/dist/logger.js';
 import { state } from './shapes/state.ts';
 import { roundedRect } from './shapes/roundedRect.ts';
 import { squareRect } from './shapes/squareRect.ts';
@@ -9,7 +9,7 @@ import { choice } from './shapes/choice.ts';
 import { note } from './shapes/note.ts';
 import { stadium } from './shapes/stadium.js';
 import { rectWithTitle } from './shapes/rectWithTitle.js';
-import { getConfig } from '$root/diagram-api/diagramAPI.js';
+import { getConfig } from 'mermaid/dist/diagram-api/diagramAPI.js';
 import { subroutine } from './shapes/subroutine.js';
 import { cylinder } from './shapes/cylinder.js';
 import { circle } from './shapes/circle.js';
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/choice.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/choice.ts
index 3d6f085a4b..9b99b8e7f2 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/choice.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/choice.ts
@@ -1,10 +1,10 @@
 import intersect from '../intersect/index.js';
-import type { Node } from '$root/rendering-util/types.d.ts';
-import type { SVG } from '$root/diagram-api/types.js';
+import type { Node } from 'mermaid/dist/rendering-util/types.d.ts';
+import type { SVG } from 'mermaid/dist/diagram-api/types.js';
 // @ts-ignore TODO: Fix rough typings
 import rough from 'roughjs';
 import { solidStateFill, styles2String } from './handDrawnShapeStyles.js';
-import { getConfig } from '$root/diagram-api/diagramAPI.js';
+import { getConfig } from 'mermaid/dist/diagram-api/diagramAPI.js';
 
 export const choice = (parent: SVG, node: Node) => {
   const { labelStyles, nodeStyles } = styles2String(node);
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/circle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/circle.ts
index 1474b778f7..3c301a0255 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/circle.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/circle.ts
@@ -1,11 +1,11 @@
-import { log } from '$root/logger.js';
+import { log } from 'mermaid/dist/logger.js';
 import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
 import intersect from '../intersect/index.js';
-import type { Node } from '$root/rendering-util/types.d.ts';
+import type { Node } from 'mermaid/dist/rendering-util/types.d.ts';
 import {
   styles2String,
   userNodeOverrides,
-} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
+} from 'mermaid/dist/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
 import rough from 'roughjs';
 
 export const circle = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => {
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/cylinder.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/cylinder.ts
index f85db0f05e..c92b40138b 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/cylinder.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/cylinder.ts
@@ -1,10 +1,10 @@
 import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
 import intersect from '../intersect/index.js';
-import type { Node } from '$root/rendering-util/types.d.ts';
+import type { Node } from 'mermaid/dist/rendering-util/types.d.ts';
 import {
   styles2String,
   userNodeOverrides,
-} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
+} from 'mermaid/dist/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
 import rough from 'roughjs';
 
 export const createCylinderPathD = (
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/doubleCircle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/doubleCircle.ts
index 5ce616c0ba..8672ffbfff 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/doubleCircle.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/doubleCircle.ts
@@ -1,11 +1,11 @@
-import { log } from '$root/logger.js';
+import { log } from 'mermaid/dist/logger.js';
 import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
 import intersect from '../intersect/index.js';
-import type { Node } from '$root/rendering-util/types.d.ts';
+import type { Node } from 'mermaid/dist/rendering-util/types.d.ts';
 import {
   styles2String,
   userNodeOverrides,
-} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
+} from 'mermaid/dist/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
 import rough from 'roughjs';
 
 export const doublecircle = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => {
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts
index 645f69177f..e9643ba4f5 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts
@@ -1,11 +1,11 @@
 import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
 import intersect from '../intersect/index.js';
-import type { Node, RectOptions } from '$root/rendering-util/types.d.ts';
+import type { Node, RectOptions } from 'mermaid/dist/rendering-util/types.d.ts';
 import { createRoundedRectPathD } from './roundedRectPath.js';
 import {
   userNodeOverrides,
   styles2String,
-} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
+} from 'mermaid/dist/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
 import rough from 'roughjs';
 
 export const drawRect = async (parent: SVGAElement, node: Node, options: RectOptions) => {
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/forkJoin.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/forkJoin.ts
index 07978be106..324bb31343 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/forkJoin.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/forkJoin.ts
@@ -1,10 +1,10 @@
 import { updateNodeBounds } from './util.js';
 import intersect from '../intersect/index.js';
-import type { Node } from '$root/rendering-util/types.d.ts';
-import type { SVG } from '$root/diagram-api/types.js';
+import type { Node } from 'mermaid/dist/rendering-util/types.d.ts';
+import type { SVG } from 'mermaid/dist/diagram-api/types.js';
 import rough from 'roughjs';
 import { solidStateFill } from './handDrawnShapeStyles.js';
-import { getConfig } from '$root/diagram-api/diagramAPI.js';
+import { getConfig } from 'mermaid/dist/diagram-api/diagramAPI.js';
 
 export const forkJoin = (parent: SVG, node: Node, dir: string) => {
   const { themeVariables } = getConfig();
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.ts
index a5c963e7cc..d764527d83 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.ts
@@ -1,5 +1,5 @@
-import { getConfig } from '$root/diagram-api/diagramAPI.js';
-import type { Node } from '$root/rendering-util/types.d.ts';
+import { getConfig } from 'mermaid/dist/diagram-api/diagramAPI.js';
+import type { Node } from 'mermaid/dist/rendering-util/types.d.ts';
 
 // Striped fill like start or fork nodes in state diagrams
 export const solidStateFill = (color: string) => {
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/hexagon.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/hexagon.ts
index 3b0ce30819..5a1197c51a 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/hexagon.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/hexagon.ts
@@ -1,10 +1,10 @@
 import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
 import intersect from '../intersect/index.js';
-import type { Node } from '$root/rendering-util/types.d.ts';
+import type { Node } from 'mermaid/dist/rendering-util/types.d.ts';
 import {
   styles2String,
   userNodeOverrides,
-} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
+} from 'mermaid/dist/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
 import rough from 'roughjs';
 
 import { insertPolygonShape } from './insertPolygonShape.js';
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/invertedTrapezoid.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/invertedTrapezoid.ts
index 37f4152477..5a8bf9765a 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/invertedTrapezoid.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/invertedTrapezoid.ts
@@ -1,10 +1,10 @@
 import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
 import intersect from '../intersect/index.js';
-import type { Node } from '$root/rendering-util/types.d.ts';
+import type { Node } from 'mermaid/dist/rendering-util/types.d.ts';
 import {
   styles2String,
   userNodeOverrides,
-} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
+} from 'mermaid/dist/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
 import rough from 'roughjs';
 import { insertPolygonShape } from './insertPolygonShape.js';
 
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/labelRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/labelRect.ts
index 2d5c6d6eaf..51605eae49 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/labelRect.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/labelRect.ts
@@ -1,4 +1,4 @@
-import type { Node, RectOptions } from '$root/rendering-util/types.d.ts';
+import type { Node, RectOptions } from 'mermaid/dist/rendering-util/types.d.ts';
 import { drawRect } from './drawRect.js';
 import { labelHelper, updateNodeBounds } from './util.js';
 import intersect from '../intersect/index.js';
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanLeft.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanLeft.ts
index bb57925e20..8e06096f1d 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanLeft.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanLeft.ts
@@ -1,10 +1,10 @@
 import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
 import intersect from '../intersect/index.js';
-import type { Node } from '$root/rendering-util/types.d.ts';
+import type { Node } from 'mermaid/dist/rendering-util/types.d.ts';
 import {
   styles2String,
   userNodeOverrides,
-} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
+} from 'mermaid/dist/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
 import rough from 'roughjs';
 import { insertPolygonShape } from './insertPolygonShape.js';
 
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanRight.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanRight.ts
index 37604e7e77..b4c1ae7053 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanRight.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanRight.ts
@@ -1,10 +1,10 @@
 import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
 import intersect from '../intersect/index.js';
-import type { Node } from '$root/rendering-util/types.d.ts';
+import type { Node } from 'mermaid/dist/rendering-util/types.d.ts';
 import {
   styles2String,
   userNodeOverrides,
-} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
+} from 'mermaid/dist/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
 import rough from 'roughjs';
 import { insertPolygonShape } from './insertPolygonShape.js';
 
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/note.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/note.ts
index 77fabf2718..a567c33128 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/note.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/note.ts
@@ -1,8 +1,8 @@
-import { log } from '$root/logger.js';
+import { log } from 'mermaid/dist/logger.js';
 import { labelHelper, updateNodeBounds } from './util.js';
 import intersect from '../intersect/index.js';
-import { getConfig } from '$root/diagram-api/diagramAPI.js';
-import type { Node } from '$root/rendering-util/types.d.ts';
+import { getConfig } from 'mermaid/dist/diagram-api/diagramAPI.js';
+import type { Node } from 'mermaid/dist/rendering-util/types.d.ts';
 import rough from 'roughjs';
 
 export const note = async (parent: SVGAElement, node: Node) => {
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/question.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/question.ts
index ba770ab4e0..b3eed0f665 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/question.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/question.ts
@@ -1,11 +1,11 @@
-import { log } from '$root/logger.js';
+import { log } from 'mermaid/dist/logger.js';
 import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
 import intersect from '../intersect/index.js';
-import type { Node } from '$root/rendering-util/types.d.ts';
+import type { Node } from 'mermaid/dist/rendering-util/types.d.ts';
 import {
   styles2String,
   userNodeOverrides,
-} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
+} from 'mermaid/dist/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
 import rough from 'roughjs';
 import { insertPolygonShape } from './insertPolygonShape.js';
 
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/rectLeftInvArrow.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/rectLeftInvArrow.ts
index b5000ac77e..4d7611331c 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/rectLeftInvArrow.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/rectLeftInvArrow.ts
@@ -1,10 +1,10 @@
 import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
 import intersect from '../intersect/index.js';
-import type { Node } from '$root/rendering-util/types.d.ts';
+import type { Node } from 'mermaid/dist/rendering-util/types.d.ts';
 import {
   styles2String,
   userNodeOverrides,
-} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
+} from 'mermaid/dist/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
 import rough from 'roughjs';
 import { insertPolygonShape } from './insertPolygonShape.js';
 
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/rectWithTitle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/rectWithTitle.ts
index 857e60b8b0..27ef201ee6 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/rectWithTitle.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/rectWithTitle.ts
@@ -1,17 +1,17 @@
-import type { Node } from '$root/rendering-util/types.d.ts';
+import type { Node } from 'mermaid/dist/rendering-util/types.d.ts';
 import { select } from 'd3';
-import { evaluate } from '$root/diagrams/common/common.js';
+import { evaluate } from 'mermaid/dist/diagrams/common/common.js';
 import { updateNodeBounds } from './util.js';
 import createLabel from '../createLabel.js';
 import intersect from '../intersect/index.js';
 import {
   styles2String,
   userNodeOverrides,
-} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
+} from 'mermaid/dist/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
 import rough from 'roughjs';
-import { getConfig } from '$root/diagram-api/diagramAPI.js';
+import { getConfig } from 'mermaid/dist/diagram-api/diagramAPI.js';
 import { createRoundedRectPathD } from './roundedRectPath.js';
-import { log } from '$root/logger.js';
+import { log } from 'mermaid/dist/logger.js';
 
 export const rectWithTitle = async (parent: SVGElement, node: Node) => {
   const { labelStyles, nodeStyles } = styles2String(node);
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/roundedRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/roundedRect.ts
index 8a28b63ad4..5342965872 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/roundedRect.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/roundedRect.ts
@@ -1,4 +1,4 @@
-import type { Node, RectOptions } from '$root/rendering-util/types.d.ts';
+import type { Node, RectOptions } from 'mermaid/dist/rendering-util/types.d.ts';
 import { drawRect } from './drawRect.js';
 
 export const roundedRect = async (parent: SVGAElement, node: Node) => {
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/squareRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/squareRect.ts
index 8daeaec7a9..2070e6a149 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/squareRect.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/squareRect.ts
@@ -1,4 +1,4 @@
-import type { Node, RectOptions } from '$root/rendering-util/types.d.ts';
+import type { Node, RectOptions } from 'mermaid/dist/rendering-util/types.d.ts';
 import { drawRect } from './drawRect.js';
 
 export const squareRect = async (parent: SVGAElement, node: Node) => {
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stadium.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stadium.ts
index 14504b3a08..bc42d5e6fd 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stadium.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stadium.ts
@@ -1,10 +1,10 @@
 import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
 import intersect from '../intersect/index.js';
-import type { Node } from '$root/rendering-util/types.d.ts';
+import type { Node } from 'mermaid/dist/rendering-util/types.d.ts';
 import {
   styles2String,
   userNodeOverrides,
-} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
+} from 'mermaid/dist/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
 import rough from 'roughjs';
 import { createRoundedRectPathD } from './roundedRectPath.js';
 
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/state.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/state.ts
index fac2557353..06cbc636f2 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/state.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/state.ts
@@ -1,4 +1,4 @@
-import type { Node, RectOptions } from '$root/rendering-util/types.d.ts';
+import type { Node, RectOptions } from 'mermaid/dist/rendering-util/types.d.ts';
 import { drawRect } from './drawRect.js';
 
 export const state = async (parent: SVGAElement, node: Node) => {
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateEnd.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateEnd.ts
index a277ff0b9a..57f3916574 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateEnd.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateEnd.ts
@@ -1,10 +1,10 @@
 import { updateNodeBounds } from './util.js';
 import intersect from '../intersect/index.js';
-import type { Node } from '$root/rendering-util/types.d.ts';
-import type { SVG } from '$root/diagram-api/types.js';
+import type { Node } from 'mermaid/dist/rendering-util/types.d.ts';
+import type { SVG } from 'mermaid/dist/diagram-api/types.js';
 import rough from 'roughjs';
 import { solidStateFill } from './handDrawnShapeStyles.js';
-import { getConfig } from '$root/diagram-api/diagramAPI.js';
+import { getConfig } from 'mermaid/dist/diagram-api/diagramAPI.js';
 
 export const stateEnd = (parent: SVG, node: Node) => {
   const { themeVariables } = getConfig();
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateStart.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateStart.ts
index 341b82e1cc..f8d0e084d8 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateStart.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateStart.ts
@@ -1,10 +1,10 @@
 import { updateNodeBounds } from './util.js';
 import intersect from '../intersect/index.js';
-import type { Node } from '$root/rendering-util/types.d.ts';
-import type { SVG } from '$root/diagram-api/types.js';
+import type { Node } from 'mermaid/dist/rendering-util/types.d.ts';
+import type { SVG } from 'mermaid/dist/diagram-api/types.js';
 import rough from 'roughjs';
 import { solidStateFill } from './handDrawnShapeStyles.js';
-import { getConfig } from '$root/diagram-api/diagramAPI.js';
+import { getConfig } from 'mermaid/dist/diagram-api/diagramAPI.js';
 
 export const stateStart = (parent: SVG, node: Node) => {
   const { themeVariables } = getConfig();
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/subroutine.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/subroutine.ts
index c4393c25fa..fbfa3ed5cd 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/subroutine.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/subroutine.ts
@@ -1,10 +1,10 @@
 import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
 import intersect from '../intersect/index.js';
-import type { Node } from '$root/rendering-util/types.d.ts';
+import type { Node } from 'mermaid/dist/rendering-util/types.d.ts';
 import {
   styles2String,
   userNodeOverrides,
-} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
+} from 'mermaid/dist/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
 import rough from 'roughjs';
 import { insertPolygonShape } from './insertPolygonShape.js';
 
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoid.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoid.ts
index b2013097a8..701747c1c1 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoid.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoid.ts
@@ -1,10 +1,10 @@
 import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
 import intersect from '../intersect/index.js';
-import type { Node } from '$root/rendering-util/types.d.ts';
+import type { Node } from 'mermaid/dist/rendering-util/types.d.ts';
 import {
   styles2String,
   userNodeOverrides,
-} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
+} from 'mermaid/dist/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
 import rough from 'roughjs';
 import { insertPolygonShape } from './insertPolygonShape.js';
 
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/util.js b/packages/mermaid/src/rendering-util/rendering-elements/shapes/util.js
index ca1290668a..633171d5ca 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/util.js
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/util.js
@@ -1,8 +1,8 @@
-import { createText } from '$root/rendering-util/createText.ts';
-import { getConfig } from '$root/diagram-api/diagramAPI.js';
+import { createText } from 'mermaid/dist/rendering-util/createText.ts';
+import { getConfig } from 'mermaid/dist/diagram-api/diagramAPI.js';
 import { select } from 'd3';
-import { evaluate, sanitizeText } from '$root/diagrams/common/common.js';
-import { decodeEntities } from '$root/utils.js';
+import { evaluate, sanitizeText } from 'mermaid/dist/diagrams/common/common.js';
+import { decodeEntities } from 'mermaid/dist/utils.js';
 
 export const labelHelper = async (parent, node, _classes) => {
   let cssClasses;
diff --git a/packages/mermaid/src/rendering-util/setupViewPortForSVG.ts b/packages/mermaid/src/rendering-util/setupViewPortForSVG.ts
index e21f3304b3..00d8080667 100644
--- a/packages/mermaid/src/rendering-util/setupViewPortForSVG.ts
+++ b/packages/mermaid/src/rendering-util/setupViewPortForSVG.ts
@@ -1,6 +1,6 @@
-import { configureSvgSize } from '$root/setupGraphViewbox.js';
-import type { SVG } from '$root/diagram-api/types.js';
-import { log } from '$root/logger.js';
+import { configureSvgSize } from 'mermaid/dist/setupGraphViewbox.js';
+import type { SVG } from 'mermaid/dist/diagram-api/types.js';
+import { log } from 'mermaid/dist/logger.js';
 
 export const setupViewPortForSVG = (
   svg: SVG,
diff --git a/packages/mermaid/tsconfig.json b/packages/mermaid/tsconfig.json
index 0f06a17313..3c7ed2b5e5 100644
--- a/packages/mermaid/tsconfig.json
+++ b/packages/mermaid/tsconfig.json
@@ -6,7 +6,7 @@
     "types": ["vitest/importMeta", "vitest/globals"],
     "baseUrl": ".", // This must be set if "paths" is set
     "paths": {
-      "$root/*": ["src/*"]
+      "mermaid/dist/*": ["src/*"]
     }
   },
   "include": [
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7fcdbb5f3f..cfdb457320 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -503,67 +503,6 @@ importers:
         specifier: ^7.0.0
         version: 7.1.0
 
-  packages/mermaid/src/vitepress:
-    dependencies:
-      '@mdi/font':
-        specifier: ^7.0.0
-        version: 7.4.47
-      '@vueuse/core':
-        specifier: ^10.9.0
-        version: 10.11.1(vue@3.4.38(typescript@5.4.5))
-      font-awesome:
-        specifier: ^4.7.0
-        version: 4.7.0
-      jiti:
-        specifier: ^1.21.0
-        version: 1.21.6
-      mermaid:
-        specifier: workspace:^
-        version: link:../..
-      vue:
-        specifier: ^3.4.21
-        version: 3.4.38(typescript@5.4.5)
-    devDependencies:
-      '@iconify-json/carbon':
-        specifier: ^1.1.31
-        version: 1.1.37
-      '@unocss/reset':
-        specifier: ^0.59.0
-        version: 0.59.4
-      '@vite-pwa/vitepress':
-        specifier: ^0.4.0
-        version: 0.4.0(vite-plugin-pwa@0.19.8(vite@5.4.2(@types/node@22.5.1)(terser@5.31.6))(workbox-build@7.1.1(@types/babel__core@7.20.5))(workbox-window@7.1.0))
-      '@vitejs/plugin-vue':
-        specifier: ^5.0.0
-        version: 5.1.2(vite@5.4.2(@types/node@22.5.1)(terser@5.31.6))(vue@3.4.38(typescript@5.4.5))
-      fast-glob:
-        specifier: ^3.3.2
-        version: 3.3.2
-      https-localhost:
-        specifier: ^4.7.1
-        version: 4.7.1
-      pathe:
-        specifier: ^1.1.2
-        version: 1.1.2
-      unocss:
-        specifier: ^0.59.0
-        version: 0.59.4(postcss@8.4.41)(rollup@4.21.1)(vite@5.4.2(@types/node@22.5.1)(terser@5.31.6))
-      unplugin-vue-components:
-        specifier: ^0.26.0
-        version: 0.26.0(@babel/parser@7.25.4)(rollup@4.21.1)(vue@3.4.38(typescript@5.4.5))
-      vite:
-        specifier: ^5.0.0
-        version: 5.4.2(@types/node@22.5.1)(terser@5.31.6)
-      vite-plugin-pwa:
-        specifier: ^0.19.7
-        version: 0.19.8(vite@5.4.2(@types/node@22.5.1)(terser@5.31.6))(workbox-build@7.1.1(@types/babel__core@7.20.5))(workbox-window@7.1.0)
-      vitepress:
-        specifier: 1.1.4
-        version: 1.1.4(@algolia/client-search@4.24.0)(@types/node@22.5.1)(axios@1.7.5)(postcss@8.4.41)(search-insights@2.15.0)(terser@5.31.6)(typescript@5.4.5)
-      workbox-window:
-        specifier: ^7.0.0
-        version: 7.1.0
-
   packages/parser:
     dependencies:
       langium:
@@ -12389,16 +12328,6 @@ snapshots:
     transitivePeerDependencies:
       - rollup
 
-  '@unocss/astro@0.59.4(rollup@4.21.1)(vite@5.4.2(@types/node@22.5.1)(terser@5.31.6))':
-    dependencies:
-      '@unocss/core': 0.59.4
-      '@unocss/reset': 0.59.4
-      '@unocss/vite': 0.59.4(rollup@4.21.1)(vite@5.4.2(@types/node@22.5.1)(terser@5.31.6))
-    optionalDependencies:
-      vite: 5.4.2(@types/node@22.5.1)(terser@5.31.6)
-    transitivePeerDependencies:
-      - rollup
-
   '@unocss/cli@0.59.4(rollup@2.79.1)':
     dependencies:
       '@ampproject/remapping': 2.3.0
@@ -12417,24 +12346,6 @@ snapshots:
     transitivePeerDependencies:
       - rollup
 
-  '@unocss/cli@0.59.4(rollup@4.21.1)':
-    dependencies:
-      '@ampproject/remapping': 2.3.0
-      '@rollup/pluginutils': 5.1.0(rollup@4.21.1)
-      '@unocss/config': 0.59.4
-      '@unocss/core': 0.59.4
-      '@unocss/preset-uno': 0.59.4
-      cac: 6.7.14
-      chokidar: 3.6.0
-      colorette: 2.0.20
-      consola: 3.2.3
-      fast-glob: 3.3.2
-      magic-string: 0.30.11
-      pathe: 1.1.2
-      perfect-debounce: 1.0.0
-    transitivePeerDependencies:
-      - rollup
-
   '@unocss/config@0.59.4':
     dependencies:
       '@unocss/core': 0.59.4
@@ -12560,22 +12471,6 @@ snapshots:
     transitivePeerDependencies:
       - rollup
 
-  '@unocss/vite@0.59.4(rollup@4.21.1)(vite@5.4.2(@types/node@22.5.1)(terser@5.31.6))':
-    dependencies:
-      '@ampproject/remapping': 2.3.0
-      '@rollup/pluginutils': 5.1.0(rollup@4.21.1)
-      '@unocss/config': 0.59.4
-      '@unocss/core': 0.59.4
-      '@unocss/inspector': 0.59.4
-      '@unocss/scope': 0.59.4
-      '@unocss/transformer-directives': 0.59.4
-      chokidar: 3.6.0
-      fast-glob: 3.3.2
-      magic-string: 0.30.11
-      vite: 5.4.2(@types/node@22.5.1)(terser@5.31.6)
-    transitivePeerDependencies:
-      - rollup
-
   '@vite-pwa/vitepress@0.4.0(vite-plugin-pwa@0.19.8(vite@5.4.2(@types/node@22.5.1)(terser@5.31.6))(workbox-build@7.1.1(@types/babel__core@7.20.5))(workbox-window@7.1.0))':
     dependencies:
       vite-plugin-pwa: 0.19.8(vite@5.4.2(@types/node@22.5.1)(terser@5.31.6))(workbox-build@7.1.1(@types/babel__core@7.20.5))(workbox-window@7.1.0)
@@ -18977,35 +18872,6 @@ snapshots:
       - rollup
       - supports-color
 
-  unocss@0.59.4(postcss@8.4.41)(rollup@4.21.1)(vite@5.4.2(@types/node@22.5.1)(terser@5.31.6)):
-    dependencies:
-      '@unocss/astro': 0.59.4(rollup@4.21.1)(vite@5.4.2(@types/node@22.5.1)(terser@5.31.6))
-      '@unocss/cli': 0.59.4(rollup@4.21.1)
-      '@unocss/core': 0.59.4
-      '@unocss/extractor-arbitrary-variants': 0.59.4
-      '@unocss/postcss': 0.59.4(postcss@8.4.41)
-      '@unocss/preset-attributify': 0.59.4
-      '@unocss/preset-icons': 0.59.4
-      '@unocss/preset-mini': 0.59.4
-      '@unocss/preset-tagify': 0.59.4
-      '@unocss/preset-typography': 0.59.4
-      '@unocss/preset-uno': 0.59.4
-      '@unocss/preset-web-fonts': 0.59.4
-      '@unocss/preset-wind': 0.59.4
-      '@unocss/reset': 0.59.4
-      '@unocss/transformer-attributify-jsx': 0.59.4
-      '@unocss/transformer-attributify-jsx-babel': 0.59.4
-      '@unocss/transformer-compile-class': 0.59.4
-      '@unocss/transformer-directives': 0.59.4
-      '@unocss/transformer-variant-group': 0.59.4
-      '@unocss/vite': 0.59.4(rollup@4.21.1)(vite@5.4.2(@types/node@22.5.1)(terser@5.31.6))
-    optionalDependencies:
-      vite: 5.4.2(@types/node@22.5.1)(terser@5.31.6)
-    transitivePeerDependencies:
-      - postcss
-      - rollup
-      - supports-color
-
   unpipe@1.0.0: {}
 
   unplugin-vue-components@0.26.0(@babel/parser@7.25.4)(rollup@2.79.1)(vue@3.4.38(typescript@5.4.5)):
@@ -19027,25 +18893,6 @@ snapshots:
       - rollup
       - supports-color
 
-  unplugin-vue-components@0.26.0(@babel/parser@7.25.4)(rollup@4.21.1)(vue@3.4.38(typescript@5.4.5)):
-    dependencies:
-      '@antfu/utils': 0.7.10
-      '@rollup/pluginutils': 5.1.0(rollup@4.21.1)
-      chokidar: 3.6.0
-      debug: 4.3.6(supports-color@8.1.1)
-      fast-glob: 3.3.2
-      local-pkg: 0.4.3
-      magic-string: 0.30.11
-      minimatch: 9.0.5
-      resolve: 1.22.8
-      unplugin: 1.12.0
-      vue: 3.4.38(typescript@5.4.5)
-    optionalDependencies:
-      '@babel/parser': 7.25.4
-    transitivePeerDependencies:
-      - rollup
-      - supports-color
-
   unplugin@1.12.0:
     dependencies:
       acorn: 8.12.1
diff --git a/scripts/tsc-check.ts b/scripts/tsc-check.ts
new file mode 100644
index 0000000000..7a5ff50a9b
--- /dev/null
+++ b/scripts/tsc-check.ts
@@ -0,0 +1,175 @@
+/**
+ * Verify the as-built tarballs can be imported into a fresh, out-of-tree TypeScript project.
+ */
+
+/* eslint-disable no-console */
+import { mkdtemp, mkdir, writeFile, readFile, readdir, copyFile, rm } from 'node:fs/promises';
+import { execFileSync } from 'child_process';
+import * as path from 'path';
+import { fileURLToPath } from 'url';
+import { tmpdir } from 'node:os';
+
+const __filename = fileURLToPath(import.meta.url); // get the resolved path to the file
+const __dirname = path.dirname(__filename); // get the name of the directory
+
+/**
+ * Packages to build and import
+ */
+const PACKAGES = {
+  mermaid: 'mermaid',
+  '@mermaid-js/layout-elk': 'mermaid-layout-elk',
+  // TODO: these don't import cleanly yet due to exotic tsconfig.json requirements
+  // '@mermaid-js/mermaid-zenuml': 'mermaid-zenuml',
+  // '@mermaid-js/parser': 'parser',
+};
+
+/**
+ * Files to create in the temporary package.
+ */
+const SRC = {
+  // a minimal description of a buildable package
+  'package.json': (tarballs: Record<string, string>) =>
+    JSON.stringify(
+      {
+        dependencies: tarballs,
+        scripts: { build: 'tsc -b --verbose' },
+        devDependencies: {
+          // these are somewhat-unexpectedly required, and a downstream would need
+          // to match the real `package.json` values
+          'type-fest': '*',
+          '@types/d3': '^7.4.3',
+          '@types/dompurify': '^3.0.5',
+          typescript: '*',
+        },
+      },
+      null,
+      2
+    ),
+  // a fairly strict TypeScript configuration
+  'tsconfig.json': () =>
+    JSON.stringify(
+      {
+        compilerOptions: {
+          allowSyntheticDefaultImports: true,
+          composite: true,
+          declaration: true,
+          esModuleInterop: true,
+          incremental: true,
+          lib: ['dom', 'es2020'],
+          module: 'esnext',
+          moduleResolution: 'node',
+          noEmitOnError: true,
+          noImplicitAny: true,
+          noUnusedLocals: true,
+          sourceMap: true,
+          target: 'es2020',
+          rootDir: './src',
+          outDir: './lib',
+          strict: true,
+          tsBuildInfoFile: 'lib/.tsbuildinfo',
+        },
+      },
+      null,
+      2
+    ),
+  // the simplest possible script: will everything even import?
+  'src/index.ts': (tarballs) => {
+    const imports: string[] = [];
+    const outputs: string[] = [];
+    let i = 0;
+    for (const pkg of Object.keys(tarballs)) {
+      imports.push(`import * as pkg_${i} from '${pkg}';`);
+      outputs.push(`console.log(pkg_${i});`);
+      i++;
+    }
+    return [...imports, ...outputs].join('\n');
+  },
+};
+
+/**
+ * Commands to run after source files are created.
+ *
+ * `npm` is used to detect any unwanted `pnpm`-specific runtime "features".
+ */
+const COMMANDS = [
+  ['npm', 'install'],
+  ['npm', 'run', 'build'],
+];
+
+/**
+ * Built files to expect after commands are executed.
+ */
+const LIB = ['lib/index.js', 'lib/index.js.map', 'lib/index.d.ts', 'lib/.tsbuildinfo'];
+
+/**
+ * Run a small out-of-tree build.
+ */
+async function main() {
+  console.warn('Checking out-of-tree TypeScript build using', Object.keys(PACKAGES).join('\n'));
+  const cwd = await mkdtemp(path.join(tmpdir(), 'mermaid-tsc-check-'));
+  console.warn('... creating temporary folder', cwd);
+  const tarballs = await buildTarballs(cwd);
+
+  for (const [filename, generate] of Object.entries(SRC)) {
+    const dest = path.join(cwd, filename);
+    await mkdir(path.dirname(dest), { recursive: true });
+    console.warn('... creating', dest);
+    const text = generate(tarballs);
+    await writeFile(dest, text);
+    console.info(text);
+  }
+
+  for (const argv of COMMANDS) {
+    console.warn('... in', cwd);
+    console.warn('>>>', ...argv);
+    execFileSync(argv[0], argv.slice(1), { cwd });
+  }
+
+  for (const lib of LIB) {
+    const checkLib = path.join(cwd, lib);
+    console.warn('... checking built file', checkLib);
+    await readFile(checkLib, 'utf-8');
+  }
+
+  console.warn('... deleting', cwd);
+  await rm(cwd, { recursive: true, force: true });
+  console.warn('... tsc-check OK for\n', Object.keys(PACKAGES).join('\n'));
+}
+
+/** Build all the tarballs. */
+async function buildTarballs(tmp: string): Promise<Record<string, string>> {
+  const dist = path.join(tmp, 'dist');
+  await mkdir(dist);
+  const promises: Promise<void>[] = [];
+  const tarballs: Record<string, string> = {};
+  for (const [pkg, srcPath] of Object.entries(PACKAGES)) {
+    promises.push(buildOneTarball(pkg, srcPath, dist, tarballs));
+  }
+  await Promise.all(promises);
+  return tarballs;
+}
+
+/** Build a single tarball. */
+async function buildOneTarball(
+  pkg: string,
+  srcPath: string,
+  dist: string,
+  tarballs: Record<string, string>
+): Promise<void> {
+  const cwd = await mkdtemp(path.join(dist, 'pack-'));
+  const pkgDir = path.join(__dirname, '../packages', srcPath);
+  const argv = ['pnpm', 'pack', '--pack-destination', cwd];
+  console.warn('>>>', ...argv);
+  execFileSync(argv[0], argv.slice(1), { cwd: pkgDir });
+  const built = await readdir(cwd);
+  const dest = path.join(dist, built[0]);
+  await copyFile(path.join(cwd, built[0]), dest);
+  await rm(cwd, { recursive: true, force: true });
+  tarballs[pkg] = dest;
+}
+
+void main().catch((err) => {
+  console.error(err);
+  console.error('!!! tsc-check FAIL: temp folder left in place. see logs above for failure notes');
+  process.exit(1);
+});
diff --git a/vite.config.ts b/vite.config.ts
index ed0ba10f73..2db66b7a40 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -9,7 +9,7 @@ export default defineConfig({
     extensions: ['.js'],
     alias: {
       // Define your alias here
-      $root: path.resolve(__dirname, 'packages/mermaid/src'),
+      'mermaid/dist': path.resolve(__dirname, 'packages/mermaid/src'),
     },
   },
   plugins: [