Merge branch 'knsv/new-shapes' of https://github.com/mermaid-js/mermaid into saurabh/image-shape

2025-08-31 22:26:53 +02:00 · 2024-09-09 22:43:08 +05:30
parent edb99c2842 a601d3bccf
commit 06aa72ec16
103 changed files with 2131 additions and 411 deletions
--- a/.changeset/rude-meals-invite.md
+++ b/.changeset/rude-meals-invite.md
@@ -0,0 +1,5 @@
+---
+'mermaid': minor
+---
+
+New Flowchart Shapes (with new syntax)
--- a/.changeset/slow-goats-act.md
+++ b/.changeset/slow-goats-act.md
@@ -0,0 +1,5 @@
+---
+'@mermaid-js/layout-elk': patch
+---
+
+chore: fix render types
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -38,6 +38,10 @@ jobs:
        run: |
          pnpm exec vitest run ./packages/mermaid/src/diagrams/gantt/ganttDb.spec.ts --coverage

+      - name: Verify out-of-tree build with TypeScript
+        run: |
+          pnpm test:check:tsc
+
      - name: Upload Coverage to Codecov
        uses: codecov/codecov-action@e28ff129e5465c2c0dcc6f003fc735cb6ae0c673 # v4.5.0
        # Run step only pushes to develop and pull_requests
--- a/cypress/integration/rendering/flowchart-shape-alias.spec.ts
+++ b/cypress/integration/rendering/flowchart-shape-alias.spec.ts
@@ -0,0 +1,134 @@
+import { imgSnapshotTest } from '../../helpers/util.ts';
+
+const aliasSet1 = ['process', 'rect', 'proc', 'rectangle'] as const;
+
+const aliasSet2 = ['event', 'rounded'] as const;
+
+const aliasSet3 = ['stadium', 'pill', 'term'] as const;
+
+const aliasSet4 = ['fr', 'subproc', 'framed-rectangle', 'subroutine'] as const;
+
+const aliasSet5 = ['db', 'cylinder', 'cyl'] as const;
+
+const aliasSet6 = ['diam', 'decision', 'diamond'] as const;
+
+const aliasSet7 = ['hex', 'hexagon', 'prepare'] as const;
+
+const aliasSet8 = ['l-r', 'lean-right', 'in-out'] as const;
+
+const aliasSet9 = ['l-l', 'lean-left', 'out-in'] as const;
+
+const aliasSet10 = ['trap-b', 'trapezoid-bottom', 'priority', 'trapezoid'] as const;
+
+const aliasSet11 = ['trap-t', 'trapezoid-top', 'manual', 'inv-trapezoid'] as const;
+
+const aliasSet12 = ['dc', 'double-circle'] as const;
+
+const aliasSet13 = ['notched-rect', 'card', 'notch-rect'] as const;
+
+const aliasSet14 = ['lined-rect', 'lined-proc', 'shaded-proc'] as const;
+
+const aliasSet15 = ['sm-circ', 'small-circle', 'start'] as const;
+
+const aliasSet16 = ['framed-circle', 'stop'] as const;
+
+const aliasSet17 = ['fork', 'join', 'long-rect'] as const;
+
+const aliasSet18 = ['brace', 'comment', 'brace-l'] as const;
+
+const aliasSet19 = ['bolt', 'com-link', 'lightning-bolt'] as const;
+
+const aliasSet20 = ['we-rect', 'doc', 'wave-edge-rect', 'wave-edged-rectangle'] as const;
+
+const aliasSet21 = ['delay', 'half-rounded-rect'] as const;
+
+const aliasSet22 = ['t-cyl', 'das', 'tilted-cylinder'] as const;
+
+const aliasSet23 = ['l-cyl', 'disk', 'lined-cylinder'] as const;
+
+const aliasSet24 = ['cur-trap', 'disp', 'display', 'curved-trapezoid'] as const;
+
+const aliasSet25 = ['div-rect', 'div-proc', 'divided-rectangle'] as const;
+
+const aliasSet26 = ['sm-tri', 'extract', 'small-triangle', 'triangle'] as const;
+
+const aliasSet27 = ['win-pane', 'internal-storage', 'window-pane'] as const;
+
+const aliasSet28 = ['fc', 'junction', 'filled-circle'] as const;
+
+const aliasSet29 = ['lin-we-rect', 'lin-doc', 'lined-wave-edged-rect'] as const;
+
+const aliasSet30 = ['notch-pent', 'loop-limit', 'notched-pentagon'] as const;
+
+const aliasSet31 = ['flip-tri', 'manual-file', 'flipped-triangle'] as const;
+
+const aliasSet32 = ['sloped-rect', 'manual-input', 'sloped-rectangle'] as const;
+
+const aliasSet33 = ['mul-we-rect', 'mul-doc', 'multi-wave-edged-rectangle'] as const;
+
+const aliasSet34 = ['mul-rect', 'mul-proc', 'multi-rect'] as const;
+
+const aliasSet35 = ['flag', 'paper-tape'] as const;
+
+const aliasSet36 = ['bt-rect', 'stored-data', 'bow-tie-rect'] as const;
+
+const aliasSet37 = ['cross-circle', 'summary', 'crossed-circle'] as const;
+
+const aliasSet38 = ['tag-we-rect', 'tag-doc', 'tagged-wave-edged-rectangle'] as const;
+
+const aliasSet39 = ['tag-rect', 'tag-proc', 'tagged-rect'] as const;
+
+// Aggregate all alias sets into a single array
+const aliasSets = [
+  aliasSet1,
+  aliasSet2,
+  aliasSet3,
+  aliasSet4,
+  aliasSet5,
+  aliasSet6,
+  aliasSet7,
+  aliasSet8,
+  aliasSet9,
+  aliasSet10,
+  aliasSet11,
+  aliasSet12,
+  aliasSet13,
+  aliasSet14,
+  aliasSet15,
+  aliasSet16,
+  aliasSet17,
+  aliasSet18,
+  aliasSet19,
+  aliasSet20,
+  aliasSet21,
+  aliasSet22,
+  aliasSet23,
+  aliasSet24,
+  aliasSet25,
+  aliasSet26,
+  aliasSet27,
+  aliasSet28,
+  aliasSet29,
+  aliasSet30,
+  aliasSet31,
+  aliasSet32,
+  aliasSet33,
+  aliasSet34,
+  aliasSet35,
+  aliasSet36,
+  aliasSet37,
+  aliasSet38,
+  aliasSet39,
+] as const;
+
+aliasSets.forEach((aliasSet) => {
+  describe(`Test ${aliasSet.join(',')} `, () => {
+    it(`All ${aliasSet.join(',')} should render same shape`, () => {
+      let flowchartCode = `flowchart \n`;
+      aliasSet.forEach((alias, index) => {
+        flowchartCode += ` n${index}@{ shape: ${alias}, label: "${alias}" }@\n`;
+      });
+      imgSnapshotTest(flowchartCode);
+    });
+  });
+});
--- a/cypress/integration/rendering/newShapes.spec.ts
+++ b/cypress/integration/rendering/newShapes.spec.ts
@@ -4,45 +4,53 @@ const looks = ['classic'] as const;
 const directions = ['TB'] as const;
 const newShapesSet1 = [
  'triangle',
-  'slopedRect',
-  'tiltedCylinder',
-  'flippedTriangle',
+  'sloped-rect',
+  'tilted-cylinder',
+  'flipped-triangle',
  'hourglass',
 ] as const;
 const newShapesSet2 = [
-  'taggedRect',
-  'multiRect',
-  'lightningBolt',
-  'filledCircle',
-  'windowPane',
+  'tagged-rect',
+  'multi-rect',
+  'lightning-bolt',
+  'filled-circle',
+  'window-pane',
 ] as const;

 const newShapesSet3 = [
-  'curvedTrapezoid',
-  'bowTieRect',
-  'waveEdgedRectangle',
-  'dividedRectangle',
-  'crossedCircle',
+  'curved-trapezoid',
+  'bow-tie-rect',
+  'wave-edge-rect',
+  'divided-rectangle',
+  'crossed-circle',
 ] as const;

 const newShapesSet4 = [
-  'waveRectangle',
-  'trapezoidalPentagon',
-  'linedCylinder',
-  'multiWaveEdgedRectangle',
-  'halfRoundedRectangle',
+  'wave-rectangle',
+  'notched-pentagon',
+  'lined-cylinder',
+  'multi-wave-edged-rectangle',
+  'half-rounded-rect',
 ] as const;

 const newShapesSet5 = [
-  'linedWaveEdgedRect',
-  'taggedWaveEdgedRectangle',
-  'curlyBraceLeft',
-  'curvedTrapezoid',
-  'waveRectangle',
+  'lined-wave-edged-rect',
+  'tagged-wave-edged-rectangle',
+  'brace-l',
+  'curved-trapezoid',
+  'wave-rectangle',
 ] as const;

+const newShapesSet6 = ['brace-r', 'braces'] as const;
 // Aggregate all shape sets into a single array
-const newShapesSets = [newShapesSet2] as const;
+const newShapesSets = [
+  newShapesSet1,
+  newShapesSet2,
+  newShapesSet3,
+  newShapesSet4,
+  newShapesSet5,
+  newShapesSet6,
+];

 looks.forEach((look) => {
  directions.forEach((direction) => {
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -83,7 +83,8 @@
  </head>

  <body>
-    <pre id="diagram" class="mermaid">
+    <div class="flex">
+      <pre id="diagram" class="mermaid2">
 ---
  title: hello2
  config:
@@ -242,7 +243,183 @@ stateDiagram-v2



+</pre>
+
+      <pre id="diagram" class="mermaid2">
+---
+config:
+  look: neo
+---
+flowchart RL
+    subgraph "   "
+        A5@{ shape: manual-file, label: "a label"}@
+        B5@{ shape: manual-input, label: "a label" }@
+        C5@{ shape: mul-doc, label: "a label" }@
+        D5@{ shape: mul-proc, label: "a label" }@
+        E5@{ shape: paper-tape, label: "a label" }@
+        B3@{ shape: das, label: "a label" }@
+        C3@{ shape: disk, label: "a label" }@
+        D4@{ shape: lin-doc, label: "a label" }@
+        E4@{ shape: loop-limit, label: "a label" }@
+    end
+    subgraph "   "
+        B6@{ shape: summary, label: "a label" }@
+        C6@{ shape: tag-we-rect, label: "a label" }@
+        D6@{ shape: tag-rect, label: "a label" }@
+        A2@{ shape: fork}@
+        B2@{ shape: hourglass }@
+        C2@{ shape: comment, label: "I am a comment" }@
+        D2@{ shape: bolt }@
+        D3@{ shape: disp, label: "a label" }@
+        C4@{ shape: junction, label: "a label" }@
+        A4@{ shape: extract, label: "a label"}@
+        B52[a fr]@{ shape: fr }@
+    end
+    subgraph " "
+        A1@{ shape: text, label: This is a textblock}@
+        B1@{ shape: card, label: "a label" }@
+        C1@{ shape: lined-proc, label: "a label" }@
+        D1@{ shape: start, label: "a label" }@
+        E1@{ shape: stop, label: "a label" }@
+        E2@{ shape: doc, label: "a label" }@
+        A6@{ shape: stored-data, label: "a label"}@
+        A3@{ shape: delay, label: "a label" }@
+        E3@{ shape: div-proc, label: "a label" }@
+        B4[a label]@{ shape: win-pane }@
+    end
      </pre>
+      <pre id="diagram" class="mermaid2">
+---
+  title: hello2
+  config:
+    look: handDrawn
+    elk:
+      <!-- nodePlacementStrategy: SIMPLE -->
+---
+%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
+flowchart TD
+
+    A([Start]) -->|go to booking page| B("select
+    ISBS booking no")
+    A --> QQ{cancel booking}
+    A --> RR{no show}
+    A --> SS{change booking}
+    B -->C(wmpay_request_payment.request_type= 'partial',
+ wmpay_request_payment.status= 'paid',
+ pos_booking.booking_status= ‘partial’ and 'full_deposit')
+ style C text-align:left
+    C -->D{manage booking}
+
+    D -->|cancel|E[ระบบแสดงช่องให้กรอกเหตุผล]
+    E -->F{กดปุ่ม 'cancel' หรือไม่}
+    F -->|Yes|G[ระบบบันทึกค่าใหม่
+    และไม่สามารถแก้ไขข้อมูลได้]
+    F -->|No|H[กดปุ่ม 'close']
+    H -->|ระบบไม่เปลี่ยนแปลงข้อมูล|Z
+    G -->|ระบบส่งข้อมูล|I[(POS_database)]
+    I -->|pos_booking.booking_status='cancel'|Z([End])
+
+
+    D -->|no show|J[ระบบแสดงช่องให้กรอกเหตุผล]
+    J -->K{กดปุ่ม 'noshow' หรือไม่}
+    K -->|Yes|L[ระบบสร้างใบเสร็จอัตโนมัติ
+    Product_id: 439,
+    ItemName: no show]
+     style L text-align:left
+
+     K -->|No|O[กดปุ่ม 'close']
+     O -->|ระบบไม่เปลี่ยนแปลงข้อมูล|Z
+    L -->M[ระบบบันทึกค่าใหม่]
+    M -->|ระบบส่งข้อมูล|N[(POS_database)]
+    N -->|pos_booking.booking_status=‘noshow’|Z
+
+
+
+</pre>
+      <pre id="diagram" class="mermaid2">
+---
+  title: hello2
+  config:
+    look: handDrawn
+    layout: dagre
+    elk:
+        nodePlacementStrategy: BRANDES_KOEPF
+---
+flowchart
+  A --> A
+  subgraph A
+    B --> B
+    subgraph B
+      C
+    end
+  end
+
+
+</pre
+      >
+      <pre id="diagram" class="mermaid2">
+---
+config:
+  look: handdrawn
+  flowchart:
+    htmlLabels: true
+---
+flowchart
+      A[I am a long text, where do I go??? handdrawn - true]
+</pre
+      >
+    </div>
+    <div class="flex">
+      <pre id="diagram" class="mermaid2">
+---
+config:
+  flowchart:
+    htmlLabels: false
+---
+flowchart
+      A[I am a long text, where do I go??? classic - false]
+</pre
+      >
+      <pre id="diagram" class="mermaid2">
+---
+config:
+  flowchart:
+    htmlLabels: true
+---
+flowchart
+      A[I am a long text, where do I go??? classic - true]
+</pre
+      >
+    </div>
+    <pre id="diagram2" class="mermaid2">
+flowchart LR
+    id1(Start)-->id2(Stop)
+    style id1 fill:#f9f,stroke:#333,stroke-width:4px
+    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
+
+
+    </pre>
+
+    <pre id="diagram3" class="mermaid2">
+      flowchart LR
+    A:::foo & B:::bar --> C:::foobar
+    classDef foo stroke:#f00
+    classDef bar stroke:#0f0
+    classDef ash color:red
+    class C ash
+    style C stroke:#00f, fill:black
+
+    </pre>
+
+    <pre id="diagram4" class="mermaid2">
+      stateDiagram
+    A:::foo
+    B:::bar --> C:::foobar
+    classDef foo stroke:#f00
+    classDef bar stroke:#0f0
+    style C stroke:#00f, fill:black, color:white
+
+    </pre>

    <script type="module">
      import mermaid from './mermaid.esm.mjs';
--- a/docs/adding_new_shape/Readme.md
+++ b/docs/adding_new_shape/Readme.md
@@ -101,7 +101,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
--- a/docs/config/setup/interfaces/mermaid.LayoutData.md
+++ b/docs/config/setup/interfaces/mermaid.LayoutData.md
@@ -20,7 +20,7 @@

 #### Defined in

-[packages/mermaid/src/rendering-util/types.ts:117](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L117)
+[packages/mermaid/src/rendering-util/types.ts:122](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L122)

 ---

@@ -30,7 +30,7 @@

 #### Defined in

-[packages/mermaid/src/rendering-util/types.ts:116](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L116)
+[packages/mermaid/src/rendering-util/types.ts:121](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L121)

 ---

@@ -40,4 +40,4 @@

 #### Defined in

-[packages/mermaid/src/rendering-util/types.ts:115](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L115)
+[packages/mermaid/src/rendering-util/types.ts:120](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L120)
--- a/docs/config/setup/interfaces/mermaid.ParseOptions.md
+++ b/docs/config/setup/interfaces/mermaid.ParseOptions.md
@@ -19,4 +19,4 @@ The `parseError` function will not be called.

 #### Defined in

-[packages/mermaid/src/types.ts:47](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L47)
+[packages/mermaid/src/types.ts:55](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L55)
--- a/docs/config/setup/interfaces/mermaid.ParseResult.md
+++ b/docs/config/setup/interfaces/mermaid.ParseResult.md
@@ -10,6 +10,18 @@

 ## Properties

+### config
+
+• **config**: [`MermaidConfig`](mermaid.MermaidConfig.md)
+
+The config passed as YAML frontmatter or directives
+
+#### Defined in
+
+[packages/mermaid/src/types.ts:66](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L66)
+
+---
+
 ### diagramType

 • **diagramType**: `string`
@@ -18,4 +30,4 @@ The diagram type, e.g. 'flowchart', 'sequence', etc.

 #### Defined in

-[packages/mermaid/src/types.ts:54](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L54)
+[packages/mermaid/src/types.ts:62](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L62)
--- a/docs/config/setup/interfaces/mermaid.RenderResult.md
+++ b/docs/config/setup/interfaces/mermaid.RenderResult.md
@@ -39,7 +39,7 @@ bindFunctions?.(div); // To call bindFunctions only if it's present.

 #### Defined in

-[packages/mermaid/src/types.ts:77](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L77)
+[packages/mermaid/src/types.ts:89](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L89)

 ---

@@ -51,7 +51,7 @@ The diagram type, e.g. 'flowchart', 'sequence', etc.

 #### Defined in

-[packages/mermaid/src/types.ts:67](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L67)
+[packages/mermaid/src/types.ts:79](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L79)

 ---

@@ -63,4 +63,4 @@ The svg code for the rendered graph.

 #### Defined in

-[packages/mermaid/src/types.ts:63](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L63)
+[packages/mermaid/src/types.ts:75](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L75)
--- a/docs/syntax/flowchart.md
+++ b/docs/syntax/flowchart.md
@@ -298,6 +298,634 @@ flowchart TD
    id1(((This is the text in the circle)))
 ```

+## Expanded Node Shapes in Mermaid Flowcharts
+
+Mermaid introduces 30 new shapes to enhance the flexibility and precision of flowchart creation. These new shapes provide more options to represent processes, decisions, events, data storage visually, and other elements within your flowcharts, improving clarity and semantic meaning.
+
+New Syntax for Shape Definition
+
+Mermaid now supports a general syntax for defining shape types to accommodate the growing number of shapes. This syntax allows you to assign specific shapes to nodes using a clear and flexible format:
+
+```
+A@{ shape: rect }@
+```
+
+This syntax creates a node A as a rectangle. It renders in the same way as `A["A"]`, or `A`.
+
+### Complete List of New Shapes
+
+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`, `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
+
+Here’s an example flowchart that utilizes some of the newly introduced shapes:
+
+```mermaid-example
+flowchart RL
+    A5@{ shape: manual-file, label: "File Handling"}@
+    B5@{ shape: manual-input, label: "User Input"}@
+    C5@{ shape: mul-doc, label: "Multiple Documents"}@
+    D5@{ shape: mul-proc, label: "Process Automation"}@
+    E5@{ shape: paper-tape, label: "Paper Records"}@
+```
+
+```mermaid
+flowchart RL
+    A5@{ shape: manual-file, label: "File Handling"}@
+    B5@{ shape: manual-input, label: "User Input"}@
+    C5@{ shape: mul-doc, label: "Multiple Documents"}@
+    D5@{ shape: mul-proc, label: "Process Automation"}@
+    E5@{ shape: paper-tape, label: "Paper Records"}@
+```
+
+### Process
+
+```mermaid-example
+flowchart TD
+    A@{ shape: rect, label: "This is a process" }@
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: rect, label: "This is a process" }@
+```
+
+### Event
+
+```mermaid-example
+flowchart TD
+    A@{ shape: rounded, label: "This is an event" }@
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: rounded, label: "This is an event" }@
+```
+
+### Terminal Point (Stadium)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: stadium, label: "Terminal point" }@
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: stadium, label: "Terminal point" }@
+```
+
+### Subprocess
+
+```mermaid-example
+flowchart TD
+    A@{ shape: fr, label: "This is a subprocess" }@
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: fr, label: "This is a subprocess" }@
+```
+
+### Database (Cylinder)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: cyl, label: "Database" }@
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: cyl, label: "Database" }@
+```
+
+### Start (Circle)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: circle, label: "Start" }@
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: circle, label: "Start" }@
+```
+
+### Odd
+
+```mermaid-example
+flowchart TD
+    A@{ shape: odd, label: "Odd shape" }@
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: odd, label: "Odd shape" }@
+```
+
+### Decision (Diamond)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: diamond, label: "Decision" }@
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: diamond, label: "Decision" }@
+```
+
+### Prepare Conditional (Hexagon)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: hex, label: "Prepare conditional" }@
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: hex, label: "Prepare conditional" }@
+```
+
+### Data Input/Output (Lean Right)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: l-r, label: "Input/Output" }@
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: l-r, label: "Input/Output" }@
+```
+
+### Data Input/Output (Lean Left)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: l-l, label: "Output/Input" }@
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: l-l, label: "Output/Input" }@
+```
+
+### Priority Action (Trapezoid Base Bottom)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: trap-b, label: "Priority action" }@
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: trap-b, label: "Priority action" }@
+```
+
+### Manual Operation (Trapezoid Base Top)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: trap-t, label: "Manual operation" }@
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: trap-t, label: "Manual operation" }@
+```
+
+### Stop (Double Circle)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: dc, label: "Stop" }@
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: dc, label: "Stop" }@
+```
+
+### Text Block
+
+```mermaid-example
+flowchart TD
+    A@{ shape: text, label: "This is a text block" }@
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: text, label: "This is a text block" }@
+```
+
+### Card (Notched Rectangle)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: notched-rect, label: "Card" }@
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: notched-rect, label: "Card" }@
+```
+
+### Lined/Shaded Process
+
+```mermaid-example
+flowchart TD
+    A@{ shape: lined-rect, label: "Lined process" }@
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: lined-rect, label: "Lined process" }@
+```
+
+### Start (Small Circle)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: sm-circ, label: "Small start" }@
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: sm-circ, label: "Small start" }@
+```
+
+### Stop (Framed Circle)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: framed-circle, label: "Stop" }@
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: framed-circle, label: "Stop" }@
+```
+
+### Fork/Join (Long Rectangle)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: fork, label: "Fork or Join" }@
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: fork, label: "Fork or Join" }@
+```
+
+### Collate (Hourglass)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: hourglass, label: "Collate" }@
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: hourglass, label: "Collate" }@
+```
+
+### Comment (Curly Brace)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: comment, label: "Comment" }@
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: comment, label: "Comment" }@
+```
+
+### Comment Right (Curly Brace Right)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: brace-r, label: "Comment" }@
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: brace-r, label: "Comment" }@
+```
+
+### Comment with braces on both sides
+
+```mermaid-example
+flowchart TD
+    A@{ shape: braces, label: "Comment" }@
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: braces, label: "Comment" }@
+```
+
+### Com Link (Lightning Bolt)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: bolt, label: "Communication link" }@
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: bolt, label: "Communication link" }@
+```
+
+### Document (Wave-Edged Rectangle)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: we-rect, label: "Document" }@
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: we-rect, label: "Document" }@
+```
+
+### Delay (Half-Rounded Rectangle)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: delay, label: "Delay" }@
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: delay, label: "Delay" }@
+```
+
+### Direct Access Storage (Tilted Cylinder)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: t-cyl, label: "Direct access storage" }@
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: t-cyl, label: "Direct access storage" }@
+```
+
+### Disk Storage (Lined Cylinder)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: l-cyl, label: "Disk storage" }@
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: l-cyl, label: "Disk storage" }@
+```
+
+### Display (Curved Trapezoid)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: cur-trap, label: "Display" }@
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: cur-trap, label: "Display" }@
+```
+
+### Divided Process (Divided Rectangle)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: div-rect, label: "Divided process" }@
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: div-rect, label: "Divided process" }@
+```
+
+### Extract (Small Triangle)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: sm-tri, label: "Extract" }@
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: sm-tri, label: "Extract" }@
+```
+
+### Internal Storage (Window Pane)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: win-pane, label: "Internal storage" }@
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: win-pane, label: "Internal storage" }@
+```
+
+### Junction (Filled Circle)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: fc, label: "Junction" }@
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: fc, label: "Junction" }@
+```
+
+### Lined Document (Lined Wave-Edged Rectangle)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: lin-we-rect, label: "Lined document" }@
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: lin-we-rect, label: "Lined document" }@
+```
+
+### Loop Limit (Trapezoidal Pentagon)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: not-pent, label: "Loop limit" }@
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: not-pent, label: "Loop limit" }@
+```
+
+### Manual File (Flipped Triangle)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: flip-tria, label: "Manual file" }@
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: flip-tria, label: "Manual file" }@
+```
+
+### Manual Input (Sloped Rectangle)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: sloped-rect, label: "Manual input" }@
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: sloped-rect, label: "Manual input" }@
+```
+
+### Multi-Document (Multi-Wave-Edged Rectangle)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: mul-we-rect, label: "Multiple documents" }@
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: mul-we-rect, label: "Multiple documents" }@
+```
+
+### Multi-Process (Multi-Rect)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: mul-rect, label: "Multiple processes" }@
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: mul-rect, label: "Multiple processes" }@
+```
+
+### Paper Tape (Flag)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: flag, label: "Paper tape" }@
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: flag, label: "Paper tape" }@
+```
+
+### Stored Data (Bow Tie Rectangle)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: bt-rect, label: "Stored data" }@
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: bt-rect, label: "Stored data" }@
+```
+
+### Summary (Crossed Circle)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: cross-circle, label: "Summary" }@
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: cross-circle, label: "Summary" }@
+```
+
+### Tagged Document (Tagged Wave-Edged Rectangle)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: tag-we-rect, label: "Tagged document" }@
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: tag-we-rect, label: "Tagged document" }@
+```
+
+### Tagged Process (Tagged Rectangle)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: tag-rect, label: "Tagged process" }@
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: tag-rect, label: "Tagged process" }@
+```
+
 ## Links between nodes

 Nodes can be connected with links/edges. It is possible to have different types of links or attach a text string to a link.
--- a/package.json
+++ b/package.json
@@ -42,6 +42,7 @@
    "test": "pnpm lint && vitest run",
    "test:watch": "vitest --watch",
    "test:coverage": "vitest --coverage",
+    "test:check:tsc": "tsx scripts/tsc-check.ts",
    "prepare": "husky && pnpm build",
    "pre-commit": "lint-staged"
  },
--- a/packages/mermaid/CHANGELOG.md
+++ b/packages/mermaid/CHANGELOG.md
@@ -1,5 +1,15 @@
 # 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
--- a/packages/mermaid/package.json
+++ b/packages/mermaid/package.json
@@ -1,6 +1,6 @@
 {
  "name": "mermaid",
-  "version": "11.1.1",
+  "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",
--- a/packages/mermaid/src/diagrams/architecture/architectureIcons.ts
+++ b/packages/mermaid/src/diagrams/architecture/architectureIcons.ts
@@ -1,4 +1,4 @@
-import { unknownIcon } from '$root/rendering-util/icons.js';
+import { unknownIcon } from '../../rendering-util/icons.js';
 import type { IconifyJSON } from '@iconify/types';

 const wrapIcon = (icon: string) => {
--- a/packages/mermaid/src/diagrams/architecture/architectureRenderer.ts
+++ b/packages/mermaid/src/diagrams/architecture/architectureRenderer.ts
@@ -1,4 +1,4 @@
-import { registerIconPacks } from '$root/rendering-util/icons.js';
+import { registerIconPacks } from '../../rendering-util/icons.js';
 import type { Position } from 'cytoscape';
 import cytoscape from 'cytoscape';
 import type { FcoseLayoutOptions } from 'cytoscape-fcose';
--- a/packages/mermaid/src/diagrams/architecture/svgDraw.ts
+++ b/packages/mermaid/src/diagrams/architecture/svgDraw.ts
@@ -1,4 +1,4 @@
-import { getIconSVG } from '$root/rendering-util/icons.js';
+import { getIconSVG } from '../../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})
              `
              );
--- a/packages/mermaid/src/diagrams/flowchart/flowDb.ts
+++ b/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;
--- a/packages/mermaid/src/docs/adding_new_shape/Readme.md
+++ b/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
--- a/packages/mermaid/src/docs/syntax/flowchart.md
+++ b/packages/mermaid/src/docs/syntax/flowchart.md
@@ -194,6 +194,400 @@ flowchart TD
    id1(((This is the text in the circle)))
 ```

+## Expanded Node Shapes in Mermaid Flowcharts
+
+Mermaid introduces 30 new shapes to enhance the flexibility and precision of flowchart creation. These new shapes provide more options to represent processes, decisions, events, data storage visually, and other elements within your flowcharts, improving clarity and semantic meaning.
+
+New Syntax for Shape Definition
+
+Mermaid now supports a general syntax for defining shape types to accommodate the growing number of shapes. This syntax allows you to assign specific shapes to nodes using a clear and flexible format:
+
+```
+A@{ shape: rect }@
+```
+
+This syntax creates a node A as a rectangle. It renders in the same way as `A["A"]`, or `A`.
+
+### Complete List of New Shapes
+
+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`, `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
+
+Here’s an example flowchart that utilizes some of the newly introduced shapes:
+
+```mermaid-example
+flowchart RL
+    A5@{ shape: manual-file, label: "File Handling"}@
+    B5@{ shape: manual-input, label: "User Input"}@
+    C5@{ shape: mul-doc, label: "Multiple Documents"}@
+    D5@{ shape: mul-proc, label: "Process Automation"}@
+    E5@{ shape: paper-tape, label: "Paper Records"}@
+```
+
+### Process
+
+```mermaid-example
+flowchart TD
+    A@{ shape: rect, label: "This is a process" }@
+```
+
+### Event
+
+```mermaid-example
+flowchart TD
+    A@{ shape: rounded, label: "This is an event" }@
+```
+
+### Terminal Point (Stadium)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: stadium, label: "Terminal point" }@
+```
+
+### Subprocess
+
+```mermaid-example
+flowchart TD
+    A@{ shape: fr, label: "This is a subprocess" }@
+```
+
+### Database (Cylinder)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: cyl, label: "Database" }@
+```
+
+### Start (Circle)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: circle, label: "Start" }@
+```
+
+### Odd
+
+```mermaid-example
+flowchart TD
+    A@{ shape: odd, label: "Odd shape" }@
+```
+
+### Decision (Diamond)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: diamond, label: "Decision" }@
+```
+
+### Prepare Conditional (Hexagon)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: hex, label: "Prepare conditional" }@
+```
+
+### Data Input/Output (Lean Right)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: l-r, label: "Input/Output" }@
+```
+
+### Data Input/Output (Lean Left)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: l-l, label: "Output/Input" }@
+```
+
+### Priority Action (Trapezoid Base Bottom)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: trap-b, label: "Priority action" }@
+```
+
+### Manual Operation (Trapezoid Base Top)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: trap-t, label: "Manual operation" }@
+```
+
+### Stop (Double Circle)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: dc, label: "Stop" }@
+```
+
+### Text Block
+
+```mermaid-example
+flowchart TD
+    A@{ shape: text, label: "This is a text block" }@
+```
+
+### Card (Notched Rectangle)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: notched-rect, label: "Card" }@
+```
+
+### Lined/Shaded Process
+
+```mermaid-example
+flowchart TD
+    A@{ shape: lined-rect, label: "Lined process" }@
+```
+
+### Start (Small Circle)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: sm-circ, label: "Small start" }@
+```
+
+### Stop (Framed Circle)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: framed-circle, label: "Stop" }@
+```
+
+### Fork/Join (Long Rectangle)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: fork, label: "Fork or Join" }@
+```
+
+### Collate (Hourglass)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: hourglass, label: "Collate" }@
+```
+
+### Comment (Curly Brace)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: comment, label: "Comment" }@
+```
+
+### Comment Right (Curly Brace Right)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: brace-r, label: "Comment" }@
+```
+
+### Comment with braces on both sides
+
+```mermaid-example
+flowchart TD
+    A@{ shape: braces, label: "Comment" }@
+```
+
+### Com Link (Lightning Bolt)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: bolt, label: "Communication link" }@
+```
+
+### Document (Wave-Edged Rectangle)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: we-rect, label: "Document" }@
+```
+
+### Delay (Half-Rounded Rectangle)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: delay, label: "Delay" }@
+```
+
+### Direct Access Storage (Tilted Cylinder)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: t-cyl, label: "Direct access storage" }@
+```
+
+### Disk Storage (Lined Cylinder)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: l-cyl, label: "Disk storage" }@
+```
+
+### Display (Curved Trapezoid)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: cur-trap, label: "Display" }@
+```
+
+### Divided Process (Divided Rectangle)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: div-rect, label: "Divided process" }@
+```
+
+### Extract (Small Triangle)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: sm-tri, label: "Extract" }@
+```
+
+### Internal Storage (Window Pane)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: win-pane, label: "Internal storage" }@
+```
+
+### Junction (Filled Circle)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: fc, label: "Junction" }@
+```
+
+### Lined Document (Lined Wave-Edged Rectangle)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: lin-we-rect, label: "Lined document" }@
+```
+
+### Loop Limit (Trapezoidal Pentagon)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: not-pent, label: "Loop limit" }@
+```
+
+### Manual File (Flipped Triangle)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: flip-tria, label: "Manual file" }@
+```
+
+### Manual Input (Sloped Rectangle)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: sloped-rect, label: "Manual input" }@
+```
+
+### Multi-Document (Multi-Wave-Edged Rectangle)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: mul-we-rect, label: "Multiple documents" }@
+```
+
+### Multi-Process (Multi-Rect)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: mul-rect, label: "Multiple processes" }@
+```
+
+### Paper Tape (Flag)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: flag, label: "Paper tape" }@
+```
+
+### Stored Data (Bow Tie Rectangle)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: bt-rect, label: "Stored data" }@
+```
+
+### Summary (Crossed Circle)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: cross-circle, label: "Summary" }@
+```
+
+### Tagged Document (Tagged Wave-Edged Rectangle)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: tag-we-rect, label: "Tagged document" }@
+```
+
+### Tagged Process (Tagged Rectangle)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: tag-rect, label: "Tagged process" }@
+```
+
 ## Links between nodes

 Nodes can be connected with links/edges. It is possible to have different types of links or attach a text string to a link.
--- a/packages/mermaid/src/mermaid.ts
+++ b/packages/mermaid/src/mermaid.ts
@@ -2,7 +2,7 @@
 * Web page integration module for the mermaid framework. It uses the mermaidAPI for mermaid
 * functionality and to render the diagrams to svg code!
 */
-import { registerIconPacks } from '$root/rendering-util/icons.js';
+import { registerIconPacks } from './rendering-util/icons.js';
 import { dedent } from 'ts-dedent';
 import type { MermaidConfig } from './config.type.js';
 import { detectType, registerLazyLoadedDiagrams } from './diagram-api/detectType.js';
--- a/packages/mermaid/src/mermaidAPI.spec.ts
+++ b/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",
+          }
+        `);
    });
  });

--- a/packages/mermaid/src/mermaidAPI.ts
+++ b/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;
--- a/packages/mermaid/src/preprocess.ts
+++ b/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 };
 }
--- a/packages/mermaid/src/rendering-util/createText.ts
+++ b/packages/mermaid/src/rendering-util/createText.ts
@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 // @ts-nocheck TODO: Fix types
-import { getConfig } from '$root/diagram-api/diagramAPI.js';
-import common, { hasKatex, renderKatex } from '$root/diagrams/common/common.js';
+import { getConfig } from '../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';
--- a/packages/mermaid/src/rendering-util/icons.ts
+++ b/packages/mermaid/src/rendering-util/icons.ts
@@ -1,4 +1,4 @@
-import { log } from '$root/logger.js';
+import { log } from '../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';
--- a/packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js
+++ b/packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js
@@ -23,7 +23,7 @@ import {
  insertEdge,
  clear as clearEdges,
 } from '../../rendering-elements/edges.js';
-import { log } from '$root/logger.js';
+import { log } from '../../../logger.js';
 import { getSubGraphTitleMargins } from '../../../utils/subGraphTitleMargins.js';
 import { getConfig } from '../../../diagram-api/diagramAPI.js';

--- a/packages/mermaid/src/rendering-util/layout-algorithms/dagre/mermaid-graphlib.js
+++ b/packages/mermaid/src/rendering-util/layout-algorithms/dagre/mermaid-graphlib.js
@@ -1,5 +1,5 @@
 /** Decorates with functions required by mermaids dagre-wrapper. */
-import { log } from '$root/logger.js';
+import { log } from '../../../logger.js';
 import * as graphlib from 'dagre-d3-es/src/graphlib/index.js';
 import * as graphlibJson from 'dagre-d3-es/src/graphlib/json.js';

--- a/packages/mermaid/src/rendering-util/layout-algorithms/dagre/mermaid-graphlib.spec.js
+++ b/packages/mermaid/src/rendering-util/layout-algorithms/dagre/mermaid-graphlib.spec.js
@@ -6,7 +6,7 @@ import {
  extractDescendants,
  sortNodesByHierarchy,
 } from './mermaid-graphlib.js';
-import { setLogLevel, log } from '$root/logger.js';
+import { setLogLevel, log } from '../../../logger.js';

 describe('Graphlib decorations', () => {
  let g;
--- a/packages/mermaid/src/rendering-util/render.ts
+++ b/packages/mermaid/src/rendering-util/render.ts
@@ -1,7 +1,7 @@
-import type { SVG } from '$root/diagram-api/types.js';
-import type { InternalHelpers } from '$root/internals.js';
-import { internalHelpers } from '$root/internals.js';
-import { log } from '$root/logger.js';
+import type { SVG } from '../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 {
--- a/packages/mermaid/src/rendering-util/rendering-elements/clusters.js
+++ b/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);
--- a/packages/mermaid/src/rendering-util/rendering-elements/createLabel.js
+++ b/packages/mermaid/src/rendering-util/rendering-elements/createLabel.js
@@ -1,8 +1,8 @@
 import { select } from 'd3';
-import { log } from '$root/logger.js';
-import { getConfig } from '$root/diagram-api/diagramAPI.js';
-import common, { evaluate, renderKatex, hasKatex } from '$root/diagrams/common/common.js';
-import { decodeEntities } from '$root/utils.js';
+import { log } from '../../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
--- a/packages/mermaid/src/rendering-util/rendering-elements/edgeMarker.spec.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/edgeMarker.spec.ts
@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/unbound-method */
-import type { SVG } from '$root/diagram-api/types.js';
+import type { SVG } from '../../diagram-api/types.js';
 import type { Mocked } from 'vitest';
 import { addEdgeMarkers } from './edgeMarker.js';

--- a/packages/mermaid/src/rendering-util/rendering-elements/edgeMarker.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/edgeMarker.ts
@@ -1,6 +1,6 @@
-import type { SVG } from '$root/diagram-api/types.js';
-import { log } from '$root/logger.js';
-import type { EdgeData } from '$root/types.js';
+import type { SVG } from '../../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.
 *
--- a/packages/mermaid/src/rendering-util/rendering-elements/edges.js
+++ b/packages/mermaid/src/rendering-util/rendering-elements/edges.js
@@ -1,10 +1,10 @@
-import { getConfig } from '$root/diagram-api/diagramAPI.js';
-import { evaluate } from '$root/diagrams/common/common.js';
-import { log } from '$root/logger.js';
-import { createText } from '$root/rendering-util/createText.ts';
-import utils from '$root/utils.js';
-import { getLineFunctionsWithOffset } from '$root/utils/lineWithOffset.js';
-import { getSubGraphTitleMargins } from '$root/utils/subGraphTitleMargins.js';
+import { getConfig } from '../../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';
--- a/packages/mermaid/src/rendering-util/rendering-elements/markers.js
+++ b/packages/mermaid/src/rendering-util/rendering-elements/markers.js
@@ -1,5 +1,5 @@
 /** Setup arrow head and define the marker. The result is appended to the svg. */
-import { log } from '$root/logger.js';
+import { log } from '../../logger.js';

 // Only add the number of markers that the diagram needs
 const insertMarkers = (elem, markerArray, type, id) => {
--- a/packages/mermaid/src/rendering-util/rendering-elements/nodes.js
+++ b/packages/mermaid/src/rendering-util/rendering-elements/nodes.js
@@ -1,4 +1,4 @@
-import { log } from '$root/logger.js';
+import { log } from '../../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';
@@ -57,7 +57,7 @@ import { icon } from './shapes/icon.js';
 import { imageSquare } from './shapes/imageSquare.js';

 //Use these names as the left side to render shapes.
-const shapes = {
+export const shapes = {
  // States
  state,
  stateStart,
@@ -70,28 +70,26 @@ const shapes = {

  // Rectangles
  rectWithTitle,
-  rect: rectWithTitle,
-  process: rectWithTitle,
-  proc: rectWithTitle,
  roundedRect,
  rounded: roundedRect,
  event: roundedRect,
  squareRect,
+  rectangle: squareRect,
+  rect: squareRect,
+  process: squareRect,
+  proc: squareRect,
  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,
@@ -106,45 +104,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-circ': crossedCircle,
-  'cross-circ': 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,
@@ -154,61 +148,57 @@ 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-pen': 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-rect': 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,
  'notched-rect': card,
  'notch-rect': card,
-  lean_right,
+  'lean-right': lean_right,
+  lean_right: lean_right,
  'l-r': lean_right,
  'in-out': lean_right,
-  lean_left,
+  'lean-left': lean_left,
+  lean_left: lean_left,
  'l-l': lean_left,
  'out-in': lean_left,

  // Miscellaneous
  forkJoin,
+  'long-rect': forkJoin,
  fork: forkJoin,
  join: forkJoin,
  choice,
@@ -216,18 +206,19 @@ 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,
-  curlyBraces,
+  braces: curlyBraces,
  iconSquare,
  iconCircle,
  icon,
--- a/packages/mermaid/src/rendering-util/rendering-elements/nodes.spec.js
+++ b/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']);
+  });
+});
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/anchor.ts
+++ b/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> => {
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/bowTieRect.ts
+++ b/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(
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/card.ts
+++ b/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';
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/choice.ts
+++ b/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';
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/circle.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/circle.ts
@@ -1,11 +1,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> => {
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/crossedCircle.ts
+++ b/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';

--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraceLeft.ts
+++ b/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(
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraceRight.ts
+++ b/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(
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraces.ts
+++ b/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(
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/curvedTrapezoid.ts
+++ b/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(
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/cylinder.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/cylinder.ts
@@ -1,10 +1,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 = (
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/dividedRect.ts
+++ b/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) => {
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/document.ts
+++ b/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 = (
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/doubleCircle.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/doubleCircle.ts
@@ -1,11 +1,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> => {
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts
@@ -1,11 +1,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) => {
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/filledCircle.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/filledCircle.ts
@@ -1,13 +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 '../../../config.js';

 export const filledCircle = (parent: SVG, node: Node) => {
  const { labelStyles, nodeStyles } = styles2String(node);
@@ -22,20 +20,21 @@ export const filledCircle = (parent: SVG, node: Node) => {

  // @ts-ignore - rough is not typed
  const rc = rough.svg(shapeSvg);
-  const options = userNodeOverrides(node, {});
+  const { themeVariables } = getConfig();
+  const { nodeBorder } = themeVariables;
+  const options = userNodeOverrides(node, { fillStyle: 'solid' });

  if (node.look !== 'handDrawn') {
    options.roughness = 0;
-    options.fillStyle = 'solid';
  }

  const circleNode = rc.circle(0, 0, radius * 2, options);

  const filledCircle = shapeSvg.insert(() => circleNode, ':first-child');

-  // filledCircle.attr('class', 'basic label-container');
+  filledCircle.selectAll('path').attr('style', `fill: ${nodeBorder} !important;`);

-  if (cssStyles && node.look !== 'handDrawn') {
+  if (cssStyles && cssStyles.length > 0 && node.look !== 'handDrawn') {
    filledCircle.selectAll('path').attr('style', cssStyles);
  }

--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/flippedTriangle.ts
+++ b/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';

--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/forkJoin.ts
+++ b/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;
 };
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/halfRoundedRectangle.ts
+++ b/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) {
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.ts
@@ -1,5 +1,5 @@
-import { getConfig } from '$root/diagram-api/diagramAPI.js';
-import type { Node } from '$root/rendering-util/types.d.ts';
+import { getConfig } from '../../../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) => {
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/hexagon.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/hexagon.ts
@@ -1,10 +1,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';
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/hourglass.ts
+++ b/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) => {
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/icon.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/icon.ts
@@ -1,10 +1,10 @@
-import { log } from '$root/logger.js';
+import { log } from '../../../logger.js';
 import { getNodeClasses, labelHelper, 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 } 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 } from './handDrawnShapeStyles.js';
 import intersect from '../intersect/index.js';
-import { getIconSVG } from '$root/rendering-util/icons.js';
+import { getIconSVG } from '../../icons.js';

 export const icon = async (parent: SVG, node: Node) => {
  const { labelStyles, nodeStyles } = styles2String(node);
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts
@@ -1,14 +1,11 @@
-import { log } from '$root/logger.js';
+import { log } from '../../../logger.js';
 import { getNodeClasses, labelHelper, 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 { getIconSVG } from '$root/rendering-util/icons.js';
+import { getIconSVG } from '../../icons.js';

 export const iconCircle = async (parent: SVG, node: Node) => {
  const { labelStyles, nodeStyles } = styles2String(node);
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts
@@ -1,15 +1,11 @@
-import { log } from '$root/logger.js';
-import { getNodeClasses, labelHelper, 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 { log } from '../../../logger.js';
+import { createPathFromPoints, getNodeClasses, 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 { createPathFromPoints } from './util.js';
-import { getIconSVG } from '$root/rendering-util/icons.js';
+import { getIconSVG } from '../../icons.js';

 export const iconSquare = async (parent: SVG, node: Node) => {
  const { labelStyles, nodeStyles } = styles2String(node);
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/imageSquare.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/imageSquare.ts
@@ -1,11 +1,8 @@
-import { log } from '$root/logger.js';
+import { log } from '../../../logger.js';
 import { getNodeClasses, labelHelper, 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';
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/invertedTrapezoid.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/invertedTrapezoid.ts
@@ -1,10 +1,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';

--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/labelRect.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/labelRect.ts
@@ -1,4 +1,4 @@
-import type { Node, RectOptions } from '$root/rendering-util/types.d.ts';
+import type { Node, RectOptions } from '../../types.js';
 import { drawRect } from './drawRect.js';
 import { labelHelper, updateNodeBounds } from './util.js';
 import intersect from '../intersect/index.js';
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanLeft.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanLeft.ts
@@ -1,10 +1,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';

--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanRight.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanRight.ts
@@ -1,10 +1,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';

--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/lightningBolt.ts
+++ b/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';
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/linedCylinder.ts
+++ b/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';

--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/linedWaveEdgedRect.ts
+++ b/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';

--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/multiRect.ts
+++ b/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';

--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/multiWaveEdgedRectangle.ts
+++ b/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';

--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/note.ts
+++ b/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';

--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/question.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/question.ts
@@ -1,11 +1,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';

--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/rectLeftInvArrow.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/rectLeftInvArrow.ts
@@ -1,10 +1,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 (
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/rectWithTitle.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/rectWithTitle.ts
@@ -1,17 +1,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);
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/roundedRect.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/roundedRect.ts
@@ -1,4 +1,4 @@
-import type { Node, RectOptions } from '$root/rendering-util/types.d.ts';
+import type { Node, RectOptions } from '../../types.js';
 import { drawRect } from './drawRect.js';

 export const roundedRect = async (parent: SVGAElement, node: Node) => {
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/shadedProcess.ts
+++ b/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) => {
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/slopedRect.ts
+++ b/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) => {
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/squareRect.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/squareRect.ts
@@ -1,4 +1,4 @@
-import type { Node, RectOptions } from '$root/rendering-util/types.d.ts';
+import type { Node, RectOptions } from '../../types.js';
 import { drawRect } from './drawRect.js';

 export const squareRect = async (parent: SVGAElement, node: Node) => {
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stadium.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stadium.ts
@@ -1,10 +1,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';

--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/state.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/state.ts
@@ -1,4 +1,4 @@
-import type { Node, RectOptions } from '$root/rendering-util/types.d.ts';
+import type { Node, RectOptions } from '../../types.js';
 import { drawRect } from './drawRect.js';

 export const state = async (parent: SVGAElement, node: Node) => {
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateEnd.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateEnd.ts
@@ -1,10 +1,10 @@
 import { updateNodeBounds } from './util.js';
 import intersect from '../intersect/index.js';
-import type { Node } from '$root/rendering-util/types.d.ts';
-import type { SVG } from '$root/diagram-api/types.js';
+import type { Node } from '../../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);
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateStart.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateStart.ts
@@ -1,10 +1,10 @@
 import { updateNodeBounds } from './util.js';
 import intersect from '../intersect/index.js';
-import type { Node } from '$root/rendering-util/types.d.ts';
-import type { SVG } from '$root/diagram-api/types.js';
+import type { Node } from '../../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();
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/subroutine.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/subroutine.ts
@@ -1,10 +1,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';

--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/taggedRect.ts
+++ b/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';

--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/taggedWaveEdgedRectangle.ts
+++ b/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';

--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/text.ts
+++ b/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);
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/tiltedCylinder.ts
+++ b/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';

--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoid.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoid.ts
@@ -1,10 +1,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';

--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoidalPentagon.ts
+++ b/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) => {
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/triangle.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/triangle.ts
@@ -1,18 +1,18 @@
-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 '../../../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);
  node.labelStyle = labelStyles;
  const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
+  const useHtmlLabels = evaluate(getConfig().flowchart?.htmlLabels);

  const w = bbox.width + (node.padding ?? 0);
  const h = w + bbox.height;
@@ -55,7 +55,7 @@ export const triangle = async (parent: SVGAElement, node: Node): Promise<SVGAEle

  label.attr(
    'transform',
-    `translate(${-bbox.width / 2 - (bbox.x - (bbox.left ?? 0))}, ${h / 2 - (bbox.height + (node.padding ?? 0) / 2 - (bbox.y - (bbox.top ?? 0)))})`
+    `translate(${-bbox.width / 2 - (bbox.x - (bbox.left ?? 0))}, ${h / 2 - (bbox.height + (node.padding ?? 0) / (useHtmlLabels ? 2 : 1) - (bbox.y - (bbox.top ?? 0)))})`
  );

  node.intersect = function (point) {
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/util.js
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/util.js
@@ -1,8 +1,8 @@
-import { createText } from '$root/rendering-util/createText.ts';
-import { getConfig } from '$root/diagram-api/diagramAPI.js';
+import { createText } from '../../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;
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/waveEdgedRectangle.ts
+++ b/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';

--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/waveRectangle.ts
+++ b/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) => {
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/windowPane.ts
+++ b/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';

--- a/packages/mermaid/src/rendering-util/setupViewPortForSVG.ts
+++ b/packages/mermaid/src/rendering-util/setupViewPortForSVG.ts
@@ -1,6 +1,6 @@
-import { configureSvgSize } from '$root/setupGraphViewbox.js';
-import type { SVG } from '$root/diagram-api/types.js';
-import { log } from '$root/logger.js';
+import { configureSvgSize } from '../setupGraphViewbox.js';
+import type { SVG } from '../diagram-api/types.js';
+import { log } from '../logger.js';

 export const setupViewPortForSVG = (
  svg: SVG,
--- a/packages/mermaid/src/types.ts
+++ b/packages/mermaid/src/types.ts
@@ -8,6 +8,8 @@ export interface NodeMetaData {
  w?: string;
  h?: string;
 }
+import type { MermaidConfig } from './config.type.js';
+
 export interface Point {
  x: number;
  y: number;
@@ -58,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;
--- a/Show More
+++ b/Show More