Merge branch 'knsv/new-shapes' into knsv-new-shapes-amp-n-at

packages/mermaid-layout-elk/src/render.ts

@@ -224,7 +224,7 @@ export const render = async (
    * Add edges to graph based on parsed graph definition
    */
   const addEdges = async function (
-    dataForLayout: { edges: any; direction: string },
+    dataForLayout: { edges: any; direction?: string },
     graph: {
       id?: string;
       layoutOptions?: {
@@ -749,12 +749,12 @@ export const render = async (
     layoutOptions: {
       'elk.hierarchyHandling': 'INCLUDE_CHILDREN',
       'elk.algorithm': algorithm,
-      'nodePlacement.strategy': data4Layout.config.elk.nodePlacementStrategy,
-      'elk.layered.mergeEdges': data4Layout.config.elk.mergeEdges,
+      'nodePlacement.strategy': data4Layout.config.elk?.nodePlacementStrategy,
+      'elk.layered.mergeEdges': data4Layout.config.elk?.mergeEdges,
       'elk.direction': 'DOWN',
       'spacing.baseValue': 35,
       'elk.layered.unnecessaryBendpoints': true,
-      'elk.layered.cycleBreaking.strategy': data4Layout.config.elk.cycleBreakingStrategy,
+      'elk.layered.cycleBreaking.strategy': data4Layout.config.elk?.cycleBreakingStrategy,
       // 'spacing.nodeNode': 20,
       // 'spacing.nodeNodeBetweenLayers': 25,
       // 'spacing.edgeNode': 20,
@@ -837,8 +837,8 @@ export const render = async (
           ...node.layoutOptions,
           'elk.algorithm': algorithm,
           'elk.direction': dir2ElkDirection(node.dir),
-          'nodePlacement.strategy': data4Layout.config['elk.nodePlacement.strategy'],
-          'elk.layered.mergeEdges': data4Layout.config['elk.mergeEdges'],
+          'nodePlacement.strategy': data4Layout.config.elk?.nodePlacementStrategy,
+          'elk.layered.mergeEdges': data4Layout.config.elk?.mergeEdges,
           'elk.hierarchyHandling': 'SEPARATE_CHILDREN',
         };
       }

packages/mermaid/CHANGELOG.md

@@ -1,5 +1,21 @@
 # mermaid
 
+## 11.2.0
+
+### Minor Changes
+
+- [#5831](https://github.com/mermaid-js/mermaid/pull/5831) [`64abf29`](https://github.com/mermaid-js/mermaid/commit/64abf29ea870eaa47148197f95ce714f85bd7eea) Thanks [@sidharthv96](https://github.com/sidharthv96)! - feat: Return parsed config from mermaid.parse
+
+### Patch Changes
+
+- [#5838](https://github.com/mermaid-js/mermaid/pull/5838) [`5e75320`](https://github.com/mermaid-js/mermaid/commit/5e75320d49eab65aca630dcc3c04c8d620a8bbf7) Thanks [@bollwyvl](https://github.com/bollwyvl)! - fix: Replace $root with relative paths
+
+## 11.1.1
+
+### Patch Changes
+
+- [#5828](https://github.com/mermaid-js/mermaid/pull/5828) [`4c43d21`](https://github.com/mermaid-js/mermaid/commit/4c43d21196f784b6f483ae635fc462329f3d176f) Thanks [@knsv](https://github.com/knsv)! - fix: Fix for issue where self-loops in the root of diagrams break the rendering
+
 ## 11.1.0
 
 ### Minor Changes

packages/mermaid/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mermaid",
-  "version": "11.1.0",
+  "version": "11.2.0",
   "description": "Markdown-ish syntax for generating flowcharts, mindmaps, sequence diagrams, class diagrams, gantt charts, git graphs and more.",
   "type": "module",
   "module": "./dist/mermaid.core.mjs",

packages/mermaid/src/diagrams/architecture/architectureIcons.ts

@@ -1,4 +1,4 @@
-import { unknownIcon } from '$root/rendering-util/icons.js';
+import { unknownIcon } from '../../rendering-util/icons.js';
 import type { IconifyJSON } from '@iconify/types';
 
 const wrapIcon = (icon: string) => {

packages/mermaid/src/diagrams/architecture/architectureRenderer.ts

@@ -1,4 +1,4 @@
-import { registerIconPacks } from '$root/rendering-util/icons.js';
+import { registerIconPacks } from '../../rendering-util/icons.js';
 import type { Position } from 'cytoscape';
 import cytoscape from 'cytoscape';
 import type { FcoseLayoutOptions } from 'cytoscape-fcose';

packages/mermaid/src/diagrams/architecture/svgDraw.ts

@@ -1,4 +1,4 @@
-import { getIconSVG } from '$root/rendering-util/icons.js';
+import { getIconSVG } from '../../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})
               `
               );

packages/mermaid/src/diagrams/flowchart/flowDb.ts

@@ -15,7 +15,7 @@ import {
   getDiagramTitle,
 } from '../common/commonDb.js';
 import type { FlowVertex, FlowClass, FlowSubGraph, FlowText, FlowEdge, FlowLink } from './types.js';
-import type { NodeMetaData } from '$root/types.js';
+import type { NodeMetaData } from '../../types.js';
 
 const MERMAID_DOM_ID_PREFIX = 'flowchart-';
 let vertexCounter = 0;
@@ -145,6 +145,30 @@ export const addVertex = function (
     if (doc?.label) {
       vertex.text = doc?.label;
     }
+    if (doc?.icon) {
+      vertex.icon = doc?.icon;
+      if (!doc.label) {
+        vertex.text = '';
+      }
+    }
+    if (doc?.form) {
+      vertex.form = doc?.form;
+    }
+    if (doc?.pos) {
+      vertex.pos = doc?.pos;
+    }
+    if (doc?.img) {
+      vertex.img = doc?.img;
+      if (!doc.label) {
+        vertex.text = '';
+      }
+    }
+    if (doc.w) {
+      vertex.assetWidth = Number(doc.w);
+    }
+    if (doc.h) {
+      vertex.assetHeight = Number(doc.h);
+    }
   }
 };
 
@@ -793,6 +817,21 @@ export const lex = {
 };
 
 const getTypeFromVertex = (vertex: FlowVertex) => {
+  if (vertex?.img) {
+    return 'imageSquare';
+  }
+  if (vertex?.icon) {
+    if (vertex.form === 'circle') {
+      return 'iconCircle';
+    }
+    if (vertex.form === 'square') {
+      return 'iconSquare';
+    }
+    if (vertex.form === 'rounded') {
+      return 'iconRounded';
+    }
+    return 'icon';
+  }
   if (vertex.type === 'square') {
     return 'squareRect';
   }
@@ -858,6 +897,11 @@ const addNodeFromVertex = (
       link: vertex.link,
       linkTarget: vertex.linkTarget,
       tooltip: getTooltip(vertex.id),
+      icon: vertex.icon,
+      pos: vertex.pos,
+      img: vertex.img,
+      assetWidth: vertex.assetWidth,
+      assetHeight: vertex.assetHeight,
     });
   }
 };

packages/mermaid/src/diagrams/flowchart/styles.ts

@@ -163,6 +163,33 @@ const getStyles = (options: FlowChartStyleOptions) =>
     fill: none;
     stroke-width: 0;
   }
+
+  .icon-shape {
+    background-color: ${options.edgeLabelBackground};
+    p {
+      background-color: ${options.edgeLabelBackground};
+      padding: 2px;
+    }
+    rect {
+      opacity: 0.5;
+      background-color: ${options.edgeLabelBackground};
+      fill: ${options.edgeLabelBackground};
+    }
+    text-align: center;
+  }
+  .image-shape {
+    background-color: ${options.edgeLabelBackground};
+    p {
+      background-color: ${options.edgeLabelBackground};
+      padding: 2px;
+    }
+    rect {
+      opacity: 0.5;
+      background-color: ${options.edgeLabelBackground};
+      fill: ${options.edgeLabelBackground};
+    }
+    text-align: center;
+  }
 `;
 
 export default getStyles;

packages/mermaid/src/diagrams/flowchart/types.ts

@@ -11,6 +11,12 @@ export interface FlowVertex {
   styles: string[];
   text?: string;
   type?: string;
+  icon?: string;
+  form?: string;
+  pos?: 't' | 'b';
+  img?: string;
+  assetWidth?: number;
+  assetHeight?: number;
 }
 
 export interface FlowText {

packages/mermaid/src/docs/adding_new_shape/Readme.md

@@ -95,7 +95,7 @@ To add a new shape:
 - **Example**:
 
   ```typescript
-  import { Node } from '$root/rendering-util/types.d.ts';
+  import { Node } from '../../types.d.ts';
 
   export const myNewShape = async (parent: SVGAElement, node: Node) => {
     // Create your shape here

packages/mermaid/src/docs/ecosystem/integrations-community.md

@@ -140,7 +140,7 @@ Communication tools and platforms
   - [Mermaid Extension](https://www.mediawiki.org/wiki/Extension:Mermaid)
 - [PmWiki](https://www.pmwiki.org)
   - [MermaidJs Cookbook recipe](https://www.pmwiki.org/wiki/Cookbook/MermaidJs)
-- [Semantic Media Wiki](https://semantic-mediawiki.org)
+- [Semantic Media Wiki](https://www.semantic-mediawiki.org)
   - [Mermaid Plugin](https://github.com/SemanticMediaWiki/Mermaid)
 - [TiddlyWiki](https://tiddlywiki.com/)
   - [mermaid-tw5: wrapper for Mermaid Live](https://github.com/efurlanm/mermaid-tw5)

packages/mermaid/src/docs/news/blog.md

@@ -1,5 +1,11 @@
 # Blog
 
+## [Introducing Architecture Diagrams in Mermaid](https://www.mermaidchart.com/blog/posts/mermaid-supports-architecture-diagrams/)
+
+2 September 2024 · 2 mins
+
+Discover the fresh new and unique Neo and Hand-Drawn looks for Mermaid Diagrams, while still offering the classic look you love.
+
 ## [Mermaid v11 is out!](https://www.mermaidchart.com/blog/posts/mermaid-v11/)
 
 23 August 2024 · 2 mins

packages/mermaid/src/docs/syntax/flowchart.md

@@ -212,53 +212,53 @@ This syntax creates a node A as a rectangle. It renders in the same way as `A["A
 
 Below is a comprehensive list of the newly introduced shapes and their corresponding semantic meanings, short names, and aliases:
 
-| **Semantic Name**                     | **Shape Name**              | **Short Name**  | **Description**                | **Alias Supported**                      |
-| ------------------------------------- | --------------------------- | --------------- | ------------------------------ | ---------------------------------------- |
-| **Process**                           | Rectangle                   | `rect`          | Standard process shape         | `proc`, `process`                        |
-| **Event**                             | Rounded Rectangle           | `rounded`       | Represents an event            | `event`                                  |
-| **Terminal Point**                    | Stadium                     | `stadium`       | Terminal point                 | `term`, `pill`                           |
-| **Subprocess**                        | Framed Rectangle            | `fr`            | Subprocess                     | `subproc`, `framed-rectangle`            |
-| **Database**                          | Cylinder                    | `cyl`           | Database storage               | `db`, `cylinder`                         |
-| **Start**                             | Circle                      | `circle`        | Starting point                 |                                          |
-| **Odd**                               | Odd                         | `odd`           | Odd shape                      |                                          |
-| **Decision**                          | Diamond                     | `diam`          | Decision-making step           | `decision`, `diamond`                    |
-| **Prepare Conditional**               | Hexagon                     | `hex`           | Preparation or condition step  | `hexagon`, `prepare`                     |
-| **Data Input/Output**                 | Lean Right                  | `l-r`           | Represents input or output     | `lean-right`, `in-out`                   |
-| **Data Input/Output**                 | Lean Left                   | `l-l`           | Represents output or input     | `lean-left`, `out-in`                    |
-| **Priority Action**                   | Trapezoid Base Bottom       | `trap-b`        | Priority action                | `priority`, `trapezoid-bottom`           |
-| **Manual Operation**                  | Trapezoid Base Top          | `trap-t`        | Represents a manual task       | `manual`, `trapezoid-top`                |
-| **Stop**                              | Double Circle               | `dc`            | Represents a stop point        | `double-circle`                          |
-| **Text Block**                        | Text Block                  | `text`          | Text block                     | -                                        |
-| **Card**                              | Notched Rectangle           | `notched-rect`  | Represents a card              | `card`, `notch-rect`                     |
-| **Lined/Shaded Process**              | Lined Rectangle             | `lined-rect`    | Lined process shape            | `lined-proc`                             |
-| **Start**                             | Small Circle                | `sm-circ`       | Small starting point           | `start`, `small-circle`                  |
-| **Stop**                              | Framed Circle               | `framed-circle` | Stop point                     | `stop`, `framed-circle`                  |
-| **Fork/Join**                         | Long Rectangle              | `fork`          | Fork or join in process flow   | `join`, `long-rect`                      |
-| **Collate**                           | Hourglass                   | `hourglass`     | Represents a collate operation | -                                        |
-| **Comment**                           | Curly Brace                 | `brace`         | Adds a comment                 | `comment`, `brace-l`                     |
-| **Comment Right**                     | Curly Brace                 | `brace-r`       | Adds a comment                 | -                                        |
-| **Comment with braces on both sides** | Curly Braces                | `braces`        | Adds a comment                 | -                                        |
-| **Com Link**                          | Lightning Bolt              | `bolt`          | Communication link             | `com-link`, `lightning-bolt`             |
-| **Document**                          | Wave-Edged Rectangle        | `we-rect`       | Represents a document          | `doc`, `wave-edge-rect`                  |
-| **Delay**                             | Half-Rounded Rectangle      | `delay`         | Represents a delay             | `half-rounded-rect`                      |
-| **Direct Access Storage**             | Tilted Cylinder             | `t-cyl`         | Direct access storage          | `das`, `tilted-cylinder`                 |
-| **Disk Storage**                      | Lined Cylinder              | `l-cyl`         | Disk storage                   | `disk`, `lined-cylinder`                 |
-| **Display**                           | Curved Trapezoid            | `cur-trap`      | Represents a display           | `disp`, `curved-trapezoid`               |
-| **Divided Process**                   | Divided Rectangle           | `div-rect`      | Divided process shape          | `div-proc`, `divided-rectangle`          |
-| **Extract**                           | Small Triangle              | `sm-tri`        | Extraction process             | `extract`, `small-triangle`              |
-| **Internal Storage**                  | Window Pane                 | `win-pane`      | Internal storage               | `internal-storage`, `window-pane`        |
-| **Junction**                          | Filled Circle               | `fc`            | Junction point                 | `junction`, `filled-circle`              |
-| **Lined Document**                    | Lined Wave-Edged Rectangle  | `lin-we-rect`   | Lined document                 | `lin-doc`, `lined-wave-edged-rect`       |
-| **Loop Limit**                        | Trapezoidal Pentagon        | `not-pent`      | Loop limit step                | `loop-limit`, `notched-pentagon`         |
-| **Manual File**                       | Flipped Triangle            | `flip-tria`     | Manual file operation          | `manual-file`, `flipped-triangle`        |
-| **Manual Input**                      | Sloped Rectangle            | `sloped-rect`   | Manual input step              | `manual-input`, `sloped-rectangle`       |
-| **Multi-Document**                    | Multi-Wave-Edged Rectangle  | `mul-we-rect`   | Multiple documents             | `mul-doc`, `multi-wave-edged-rectangle`  |
-| **Multi-Process**                     | Multi-Rect                  | `mul-rect`      | Multiple processes             | `mul-proc`, `multi-rect`                 |
-| **Paper Tape**                        | Flag                        | `flag`          | Paper tape                     | `paper-tape`, ``                         |
-| **Stored Data**                       | Bow Tie Rectangle           | `bt-rect`       | Stored data                    | `stored-data`, `bow-tie-rect`            |
-| **Summary**                           | Crossed Circle              | `cross-circle`  | Summary                        | `summary`, `crossed-circle`              |
-| **Tagged Document**                   | Tagged Wave-Edged Rectangle | `tag-we-rect`   | Tagged document                | `tag-doc`, `tagged-wave-edged-rectangle` |
-| **Tagged Process**                    | Tagged Rectangle            | `tag-rect`      | Tagged process                 | `tag-proc`, `tagged-rect`                |
+| **Semantic Name**                     | **Shape Name**              | **Short Name**  | **Description**                | **Alias Supported**                         |
+| ------------------------------------- | --------------------------- | --------------- | ------------------------------ | ------------------------------------------- |
+| **Process**                           | Rectangle                   | `rect`          | Standard process shape         | `proc`, `process`, `rectangle`              |
+| **Event**                             | Rounded Rectangle           | `rounded`       | Represents an event            | `event`                                     |
+| **Terminal Point**                    | Stadium                     | `stadium`       | Terminal point                 | `term`, `pill`                              |
+| **Subprocess**                        | Framed Rectangle            | `fr`            | Subprocess                     | `subproc`, `framed-rectangle`, `subroutine` |
+| **Database**                          | Cylinder                    | `cyl`           | Database storage               | `db`, `cylinder`                            |
+| **Start**                             | Circle                      | `circle`        | Starting point                 |                                             |
+| **Odd**                               | Odd                         | `odd`           | Odd shape                      |                                             |
+| **Decision**                          | Diamond                     | `diam`          | Decision-making step           | `decision`, `diamond`                       |
+| **Prepare Conditional**               | Hexagon                     | `hex`           | Preparation or condition step  | `hexagon`, `prepare`                        |
+| **Data Input/Output**                 | Lean Right                  | `l-r`           | Represents input or output     | `lean-right`, `in-out`                      |
+| **Data Input/Output**                 | Lean Left                   | `l-l`           | Represents output or input     | `lean-left`, `out-in`                       |
+| **Priority Action**                   | Trapezoid Base Bottom       | `trap-b`        | Priority action                | `priority`, `trapezoid-bottom`, `trapezoid` |
+| **Manual Operation**                  | Trapezoid Base Top          | `trap-t`        | Represents a manual task       | `manual`, `trapezoid-top`, `inv-trapezoid`  |
+| **Stop**                              | Double Circle               | `dc`            | Represents a stop point        | `double-circle`                             |
+| **Text Block**                        | Text Block                  | `text`          | Text block                     | -                                           |
+| **Card**                              | Notched Rectangle           | `notched-rect`  | Represents a card              | `card`, `notch-rect`, `notched-rect`        |
+| **Lined/Shaded Process**              | Lined Rectangle             | `lined-rect`    | Lined process shape            | `lined-proc`, `shaded-proc`                 |
+| **Start**                             | Small Circle                | `sm-circ`       | Small starting point           | `start`, `small-circle`                     |
+| **Stop**                              | Framed Circle               | `framed-circle` | Stop point                     | `stop`, `framed-circle`                     |
+| **Fork/Join**                         | Long Rectangle              | `fork`          | Fork or join in process flow   | `join`, `long-rect`                         |
+| **Collate**                           | Hourglass                   | `hourglass`     | Represents a collate operation | -                                           |
+| **Comment**                           | Curly Brace                 | `brace`         | Adds a comment                 | `comment`, `brace-l`                        |
+| **Comment Right**                     | Curly Brace                 | `brace-r`       | Adds a comment                 | -                                           |
+| **Comment with braces on both sides** | Curly Braces                | `braces`        | Adds a comment                 | -                                           |
+| **Com Link**                          | Lightning Bolt              | `bolt`          | Communication link             | `com-link`, `lightning-bolt`                |
+| **Document**                          | Wave-Edged Rectangle        | `we-rect`       | Represents a document          | `doc`, `wave-edge-rect`                     |
+| **Delay**                             | Half-Rounded Rectangle      | `delay`         | Represents a delay             | `half-rounded-rect`                         |
+| **Direct Access Storage**             | Tilted Cylinder             | `t-cyl`         | Direct access storage          | `das`, `tilted-cylinder`                    |
+| **Disk Storage**                      | Lined Cylinder              | `l-cyl`         | Disk storage                   | `disk`, `lined-cylinder`                    |
+| **Display**                           | Curved Trapezoid            | `cur-trap`      | Represents a display           | `disp`, `curved-trapezoid`, `display`       |
+| **Divided Process**                   | Divided Rectangle           | `div-rect`      | Divided process shape          | `div-proc`, `divided-rectangle`             |
+| **Extract**                           | Small Triangle              | `sm-tri`        | Extraction process             | `extract`, `small-triangle`                 |
+| **Internal Storage**                  | Window Pane                 | `win-pane`      | Internal storage               | `internal-storage`, `window-pane`           |
+| **Junction**                          | Filled Circle               | `fc`            | Junction point                 | `junction`, `filled-circle`                 |
+| **Lined Document**                    | Lined Wave-Edged Rectangle  | `lin-we-rect`   | Lined document                 | `lin-doc`, `lined-wave-edged-rect`          |
+| **Loop Limit**                        | Trapezoidal Pentagon        | `notch-pent`    | Loop limit step                | `loop-limit`, `notched-pentagon`            |
+| **Manual File**                       | Flipped Triangle            | `flip-tri`      | Manual file operation          | `manual-file`, `flipped-triangle`           |
+| **Manual Input**                      | Sloped Rectangle            | `sloped-rect`   | Manual input step              | `manual-input`, `sloped-rectangle`          |
+| **Multi-Document**                    | Multi-Wave-Edged Rectangle  | `mul-we-rect`   | Multiple documents             | `mul-doc`, `multi-wave-edged-rectangle`     |
+| **Multi-Process**                     | Multi-Rect                  | `mul-rect`      | Multiple processes             | `mul-proc`, `multi-rect`                    |
+| **Paper Tape**                        | Flag                        | `flag`          | Paper tape                     | `paper-tape`                                |
+| **Stored Data**                       | Bow Tie Rectangle           | `bt-rect`       | Stored data                    | `stored-data`, `bow-tie-rect`               |
+| **Summary**                           | Crossed Circle              | `cross-circle`  | Summary                        | `summary`, `crossed-circle`                 |
+| **Tagged Document**                   | Tagged Wave-Edged Rectangle | `tag-we-rect`   | Tagged document                | `tag-doc`, `tagged-wave-edged-rectangle`    |
+| **Tagged Process**                    | Tagged Rectangle            | `tag-rect`      | Tagged process                 | `tag-proc`, `tagged-rect`                   |
 
 ### Example Flowchart with New Shapes
 

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 './rendering-util/icons.js';
 import { dedent } from 'ts-dedent';
 import type { MermaidConfig } from './config.type.js';
 import { detectType, registerLazyLoadedDiagrams } from './diagram-api/detectType.js';

packages/mermaid/src/mermaidAPI.spec.ts

@@ -1,4 +1,4 @@
-import { vi, it, expect, describe, beforeEach } from 'vitest';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 
 // -------------------------------------
 //  Mocks and mocking
@@ -66,8 +66,8 @@ vi.mock('stylis', () => {
 });
 
 import { compile, serialize } from 'stylis';
-import { decodeEntities, encodeEntities } from './utils.js';
 import { Diagram } from './Diagram.js';
+import { decodeEntities, encodeEntities } from './utils.js';
 import { toBase64 } from './utils/base64.js';
 
 /**
@@ -693,18 +693,79 @@ describe('mermaidAPI', () => {
       await expect(mermaidAPI.parse('graph TD;A--x|text including URL space|B;')).resolves
         .toMatchInlineSnapshot(`
         {
+          "config": {},
           "diagramType": "flowchart-v2",
         }
       `);
     });
+    it('returns config when defined in frontmatter', async () => {
+      await expect(
+        mermaidAPI.parse(`---
+config:
+  theme: base
+  flowchart:
+    htmlLabels: true
+---
+graph TD;A--x|text including URL space|B;`)
+      ).resolves.toMatchInlineSnapshot(`
+  {
+    "config": {
+      "flowchart": {
+        "htmlLabels": true,
+      },
+      "theme": "base",
+    },
+    "diagramType": "flowchart-v2",
+  }
+`);
+    });
+
+    it('returns config when defined in directive', async () => {
+      await expect(
+        mermaidAPI.parse(`%%{init: { 'theme': 'base' } }%%
+graph TD;A--x|text including URL space|B;`)
+      ).resolves.toMatchInlineSnapshot(`
+  {
+    "config": {
+      "theme": "base",
+    },
+    "diagramType": "flowchart-v2",
+  }
+`);
+    });
+
+    it('returns merged config when defined in frontmatter and directive', async () => {
+      await expect(
+        mermaidAPI.parse(`---
+config:
+  theme: forest
+  flowchart:
+    htmlLabels: true
+---
+%%{init: { 'theme': 'base' } }%%
+graph TD;A--x|text including URL space|B;`)
+      ).resolves.toMatchInlineSnapshot(`
+  {
+    "config": {
+      "flowchart": {
+        "htmlLabels": true,
+      },
+      "theme": "base",
+    },
+    "diagramType": "flowchart-v2",
+  }
+`);
+    });
+
     it('returns true for valid definition with silent option', async () => {
       await expect(
         mermaidAPI.parse('graph TD;A--x|text including URL space|B;', { suppressErrors: true })
       ).resolves.toMatchInlineSnapshot(`
-        {
-          "diagramType": "flowchart-v2",
-        }
-      `);
+          {
+            "config": {},
+            "diagramType": "flowchart-v2",
+          }
+        `);
     });
   });
 

packages/mermaid/src/mermaidAPI.ts

@@ -73,9 +73,9 @@ async function parse(text: string, parseOptions?: ParseOptions): Promise<ParseRe
 async function parse(text: string, parseOptions?: ParseOptions): Promise<ParseResult | false> {
   addDiagrams();
   try {
-    const { code } = processAndSetConfigs(text);
+    const { code, config } = processAndSetConfigs(text);
     const diagram = await getDiagramFromText(code);
-    return { diagramType: diagram.type };
+    return { diagramType: diagram.type, config };
   } catch (error) {
     if (parseOptions?.suppressErrors) {
       return false;

packages/mermaid/src/preprocess.ts

@@ -49,7 +49,7 @@ const processDirectives = (code: string) => {
  * @param code - The code to preprocess.
  * @returns The object containing the preprocessed code, title, and configuration.
  */
-export function preprocessDiagram(code: string): DiagramMetadata & { code: string } {
+export function preprocessDiagram(code: string) {
   const cleanedCode = cleanupText(code);
   const frontMatterResult = processFrontmatter(cleanedCode);
   const directiveResult = processDirectives(frontMatterResult.text);
@@ -59,5 +59,5 @@ export function preprocessDiagram(code: string): DiagramMetadata & { code: strin
     code,
     title: frontMatterResult.title,
     config,
-  };
+  } satisfies DiagramMetadata & { code: string };
 }

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 '../diagram-api/diagramAPI.js';
+import common, { hasKatex, renderKatex } from '../diagrams/common/common.js';
 import { select } from 'd3';
 import type { MermaidConfig } from '../config.type.js';
 import type { SVGGroup } from '../diagram-api/types.js';
@@ -20,6 +20,11 @@ function applyStyle(dom, styleFn) {
 
 async function addHtmlSpan(element, node, width, classes, addBackground = false) {
   const fo = element.append('foreignObject');
+  // This is not the final width but used in order to make sure the foreign
+  // object in firefox gets a width at all. The final width is fetched from the div
+  fo.attr('width', `${10 * width}px`);
+  fo.attr('height', `${10 * width}px`);
+
   const div = fo.append('xhtml:div');
   let label = node.label;
   if (node.label && hasKatex(node.label)) {
@@ -201,7 +206,7 @@ export const createText = async (
   } = {},
   config: MermaidConfig
 ) => {
-  log.info(
+  log.debug(
     'XYZ createText',
     text,
     style,

packages/mermaid/src/rendering-util/icons.ts

@@ -1,4 +1,4 @@
-import { log } from '$root/logger.js';
+import { log } from '../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';

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 '../../../logger.js';
 import { getSubGraphTitleMargins } from '../../../utils/subGraphTitleMargins.js';
 import { getConfig } from '../../../diagram-api/diagramAPI.js';
 

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 '../../../logger.js';
 import * as graphlib from 'dagre-d3-es/src/graphlib/index.js';
 import * as graphlibJson from 'dagre-d3-es/src/graphlib/json.js';
 

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 '../../../logger.js';
 
 describe('Graphlib decorations', () => {
   let g;

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 '../diagram-api/types.js';
+import type { InternalHelpers } from '../internals.js';
+import { internalHelpers } from '../internals.js';
+import { log } from '../logger.js';
 import type { LayoutData } from './types.js';
 
 export interface RenderOptions {

packages/mermaid/src/rendering-util/rendering-elements/clusters.js

@@ -1,17 +1,14 @@
-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 '../../diagram-api/diagramAPI.js';
+import { evaluate } from '../../diagrams/common/common.js';
+import { log } from '../../logger.js';
+import { getSubGraphTitleMargins } from '../../utils/subGraphTitleMargins.js';
 import { select } from 'd3';
 import rough from 'roughjs';
 import { createText } from '../createText.ts';
 import intersectRect from '../rendering-elements/intersect/intersect-rect.js';
 import createLabel from './createLabel.js';
 import { createRoundedRectPathD } from './shapes/roundedRectPath.ts';
-import {
-  styles2String,
-  userNodeOverrides,
-} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
+import { styles2String, userNodeOverrides } from './shapes/handDrawnShapeStyles.js';
 
 const rect = async (parent, node) => {
   log.info('Creating subgraph rect for ', node.id, node);

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 '../../logger.js';
+import { getConfig } from '../../diagram-api/diagramAPI.js';
+import common, { evaluate, renderKatex, hasKatex } from '../../diagrams/common/common.js';
+import { decodeEntities } from '../../utils.js';
 
 /**
  * @param dom

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 '../../diagram-api/types.js';
 import type { Mocked } from 'vitest';
 import { addEdgeMarkers } from './edgeMarker.js';
 

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 '../../diagram-api/types.js';
+import { log } from '../../logger.js';
+import type { EdgeData } from '../../types.js';
 /**
  * Adds SVG markers to a path element based on the arrow types specified in the edge.
  *

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 '../../diagram-api/diagramAPI.js';
+import { evaluate } from '../../diagrams/common/common.js';
+import { log } from '../../logger.js';
+import { createText } from '../createText.js';
+import utils from '../../utils.js';
+import { getLineFunctionsWithOffset } from '../../utils/lineWithOffset.js';
+import { getSubGraphTitleMargins } from '../../utils/subGraphTitleMargins.js';
 import { curveBasis, line, select } from 'd3';
 import rough from 'roughjs';
 import createLabel from './createLabel.js';

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 '../../logger.js';
 
 // Only add the number of markers that the diagram needs
 const insertMarkers = (elem, markerArray, type, id) => {

packages/mermaid/src/rendering-util/rendering-elements/nodes.js

@@ -1,4 +1,4 @@
-import { log } from '$root/logger.js';
+import { log } from '../../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 '../../diagram-api/diagramAPI.js';
 import { subroutine } from './shapes/subroutine.js';
 import { cylinder } from './shapes/cylinder.js';
 import { circle } from './shapes/circle.js';
@@ -51,9 +51,14 @@ import { taggedWaveEdgedRectangle } from './shapes/taggedWaveEdgedRectangle.js';
 import { curlyBraceLeft } from './shapes/curlyBraceLeft.js';
 import { curlyBraceRight } from './shapes/curlyBraceRight.js';
 import { curlyBraces } from './shapes/curlyBraces.js';
+import { iconSquare } from './shapes/iconSquare.js';
+import { iconCircle } from './shapes/iconCircle.js';
+import { icon } from './shapes/icon.js';
+import { imageSquare } from './shapes/imageSquare.js';
+import { iconRounded } from './shapes/iconRounded.js';
 
 //Use these names as the left side to render shapes.
-const shapes = {
+export const shapes = {
   // States
   state,
   stateStart,
@@ -77,19 +82,15 @@ const shapes = {
   stadium,
   pill: stadium,
   term: stadium,
-  windowPane,
   'window-pane': windowPane,
   'win-pane': windowPane,
   'internal-storage': windowPane,
-  dividedRectangle,
   'divided-rectangle': dividedRectangle,
   'div-rect': dividedRectangle,
   'div-proc': dividedRectangle,
-  taggedRect,
   'tagged-rect': taggedRect,
   'tag-rect': taggedRect,
   'tag-proc': taggedRect,
-  multiRect,
   'multi-rect': multiRect,
   'mul-rect': multiRect,
   'mul-proc': multiRect,
@@ -104,46 +105,41 @@ const shapes = {
   cylinder,
   cyl: cylinder,
   db: cylinder,
-  tiltedCylinder,
   'tilted-cylinder': tiltedCylinder,
   't-cyl': tiltedCylinder,
   das: tiltedCylinder,
-  linedCylinder,
   'lined-cylinder': linedCylinder,
   'l-cyl': linedCylinder,
   disk: linedCylinder,
 
   // Circles
   circle,
-  doublecircle,
   'double-circle': doublecircle,
   dc: doublecircle,
-  crossedCircle,
   'crossed-circle': crossedCircle,
   'cross-circle': crossedCircle,
   summary: crossedCircle,
-  filledCircle,
   'filled-circle': filledCircle,
   fc: filledCircle,
   junction: filledCircle,
-  shadedProcess,
   'lined-proc': shadedProcess,
   'lined-rect': shadedProcess,
+  'shaded-proc': shadedProcess,
 
   // Trapezoids
   trapezoid,
-  trapezoidBaseBottom: trapezoid,
   'trapezoid-bottom': trapezoid,
   'trap-b': trapezoid,
   priority: trapezoid,
   inv_trapezoid,
+  'inv-trapezoid': inv_trapezoid,
   'trapezoid-top': inv_trapezoid,
   'trap-t': inv_trapezoid,
   manual: inv_trapezoid,
-  curvedTrapezoid,
   'curved-trapezoid': curvedTrapezoid,
   'cur-trap': curvedTrapezoid,
   disp: curvedTrapezoid,
+  display: curvedTrapezoid,
 
   // Hexagons & Misc Geometric
   hexagon,
@@ -153,49 +149,40 @@ const shapes = {
   'small-triangle': triangle,
   'sm-tri': triangle,
   extract: triangle,
-  flippedTriangle,
   'flipped-triangle': flippedTriangle,
-  'flip-tria': flippedTriangle,
+  'flip-tri': flippedTriangle,
   'manual-file': flippedTriangle,
-  trapezoidalPentagon,
   'notched-pentagon': trapezoidalPentagon,
-  'not-pent': trapezoidalPentagon,
+  'notch-pent': trapezoidalPentagon,
   'loop-limit': trapezoidalPentagon,
 
   //wave Edged Rectangles
-  waveRectangle,
   'wave-rectangle': waveRectangle,
   'w-rect': waveRectangle,
   flag: waveRectangle,
   'paper-tape': waveRectangle,
-  waveEdgedRectangle,
   'wave-edge-rect': waveEdgedRectangle,
+  'wave-edged-rectangle': waveEdgedRectangle,
   'wave-rect': waveEdgedRectangle,
   'we-rect': waveEdgedRectangle,
   doc: waveEdgedRectangle,
-  multiWaveEdgedRectangle,
   'multi-wave-edged-rectangle': multiWaveEdgedRectangle,
   'mul-we-rect': multiWaveEdgedRectangle,
   'mul-doc': multiWaveEdgedRectangle,
-  linedWaveEdgedRect,
   'lined-wave-edged-rect': linedWaveEdgedRect,
   'lin-we-rect': linedWaveEdgedRect,
   'lin-doc': linedWaveEdgedRect,
-  taggedWaveEdgedRectangle,
   'tagged-wave-edged-rectangle': taggedWaveEdgedRectangle,
   'tag-we-rect': taggedWaveEdgedRectangle,
   'tag-doc': taggedWaveEdgedRectangle,
 
   // Custom Rectangles
-  bowTieRect,
   'bow-tie-rect': bowTieRect,
   'bt-rect': bowTieRect,
   'stored-data': bowTieRect,
-  slopedRect,
   'sloped-rectangle': slopedRect,
   'sloped-rect': slopedRect,
   'manual-input': slopedRect,
-  halfRoundedRectangle,
   'half-rounded-rect': halfRoundedRectangle,
   delay: halfRoundedRectangle,
   card,
@@ -220,19 +207,24 @@ const shapes = {
   text,
   anchor,
   diamond: question,
-  lightningBolt,
+  diam: question,
+  decision: question,
   'lightning-bolt': lightningBolt,
   bolt: lightningBolt,
   'com-link': lightningBolt,
-  curlyBraceLeft,
   'brace-l': curlyBraceLeft,
+  brace: curlyBraceLeft,
   comment: curlyBraceLeft,
   hourglass,
   odd: rect_left_inv_arrow,
   labelRect,
-  curlyBraceRight,
   'brace-r': curlyBraceRight,
   braces: curlyBraces,
+  iconSquare,
+  iconCircle,
+  icon,
+  iconRounded,
+  imageSquare,
 };
 
 const nodeElems = new Map();
@@ -241,6 +233,8 @@ export const insertNode = async (elem, node, dir) => {
   let newEl;
   let el;
 
+  // console.log("node is ", node.icon, node.shape)
+
   //special check for rect shape (with or without rounded corners)
   if (node.shape === 'rect') {
     if (node.rx && node.ry) {

packages/mermaid/src/rendering-util/rendering-elements/nodes.spec.js

@@ -0,0 +1,241 @@
+import exp from 'constants';
+import { shapes } from './nodes.js';
+
+describe('Test Alias for shapes', function () {
+  // for each shape in docs/syntax/flowchart.md, along with its semantic name, short name, and alias name, add a test case
+  // Process | rect | proc | rectangle
+  it('should support alias for rectangle shape ', function () {
+    expect(shapes.process).toBe(shapes.rect);
+    expect(shapes.proc).toBe(shapes.rect);
+    expect(shapes.rectangle).toBe(shapes.rect);
+  });
+
+  // event | rounded
+  it('should support alias for rounded shape ', function () {
+    expect(shapes.event).toBe(shapes.rounded);
+  });
+
+  // stadium | pill | term
+  it('should support alias for stadium shape ', function () {
+    expect(shapes.pill).toBe(shapes.stadium);
+    expect(shapes.term).toBe(shapes.stadium);
+  });
+
+  // fr | subproc | framed-rectangle | subroutine
+  it('should support alias for subroutine shape ', function () {
+    expect(shapes['framed-rectangle']).toBe(shapes.fr);
+    expect(shapes.subproc).toBe(shapes.fr);
+    expect(shapes.subroutine).toBe(shapes.fr);
+  });
+
+  // cyl | db | cylinder
+  it('should support alias for cylinder shape ', function () {
+    expect(shapes.db).toBe(shapes.cylinder);
+    expect(shapes.cyl).toBe(shapes.cylinder);
+  });
+
+  // diam | decision | diamond
+  it('should support alias for diamond shape ', function () {
+    expect(shapes.diam).toBe(shapes.decision);
+    expect(shapes.diamond).toBe(shapes.decision);
+  });
+
+  // hex | hexagon | prepare
+  it('should support alias for hexagon shape ', function () {
+    expect(shapes.hex).toBe(shapes.hexagon);
+    expect(shapes.prepare).toBe(shapes.hexagon);
+  });
+
+  // l-r | lean-right | in-out
+  it('should support alias for lean-right shape ', function () {
+    expect(shapes['l-r']).toBe(shapes['lean-right']);
+    expect(shapes['in-out']).toBe(shapes['lean-right']);
+  });
+
+  // l-l | lean-left | out-in
+  it('should support alias for lean-left shape ', function () {
+    expect(shapes['l-l']).toBe(shapes['lean-left']);
+    expect(shapes['out-in']).toBe(shapes['lean-left']);
+  });
+
+  // trap-b | trapezoid-bottom | priority | trapezoid
+  it('should support alias for trapezoid shape ', function () {
+    expect(shapes['trapezoid-bottom']).toBe(shapes['trap-b']);
+    expect(shapes.priority).toBe(shapes['trap-b']);
+    expect(shapes.trapezoid).toBe(shapes['trap-b']);
+  });
+
+  // trap-t | trapezoid-top | manual | inv-trapezoid
+  it('should support alias for inv_trapezoid shape ', function () {
+    expect(shapes['trapezoid-top']).toBe(shapes['trap-t']);
+    expect(shapes.manual).toBe(shapes['trap-t']);
+    expect(shapes['inv-trapezoid']).toBe(shapes['trap-t']);
+  });
+
+  // dc | double-circle
+  it('should support alias for doublecircle shape ', function () {
+    expect(shapes['double-circle']).toBe(shapes.dc);
+  });
+
+  // notched-rect | card | notch-rect
+  it('should support alias for notched-rectangle shape ', function () {
+    expect(shapes.card).toBe(shapes['notched-rect']);
+    expect(shapes['notch-rect']).toBe(shapes['notched-rect']);
+  });
+
+  // lined-rect | lined-proc | shaded-proc
+  it('should support alias for shadedProcess shape ', function () {
+    expect(shapes['lined-proc']).toBe(shapes['lined-rect']);
+    expect(shapes['shaded-proc']).toBe(shapes['lined-rect']);
+  });
+
+  // sm-circ | small-circle | start
+  it('should support alias for smallCircle shape ', function () {
+    expect(shapes['small-circle']).toBe(shapes['sm-circ']);
+    expect(shapes.start).toBe(shapes['sm-circ']);
+  });
+
+  //  framed-circle | stop
+  it('should support alias for framed circle shape ', function () {
+    expect(shapes.stop).toBe(shapes['framed-circle']);
+  });
+
+  // fork | join | long-rect
+  it('should support alias for fork shape ', function () {
+    expect(shapes.join).toBe(shapes.fork);
+    expect(shapes['long-rect']).toBe(shapes.fork);
+  });
+
+  // brace | comment | brace-l
+  it('should support alias for brace shape ', function () {
+    expect(shapes.comment).toBe(shapes.brace);
+    expect(shapes['brace-l']).toBe(shapes.brace);
+  });
+
+  // bolt | com-link | lightning-bolt
+  it('should support alias for bolt shape ', function () {
+    expect(shapes['com-link']).toBe(shapes.bolt);
+    expect(shapes['lightning-bolt']).toBe(shapes.bolt);
+  });
+
+  // we-rect | doc | wave-edge-rect | wave-edged-rectangle
+  it('should support alias for waveEdgedRectangle shape ', function () {
+    expect(shapes.doc).toBe(shapes['we-rect']);
+    expect(shapes['wave-edge-rect']).toBe(shapes['we-rect']);
+    expect(shapes['wave-edged-rectangle']).toBe(shapes['we-rect']);
+  });
+
+  // delay | half-rounded-rect
+  it('should support alias for halfRoundedRectangle shape ', function () {
+    expect(shapes.delay).toBe(shapes['half-rounded-rect']);
+  });
+
+  // t-cyl | das | titled-cylinder
+  it('should support alias for tilted-cylinder shape ', function () {
+    expect(shapes.das).toBe(shapes['t-cyl']);
+    expect(shapes['tilted-cylinder']).toBe(shapes['t-cyl']);
+  });
+
+  // l-cyl | disk | lined-cylinder
+  it('should support alias for linedCylinder shape ', function () {
+    expect(shapes.disk).toBe(shapes['l-cyl']);
+    expect(shapes['lined-cylinder']).toBe(shapes['l-cyl']);
+  });
+
+  // cur-trap | disp | display | curved-trapezoid
+  it('should support alias for curvedTrapezoid shape ', function () {
+    expect(shapes.disp).toBe(shapes['cur-trap']);
+    expect(shapes['curved-trapezoid']).toBe(shapes['cur-trap']);
+    expect(shapes.display).toBe(shapes['cur-trap']);
+  });
+
+  // div-rect | div-proc | divided-rectangle
+  it('should support alias for dividedRectangle shape ', function () {
+    expect(shapes['div-proc']).toBe(shapes['div-rect']);
+    expect(shapes['divided-rectangle']).toBe(shapes['div-rect']);
+  });
+
+  // sm-tri | extract | small-triangle | triangle
+  it('should support alias for smallTriangle shape ', function () {
+    expect(shapes.extract).toBe(shapes['sm-tri']);
+    expect(shapes['small-triangle']).toBe(shapes['sm-tri']);
+    expect(shapes.triangle).toBe(shapes['sm-tri']);
+  });
+
+  // win-pane | internal-storage | window-pane
+  it('should support alias for windowPane shape ', function () {
+    expect(shapes['internal-storage']).toBe(shapes['win-pane']);
+    expect(shapes['window-pane']).toBe(shapes['win-pane']);
+  });
+
+  // fc | junction | filled-circle
+  it('should support alias for filledCircle shape ', function () {
+    expect(shapes.junction).toBe(shapes.fc);
+    expect(shapes['filled-circle']).toBe(shapes.fc);
+  });
+
+  //lin-we-rect | lin-doc | lined-wave-edged-rect
+  it('should support alias for linedWaveEdgedRectangle shape ', function () {
+    expect(shapes['lin-doc']).toBe(shapes['lin-we-rect']);
+    expect(shapes['lined-wave-edged-rect']).toBe(shapes['lin-we-rect']);
+  });
+
+  // notch-pent | loop-limit | notched-pentagon
+  it('should support alias for notchedPentagon shape ', function () {
+    expect(shapes['loop-limit']).toBe(shapes['notch-pent']);
+    expect(shapes['notched-pentagon']).toBe(shapes['notch-pent']);
+  });
+
+  // flip-tri | manual-file | flipped-triangle
+  it('should support alias for flippedTriangle shape ', function () {
+    expect(shapes['manual-file']).toBe(shapes['flip-tri']);
+    expect(shapes['flipped-triangle']).toBe(shapes['flip-tri']);
+  });
+
+  //sloped-rect | manual-input | sloped-rectangle
+  it('should support alias for slopedRectangle shape ', function () {
+    expect(shapes['manual-input']).toBe(shapes['sloped-rect']);
+    expect(shapes['sloped-rectangle']).toBe(shapes['sloped-rect']);
+  });
+
+  // mul-we-rect | mul-doc | multi-wave-edged-rectangle
+  it('should support alias for multiWaveEdgedRectangle shape ', function () {
+    expect(shapes['mul-doc']).toBe(shapes['mul-we-rect']);
+    expect(shapes['multi-wave-edged-rectangle']).toBe(shapes['mul-we-rect']);
+  });
+
+  // mul-rect | mul-proc | multi-rect
+  it('should support alias for multiRect shape ', function () {
+    expect(shapes['mul-proc']).toBe(shapes['mul-rect']);
+    expect(shapes['multi-rect']).toBe(shapes['mul-rect']);
+  });
+
+  // flag | paper-tape
+  it('should support alias for paperTape shape ', function () {
+    expect(shapes['paper-tape']).toBe(shapes.flag);
+  });
+
+  // bt-rect| stored-data | bow-tie-rect
+  it('should support alias for bowTieRect shape ', function () {
+    expect(shapes['stored-data']).toBe(shapes['bt-rect']);
+    expect(shapes['bow-tie-rect']).toBe(shapes['bt-rect']);
+  });
+
+  // cross-circle | summary | crossed-circle
+  it('should support alias for crossedCircle shape ', function () {
+    expect(shapes.summary).toBe(shapes['cross-circle']);
+    expect(shapes['crossed-circle']).toBe(shapes['cross-circle']);
+  });
+
+  // tag-we-rect | tag-doc | tagged-wave-edged-rectangle
+  it('should support alias for taggedWaveEdgedRectangle shape ', function () {
+    expect(shapes['tag-doc']).toBe(shapes['tag-we-rect']);
+    expect(shapes['tagged-wave-edged-rectangle']).toBe(shapes['tag-we-rect']);
+  });
+
+  // tag-rect | tag-proc | tagged-rect
+  it('should support alias for taggedRect shape ', function () {
+    expect(shapes['tag-proc']).toBe(shapes['tag-rect']);
+    expect(shapes['tagged-rect']).toBe(shapes['tag-rect']);
+  });
+});

packages/mermaid/src/rendering-util/rendering-elements/shapes/anchor.ts

@@ -1,11 +1,8 @@
-import { log } from '$root/logger.js';
+import { log } from '../../../logger.js';
 import { updateNodeBounds, getNodeClasses } from './util.js';
 import intersect from '../intersect/index.js';
-import type { Node } from '$root/rendering-util/types.d.ts';
-import {
-  styles2String,
-  userNodeOverrides,
-} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
+import type { Node } from '../../types.d.ts';
+import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 
 export const anchor = (parent: SVGAElement, node: Node): Promise<SVGAElement> => {

packages/mermaid/src/rendering-util/rendering-elements/shapes/bowTieRect.ts

@@ -1,10 +1,7 @@
 import { labelHelper, updateNodeBounds, getNodeClasses, createPathFromPoints } from './util.js';
 import intersect from '../intersect/index.js';
-import type { Node } from '$root/rendering-util/types.d.ts';
-import {
-  styles2String,
-  userNodeOverrides,
-} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
+import type { Node } from '../../types.d.ts';
+import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 
 function generateArcPoints(

packages/mermaid/src/rendering-util/rendering-elements/shapes/card.ts

@@ -1,10 +1,7 @@
 import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
 import intersect from '../intersect/index.js';
-import type { Node } from '$root/rendering-util/types.d.ts';
-import {
-  styles2String,
-  userNodeOverrides,
-} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
+import type { Node } from '../../types.d.ts';
+import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 
 import { insertPolygonShape } from './insertPolygonShape.js';

packages/mermaid/src/rendering-util/rendering-elements/shapes/choice.ts

@@ -1,6 +1,6 @@
 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 '../../types.js';
+import type { SVG } from '../../../diagram-api/types.js';
 // @ts-ignore TODO: Fix rough typings
 import rough from 'roughjs';
 import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';

packages/mermaid/src/rendering-util/rendering-elements/shapes/circle.ts

@@ -1,11 +1,8 @@
-import { log } from '$root/logger.js';
+import { log } from '../../../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 {
-  styles2String,
-  userNodeOverrides,
-} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
+import type { Node } from '../../types.js';
+import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 
 export const circle = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => {

packages/mermaid/src/rendering-util/rendering-elements/shapes/crossedCircle.ts

@@ -1,11 +1,8 @@
-import { log } from '$root/logger.js';
+import { log } from '../../../logger.js';
 import { getNodeClasses, updateNodeBounds } from './util.js';
-import type { SVG } from '$root/diagram-api/types.js';
-import type { Node } from '$root/rendering-util/types.d.ts';
-import {
-  styles2String,
-  userNodeOverrides,
-} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
+import type { SVG } from '../../../diagram-api/types.js';
+import type { Node } from '../../types.d.ts';
+import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 import intersect from '../intersect/index.js';
 

packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraceLeft.ts

@@ -1,10 +1,7 @@
 import { labelHelper, updateNodeBounds, getNodeClasses, createPathFromPoints } from './util.js';
 import intersect from '../intersect/index.js';
-import type { Node } from '$root/rendering-util/types.d.ts';
-import {
-  styles2String,
-  userNodeOverrides,
-} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
+import type { Node } from '../../types.d.ts';
+import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 
 function generateCirclePoints(

packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraceRight.ts

@@ -1,10 +1,7 @@
 import { labelHelper, updateNodeBounds, getNodeClasses, createPathFromPoints } from './util.js';
 import intersect from '../intersect/index.js';
-import type { Node } from '$root/rendering-util/types.d.ts';
-import {
-  styles2String,
-  userNodeOverrides,
-} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
+import type { Node } from '../../types.d.ts';
+import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 
 function generateCirclePoints(

packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraces.ts

@@ -1,10 +1,7 @@
 import { labelHelper, updateNodeBounds, getNodeClasses, createPathFromPoints } from './util.js';
 import intersect from '../intersect/index.js';
-import type { Node } from '$root/rendering-util/types.d.ts';
-import {
-  styles2String,
-  userNodeOverrides,
-} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
+import type { Node } from '../../types.d.ts';
+import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 
 function generateCirclePoints(

packages/mermaid/src/rendering-util/rendering-elements/shapes/curvedTrapezoid.ts

@@ -1,10 +1,7 @@
 import { labelHelper, updateNodeBounds, getNodeClasses, createPathFromPoints } from './util.js';
 import intersect from '../intersect/index.js';
-import type { Node } from '$root/rendering-util/types.d.ts';
-import {
-  styles2String,
-  userNodeOverrides,
-} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
+import type { Node } from '../../types.d.ts';
+import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 
 function createCurvedTrapezoidPathD(

packages/mermaid/src/rendering-util/rendering-elements/shapes/cylinder.ts

@@ -1,10 +1,7 @@
 import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
 import intersect from '../intersect/index.js';
-import type { Node } from '$root/rendering-util/types.d.ts';
-import {
-  styles2String,
-  userNodeOverrides,
-} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
+import type { Node } from '../../types.js';
+import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 
 export const createCylinderPathD = (

packages/mermaid/src/rendering-util/rendering-elements/shapes/dividedRect.ts

@@ -1,10 +1,7 @@
 import { labelHelper, updateNodeBounds, getNodeClasses, createPathFromPoints } from './util.js';
 import intersect from '../intersect/index.js';
-import type { Node } from '$root/rendering-util/types.d.ts';
-import {
-  styles2String,
-  userNodeOverrides,
-} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
+import type { Node } from '../../types.d.ts';
+import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 
 export const dividedRectangle = async (parent: SVGAElement, node: Node) => {

packages/mermaid/src/rendering-util/rendering-elements/shapes/document.ts

@@ -1,10 +1,7 @@
 import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
 import intersect from '../intersect/index.js';
-import type { Node } from '$root/rendering-util/types.d.ts';
-import {
-  styles2String,
-  userNodeOverrides,
-} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
+import type { Node } from '../../types.d.ts';
+import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 
 export const createCylinderPathD = (

packages/mermaid/src/rendering-util/rendering-elements/shapes/doubleCircle.ts

@@ -1,11 +1,8 @@
-import { log } from '$root/logger.js';
+import { log } from '../../../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 {
-  styles2String,
-  userNodeOverrides,
-} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
+import type { Node } from '../../types.js';
+import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 
 export const doublecircle = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => {

packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts

@@ -1,11 +1,8 @@
 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 '../../types.js';
 import { createRoundedRectPathD } from './roundedRectPath.js';
-import {
-  userNodeOverrides,
-  styles2String,
-} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
+import { userNodeOverrides, styles2String } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 
 export const drawRect = async (parent: SVGAElement, node: Node, options: RectOptions) => {

packages/mermaid/src/rendering-util/rendering-elements/shapes/filledCircle.ts

@@ -1,14 +1,11 @@
-import { log } from '$root/logger.js';
+import { log } from '../../../logger.js';
 import { getNodeClasses, updateNodeBounds } from './util.js';
-import type { Node } from '$root/rendering-util/types.d.ts';
-import type { SVG } from '$root/diagram-api/types.js';
-import {
-  styles2String,
-  userNodeOverrides,
-} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
+import type { Node } from '../../types.d.ts';
+import type { SVG } from '../../../diagram-api/types.js';
+import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 import intersect from '../intersect/index.js';
-import { getConfig } from '$root/config.js';
+import { getConfig } from '../../../config.js';
 
 export const filledCircle = (parent: SVG, node: Node) => {
   const { labelStyles, nodeStyles } = styles2String(node);

packages/mermaid/src/rendering-util/rendering-elements/shapes/flippedTriangle.ts

@@ -1,11 +1,8 @@
-import { log } from '$root/logger.js';
+import { log } from '../../../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 {
-  styles2String,
-  userNodeOverrides,
-} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
+import type { Node } from '../../types.d.ts';
+import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 import { createPathFromPoints } from './util.js';
 

packages/mermaid/src/rendering-util/rendering-elements/shapes/forkJoin.ts

@@ -1,7 +1,7 @@
 import { getNodeClasses, 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 '../../types.js';
+import type { SVG } from '../../../diagram-api/types.js';
 import rough from 'roughjs';
 import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 
@@ -51,6 +51,5 @@ export const forkJoin = (parent: SVG, node: Node, dir: string) => {
   node.intersect = function (point) {
     return intersect.rect(node, point);
   };
-
   return shapeSvg;
 };

packages/mermaid/src/rendering-util/rendering-elements/shapes/halfRoundedRectangle.ts

@@ -1,11 +1,8 @@
-import { log } from '$root/logger.js';
+import { log } from '../../../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 {
-  styles2String,
-  userNodeOverrides,
-} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
+import type { Node } from '../../types.d.ts';
+import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 
 function createHalfRoundedRectShapePathD(h: number, w: number, rx: number, ry: number) {

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 '../../../diagram-api/diagramAPI.js';
+import type { Node } from '../../types.js';
 
 // Striped fill like start or fork nodes in state diagrams
 export const solidStateFill = (color: string) => {

packages/mermaid/src/rendering-util/rendering-elements/shapes/hexagon.ts

@@ -1,10 +1,7 @@
 import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
 import intersect from '../intersect/index.js';
-import type { Node } from '$root/rendering-util/types.d.ts';
-import {
-  styles2String,
-  userNodeOverrides,
-} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
+import type { Node } from '../../types.js';
+import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 
 import { insertPolygonShape } from './insertPolygonShape.js';

packages/mermaid/src/rendering-util/rendering-elements/shapes/hourglass.ts

@@ -1,11 +1,8 @@
-import { log } from '$root/logger.js';
+import { log } from '../../../logger.js';
 import { labelHelper, updateNodeBounds, getNodeClasses, createPathFromPoints } from './util.js';
 import intersect from '../intersect/index.js';
-import type { Node } from '$root/rendering-util/types.d.ts';
-import {
-  styles2String,
-  userNodeOverrides,
-} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
+import type { Node } from '../../types.d.ts';
+import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 
 export const hourglass = async (parent: SVGAElement, node: Node) => {

packages/mermaid/src/rendering-util/rendering-elements/shapes/icon.ts

@@ -0,0 +1,120 @@
+import { log } from '../../../logger.js';
+import { labelHelper, updateNodeBounds } from './util.js';
+import type { Node } from '../../types.d.ts';
+import type { SVG } from '../../../diagram-api/types.js';
+import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
+import rough from 'roughjs';
+import intersect from '../intersect/index.js';
+import { getIconSVG } from '../../icons.js';
+import { getConfig } from '../../../diagram-api/diagramAPI.js';
+
+export const icon = async (parent: SVG, node: Node) => {
+  const { labelStyles } = styles2String(node);
+  node.labelStyle = labelStyles;
+  const assetHeight = node.assetHeight ?? 48;
+  const assetWidth = node.assetWidth ?? 48;
+  const iconSize = Math.max(assetHeight, assetWidth);
+  const defaultWidth = getConfig()?.flowchart?.wrappingWidth;
+  node.width = Math.max(iconSize, defaultWidth ?? 0);
+  const { shapeSvg, bbox, label } = await labelHelper(parent, node, 'icon-shape default');
+
+  const topLabel = node.pos === 't';
+
+  const height = iconSize;
+  const width = Math.max(iconSize, bbox.width);
+
+  const x = -width / 2;
+  const y = -height / 2;
+
+  // @ts-ignore - rough is not typed
+  const rc = rough.svg(shapeSvg);
+  const options = userNodeOverrides(node, { stroke: 'none', fill: 'none' });
+
+  if (node.look !== 'handDrawn') {
+    options.roughness = 0;
+    options.fillStyle = 'solid';
+  }
+
+  const iconNode = rc.rectangle(x, y, width, height, options);
+
+  const iconShape = shapeSvg.insert(() => iconNode, ':first-child');
+
+  if (node.icon) {
+    const iconElem = shapeSvg.append('g');
+    iconElem.html(
+      `<g>${await getIconSVG(node.icon, { height: iconSize, fallbackPrefix: '' })}</g>`
+    );
+    const iconBBox = iconElem.node().getBBox();
+    const iconWidth = iconBBox.width;
+    const iconHeight = iconBBox.height;
+    iconElem.attr(
+      'transform',
+      `translate(${-iconWidth / 2},${topLabel ? height / 2 - iconHeight + bbox.height / 2 : -height / 2 - bbox.height / 2})`
+    );
+  }
+
+  label.attr(
+    'transform',
+    `translate(${-width / 2 + width / 2 - bbox.width / 2},${topLabel ? -height / 2 - 5 - bbox.height / 2 : height / 2 - bbox.height / 2})`
+  );
+
+  iconShape.attr('transform', `translate(${0},${topLabel ? bbox.height / 2 : -bbox.height / 2})`);
+
+  updateNodeBounds(node, shapeSvg);
+
+  node.intersect = function (point) {
+    log.info('iconSquare intersect', node, point);
+    if (!node.label) {
+      return intersect.rect(node, point);
+    }
+    const dx = node.x ?? 0;
+    const dy = node.y ?? 0;
+    const nodeWidth = node.width ?? 0;
+    const nodeHeight = node.height ?? 0;
+
+    if (topLabel) {
+      const points = [
+        { x: dx - nodeWidth / 2, y: dy - nodeHeight / 2 - bbox.height / 2 },
+        { x: dx + nodeWidth / 2, y: dy - nodeHeight / 2 - bbox.height / 2 },
+        { x: dx + nodeWidth / 2, y: dy - nodeHeight / 2 + bbox.height - bbox.height / 2 },
+        {
+          x: dx + nodeWidth / 2 - (bbox.width - width) / 2,
+          y: dy - nodeHeight / 2 + bbox.height - bbox.height / 2,
+        },
+        {
+          x: dx + nodeWidth / 2 - (bbox.width - width) / 2,
+          y: dy + nodeHeight / 2 - bbox.height / 2,
+        },
+        {
+          x: dx + nodeWidth / 2 - (bbox.width - width) / 2 - width,
+          y: dy + nodeHeight / 2 - bbox.height / 2,
+        },
+        {
+          x: dx + nodeWidth / 2 - (bbox.width - width) / 2 - width,
+          y: dy - nodeHeight / 2 + bbox.height - bbox.height / 2,
+        },
+        { x: dx - nodeWidth / 2, y: dy - nodeHeight / 2 + bbox.height - bbox.height / 2 },
+      ];
+      const pos = intersect.polygon(node, points, point);
+      return pos;
+    } else {
+      const points = [
+        { x: dx - nodeWidth / 2 + (bbox.width - width) / 2, y: dy - nodeHeight / 2 },
+        { x: dx - nodeWidth / 2 + (bbox.width - width) / 2 + width, y: dy - nodeHeight / 2 },
+        {
+          x: dx - nodeWidth / 2 + (bbox.width - width) / 2 + width,
+          y: dy - nodeHeight / 2 + height,
+        },
+        { x: dx + nodeWidth / 2, y: dy - nodeHeight / 2 + height },
+        { x: dx + nodeWidth / 2, y: dy + nodeHeight / 2 },
+        { x: dx - nodeWidth / 2, y: dy + nodeHeight / 2 },
+        { x: dx - nodeWidth / 2, y: dy + nodeHeight / 2 - bbox.height },
+        { x: dx - nodeWidth / 2 + (bbox.width - width) / 2, y: dy + nodeHeight / 2 - bbox.height },
+      ];
+      const pos = intersect.polygon(node, points, point);
+      return pos;
+    }
+  };
+
+  return shapeSvg;
+};

packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts

@@ -0,0 +1,87 @@
+import { log } from '../../../logger.js';
+import { labelHelper, updateNodeBounds } from './util.js';
+import type { Node } from '../../types.d.ts';
+import type { SVG } from '../../../diagram-api/types.js';
+import { compileStyles, styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
+import rough from 'roughjs';
+import intersect from '../intersect/index.js';
+import { getIconSVG } from '../../icons.js';
+import { getConfig } from '../../../diagram-api/diagramAPI.js';
+
+export const iconCircle = async (parent: SVG, node: Node, dir: string) => {
+  const translateHorizontal = dir === 'TB' || dir === 'BT' || dir === 'TD' || dir === 'DT';
+  const { labelStyles, nodeStyles } = styles2String(node);
+  node.labelStyle = labelStyles;
+  const assetHeight = node.assetHeight ?? 48;
+  const assetWidth = node.assetWidth ?? 48;
+  const iconSize = Math.max(assetHeight, assetWidth);
+  const defaultWidth = getConfig()?.flowchart?.wrappingWidth;
+  node.width = Math.max(iconSize, defaultWidth ?? 0);
+  const { shapeSvg, bbox, halfPadding, label } = await labelHelper(
+    parent,
+    node,
+    'icon-shape default'
+  );
+  const { cssStyles } = node;
+
+  const topLabel = node.pos === 't';
+
+  const diameter = iconSize + halfPadding * 2;
+  const { themeVariables } = getConfig();
+  const { mainBkg } = themeVariables;
+  const { stylesMap } = compileStyles(node);
+
+  // @ts-ignore - rough is not typed
+  const rc = rough.svg(shapeSvg);
+  const options = userNodeOverrides(node, { stroke: stylesMap.get('fill') || mainBkg });
+
+  if (node.look !== 'handDrawn') {
+    options.roughness = 0;
+    options.fillStyle = 'solid';
+  }
+
+  const iconNode = rc.circle(0, 0, diameter, options);
+
+  const iconShape = shapeSvg.insert(() => iconNode, ':first-child');
+
+  if (node.icon) {
+    const iconElem = shapeSvg.append('g');
+    iconElem.html(
+      `<g>${await getIconSVG(node.icon, { height: iconSize, fallbackPrefix: '' })}</g>`
+    );
+    const iconBBox = iconElem.node().getBBox();
+    const iconWidth = iconBBox.width;
+    const iconHeight = iconBBox.height;
+    iconElem.attr(
+      'transform',
+      `translate(${-iconWidth / 2},${topLabel ? diameter / 2 - iconHeight - halfPadding + (translateHorizontal ? bbox.height / 2 : 0) : -diameter / 2 + halfPadding - (translateHorizontal ? bbox.height / 2 : 0)})`
+    );
+  }
+
+  label.attr(
+    'transform',
+    `translate(${-diameter / 2 + diameter / 2 - bbox.width / 2},${topLabel ? -diameter / 2 - 2.5 - (translateHorizontal ? bbox.height / 2 : bbox.height) : diameter / 2 + 5 - (translateHorizontal ? bbox.height / 2 : 0)})`
+  );
+
+  if (translateHorizontal) {
+    iconShape.attr('transform', `translate(${0},${topLabel ? bbox.height / 2 : -bbox.height / 2})`);
+  }
+
+  if (cssStyles && node.look !== 'handDrawn') {
+    iconShape.selectAll('path').attr('style', cssStyles);
+  }
+
+  if (nodeStyles && node.look !== 'handDrawn') {
+    iconShape.selectAll('path').attr('style', nodeStyles);
+  }
+
+  updateNodeBounds(node, shapeSvg);
+
+  node.intersect = function (point) {
+    log.info('iconSquare intersect', node, point);
+    const pos = intersect.rect(node, point);
+    return pos;
+  };
+
+  return shapeSvg;
+};

packages/mermaid/src/rendering-util/rendering-elements/shapes/iconRounded.ts

@@ -0,0 +1,137 @@
+import { log } from '../../../logger.js';
+import { labelHelper, updateNodeBounds } from './util.js';
+import type { Node } from '../../types.js';
+import type { SVG } from '../../../diagram-api/types.js';
+import { compileStyles, styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
+import rough from 'roughjs';
+import intersect from '../intersect/index.js';
+import { getIconSVG } from '../../icons.js';
+import { getConfig } from '../../../diagram-api/diagramAPI.js';
+import { createRoundedRectPathD } from './roundedRectPath.js';
+
+export const iconRounded = async (parent: SVG, node: Node) => {
+  const { labelStyles, nodeStyles } = styles2String(node);
+  node.labelStyle = labelStyles;
+  const assetHeight = node.assetHeight ?? 48;
+  const assetWidth = node.assetWidth ?? 48;
+  const iconSize = Math.max(assetHeight, assetWidth);
+  const defaultWidth = getConfig()?.flowchart?.wrappingWidth;
+  node.width = Math.max(iconSize, defaultWidth ?? 0);
+  const { shapeSvg, bbox, halfPadding, label } = await labelHelper(
+    parent,
+    node,
+    'icon-shape default'
+  );
+  const { cssStyles } = node;
+
+  const topLabel = node.pos === 't';
+
+  const height = iconSize + halfPadding * 2;
+  const width = iconSize + halfPadding * 2;
+  const { themeVariables } = getConfig();
+  const { mainBkg } = themeVariables;
+  const { stylesMap } = compileStyles(node);
+
+  const x = -width / 2;
+  const y = -height / 2;
+
+  // @ts-ignore - rough is not typed
+  const rc = rough.svg(shapeSvg);
+  const options = userNodeOverrides(node, { stroke: stylesMap.get('fill') || mainBkg });
+
+  if (node.look !== 'handDrawn') {
+    options.roughness = 0;
+    options.fillStyle = 'solid';
+  }
+
+  const iconNode = rc.path(createRoundedRectPathD(x, y, width, height, 5), options);
+
+  const iconShape = shapeSvg.insert(() => iconNode, ':first-child');
+
+  if (node.icon) {
+    const iconElem = shapeSvg.append('g');
+    iconElem.html(
+      `<g>${await getIconSVG(node.icon, { height: iconSize, fallbackPrefix: '' })}</g>`
+    );
+    const iconBBox = iconElem.node().getBBox();
+    const iconWidth = iconBBox.width;
+    const iconHeight = iconBBox.height;
+    iconElem.attr(
+      'transform',
+      `translate(${-iconWidth / 2},${topLabel ? height / 2 - iconHeight + bbox.height / 2 : -height / 2 - bbox.height / 2})`
+    );
+  }
+
+  label.attr(
+    'transform',
+    `translate(${-width / 2 + width / 2 - bbox.width / 2},${topLabel ? -height / 2 - 5 - bbox.height / 2 : height / 2 - bbox.height / 2})`
+  );
+
+  iconShape.attr('transform', `translate(${0},${topLabel ? bbox.height / 2 : -bbox.height / 2})`);
+
+  if (cssStyles && node.look !== 'handDrawn') {
+    iconShape.selectAll('path').attr('style', cssStyles);
+  }
+
+  if (nodeStyles && node.look !== 'handDrawn') {
+    iconShape.selectAll('path').attr('style', nodeStyles);
+  }
+
+  updateNodeBounds(node, shapeSvg);
+
+  node.intersect = function (point) {
+    log.info('iconSquare intersect', node, point);
+    if (!node.label) {
+      return intersect.rect(node, point);
+    }
+    const dx = node.x ?? 0;
+    const dy = node.y ?? 0;
+    const nodeWidth = node.width ?? 0;
+    const nodeHeight = node.height ?? 0;
+
+    if (topLabel) {
+      const points = [
+        { x: dx - nodeWidth / 2, y: dy - nodeHeight / 2 - bbox.height / 2 },
+        { x: dx + nodeWidth / 2, y: dy - nodeHeight / 2 - bbox.height / 2 },
+        { x: dx + nodeWidth / 2, y: dy - nodeHeight / 2 + bbox.height - bbox.height / 2 },
+        {
+          x: dx + nodeWidth / 2 - (bbox.width - width) / 2,
+          y: dy - nodeHeight / 2 + bbox.height - bbox.height / 2,
+        },
+        {
+          x: dx + nodeWidth / 2 - (bbox.width - width) / 2,
+          y: dy + nodeHeight / 2 - bbox.height / 2,
+        },
+        {
+          x: dx + nodeWidth / 2 - (bbox.width - width) / 2 - width,
+          y: dy + nodeHeight / 2 - bbox.height / 2,
+        },
+        {
+          x: dx + nodeWidth / 2 - (bbox.width - width) / 2 - width,
+          y: dy - nodeHeight / 2 + bbox.height - bbox.height / 2,
+        },
+        { x: dx - nodeWidth / 2, y: dy - nodeHeight / 2 + bbox.height - bbox.height / 2 },
+      ];
+      const pos = intersect.polygon(node, points, point);
+      return pos;
+    } else {
+      const points = [
+        { x: dx - nodeWidth / 2 + (bbox.width - width) / 2, y: dy - nodeHeight / 2 },
+        { x: dx - nodeWidth / 2 + (bbox.width - width) / 2 + width, y: dy - nodeHeight / 2 },
+        {
+          x: dx - nodeWidth / 2 + (bbox.width - width) / 2 + width,
+          y: dy - nodeHeight / 2 + height,
+        },
+        { x: dx + nodeWidth / 2, y: dy - nodeHeight / 2 + height },
+        { x: dx + nodeWidth / 2, y: dy + nodeHeight / 2 },
+        { x: dx - nodeWidth / 2, y: dy + nodeHeight / 2 },
+        { x: dx - nodeWidth / 2, y: dy + nodeHeight / 2 - bbox.height },
+        { x: dx - nodeWidth / 2 + (bbox.width - width) / 2, y: dy + nodeHeight / 2 - bbox.height },
+      ];
+      const pos = intersect.polygon(node, points, point);
+      return pos;
+    }
+  };
+
+  return shapeSvg;
+};

packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts

@@ -0,0 +1,136 @@
+import { log } from '../../../logger.js';
+import { labelHelper, updateNodeBounds } from './util.js';
+import type { Node } from '../../types.d.ts';
+import type { SVG } from '../../../diagram-api/types.js';
+import { compileStyles, styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
+import rough from 'roughjs';
+import intersect from '../intersect/index.js';
+import { getIconSVG } from '../../icons.js';
+import { getConfig } from '../../../diagram-api/diagramAPI.js';
+
+export const iconSquare = async (parent: SVG, node: Node) => {
+  const { labelStyles, nodeStyles } = styles2String(node);
+  node.labelStyle = labelStyles;
+  const assetHeight = node.assetHeight ?? 48;
+  const assetWidth = node.assetWidth ?? 48;
+  const iconSize = Math.max(assetHeight, assetWidth);
+  const defaultWidth = getConfig()?.flowchart?.wrappingWidth;
+  node.width = Math.max(iconSize, defaultWidth ?? 0);
+  const { shapeSvg, bbox, halfPadding, label } = await labelHelper(
+    parent,
+    node,
+    'icon-shape default'
+  );
+  const { cssStyles } = node;
+
+  const topLabel = node.pos === 't';
+
+  const height = iconSize + halfPadding * 2;
+  const width = iconSize + halfPadding * 2;
+  const { themeVariables } = getConfig();
+  const { mainBkg } = themeVariables;
+  const { stylesMap } = compileStyles(node);
+
+  const x = -width / 2;
+  const y = -height / 2;
+
+  // @ts-ignore - rough is not typed
+  const rc = rough.svg(shapeSvg);
+  const options = userNodeOverrides(node, { stroke: stylesMap.get('fill') || mainBkg });
+
+  if (node.look !== 'handDrawn') {
+    options.roughness = 0;
+    options.fillStyle = 'solid';
+  }
+
+  const iconNode = rc.rectangle(x, y, width, height, options);
+
+  const iconShape = shapeSvg.insert(() => iconNode, ':first-child');
+
+  if (node.icon) {
+    const iconElem = shapeSvg.append('g');
+    iconElem.html(
+      `<g>${await getIconSVG(node.icon, { height: iconSize, fallbackPrefix: '' })}</g>`
+    );
+    const iconBBox = iconElem.node().getBBox();
+    const iconWidth = iconBBox.width;
+    const iconHeight = iconBBox.height;
+    iconElem.attr(
+      'transform',
+      `translate(${-iconWidth / 2},${topLabel ? height / 2 - iconHeight - halfPadding + bbox.height / 2 : -height / 2 + halfPadding - bbox.height / 2})`
+    );
+  }
+
+  label.attr(
+    'transform',
+    `translate(${-width / 2 + width / 2 - bbox.width / 2},${topLabel ? -height / 2 - 5 - bbox.height / 2 : height / 2 - bbox.height / 2})`
+  );
+
+  iconShape.attr('transform', `translate(${0},${topLabel ? bbox.height / 2 : -bbox.height / 2})`);
+
+  if (cssStyles && node.look !== 'handDrawn') {
+    iconShape.selectAll('path').attr('style', cssStyles);
+  }
+
+  if (nodeStyles && node.look !== 'handDrawn') {
+    iconShape.selectAll('path').attr('style', nodeStyles);
+  }
+
+  updateNodeBounds(node, shapeSvg);
+
+  node.intersect = function (point) {
+    log.info('iconSquare intersect', node, point);
+    if (!node.label) {
+      return intersect.rect(node, point);
+    }
+    const dx = node.x ?? 0;
+    const dy = node.y ?? 0;
+    const nodeWidth = node.width ?? 0;
+    const nodeHeight = node.height ?? 0;
+
+    if (topLabel) {
+      const points = [
+        { x: dx - nodeWidth / 2, y: dy - nodeHeight / 2 - bbox.height / 2 },
+        { x: dx + nodeWidth / 2, y: dy - nodeHeight / 2 - bbox.height / 2 },
+        { x: dx + nodeWidth / 2, y: dy - nodeHeight / 2 + bbox.height - bbox.height / 2 },
+        {
+          x: dx + nodeWidth / 2 - (bbox.width - width) / 2,
+          y: dy - nodeHeight / 2 + bbox.height - bbox.height / 2,
+        },
+        {
+          x: dx + nodeWidth / 2 - (bbox.width - width) / 2,
+          y: dy + nodeHeight / 2 - bbox.height / 2,
+        },
+        {
+          x: dx + nodeWidth / 2 - (bbox.width - width) / 2 - width,
+          y: dy + nodeHeight / 2 - bbox.height / 2,
+        },
+        {
+          x: dx + nodeWidth / 2 - (bbox.width - width) / 2 - width,
+          y: dy - nodeHeight / 2 + bbox.height - bbox.height / 2,
+        },
+        { x: dx - nodeWidth / 2, y: dy - nodeHeight / 2 + bbox.height - bbox.height / 2 },
+      ];
+      const pos = intersect.polygon(node, points, point);
+      return pos;
+    } else {
+      const points = [
+        { x: dx - nodeWidth / 2 + (bbox.width - width) / 2, y: dy - nodeHeight / 2 },
+        { x: dx - nodeWidth / 2 + (bbox.width - width) / 2 + width, y: dy - nodeHeight / 2 },
+        {
+          x: dx - nodeWidth / 2 + (bbox.width - width) / 2 + width,
+          y: dy - nodeHeight / 2 + height,
+        },
+        { x: dx + nodeWidth / 2, y: dy - nodeHeight / 2 + height },
+        { x: dx + nodeWidth / 2, y: dy + nodeHeight / 2 },
+        { x: dx - nodeWidth / 2, y: dy + nodeHeight / 2 },
+        { x: dx - nodeWidth / 2, y: dy + nodeHeight / 2 - bbox.height },
+        { x: dx - nodeWidth / 2 + (bbox.width - width) / 2, y: dy + nodeHeight / 2 - bbox.height },
+      ];
+      const pos = intersect.polygon(node, points, point);
+      return pos;
+    }
+  };
+
+  return shapeSvg;
+};

packages/mermaid/src/rendering-util/rendering-elements/shapes/imageSquare.ts

@@ -0,0 +1,126 @@
+import { log } from '../../../logger.js';
+import { labelHelper, updateNodeBounds } from './util.js';
+import type { Node } from '../../types.js';
+import type { SVG } from '../../../diagram-api/types.js';
+import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
+import rough from 'roughjs';
+import intersect from '../intersect/index.js';
+import { createPathFromPoints } from './util.js';
+import { getConfig } from '../../../diagram-api/diagramAPI.js';
+
+export const imageSquare = async (parent: SVG, node: Node) => {
+  //image dimensions
+  const img = new Image();
+  img.src = node?.img ?? '';
+  await img.decode();
+
+  const imageNaturalWidth = Number(img.naturalWidth.toString().replace('px', ''));
+  const imageNaturalHeight = Number(img.naturalHeight.toString().replace('px', ''));
+
+  const defaultWidth = getConfig().flowchart?.wrappingWidth;
+  const imageWidth = Math.max(
+    node.label ? (defaultWidth ?? 0) : 0,
+    node?.assetWidth ?? imageNaturalWidth
+  );
+  const imageHeight = node?.assetHeight ?? imageNaturalHeight;
+
+  const imagePoints = [
+    { x: -imageWidth / 2, y: -imageHeight },
+    { x: imageWidth / 2, y: -imageHeight },
+    { x: imageWidth / 2, y: 0 },
+    { x: -imageWidth / 2, y: 0 },
+  ];
+
+  //label dimensions
+  const { labelStyles, nodeStyles } = styles2String(node);
+  node.labelStyle = labelStyles;
+
+  // const { shapeSvg, bbox, halfPadding, label } = await labelHelper(
+  //   parent,
+  //   node,
+  //   'icon-shape default'
+  // );
+
+  const { cssStyles } = node;
+  // const defaultHeight = bbox.height;
+  // node.height = Math.max(node.height ?? 0, node.label ? (defaultHeight ?? 0) : 0, imageHeight);
+  const labelWidth = Math.max(node.width ?? 0, node.label ? (defaultWidth ?? 0) : 0, imageWidth);
+  node.width = node.label ? labelWidth : 0;
+  const { shapeSvg, bbox, label } = await labelHelper(parent, node, 'image-shape default');
+
+  // const width = Math.max(bbox.width + (node.padding ?? 0), node?.width ?? 0);
+  const height = Math.max(bbox.height + (node.padding ?? 0), node?.height ?? 0);
+  const labelHeight = node.label ? height : 0;
+
+  const imagePosition = node?.pos ?? 'b';
+
+  const labelPoints = [
+    { x: -labelWidth / 2, y: 0 },
+    { x: labelWidth / 2, y: 0 },
+    { x: labelWidth / 2, y: labelHeight },
+    { x: -labelWidth / 2, y: labelHeight },
+  ];
+
+  // @ts-ignore - rough is not typed
+  const rc = rough.svg(shapeSvg);
+  const options = userNodeOverrides(node, {});
+
+  if (node.look !== 'handDrawn') {
+    options.roughness = 0;
+    options.fillStyle = 'solid';
+  }
+
+  const imagePath = createPathFromPoints(imagePoints);
+  const imagePathNode = rc.path(imagePath, options);
+
+  const linePath = createPathFromPoints(labelPoints);
+  const lineNode = rc.path(linePath, { ...options });
+
+  const imageShape = shapeSvg.insert(() => lineNode, ':first-child').attr('opacity', 0);
+  imageShape.insert(() => imagePathNode, ':first-child');
+
+  imageShape.attr('transform', `translate(${0},${(imageHeight - labelHeight) / 2})`);
+
+  // Image operations
+  if (node.img) {
+    const image = shapeSvg.append('image');
+
+    // Set the image attributes
+    image.attr('href', node.img);
+    image.attr('width', imageWidth);
+    image.attr('height', imageHeight);
+    image.attr('preserveAspectRatio', 'none');
+
+    const yPos =
+      imagePosition === 'b' ? -imageHeight / 2 - labelHeight / 2 : (-imageHeight + labelHeight) / 2;
+    image.attr('transform', `translate(${-imageWidth / 2}, ${yPos})`);
+  }
+
+  if (cssStyles && node.look !== 'handDrawn') {
+    imageShape.selectAll('path').attr('style', cssStyles);
+  }
+
+  if (nodeStyles && node.look !== 'handDrawn') {
+    imageShape.selectAll('path').attr('style', nodeStyles);
+  }
+
+  const yPos =
+    imagePosition === 'b'
+      ? (imageHeight + labelHeight) / 2 - bbox.height - (bbox.y - (bbox.top ?? 0))
+      : -(imageHeight + labelHeight) / 2 + (node?.padding ?? 0) / 2 - (bbox.y - (bbox.top ?? 0));
+
+  label.attr('transform', `translate(${-bbox.width / 2 - (bbox.x - (bbox.left ?? 0))},${yPos})`);
+
+  updateNodeBounds(node, imageShape);
+
+  node.intersect = function (point) {
+    log.info('imageSquare intersect', node, point);
+
+    const combinedPoints = [...imagePoints, ...labelPoints];
+
+    const pos = intersect.polygon(node, combinedPoints, point);
+    return pos;
+  };
+
+  return shapeSvg;
+};

packages/mermaid/src/rendering-util/rendering-elements/shapes/invertedTrapezoid.ts

@@ -1,10 +1,7 @@
 import { labelHelper, updateNodeBounds, getNodeClasses, createPathFromPoints } from './util.js';
 import intersect from '../intersect/index.js';
-import type { Node } from '$root/rendering-util/types.d.ts';
-import {
-  styles2String,
-  userNodeOverrides,
-} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
+import type { Node } from '../../types.js';
+import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 import { insertPolygonShape } from './insertPolygonShape.js';
 

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 '../../types.js';
 import { drawRect } from './drawRect.js';
 import { labelHelper, updateNodeBounds } from './util.js';
 import intersect from '../intersect/index.js';

packages/mermaid/src/rendering-util/rendering-elements/shapes/leanLeft.ts

@@ -1,10 +1,7 @@
 import { labelHelper, updateNodeBounds, getNodeClasses, createPathFromPoints } from './util.js';
 import intersect from '../intersect/index.js';
-import type { Node } from '$root/rendering-util/types.d.ts';
-import {
-  styles2String,
-  userNodeOverrides,
-} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
+import type { Node } from '../../types.js';
+import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 import { insertPolygonShape } from './insertPolygonShape.js';
 

packages/mermaid/src/rendering-util/rendering-elements/shapes/leanRight.ts

@@ -1,10 +1,7 @@
 import { labelHelper, updateNodeBounds, getNodeClasses, createPathFromPoints } from './util.js';
 import intersect from '../intersect/index.js';
-import type { Node } from '$root/rendering-util/types.d.ts';
-import {
-  styles2String,
-  userNodeOverrides,
-} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
+import type { Node } from '../../types.js';
+import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 import { insertPolygonShape } from './insertPolygonShape.js';
 

packages/mermaid/src/rendering-util/rendering-elements/shapes/lightningBolt.ts

@@ -1,11 +1,8 @@
-import { log } from '$root/logger.js';
+import { log } from '../../../logger.js';
 import { getNodeClasses, updateNodeBounds } from './util.js';
-import type { Node } from '$root/rendering-util/types.d.ts';
-import type { SVG } from '$root/diagram-api/types.js';
-import {
-  styles2String,
-  userNodeOverrides,
-} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
+import type { Node } from '../../types.d.ts';
+import type { SVG } from '../../../diagram-api/types.js';
+import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 import intersect from '../intersect/index.js';
 import { createPathFromPoints } from './util.js';

packages/mermaid/src/rendering-util/rendering-elements/shapes/linedCylinder.ts

@@ -1,6 +1,6 @@
 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 '../../types.d.ts';
 import rough from 'roughjs';
 import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 

packages/mermaid/src/rendering-util/rendering-elements/shapes/linedWaveEdgedRect.ts

@@ -6,7 +6,7 @@ import {
   createPathFromPoints,
 } from './util.js';
 import intersect from '../intersect/index.js';
-import type { Node } from '$root/rendering-util/types.d.ts';
+import type { Node } from '../../types.d.ts';
 import rough from 'roughjs';
 import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 

packages/mermaid/src/rendering-util/rendering-elements/shapes/multiRect.ts

@@ -1,9 +1,6 @@
 import { labelHelper, getNodeClasses, updateNodeBounds, createPathFromPoints } from './util.js';
-import type { Node } from '$root/rendering-util/types.d.ts';
-import {
-  styles2String,
-  userNodeOverrides,
-} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
+import type { Node } from '../../types.d.ts';
+import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 import intersect from '../intersect/index.js';
 

packages/mermaid/src/rendering-util/rendering-elements/shapes/multiWaveEdgedRectangle.ts

@@ -6,7 +6,7 @@ import {
   generateFullSineWavePoints,
 } from './util.js';
 import intersect from '../intersect/index.js';
-import type { Node } from '$root/rendering-util/types.d.ts';
+import type { Node } from '../../types.d.ts';
 import rough from 'roughjs';
 import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 

packages/mermaid/src/rendering-util/rendering-elements/shapes/note.ts

@@ -1,7 +1,7 @@
-import { log } from '$root/logger.js';
+import { log } from '../../../logger.js';
 import { getNodeClasses, labelHelper, updateNodeBounds } from './util.js';
 import intersect from '../intersect/index.js';
-import type { Node } from '$root/rendering-util/types.d.ts';
+import type { Node } from '../../types.js';
 import rough from 'roughjs';
 import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 

packages/mermaid/src/rendering-util/rendering-elements/shapes/question.ts

@@ -1,11 +1,8 @@
-import { log } from '$root/logger.js';
+import { log } from '../../../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 {
-  styles2String,
-  userNodeOverrides,
-} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
+import type { Node } from '../../types.js';
+import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 import { insertPolygonShape } from './insertPolygonShape.js';
 

packages/mermaid/src/rendering-util/rendering-elements/shapes/rectLeftInvArrow.ts

@@ -1,10 +1,7 @@
 import { labelHelper, updateNodeBounds, getNodeClasses, createPathFromPoints } from './util.js';
 import intersect from '../intersect/index.js';
-import type { Node } from '$root/rendering-util/types.d.ts';
-import {
-  styles2String,
-  userNodeOverrides,
-} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
+import type { Node } from '../../types.js';
+import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 
 export const rect_left_inv_arrow = async (

packages/mermaid/src/rendering-util/rendering-elements/shapes/rectWithTitle.ts

@@ -1,17 +1,14 @@
-import type { Node } from '$root/rendering-util/types.d.ts';
+import type { Node } from '../../types.js';
 import { select } from 'd3';
-import { evaluate } from '$root/diagrams/common/common.js';
+import { evaluate } from '../../../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';
+import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
-import { getConfig } from '$root/diagram-api/diagramAPI.js';
+import { getConfig } from '../../../diagram-api/diagramAPI.js';
 import { createRoundedRectPathD } from './roundedRectPath.js';
-import { log } from '$root/logger.js';
+import { log } from '../../../logger.js';
 
 export const rectWithTitle = async (parent: SVGElement, node: Node) => {
   const { labelStyles, nodeStyles } = styles2String(node);

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 '../../types.js';
 import { drawRect } from './drawRect.js';
 
 export const roundedRect = async (parent: SVGAElement, node: Node) => {

packages/mermaid/src/rendering-util/rendering-elements/shapes/shadedProcess.ts

@@ -1,10 +1,7 @@
 import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
 import intersect from '../intersect/index.js';
-import type { Node } from '$root/rendering-util/types.d.ts';
-import {
-  styles2String,
-  userNodeOverrides,
-} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
+import type { Node } from '../../types.d.ts';
+import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 
 export const shadedProcess = async (parent: SVGAElement, node: Node) => {

packages/mermaid/src/rendering-util/rendering-elements/shapes/slopedRect.ts

@@ -1,10 +1,7 @@
 import { labelHelper, updateNodeBounds, getNodeClasses, createPathFromPoints } from './util.js';
 import intersect from '../intersect/index.js';
-import type { Node } from '$root/rendering-util/types.d.ts';
-import {
-  styles2String,
-  userNodeOverrides,
-} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
+import type { Node } from '../../types.d.ts';
+import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 
 export const slopedRect = async (parent: SVGAElement, node: Node) => {

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 '../../types.js';
 import { drawRect } from './drawRect.js';
 
 export const squareRect = async (parent: SVGAElement, node: Node) => {

packages/mermaid/src/rendering-util/rendering-elements/shapes/stadium.ts

@@ -1,10 +1,7 @@
 import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
 import intersect from '../intersect/index.js';
-import type { Node } from '$root/rendering-util/types.d.ts';
-import {
-  styles2String,
-  userNodeOverrides,
-} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
+import type { Node } from '../../types.js';
+import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 import { createRoundedRectPathD } from './roundedRectPath.js';
 

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 '../../types.js';
 import { drawRect } from './drawRect.js';
 
 export const state = async (parent: SVGAElement, node: Node) => {

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 '../../types.js';
+import type { SVG } from '../../../diagram-api/types.js';
 import rough from 'roughjs';
 import { solidStateFill, styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
-import { getConfig } from '$root/diagram-api/diagramAPI.js';
+import { getConfig } from '../../../diagram-api/diagramAPI.js';
 
 export const stateEnd = (parent: SVG, node: Node) => {
   const { labelStyles, nodeStyles } = styles2String(node);

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 '../../types.js';
+import type { SVG } from '../../../diagram-api/types.js';
 import rough from 'roughjs';
 import { solidStateFill } from './handDrawnShapeStyles.js';
-import { getConfig } from '$root/diagram-api/diagramAPI.js';
+import { getConfig } from '../../../diagram-api/diagramAPI.js';
 
 export const stateStart = (parent: SVG, node: Node) => {
   const { themeVariables } = getConfig();

packages/mermaid/src/rendering-util/rendering-elements/shapes/subroutine.ts

@@ -1,10 +1,7 @@
 import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
 import intersect from '../intersect/index.js';
-import type { Node } from '$root/rendering-util/types.d.ts';
-import {
-  styles2String,
-  userNodeOverrides,
-} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
+import type { Node } from '../../types.js';
+import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 import { insertPolygonShape } from './insertPolygonShape.js';
 

packages/mermaid/src/rendering-util/rendering-elements/shapes/taggedRect.ts

@@ -1,9 +1,6 @@
 import { labelHelper, getNodeClasses, updateNodeBounds, createPathFromPoints } from './util.js';
-import type { Node } from '$root/rendering-util/types.d.ts';
-import {
-  styles2String,
-  userNodeOverrides,
-} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
+import type { Node } from '../../types.d.ts';
+import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 import intersect from '../intersect/index.js';
 

packages/mermaid/src/rendering-util/rendering-elements/shapes/taggedWaveEdgedRectangle.ts

@@ -6,7 +6,7 @@ import {
   createPathFromPoints,
 } from './util.js';
 import intersect from '../intersect/index.js';
-import type { Node } from '$root/rendering-util/types.d.ts';
+import type { Node } from '../../types.d.ts';
 import rough from 'roughjs';
 import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 

packages/mermaid/src/rendering-util/rendering-elements/shapes/text.ts

@@ -1,7 +1,7 @@
 import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
 import intersect from '../intersect/index.js';
-import type { Node } from '$root/rendering-util/types.d.ts';
-import { styles2String } from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
+import type { Node } from '../../types.d.ts';
+import { styles2String } from './handDrawnShapeStyles.js';
 
 export async function text(parent: SVGAElement, node: Node): Promise<SVGAElement> {
   const { labelStyles, nodeStyles } = styles2String(node);

packages/mermaid/src/rendering-util/rendering-elements/shapes/tiltedCylinder.ts

@@ -1,9 +1,6 @@
 import { labelHelper, getNodeClasses, updateNodeBounds } from './util.js';
-import type { Node } from '$root/rendering-util/types.d.ts';
-import {
-  styles2String,
-  userNodeOverrides,
-} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
+import type { Node } from '../../types.d.ts';
+import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 import intersect from '../intersect/index.js';
 

packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoid.ts

@@ -1,10 +1,7 @@
 import { labelHelper, updateNodeBounds, getNodeClasses, createPathFromPoints } from './util.js';
 import intersect from '../intersect/index.js';
-import type { Node } from '$root/rendering-util/types.d.ts';
-import {
-  styles2String,
-  userNodeOverrides,
-} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
+import type { Node } from '../../types.js';
+import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 import { insertPolygonShape } from './insertPolygonShape.js';
 

packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoidalPentagon.ts

@@ -1,10 +1,7 @@
 import { labelHelper, updateNodeBounds, getNodeClasses, createPathFromPoints } from './util.js';
 import intersect from '../intersect/index.js';
-import type { Node } from '$root/rendering-util/types.d.ts';
-import {
-  styles2String,
-  userNodeOverrides,
-} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
+import type { Node } from '../../types.d.ts';
+import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 
 export const trapezoidalPentagon = async (parent: SVGAElement, node: Node) => {

packages/mermaid/src/rendering-util/rendering-elements/shapes/triangle.ts

@@ -1,15 +1,12 @@
-import { log } from '$root/logger.js';
+import { log } from '../../../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 {
-  styles2String,
-  userNodeOverrides,
-} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
+import type { Node } from '../../types.d.ts';
+import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 import { createPathFromPoints } from './util.js';
-import { evaluate } from '$root/diagrams/common/common.js';
-import { getConfig } from '$root/diagram-api/diagramAPI.js';
+import { evaluate } from '../../../diagrams/common/common.js';
+import { getConfig } from '../../../diagram-api/diagramAPI.js';
 
 export const triangle = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => {
   const { labelStyles, nodeStyles } = styles2String(node);

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 '../../createText.js';
+import { getConfig } from '../../../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 '../../../diagrams/common/common.js';
+import { decodeEntities } from '../../../utils.js';
 
 export const labelHelper = async (parent, node, _classes) => {
   let cssClasses;
@@ -36,6 +36,7 @@ export const labelHelper = async (parent, node, _classes) => {
     width: node.width || getConfig().flowchart.wrappingWidth,
     cssClasses: 'markdown-node-label',
     style: node.labelStyle,
+    addSvgBackground: !!node.icon || !!node.img,
   });
   // Get the size of the label
   let bbox = text.getBBox();

packages/mermaid/src/rendering-util/rendering-elements/shapes/waveEdgedRectangle.ts

@@ -6,7 +6,7 @@ import {
   createPathFromPoints,
 } from './util.js';
 import intersect from '../intersect/index.js';
-import type { Node } from '$root/rendering-util/types.d.ts';
+import type { Node } from '../../types.d.ts';
 import rough from 'roughjs';
 import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 

packages/mermaid/src/rendering-util/rendering-elements/shapes/waveRectangle.ts

@@ -6,11 +6,8 @@ import {
   generateFullSineWavePoints,
 } from './util.js';
 import intersect from '../intersect/index.js';
-import type { Node } from '$root/rendering-util/types.d.ts';
-import {
-  styles2String,
-  userNodeOverrides,
-} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
+import type { Node } from '../../types.d.ts';
+import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 
 export const waveRectangle = async (parent: SVGAElement, node: Node) => {

packages/mermaid/src/rendering-util/rendering-elements/shapes/windowPane.ts

@@ -1,9 +1,6 @@
 import { labelHelper, getNodeClasses, updateNodeBounds, createPathFromPoints } from './util.js';
-import type { Node } from '$root/rendering-util/types.d.ts';
-import {
-  styles2String,
-  userNodeOverrides,
-} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
+import type { Node } from '../../types.d.ts';
+import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 import intersect from '../intersect/index.js';
 

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 '../setupGraphViewbox.js';
+import type { SVG } from '../diagram-api/types.js';
+import { log } from '../logger.js';
 
 export const setupViewPortForSVG = (
   svg: SVG,

packages/mermaid/src/rendering-util/types.ts

@@ -1,5 +1,5 @@
 export type MarkdownWordType = 'normal' | 'strong' | 'em';
-import type { MermaidConfig } from '../../dist/config.type';
+import type { MermaidConfig } from '../config.type.js';
 export interface MarkdownWord {
   content: string;
   type: MarkdownWordType;
@@ -9,7 +9,7 @@ export type MarkdownLine = MarkdownWord[];
 export type CheckFitFunction = (text: MarkdownLine) => boolean;
 
 // Common properties for any node in the system
-interface Node {
+export interface Node {
   id: string;
   label?: string;
   description?: string[];
@@ -38,7 +38,6 @@ interface Node {
   tooltip?: string;
   padding?: number; //REMOVE?, use from LayoutData.config - Keep, this could be shape specific
   shape?: string;
-  tooltip?: string;
   isGroup: boolean;
   width?: number;
   height?: number;
@@ -65,10 +64,15 @@ interface Node {
   y?: number;
 
   look?: string;
+  icon?: string;
+  pos?: 't' | 'b';
+  img?: string;
+  assetWidth?: number;
+  assetHeight?: number;
 }
 
 // Common properties for any edge in the system
-interface Edge {
+export interface Edge {
   id: string;
   label?: string;
   classes?: string;
@@ -98,7 +102,7 @@ interface Edge {
   look?: string;
 }
 
-interface RectOptions {
+export interface RectOptions {
   rx: number;
   ry: number;
   labelPaddingX: number;
@@ -107,7 +111,7 @@ interface RectOptions {
 }
 
 // Extending the Node interface for specific types if needed
-interface ClassDiagramNode extends Node {
+export interface ClassDiagramNode extends Node {
   memberData: any; // Specific property for class diagram nodes
 }
 

packages/mermaid/src/types.ts

@@ -1,7 +1,15 @@
 export interface NodeMetaData {
   shape?: string;
   label?: string;
+  icon?: string;
+  form?: string;
+  pos?: 't' | 'b';
+  img?: string;
+  w?: string;
+  h?: string;
 }
+import type { MermaidConfig } from './config.type.js';
+
 export interface Point {
   x: number;
   y: number;
@@ -52,6 +60,10 @@ export interface ParseResult {
    * The diagram type, e.g. 'flowchart', 'sequence', etc.
    */
   diagramType: string;
+  /**
+   * The config passed as YAML frontmatter or directives
+   */
+  config: MermaidConfig;
 }
 // This makes it clear that we're working with a d3 selected element of some kind, even though it's hard to specify the exact type.
 export type D3Element = any;

packages/mermaid/tsconfig.json

@@ -3,11 +3,7 @@
   "compilerOptions": {
     "rootDir": "./src",
     "outDir": "./dist",
-    "types": ["vitest/importMeta", "vitest/globals"],
-    "baseUrl": ".", // This must be set if "paths" is set
-    "paths": {
-      "$root/*": ["src/*"]
-    }
+    "types": ["vitest/importMeta", "vitest/globals"]
   },
   "include": [
     "./src/**/*.ts",