chore: Refactor nodes.js to remove global state

Not keen on how it's currently run, open to suggestions on better ways.

.build/common.ts

@@ -1,3 +1,9 @@
+export interface PackageOptions {
+  name: string;
+  packageName: string;
+  file: string;
+}
+
 /**
  * Shared common options for both ESBuild and Vite
  */
@@ -27,4 +33,4 @@ export const packageOptions = {
     packageName: 'mermaid-layout-elk',
     file: 'layouts.ts',
   },
-} as const;
+} as const satisfies Record<string, PackageOptions>;

.esbuild/build.ts

@@ -8,7 +8,10 @@ import { defaultOptions, getBuildConfig } from './util.js';
 const shouldVisualize = process.argv.includes('--visualize');
 
 const buildPackage = async (entryName: keyof typeof packageOptions) => {
-  const commonOptions: MermaidBuildOptions = { ...defaultOptions, entryName } as const;
+  const commonOptions: MermaidBuildOptions = {
+    ...defaultOptions,
+    options: packageOptions[entryName],
+  } as const;
   const buildConfigs: MermaidBuildOptions[] = [
     // package.mjs
     { ...commonOptions },
@@ -40,7 +43,7 @@ const buildPackage = async (entryName: keyof typeof packageOptions) => {
         continue;
       }
       const fileName = Object.keys(metafile.outputs)
-        .find((file) => !file.includes('chunks') && file.endsWith('js'))
+        .find((file) => !file.includes('chunks') && file.endsWith('js'))!
         .replace('dist/', '');
       // Upload metafile into https://esbuild.github.io/analyze/
       await writeFile(`stats/${fileName}.meta.json`, JSON.stringify(metafile));

.esbuild/docs.ts

@@ -0,0 +1,34 @@
+import { execFileSync } from 'child_process';
+import { build } from 'esbuild';
+import { rm } from 'fs/promises';
+import { generateLangium } from '../.build/generateLangium.js';
+import type { MermaidBuildOptions } from './util.js';
+import { defaultOptions, getBuildConfig } from './util.js';
+
+const buildDocs = async () => {
+  const option: MermaidBuildOptions = {
+    ...defaultOptions,
+    options: {
+      file: 'rendering-util/rendering-elements/shapes.cli.ts',
+      name: 'mermaid-shapes',
+      packageName: 'mermaid',
+    },
+  } as const;
+
+  await build({ ...getBuildConfig(option), splitting: false, sourcemap: false });
+};
+
+const handler = (e) => {
+  // eslint-disable-next-line no-console
+  console.error(e);
+  process.exit(1);
+};
+
+const main = async () => {
+  await generateLangium();
+  await buildDocs().catch(handler);
+  execFileSync('node', ['packages/mermaid/dist/mermaid-shapes.esm.mjs']);
+  await rm('packages/mermaid/dist/mermaid-shapes.esm.mjs');
+};
+
+void main();

.esbuild/util.ts

@@ -3,7 +3,7 @@ import { fileURLToPath } from 'url';
 import type { BuildOptions } from 'esbuild';
 import { readFileSync } from 'fs';
 import jsonSchemaPlugin from './jsonSchemaPlugin.js';
-import { packageOptions } from '../.build/common.js';
+import type { PackageOptions } from '../.build/common.js';
 import { jisonPlugin } from './jisonPlugin.js';
 
 const __dirname = fileURLToPath(new URL('.', import.meta.url));
@@ -13,10 +13,10 @@ export interface MermaidBuildOptions extends BuildOptions {
   core: boolean;
   metafile: boolean;
   format: 'esm' | 'iife';
-  entryName: keyof typeof packageOptions;
+  options: PackageOptions;
 }
 
-export const defaultOptions: Omit<MermaidBuildOptions, 'entryName'> = {
+export const defaultOptions: Omit<MermaidBuildOptions, 'entryName' | 'options'> = {
   minify: false,
   metafile: false,
   core: false,
@@ -52,9 +52,14 @@ const getFileName = (fileName: string, { core, format, minify }: MermaidBuildOpt
 };
 
 export const getBuildConfig = (options: MermaidBuildOptions): BuildOptions => {
-  const { core, entryName, metafile, format, minify } = options;
+  const {
+    core,
+    metafile,
+    format,
+    minify,
+    options: { name, file, packageName },
+  } = options;
   const external: string[] = ['require', 'fs', 'path'];
-  const { name, file, packageName } = packageOptions[entryName];
   const outFileName = getFileName(name, options);
   const output: BuildOptions = buildOptions({
     absWorkingDir: resolve(__dirname, `../packages/${packageName}`),

docs/adding-new-shape.md

@@ -101,7 +101,7 @@ To add a new shape:
 - **Example**:
 
   ```typescript
-  import { Node, RenderOptions } from '../../types.d.ts';
+  import { Node, RenderOptions } from '../../types.ts';
 
   export const myNewShape = async (
     parent: SVGAElement,
@@ -117,7 +117,7 @@ To add a new shape:
 
 ### 2. Register the Shape
 
-- **Register the shape**: Add your shape to the `shapes` object in the main shapes module. This allows your shape to be recognized and used within the system.
+- **Register the shape**: Add your shape to the `shapes` object in the [main shapes module](../rendering-util/rendering-elements/shapes.ts). This allows your shape to be recognized and used within the system.
 
 - **Example**:
 
@@ -126,9 +126,14 @@ To add a new shape:
 
   const shapes = {
     ...,
-    'my-new-shape': myNewShape,
-    // Shortened alias (if any).
-    'm-nsh': myNewShape
+    {
+      semanticName: 'My Shape',
+      name: 'Shape Name',
+      shortName: '<short-name>',
+      description: '<Description for the shape>',
+      aliases: ['<alias-one>', '<al-on>', '<alias-two>', '<al-two>'],
+      handler: myNewShape,
+    },
   };
   ```
 

docs/syntax/flowchart.md

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

packages/mermaid/.gitignore

@@ -4,3 +4,4 @@ README.*
 src/docs/public/user-avatars/
 src/docs/.vitepress/cache
 src/docs/.vitepress/components.d.ts
+src/docs/syntax/shapesTable.md

packages/mermaid/package.json

@@ -35,7 +35,8 @@
     "clean": "rimraf dist",
     "dev": "pnpm -w dev",
     "docs:code": "typedoc src/defaultConfig.ts src/config.ts src/mermaid.ts && prettier --write ./src/docs/config/setup",
-    "docs:build": "rimraf ../../docs && pnpm docs:spellcheck && pnpm docs:code && tsx scripts/docs.cli.mts",
+    "docs:build": "rimraf ../../docs && pnpm docs:shapes && pnpm docs:spellcheck && pnpm docs:code && tsx scripts/docs.cli.mts",
+    "docs:shapes": "cd ../.. && tsx .esbuild/docs.ts",
     "docs:verify": "pnpm docs:spellcheck && pnpm docs:code && tsx scripts/docs.cli.mts --verify",
     "docs:pre:vitepress": "pnpm --filter ./src/docs prefetch && rimraf src/vitepress && pnpm docs:code && tsx scripts/docs.cli.mts --vitepress && pnpm --filter ./src/vitepress install --no-frozen-lockfile --ignore-scripts",
     "docs:build:vitepress": "pnpm docs:pre:vitepress && (cd src/vitepress && pnpm run build) && cpy --flat src/docs/landing/ ./src/vitepress/.vitepress/dist/landing",

packages/mermaid/src/docs/adding-new-shape.md

@@ -95,7 +95,7 @@ To add a new shape:
 - **Example**:
 
   ```typescript
-  import { Node, RenderOptions } from '../../types.d.ts';
+  import { Node, RenderOptions } from '../../types.ts';
 
   export const myNewShape = async (
     parent: SVGAElement,
@@ -111,7 +111,7 @@ To add a new shape:
 
 ### 2. Register the Shape
 
-- **Register the shape**: Add your shape to the `shapes` object in the main shapes module. This allows your shape to be recognized and used within the system.
+- **Register the shape**: Add your shape to the `shapes` object in the [main shapes module](../rendering-util/rendering-elements/shapes.ts). This allows your shape to be recognized and used within the system.
 
 - **Example**:
 
@@ -120,9 +120,14 @@ To add a new shape:
 
   const shapes = {
     ...,
-    'my-new-shape': myNewShape,
-    // Shortened alias (if any).
-    'm-nsh': myNewShape
+    {
+      semanticName: 'My Shape',
+      name: 'Shape Name',
+      shortName: '<short-name>',
+      description: '<Description for the shape>',
+      aliases: ['<alias-one>', '<al-on>', '<alias-two>', '<al-two>'],
+      handler: myNewShape,
+    },
   };
   ```
 

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

@@ -212,53 +212,8 @@ This syntax creates a node A as a rectangle. It renders in the same way as `A["A
 
 Below is a comprehensive list of the newly introduced shapes and their corresponding semantic meanings, short names, and aliases:
 
-| **Semantic Name**                     | **Shape Name**         | **Short Name** | **Description**                | **Alias Supported**                                            |
-| ------------------------------------- | ---------------------- | -------------- | ------------------------------ | -------------------------------------------------------------- |
-| **Process**                           | Rectangle              | `rect`         | Standard process shape         | `proc`, `process`, `rectangle`                                 |
-| **Event**                             | Rounded Rectangle      | `rounded`      | Represents an event            | `event`                                                        |
-| **Terminal Point**                    | Stadium                | `stadium`      | Terminal point                 | `terminal`, `pill`                                             |
-| **Subprocess**                        | Framed Rectangle       | `fr-rect`      | Subprocess                     | `subprocess`,`subproc`, `framed-rectangle`, `subroutine`       |
-| **Database**                          | Cylinder               | `cyl`          | Database storage               | `db`, `database`, `cylinder`                                   |
-| **Start**                             | Circle                 | `circle`       | Starting point                 | `circ`                                                         |
-| **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             | `lean-r`       | Represents input or output     | `lean-right`, `in-out`                                         |
-| **Data Input/Output**                 | Lean Left              | `lean-l`       | Represents output or input     | `lean-left`, `out-in`                                          |
-| **Priority Action**                   | Trapezoid Base Bottom  | `trap-b`       | Priority action                | `priority`, `trapezoid-bottom`                                 |
-| **Manual Operation**                  | Trapezoid Base Top     | `trap-t`       | Represents a manual task       | `manual`, `trapezoid-top`                                      |
-| **Stop**                              | Double Circle          | `dbl-circ`     | Represents a stop point        | `double-circle`                                                |
-| **Text Block**                        | Text Block             | `text`         | Text block                     | -                                                              |
-| **Card**                              | Notched Rectangle      | `notch-rect`   | Represents a card              | `card`, `notched-rectangle`                                    |
-| **Lined/Shaded Process**              | Lined Rectangle        | `lin-rect`     | Lined process shape            | `lined-rectangle`,`lined-process`, `lin-proc`,`shaded-process` |
-| **Start**                             | Small Circle           | `sm-circ`      | Small starting point           | `start`, `small-circle`                                        |
-| **Stop**                              | Framed Circle          | `fr-circ`      | Stop point                     | `stop`, `framed-circle`                                        |
-| **Fork/Join**                         | Filled Rectangle       | `fork`         | Fork or join in process flow   | `join`                                                         |
-| **Collate**                           | Hourglass              | `hourglass`    | Represents a collate operation | `hourglass`                                                    |
-| **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**                          | Document               | `doc`          | Represents a document          | `doc`, `document`                                              |
-| **Delay**                             | Half-Rounded Rectangle | `delay`        | Represents a delay             | `half-rounded-rectangle`                                       |
-| **Direct Access Storage**             | Horizontal Cylinder    | `h-cyl`        | Direct access storage          | `das`, `horizontal-cylinder`                                   |
-| **Disk Storage**                      | Lined Cylinder         | `lin-cyl`      | Disk storage                   | `disk`, `lined-cylinder`                                       |
-| **Display**                           | Curved Trapezoid       | `curv-trap`    | Represents a display           | `curved-trapezoid`, `display`                                  |
-| **Divided Process**                   | Divided Rectangle      | `div-rect`     | Divided process shape          | `div-proc`, `divided-rectangle`, `divided-process`             |
-| **Extract**                           | Triangle               | `tri`          | Extraction process             | `extract`, `triangle`                                          |
-| **Internal Storage**                  | Window Pane            | `win-pane`     | Internal storage               | `internal-storage`, `window-pane`                              |
-| **Junction**                          | Filled Circle          | `f-circ`       | Junction point                 | `junction`, `filled-circle`                                    |
-| **Lined Document**                    | Lined Document         | `lin-doc`      | Lined document                 | `lined-document`                                               |
-| **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       | `sl-rect`      | Manual input step              | `manual-input`, `sloped-rectangle`                             |
-| **Multi-Document**                    | Stacked Document       | `docs`         | Multiple documents             | `documents`, `st-doc`, `stacked-document`                      |
-| **Multi-Process**                     | Stacked Rectangle      | `st-rect`      | Multiple processes             | `procs`, `processes`, `stacked-rectangle`                      |
-| **Paper Tape**                        | Flag                   | `flag`         | Paper tape                     | `paper-tape`                                                   |
-| **Stored Data**                       | Bow Tie Rectangle      | `bow-rect`     | Stored data                    | `stored-data`, `bow-tie-rectangle`                             |
-| **Summary**                           | Crossed Circle         | `cross-circ`   | Summary                        | `summary`, `crossed-circle`                                    |
-| **Tagged Document**                   | Tagged Document        | `tag-doc`      | Tagged document                | `tag-doc`, `tagged-document`                                   |
-| **Tagged Process**                    | Tagged Rectangle       | `tag-rect`     | Tagged process                 | `tagged-rectangle`,`tag-proc`, `tagged-process`                |
+<!-- Will be auto generated with `pnpm --filter mermaid docs:shapes` -->
+<!--@include: ./shapesTable.md -->
 
 ### Example Flowchart with New Shapes
 

packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js

@@ -10,12 +10,7 @@ import {
   findNonClusterChild,
   sortNodesByHierarchy,
 } from './mermaid-graphlib.js';
-import {
-  insertNode,
-  positionNode,
-  clear as clearNodes,
-  setNodeElem,
-} from '../../rendering-elements/nodes.js';
+import { Nodes } from '../../rendering-elements/nodes.js';
 import { insertCluster, clear as clearClusters } from '../../rendering-elements/clusters.js';
 import {
   insertEdgeLabel,
@@ -27,8 +22,16 @@ import { log } from '../../../logger.js';
 import { getSubGraphTitleMargins } from '../../../utils/subGraphTitleMargins.js';
 import { getConfig } from '../../../diagram-api/diagramAPI.js';
 
-const recursiveRender = async (_elem, graph, diagramType, id, parentCluster, siteConfig) => {
-  log.warn('Graph in recursive render:XAX', graphlibJson.write(graph), parentCluster);
+const recursiveRender = async (
+  _elem,
+  graph,
+  diagramType,
+  id,
+  parentCluster,
+  siteConfig,
+  nodeData
+) => {
+  log.debug('Graph in recursive render:XAX', graphlibJson.write(graph), parentCluster);
   const dir = graph.graph().rankdir;
   log.trace('Dir in recursive render - dir:', dir);
 
@@ -89,7 +92,8 @@ const recursiveRender = async (_elem, graph, diagramType, id, parentCluster, sit
           diagramType,
           id,
           graph.node(v),
-          siteConfig
+          siteConfig,
+          nodeData
         );
         const newEl = o.elem;
         updateNodeBounds(node, newEl);
@@ -106,7 +110,7 @@ const recursiveRender = async (_elem, graph, diagramType, id, parentCluster, sit
           // node.x,
           // node.y
         );
-        setNodeElem(newEl, node);
+        nodeData.setNodeElem(newEl, node);
       } else {
         if (graph.children(v).length > 0) {
           // This is a cluster but not to be rendered recursively
@@ -125,7 +129,7 @@ const recursiveRender = async (_elem, graph, diagramType, id, parentCluster, sit
           // insertCluster(clusters, graph.node(v));
         } else {
           log.trace('Node - the non recursive path XAX', v, nodes, graph.node(v), dir);
-          await insertNode(nodes, graph.node(v), { config: siteConfig, dir });
+          await nodeData.insertNode(nodes, graph.node(v), { config: siteConfig, dir });
         }
       }
     })
@@ -194,7 +198,7 @@ const recursiveRender = async (_elem, graph, diagramType, id, parentCluster, sit
           graph.parent(v)
         );
         clusterDb.get(node.id).node = node;
-        positionNode(node);
+        nodeData.positionNode(node);
       } else {
         // A tainted cluster node
         if (graph.children(v).length > 0) {
@@ -239,7 +243,7 @@ const recursiveRender = async (_elem, graph, diagramType, id, parentCluster, sit
             node
           );
 
-          positionNode(node);
+          nodeData.positionNode(node);
         }
       }
     })
@@ -264,7 +268,7 @@ const recursiveRender = async (_elem, graph, diagramType, id, parentCluster, sit
       diff = n.diff;
     }
   });
-  log.warn('Returning from recursive render XAX', elem, diff);
+  log.debug('Returning from recursive render XAX', elem, diff);
   return { elem, diff };
 };
 
@@ -291,7 +295,6 @@ export const render = async (data4Layout, svg) => {
     });
   const element = svg.select('g');
   insertMarkers(element, data4Layout.markers, data4Layout.type, data4Layout.diagramId);
-  clearNodes();
   clearEdges();
   clearClusters();
   clearGraphlib();
@@ -362,16 +365,18 @@ export const render = async (data4Layout, svg) => {
     }
   });
 
-  log.warn('Graph at first:', JSON.stringify(graphlibJson.write(graph)));
+  log.debug('Graph at first:', JSON.stringify(graphlibJson.write(graph)));
   adjustClustersAndEdges(graph);
-  log.warn('Graph after XAX:', JSON.stringify(graphlibJson.write(graph)));
+  log.debug('Graph after XAX:', JSON.stringify(graphlibJson.write(graph)));
   const siteConfig = getConfig();
+  const nodeData = new Nodes();
   await recursiveRender(
     element,
     graph,
     data4Layout.type,
     data4Layout.diagramId,
     undefined,
-    siteConfig
+    siteConfig,
+    nodeData
   );
 };

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

@@ -1,380 +0,0 @@
-import { log } from '../../logger.js';
-import { state } from './shapes/state.ts';
-import { roundedRect } from './shapes/roundedRect.ts';
-import { squareRect } from './shapes/squareRect.ts';
-import { stateStart } from './shapes/stateStart.ts';
-import { stateEnd } from './shapes/stateEnd.ts';
-import { forkJoin } from './shapes/forkJoin.ts';
-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 { subroutine } from './shapes/subroutine.js';
-import { cylinder } from './shapes/cylinder.js';
-import { circle } from './shapes/circle.js';
-import { doublecircle } from './shapes/doubleCircle.js';
-import { rect_left_inv_arrow } from './shapes/rectLeftInvArrow.js';
-import { question } from './shapes/question.js';
-import { hexagon } from './shapes/hexagon.js';
-import { text } from './shapes/text.js';
-import { card } from './shapes/card.js';
-import { shadedProcess } from './shapes/shadedProcess.js';
-import { anchor } from './shapes/anchor.js';
-import { lean_right } from './shapes/leanRight.js';
-import { lean_left } from './shapes/leanLeft.js';
-import { trapezoid } from './shapes/trapezoid.js';
-import { inv_trapezoid } from './shapes/invertedTrapezoid.js';
-import { labelRect } from './shapes/labelRect.js';
-import { triangle } from './shapes/triangle.js';
-import { halfRoundedRectangle } from './shapes/halfRoundedRectangle.js';
-import { curvedTrapezoid } from './shapes/curvedTrapezoid.js';
-import { slopedRect } from './shapes/slopedRect.js';
-import { bowTieRect } from './shapes/bowTieRect.js';
-import { dividedRectangle } from './shapes/dividedRect.js';
-import { crossedCircle } from './shapes/crossedCircle.js';
-import { waveRectangle } from './shapes/waveRectangle.js';
-import { tiltedCylinder } from './shapes/tiltedCylinder.js';
-import { trapezoidalPentagon } from './shapes/trapezoidalPentagon.js';
-import { flippedTriangle } from './shapes/flippedTriangle.js';
-import { hourglass } from './shapes/hourglass.js';
-import { taggedRect } from './shapes/taggedRect.js';
-import { multiRect } from './shapes/multiRect.js';
-import { linedCylinder } from './shapes/linedCylinder.js';
-import { waveEdgedRectangle } from './shapes/waveEdgedRectangle.js';
-import { lightningBolt } from './shapes/lightningBolt.js';
-import { filledCircle } from './shapes/filledCircle.js';
-import { multiWaveEdgedRectangle } from './shapes/multiWaveEdgedRectangle.js';
-import { windowPane } from './shapes/windowPane.js';
-import { linedWaveEdgedRect } from './shapes/linedWaveEdgedRect.js';
-import { taggedWaveEdgedRectangle } from './shapes/taggedWaveEdgedRectangle.js';
-import { curlyBraceLeft } from './shapes/curlyBraceLeft.js';
-import { curlyBraceRight } from './shapes/curlyBraceRight.js';
-import { curlyBraces } from './shapes/curlyBraces.js';
-import { iconSquare } from './shapes/iconSquare.js';
-import { iconCircle } from './shapes/iconCircle.js';
-import { icon } from './shapes/icon.js';
-import { imageSquare } from './shapes/imageSquare.js';
-import { iconRounded } from './shapes/iconRounded.js';
-
-//Use these names as the left side to render shapes.
-export const shapes = {
-  // States
-  state,
-  stateStart,
-  stateEnd,
-  forkJoin,
-  choice,
-  note,
-
-  // Rectangles
-  rectWithTitle,
-  roundedRect,
-  squareRect,
-
-  // Rectangle with alias: 'process', 'rect', 'proc', 'rectangle'
-  rectangle: squareRect,
-  rect: squareRect,
-  process: squareRect,
-  proc: squareRect,
-
-  // Rounded Rectangle with alias: 'event', 'rounded'
-  rounded: roundedRect,
-  event: roundedRect,
-
-  // Stadium with alias: 'terminal','pill', 'stadium'
-  stadium,
-  pill: stadium,
-  terminal: stadium,
-
-  // Subprocess with alias: 'fr-rect', 'subproc', 'subprocess', 'framed-rectangle', 'subroutine'
-  subroutine,
-  'framed-rectangle': subroutine,
-  'fr-rect': subroutine,
-  subprocess: subroutine,
-  subproc: subroutine,
-
-  // Cylinder with alias: 'db', 'database', 'cylinder', 'cyl'
-  cylinder,
-  db: cylinder,
-  cyl: cylinder,
-  database: cylinder,
-
-  // Diamond with alias: 'diam', 'decision', 'diamond'
-  question,
-  diam: question,
-  diamond: question,
-  decision: question,
-
-  // Hexagon with alias: 'hex', 'hexagon', 'prepare'
-  hexagon,
-  hex: hexagon,
-  prepare: hexagon,
-
-  // Lean Right with alias: 'lean-r', 'lean-right', 'in-out'
-  lean_right, // used in old syntax for flowchart
-  'lean-r': lean_right,
-  'lean-right': lean_right,
-  'in-out': lean_right,
-
-  // Lean Left with alias: 'lean-l', 'lean-left', 'out-in'
-  lean_left, // used in old syntax for flowchart
-  'lean-l': lean_left,
-  'lean-left': lean_left,
-  'out-in': lean_left,
-
-  // Trapezoid with alias: 'trap-b', 'trapezoid-bottom', 'priority'
-  trapezoid, // used in old syntax for flowchart
-  'trap-b': trapezoid,
-  'trapezoid-bottom': trapezoid,
-  priority: trapezoid,
-
-  // Inverted Trapezoid with alias: 'inv-trapezoid', 'trapezoid-top', 'trap-t', 'manual'
-  inv_trapezoid, // used in old syntax for flowchart
-  'inv-trapezoid': inv_trapezoid,
-  'trapezoid-top': inv_trapezoid,
-  'trap-t': inv_trapezoid,
-  manual: inv_trapezoid,
-
-  // Double Circle with alias: 'dbl-circ', 'double-circle'
-  doublecircle, // used in old syntax for flowchart
-  'dbl-circ': doublecircle,
-  'double-circle': doublecircle,
-
-  // circle with alias: 'circ', 'circle'
-  circle,
-  circ: circle,
-
-  // Rect Left Inv Arrow with alias: 'odd', 'rect-left-inv-arrow'
-  rect_left_inv_arrow,
-  odd: rect_left_inv_arrow,
-
-  // Notched Rectangle with alias: 'notched-rectangle', 'notch-rect', 'card'
-  card,
-  'notched-rectangle': card,
-  'notch-rect': card,
-
-  // Lined rectangle with alias: 'lin-rect', 'lined-rectangle', 'lin-proc', lined-process', 'shaded-process'
-  'lined-rectangle': shadedProcess,
-  'lin-rect': shadedProcess,
-  'lin-proc': shadedProcess,
-  'lined-process': shadedProcess,
-  'shaded-process': shadedProcess,
-
-  //  Small circle with alias: 'sm-circ', 'small-circle', 'start'
-  'small-circle': stateStart,
-  'sm-circ': stateStart,
-  start: stateStart,
-
-  // framed circle with alias: 'stop', 'framed-circle', 'fr-circ'
-  stop: stateEnd,
-  'framed-circle': stateEnd,
-  'fr-circ': stateEnd,
-
-  // fork with alias: 'join', 'fork'
-  join: forkJoin,
-  fork: forkJoin,
-
-  // comment with alias: 'comment', 'brace-l'
-  comment: curlyBraceLeft,
-  'brace-l': curlyBraceLeft,
-
-  // lightening bolt with alias: 'bolt', 'com-link', 'lightning-bolt'
-  bolt: lightningBolt,
-  'com-link': lightningBolt,
-  'lightning-bolt': lightningBolt,
-
-  // document with alias: 'doc', 'document'
-  doc: waveEdgedRectangle,
-  document: waveEdgedRectangle,
-
-  // delay with alias: 'delay', 'half-rounded-rectangle'
-  delay: halfRoundedRectangle,
-  'half-rounded-rectangle': halfRoundedRectangle,
-
-  // horizontal cylinder with alias: 'h-cyl', 'das', 'horizontal-cylinder'
-  'horizontal-cylinder': tiltedCylinder,
-  'h-cyl': tiltedCylinder,
-  das: tiltedCylinder,
-
-  // lined cylinder with alias: 'lin-cyl', 'lined-cylinder', 'disk'
-  'lined-cylinder': linedCylinder,
-  'lin-cyl': linedCylinder,
-  disk: linedCylinder,
-
-  // curved trapezoid with alias: 'curv-trap', 'curved-trapezoid', 'display'
-  'curved-trapezoid': curvedTrapezoid,
-  'curv-trap': curvedTrapezoid,
-  display: curvedTrapezoid,
-
-  // divided rectangle with alias: 'div-rect', 'divided-rectangle', 'div-proc', 'divided-process'
-  'divided-rectangle': dividedRectangle,
-  'div-rect': dividedRectangle,
-  'div-proc': dividedRectangle,
-  'divided-process': dividedRectangle,
-
-  // triangle with alias: 'tri', 'triangle', 'extract'
-  triangle,
-  tri: triangle,
-  extract: triangle,
-
-  // window pane with alias: 'window-pane', 'win-pane', 'internal-storage'
-  'window-pane': windowPane,
-  'win-pane': windowPane,
-  'internal-storage': windowPane,
-
-  // filled circle with alias: 'f-circ', 'filled-circle', 'junction'
-  'f-circ': filledCircle,
-  junction: filledCircle,
-  'filled-circle': filledCircle,
-
-  // lined document with alias: 'lin-doc', 'lined-document'
-  'lin-doc': linedWaveEdgedRect,
-  'lined-document': linedWaveEdgedRect,
-
-  // notched pentagon with alias: 'notch-pent', 'notched-pentagon', 'loop-limit'
-  'notched-pentagon': trapezoidalPentagon,
-  'notch-pent': trapezoidalPentagon,
-  'loop-limit': trapezoidalPentagon,
-
-  // flipped triangle with alias: 'flip-tri', 'flipped-triangle', 'manual-file'
-  'flipped-triangle': flippedTriangle,
-  'flip-tri': flippedTriangle,
-  'manual-file': flippedTriangle,
-
-  // sloped rectangle with alias: 'sl-rect', 'sloped-rectangle', 'manual-input'
-  'sloped-rectangle': slopedRect,
-  'sl-rect': slopedRect,
-  'manual-input': slopedRect,
-
-  // documents with alias: 'docs', 'documents', 'st-doc', 'stacked-document'
-  docs: multiWaveEdgedRectangle,
-  documents: multiWaveEdgedRectangle,
-  'st-doc': multiWaveEdgedRectangle,
-  'stacked-document': multiWaveEdgedRectangle,
-
-  // 'processes' with alias: 'procs', 'processes', 'st-rect', 'stacked-rectangle'
-  processes: multiRect,
-  procs: multiRect,
-  'stacked-rectangle': multiRect,
-  'st-rect': multiRect,
-
-  // flag with alias: 'flag', 'paper-tape'
-  flag: waveRectangle,
-  'paper-tape': waveRectangle,
-
-  // bow tie rectangle with alias: 'bow-rect', 'bow-tie-rectangle', 'stored-data'
-  'bow-tie-rectangle': bowTieRect,
-  'bow-rect': bowTieRect,
-  'stored-data': bowTieRect,
-
-  // crossed circle with alias: 'cross-circ', 'crossed-circle', 'summary'
-  'crossed-circle': crossedCircle,
-  'cross-circ': crossedCircle,
-  summary: crossedCircle,
-
-  // tagged document with alias: 'tag-doc', 'tagged-document'
-  'tag-doc': taggedWaveEdgedRectangle,
-  'tagged-document': taggedWaveEdgedRectangle,
-
-  // tagged rectangle with alias: 'tag-rect', 'tagged-rectangle', 'tag-proc', 'tagged-process'
-  'tag-rect': taggedRect,
-  'tagged-rectangle': taggedRect,
-  'tag-proc': taggedRect,
-  'tagged-process': taggedRect,
-
-  // hourglass with alias: 'hourglass', 'collate'
-  hourglass,
-  collate: hourglass,
-
-  text,
-  anchor,
-
-  brace: curlyBraceLeft,
-
-  labelRect,
-  'brace-r': curlyBraceRight,
-  braces: curlyBraces,
-  iconSquare,
-  iconCircle,
-  icon,
-  iconRounded,
-  imageSquare,
-};
-
-const nodeElems = new Map();
-
-export const insertNode = async (elem, node, renderOptions) => {
-  let newEl;
-  let el;
-
-  // console.log("node is ", node.icon, node.shape)
-
-  //special check for rect shape (with or without rounded corners)
-  if (node.shape === 'rect') {
-    if (node.rx && node.ry) {
-      node.shape = 'roundedRect';
-    } else {
-      node.shape = 'squareRect';
-    }
-  }
-
-  if (!shapes[node.shape]) {
-    throw new Error(`No such shape: ${node.shape}. Please check your syntax.`);
-  }
-
-  if (node.link) {
-    // Add link when appropriate
-    let target;
-    if (renderOptions.config.securityLevel === 'sandbox') {
-      target = '_top';
-    } else if (node.linkTarget) {
-      target = node.linkTarget || '_blank';
-    }
-    newEl = elem.insert('svg:a').attr('xlink:href', node.link).attr('target', target);
-    el = await shapes[node.shape](newEl, node, renderOptions);
-  } else {
-    el = await shapes[node.shape](elem, node, renderOptions);
-    newEl = el;
-  }
-  if (node.tooltip) {
-    el.attr('title', node.tooltip);
-  }
-
-  nodeElems.set(node.id, newEl);
-
-  if (node.haveCallback) {
-    nodeElems.get(node.id).attr('class', nodeElems.get(node.id).attr('class') + ' clickable');
-  }
-  return newEl;
-};
-export const setNodeElem = (elem, node) => {
-  nodeElems.set(node.id, elem);
-};
-export const clear = () => {
-  nodeElems.clear();
-};
-
-export const positionNode = (node) => {
-  const el = nodeElems.get(node.id);
-  log.trace(
-    'Transforming node',
-    node.diff,
-    node,
-    'translate(' + (node.x - node.width / 2 - 5) + ', ' + node.width / 2 + ')'
-  );
-  const padding = 8;
-  const diff = node.diff || 0;
-  if (node.clusterNode) {
-    el.attr(
-      'transform',
-      'translate(' +
-        (node.x + diff - node.width / 2) +
-        ', ' +
-        (node.y - node.height / 2 - padding) +
-        ')'
-    );
-  } else {
-    el.attr('transform', 'translate(' + node.x + ', ' + node.y + ')');
-  }
-  return diff;
-};

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

@@ -1,5 +1,5 @@
-import exp from 'constants';
-import { shapes } from './nodes.js';
+import { shapes } from './shapes.js';
+import { describe, it, expect } from 'vitest';
 
 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

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

@@ -0,0 +1,83 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { log } from '../../logger.js';
+import type { SVG } from '../../mermaid.js';
+import type { Node, ShapeRenderOptions } from '../types.js';
+import { shapes } from './shapes.js';
+
+// TODO: Need a better name for the class.
+export class Nodes {
+  private readonly nodeElems = new Map();
+  positionNode = (node: any) => {
+    const el = this.nodeElems.get(node.id);
+    log.trace(
+      'Transforming node',
+      node.diff,
+      node,
+      'translate(' + (node.x - node.width / 2 - 5) + ', ' + node.width / 2 + ')'
+    );
+    const padding = 8;
+    const diff = node.diff || 0;
+    if (node.clusterNode) {
+      el.attr(
+        'transform',
+        'translate(' +
+          (node.x + diff - node.width / 2) +
+          ', ' +
+          (node.y - node.height / 2 - padding) +
+          ')'
+      );
+    } else {
+      el.attr('transform', 'translate(' + node.x + ', ' + node.y + ')');
+    }
+    return diff;
+  };
+  setNodeElem = (elem: any, node: any) => {
+    this.nodeElems.set(node.id, elem);
+  };
+  insertNode = async (elem: SVG, node: Node, renderOptions: ShapeRenderOptions) => {
+    let newEl: any;
+    let el: any;
+
+    //special check for rect shape (with or without rounded corners)
+    if (node.shape === 'rect') {
+      if (node.rx && node.ry) {
+        node.shape = 'roundedRect';
+      } else {
+        node.shape = 'squareRect';
+      }
+    }
+
+    if (!node.shape) {
+      throw new Error(`No shape defined for node ${node.id}. Please check your syntax.`);
+    }
+
+    const shapeHandler = shapes[node.shape];
+
+    if (!shapeHandler) {
+      throw new Error(`No such shape: ${node.shape}. Please check your syntax.`);
+    }
+
+    if (node.link) {
+      // Add link when appropriate
+      const target =
+        renderOptions.config.securityLevel === 'sandbox' ? '_top' : (node.linkTarget ?? '_blank');
+      newEl = elem.insert('svg:a').attr('xlink:href', node.link).attr('target', target);
+      el = await shapeHandler(newEl, node, renderOptions);
+    } else {
+      el = await shapeHandler(elem, node, renderOptions);
+      newEl = el;
+    }
+    if (node.tooltip) {
+      el.attr('title', node.tooltip);
+    }
+
+    this.nodeElems.set(node.id, newEl);
+
+    if (node.haveCallback) {
+      this.nodeElems
+        .get(node.id)
+        .attr('class', this.nodeElems.get(node.id).attr('class') + ' clickable');
+    }
+    return newEl;
+  };
+}

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

@@ -0,0 +1,8 @@
+import { writeFile } from 'fs/promises';
+import { buildShapeDoc } from './shapesDoc.js';
+
+export const writeShapeDoc = async () => {
+  await writeFile('packages/mermaid/src/docs/syntax/shapesTable.md', buildShapeDoc());
+};
+
+void writeShapeDoc();

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

@@ -0,0 +1,56 @@
+import { describe, it } from 'vitest';
+import { buildShapeDoc } from './shapesDoc.js';
+
+describe('build shapesTable', () => {
+  it('should build shapesTable based on the shapeDefs', () => {
+    expect(buildShapeDoc()).toMatchInlineSnapshot(`
+      "| **Semantic Name**                 | **Shape Name**         | **Short Name** | **Description**                | **Alias Supported**                                              |
+      | --------------------------------- | ---------------------- | -------------- | ------------------------------ | ---------------------------------------------------------------- |
+      | Card                              | Notched Rectangle      | \`notch-rect\`   | Represents a card              | \`card\`, \`notched-rectangle\`                                      |
+      | Collate                           | Hourglass              | \`hourglass\`    | Represents a collate operation | \`collate\`, \`hourglass\`                                           |
+      | Com Link                          | Lightning Bolt         | \`bolt\`         | Communication link             | \`com-link\`, \`lightning-bolt\`                                     |
+      | Comment                           | Curly Brace            | \`brace\`        | Adds a comment                 | \`brace-l\`, \`comment\`                                             |
+      | Comment Right                     | Curly Brace            | \`brace-r\`      | Adds a comment                 |                                                                  |
+      | Comment with braces on both sides | Curly Braces           | \`braces\`       | Adds a comment                 |                                                                  |
+      | Data Input/Output                 | Lean Right             | \`lean-r\`       | Represents input or output     | \`in-out\`, \`lean-right\`                                           |
+      | Data Input/Output                 | Lean Left              | \`lean-l\`       | Represents output or input     | \`lean-left\`, \`out-in\`                                            |
+      | Database                          | Cylinder               | \`cyl\`          | Database storage               | \`cylinder\`, \`database\`, \`db\`                                     |
+      | Decision                          | Diamond                | \`diam\`         | Decision-making step           | \`decision\`, \`diamond\`, \`question\`                                |
+      | Delay                             | Half-Rounded Rectangle | \`delay\`        | Represents a delay             | \`half-rounded-rectangle\`                                         |
+      | Direct Access Storage             | Horizontal Cylinder    | \`h-cyl\`        | Direct access storage          | \`das\`, \`horizontal-cylinder\`                                     |
+      | Disk Storage                      | Lined Cylinder         | \`lin-cyl\`      | Disk storage                   | \`disk\`, \`lined-cylinder\`                                         |
+      | Display                           | Curved Trapezoid       | \`curv-trap\`    | Represents a display           | \`curved-trapezoid\`, \`display\`                                    |
+      | Divided Process                   | Divided Rectangle      | \`div-rect\`     | Divided process shape          | \`div-proc\`, \`divided-process\`, \`divided-rectangle\`               |
+      | Document                          | Document               | \`doc\`          | Represents a document          | \`doc\`, \`document\`                                                |
+      | Event                             | Rounded Rectangle      | \`rounded\`      | Represents an event            | \`event\`                                                          |
+      | Extract                           | Triangle               | \`tri\`          | Extraction process             | \`extract\`, \`triangle\`                                            |
+      | Fork/Join                         | Filled Rectangle       | \`fork\`         | Fork or join in process flow   | \`join\`                                                           |
+      | Internal Storage                  | Window Pane            | \`win-pane\`     | Internal storage               | \`internal-storage\`, \`window-pane\`                                |
+      | Junction                          | Filled Circle          | \`f-circ\`       | Junction point                 | \`filled-circle\`, \`junction\`                                      |
+      | Lined Document                    | Lined Document         | \`lin-doc\`      | Lined document                 | \`lined-document\`                                                 |
+      | Lined/Shaded Process              | Lined Rectangle        | \`lin-rect\`     | Lined process shape            | \`lin-proc\`, \`lined-process\`, \`lined-rectangle\`, \`shaded-process\` |
+      | Loop Limit                        | Trapezoidal Pentagon   | \`notch-pent\`   | Loop limit step                | \`loop-limit\`, \`notched-pentagon\`                                 |
+      | Manual File                       | Flipped Triangle       | \`flip-tri\`     | Manual file operation          | \`flipped-triangle\`, \`manual-file\`                                |
+      | Manual Input                      | Sloped Rectangle       | \`sl-rect\`      | Manual input step              | \`manual-input\`, \`sloped-rectangle\`                               |
+      | Manual Operation                  | Trapezoid Base Top     | \`trap-t\`       | Represents a manual task       | \`inv-trapezoid\`, \`manual\`, \`trapezoid-top\`                       |
+      | Multi-Document                    | Stacked Document       | \`docs\`         | Multiple documents             | \`documents\`, \`st-doc\`, \`stacked-document\`                        |
+      | Multi-Process                     | Stacked Rectangle      | \`st-rect\`      | Multiple processes             | \`processes\`, \`procs\`, \`stacked-rectangle\`                        |
+      | Odd                               | Odd                    | \`odd\`          | Odd shape                      |                                                                  |
+      | Paper Tape                        | Flag                   | \`flag\`         | Paper tape                     | \`paper-tape\`                                                     |
+      | Prepare Conditional               | Hexagon                | \`hex\`          | Preparation or condition step  | \`hexagon\`, \`prepare\`                                             |
+      | Priority Action                   | Trapezoid Base Bottom  | \`trap-b\`       | Priority action                | \`priority\`, \`trapezoid\`, \`trapezoid-bottom\`                      |
+      | Process                           | Rectangle              | \`rect\`         | Standard process shape         | \`proc\`, \`process\`, \`rectangle\`                                   |
+      | Start                             | Circle                 | \`circle\`       | Starting point                 | \`circ\`                                                           |
+      | Start                             | Small Circle           | \`sm-circ\`      | Small starting point           | \`small-circle\`, \`start\`                                          |
+      | Stop                              | Double Circle          | \`dbl-circ\`     | Represents a stop point        | \`double-circle\`                                                  |
+      | Stop                              | Framed Circle          | \`fr-circ\`      | Stop point                     | \`framed-circle\`, \`stop\`                                          |
+      | Stored Data                       | Bow Tie Rectangle      | \`bow-rect\`     | Stored data                    | \`bow-tie-rectangle\`, \`stored-data\`                               |
+      | Subprocess                        | Framed Rectangle       | \`fr-rect\`      | Subprocess                     | \`framed-rectangle\`, \`subproc\`, \`subprocess\`, \`subroutine\`        |
+      | Summary                           | Crossed Circle         | \`cross-circ\`   | Summary                        | \`crossed-circle\`, \`summary\`                                      |
+      | Tagged Document                   | Tagged Document        | \`tag-doc\`      | Tagged document                | \`tag-doc\`, \`tagged-document\`                                     |
+      | Tagged Process                    | Tagged Rectangle       | \`tag-rect\`     | Tagged process                 | \`tag-proc\`, \`tagged-process\`, \`tagged-rectangle\`                 |
+      | Terminal Point                    | Stadium                | \`stadium\`      | Terminal point                 | \`pill\`, \`terminal\`                                               |
+      | Text Block                        | Text Block             | \`text\`         | Text block                     |                                                                  |"
+    `);
+  });
+});

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

@@ -0,0 +1,475 @@
+import type { Node, ShapeRenderOptions } from '../types.js';
+import { anchor } from './shapes/anchor.js';
+import { bowTieRect } from './shapes/bowTieRect.js';
+import { card } from './shapes/card.js';
+import { choice } from './shapes/choice.js';
+import { circle } from './shapes/circle.js';
+import { crossedCircle } from './shapes/crossedCircle.js';
+import { curlyBraceLeft } from './shapes/curlyBraceLeft.js';
+import { curlyBraceRight } from './shapes/curlyBraceRight.js';
+import { curlyBraces } from './shapes/curlyBraces.js';
+import { curvedTrapezoid } from './shapes/curvedTrapezoid.js';
+import { cylinder } from './shapes/cylinder.js';
+import { dividedRectangle } from './shapes/dividedRect.js';
+import { doublecircle } from './shapes/doubleCircle.js';
+import { filledCircle } from './shapes/filledCircle.js';
+import { flippedTriangle } from './shapes/flippedTriangle.js';
+import { forkJoin } from './shapes/forkJoin.js';
+import { halfRoundedRectangle } from './shapes/halfRoundedRectangle.js';
+import { hexagon } from './shapes/hexagon.js';
+import { hourglass } from './shapes/hourglass.js';
+import { icon } from './shapes/icon.js';
+import { iconCircle } from './shapes/iconCircle.js';
+import { iconRounded } from './shapes/iconRounded.js';
+import { iconSquare } from './shapes/iconSquare.js';
+import { imageSquare } from './shapes/imageSquare.js';
+import { inv_trapezoid } from './shapes/invertedTrapezoid.js';
+import { labelRect } from './shapes/labelRect.js';
+import { lean_left } from './shapes/leanLeft.js';
+import { lean_right } from './shapes/leanRight.js';
+import { lightningBolt } from './shapes/lightningBolt.js';
+import { linedCylinder } from './shapes/linedCylinder.js';
+import { linedWaveEdgedRect } from './shapes/linedWaveEdgedRect.js';
+import { multiRect } from './shapes/multiRect.js';
+import { multiWaveEdgedRectangle } from './shapes/multiWaveEdgedRectangle.js';
+import { note } from './shapes/note.js';
+import { question } from './shapes/question.js';
+import { rect_left_inv_arrow } from './shapes/rectLeftInvArrow.js';
+import { rectWithTitle } from './shapes/rectWithTitle.js';
+import { roundedRect } from './shapes/roundedRect.js';
+import { shadedProcess } from './shapes/shadedProcess.js';
+import { slopedRect } from './shapes/slopedRect.js';
+import { squareRect } from './shapes/squareRect.js';
+import { stadium } from './shapes/stadium.js';
+import { state } from './shapes/state.js';
+import { stateEnd } from './shapes/stateEnd.js';
+import { stateStart } from './shapes/stateStart.js';
+import { subroutine } from './shapes/subroutine.js';
+import { taggedRect } from './shapes/taggedRect.js';
+import { taggedWaveEdgedRectangle } from './shapes/taggedWaveEdgedRectangle.js';
+import { text } from './shapes/text.js';
+import { tiltedCylinder } from './shapes/tiltedCylinder.js';
+import { trapezoid } from './shapes/trapezoid.js';
+import { trapezoidalPentagon } from './shapes/trapezoidalPentagon.js';
+import { triangle } from './shapes/triangle.js';
+import { waveEdgedRectangle } from './shapes/waveEdgedRectangle.js';
+import { waveRectangle } from './shapes/waveRectangle.js';
+import { windowPane } from './shapes/windowPane.js';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type ShapeHandler = (parent: any, node: Node, options: ShapeRenderOptions) => unknown;
+
+export interface ShapeDefinition {
+  semanticName: string;
+  name: string;
+  shortName: string;
+  description: string;
+  aliases?: string[];
+  legacyAliases?: string[];
+  handler: ShapeHandler;
+}
+
+export const shapesDefs: ShapeDefinition[] = [
+  {
+    semanticName: 'Process',
+    name: 'Rectangle',
+    shortName: 'rect',
+    description: 'Standard process shape',
+    aliases: ['proc', 'process', 'rectangle'],
+    handler: squareRect,
+  },
+  {
+    semanticName: 'Event',
+    name: 'Rounded Rectangle',
+    shortName: 'rounded',
+    description: 'Represents an event',
+    aliases: ['event'],
+    handler: roundedRect,
+  },
+  {
+    semanticName: 'Terminal Point',
+    name: 'Stadium',
+    shortName: 'stadium',
+    description: 'Terminal point',
+    aliases: ['terminal', 'pill'],
+    handler: stadium,
+  },
+  {
+    semanticName: 'Subprocess',
+    name: 'Framed Rectangle',
+    shortName: 'fr-rect',
+    description: 'Subprocess',
+    aliases: ['subprocess', 'subproc', 'framed-rectangle', 'subroutine'],
+    handler: subroutine,
+  },
+  {
+    semanticName: 'Database',
+    name: 'Cylinder',
+    shortName: 'cyl',
+    description: 'Database storage',
+    aliases: ['db', 'database', 'cylinder'],
+    handler: cylinder,
+  },
+  {
+    semanticName: 'Start',
+    name: 'Circle',
+    shortName: 'circle',
+    description: 'Starting point',
+    aliases: ['circ'],
+    handler: circle,
+  },
+  {
+    semanticName: 'Decision',
+    name: 'Diamond',
+    shortName: 'diam',
+    description: 'Decision-making step',
+    aliases: ['decision', 'diamond', 'question'],
+    handler: question,
+  },
+  {
+    semanticName: 'Prepare Conditional',
+    name: 'Hexagon',
+    shortName: 'hex',
+    description: 'Preparation or condition step',
+    aliases: ['hexagon', 'prepare'],
+    handler: hexagon,
+  },
+  {
+    semanticName: 'Data Input/Output',
+    name: 'Lean Right',
+    shortName: 'lean-r',
+    description: 'Represents input or output',
+    aliases: ['lean-right', 'in-out'],
+    legacyAliases: ['lean_right'],
+    handler: lean_right,
+  },
+  {
+    semanticName: 'Data Input/Output',
+    name: 'Lean Left',
+    shortName: 'lean-l',
+    description: 'Represents output or input',
+    aliases: ['lean-left', 'out-in'],
+    legacyAliases: ['lean_left'],
+    handler: lean_left,
+  },
+  {
+    semanticName: 'Priority Action',
+    name: 'Trapezoid Base Bottom',
+    shortName: 'trap-b',
+    description: 'Priority action',
+    aliases: ['priority', 'trapezoid-bottom', 'trapezoid'],
+    handler: trapezoid,
+  },
+  {
+    semanticName: 'Manual Operation',
+    name: 'Trapezoid Base Top',
+    shortName: 'trap-t',
+    description: 'Represents a manual task',
+    aliases: ['manual', 'trapezoid-top', 'inv-trapezoid'],
+    legacyAliases: ['inv_trapezoid'],
+    handler: inv_trapezoid,
+  },
+  {
+    semanticName: 'Stop',
+    name: 'Double Circle',
+    shortName: 'dbl-circ',
+    description: 'Represents a stop point',
+    aliases: ['double-circle'],
+    legacyAliases: ['doublecircle'],
+    handler: doublecircle,
+  },
+  {
+    semanticName: 'Text Block',
+    name: 'Text Block',
+    shortName: 'text',
+    description: 'Text block',
+    handler: text,
+  },
+  {
+    semanticName: 'Card',
+    name: 'Notched Rectangle',
+    shortName: 'notch-rect',
+    description: 'Represents a card',
+    aliases: ['card', 'notched-rectangle'],
+    handler: card,
+  },
+  {
+    semanticName: 'Lined/Shaded Process',
+    name: 'Lined Rectangle',
+    shortName: 'lin-rect',
+    description: 'Lined process shape',
+    aliases: ['lined-rectangle', 'lined-process', 'lin-proc', 'shaded-process'],
+    handler: shadedProcess,
+  },
+  {
+    semanticName: 'Start',
+    name: 'Small Circle',
+    shortName: 'sm-circ',
+    description: 'Small starting point',
+    aliases: ['start', 'small-circle'],
+    handler: stateStart,
+  },
+  {
+    semanticName: 'Stop',
+    name: 'Framed Circle',
+    shortName: 'fr-circ',
+    description: 'Stop point',
+    aliases: ['stop', 'framed-circle'],
+    handler: stateEnd,
+  },
+  {
+    semanticName: 'Fork/Join',
+    name: 'Filled Rectangle',
+    shortName: 'fork',
+    description: 'Fork or join in process flow',
+    aliases: ['join'],
+    handler: forkJoin,
+  },
+  {
+    semanticName: 'Collate',
+    name: 'Hourglass',
+    shortName: 'hourglass',
+    description: 'Represents a collate operation',
+    aliases: ['hourglass', 'collate'],
+    handler: hourglass,
+  },
+  {
+    semanticName: 'Comment',
+    name: 'Curly Brace',
+    shortName: 'brace',
+    description: 'Adds a comment',
+    aliases: ['comment', 'brace-l'],
+    handler: curlyBraceLeft,
+  },
+  {
+    semanticName: 'Comment Right',
+    name: 'Curly Brace',
+    shortName: 'brace-r',
+    description: 'Adds a comment',
+    handler: curlyBraceRight,
+  },
+  {
+    semanticName: 'Comment with braces on both sides',
+    name: 'Curly Braces',
+    shortName: 'braces',
+    description: 'Adds a comment',
+    handler: curlyBraces,
+  },
+  {
+    semanticName: 'Com Link',
+    name: 'Lightning Bolt',
+    shortName: 'bolt',
+    description: 'Communication link',
+    aliases: ['com-link', 'lightning-bolt'],
+    handler: lightningBolt,
+  },
+  {
+    semanticName: 'Document',
+    name: 'Document',
+    shortName: 'doc',
+    description: 'Represents a document',
+    aliases: ['doc', 'document'],
+    handler: waveEdgedRectangle,
+  },
+  {
+    semanticName: 'Delay',
+    name: 'Half-Rounded Rectangle',
+    shortName: 'delay',
+    description: 'Represents a delay',
+    aliases: ['half-rounded-rectangle'],
+    handler: halfRoundedRectangle,
+  },
+  {
+    semanticName: 'Direct Access Storage',
+    name: 'Horizontal Cylinder',
+    shortName: 'h-cyl',
+    description: 'Direct access storage',
+    aliases: ['das', 'horizontal-cylinder'],
+    handler: tiltedCylinder,
+  },
+  {
+    semanticName: 'Disk Storage',
+    name: 'Lined Cylinder',
+    shortName: 'lin-cyl',
+    description: 'Disk storage',
+    aliases: ['disk', 'lined-cylinder'],
+    handler: linedCylinder,
+  },
+  {
+    semanticName: 'Display',
+    name: 'Curved Trapezoid',
+    shortName: 'curv-trap',
+    description: 'Represents a display',
+    aliases: ['curved-trapezoid', 'display'],
+    handler: curvedTrapezoid,
+  },
+  {
+    semanticName: 'Divided Process',
+    name: 'Divided Rectangle',
+    shortName: 'div-rect',
+    description: 'Divided process shape',
+    aliases: ['div-proc', 'divided-rectangle', 'divided-process'],
+    handler: dividedRectangle,
+  },
+  {
+    semanticName: 'Extract',
+    name: 'Triangle',
+    shortName: 'tri',
+    description: 'Extraction process',
+    aliases: ['extract', 'triangle'],
+    handler: triangle,
+  },
+  {
+    semanticName: 'Internal Storage',
+    name: 'Window Pane',
+    shortName: 'win-pane',
+    description: 'Internal storage',
+    aliases: ['internal-storage', 'window-pane'],
+    handler: windowPane,
+  },
+  {
+    semanticName: 'Junction',
+    name: 'Filled Circle',
+    shortName: 'f-circ',
+    description: 'Junction point',
+    aliases: ['junction', 'filled-circle'],
+    handler: filledCircle,
+  },
+  {
+    semanticName: 'Loop Limit',
+    name: 'Trapezoidal Pentagon',
+    shortName: 'notch-pent',
+    description: 'Loop limit step',
+    aliases: ['loop-limit', 'notched-pentagon'],
+    handler: trapezoidalPentagon,
+  },
+  {
+    semanticName: 'Manual File',
+    name: 'Flipped Triangle',
+    shortName: 'flip-tri',
+    description: 'Manual file operation',
+    aliases: ['manual-file', 'flipped-triangle'],
+    handler: flippedTriangle,
+  },
+  {
+    semanticName: 'Manual Input',
+    name: 'Sloped Rectangle',
+    shortName: 'sl-rect',
+    description: 'Manual input step',
+    aliases: ['manual-input', 'sloped-rectangle'],
+    handler: slopedRect,
+  },
+  {
+    semanticName: 'Multi-Document',
+    name: 'Stacked Document',
+    shortName: 'docs',
+    description: 'Multiple documents',
+    aliases: ['documents', 'st-doc', 'stacked-document'],
+    handler: multiWaveEdgedRectangle,
+  },
+  {
+    semanticName: 'Multi-Process',
+    name: 'Stacked Rectangle',
+    shortName: 'st-rect',
+    description: 'Multiple processes',
+    aliases: ['procs', 'processes', 'stacked-rectangle'],
+    handler: multiRect,
+  },
+  {
+    semanticName: 'Stored Data',
+    name: 'Bow Tie Rectangle',
+    shortName: 'bow-rect',
+    description: 'Stored data',
+    aliases: ['stored-data', 'bow-tie-rectangle'],
+    handler: bowTieRect,
+  },
+  {
+    semanticName: 'Summary',
+    name: 'Crossed Circle',
+    shortName: 'cross-circ',
+    description: 'Summary',
+    aliases: ['summary', 'crossed-circle'],
+    handler: crossedCircle,
+  },
+  {
+    semanticName: 'Tagged Document',
+    name: 'Tagged Document',
+    shortName: 'tag-doc',
+    description: 'Tagged document',
+    aliases: ['tag-doc', 'tagged-document'],
+    handler: taggedWaveEdgedRectangle,
+  },
+  {
+    semanticName: 'Tagged Process',
+    name: 'Tagged Rectangle',
+    shortName: 'tag-rect',
+    description: 'Tagged process',
+    aliases: ['tagged-rectangle', 'tag-proc', 'tagged-process'],
+    handler: taggedRect,
+  },
+  {
+    semanticName: 'Paper Tape',
+    name: 'Flag',
+    shortName: 'flag',
+    description: 'Paper tape',
+    aliases: ['paper-tape'],
+    handler: waveRectangle,
+  },
+  {
+    semanticName: 'Odd',
+    name: 'Odd',
+    shortName: 'odd',
+    description: 'Odd shape',
+    legacyAliases: ['rect_left_inv_arrow'],
+    handler: rect_left_inv_arrow,
+  },
+  {
+    semanticName: 'Lined Document',
+    name: 'Lined Document',
+    shortName: 'lin-doc',
+    description: 'Lined document',
+    aliases: ['lined-document'],
+    handler: linedWaveEdgedRect,
+  },
+];
+
+const generateShapeMap = () => {
+  // These are the shapes that didn't have documentation present.
+  const shapeMap: Record<string, ShapeHandler> = {
+    // States
+    state,
+    stateStart,
+    stateEnd,
+    forkJoin,
+    choice,
+    note,
+
+    // Rectangles
+    rectWithTitle,
+    roundedRect,
+    squareRect,
+    labelRect,
+
+    // Icons
+    iconSquare,
+    iconCircle,
+    icon,
+    iconRounded,
+    imageSquare,
+
+    anchor,
+  };
+
+  for (const shape of shapesDefs) {
+    for (const alias of [
+      shape.shortName,
+      ...(shape.aliases ?? []),
+      ...(shape.legacyAliases ?? []),
+    ]) {
+      shapeMap[alias] = shape.handler;
+    }
+  }
+  return shapeMap;
+};
+
+export const shapes = generateShapeMap();

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -2,7 +2,7 @@ import rough from 'roughjs';
 import type { SVG } from '../../../diagram-api/types.js';
 import { log } from '../../../logger.js';
 import { getIconSVG } from '../../icons.js';
-import type { Node, ShapeRenderOptions } from '../../types.d.ts';
+import type { Node, ShapeRenderOptions } from '../../types.ts';
 import intersect from '../intersect/index.js';
 import { compileStyles, styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import { labelHelper, updateNodeBounds } from './util.js';

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

@@ -2,7 +2,7 @@ import rough from 'roughjs';
 import type { SVG } from '../../../diagram-api/types.js';
 import { log } from '../../../logger.js';
 import { getIconSVG } from '../../icons.js';
-import type { Node, ShapeRenderOptions } from '../../types.d.ts';
+import type { Node, ShapeRenderOptions } from '../../types.ts';
 import intersect from '../intersect/index.js';
 import { compileStyles, styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import { labelHelper, updateNodeBounds } from './util.js';

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

@@ -2,7 +2,7 @@ import rough from 'roughjs';
 import type { SVG } from '../../../diagram-api/types.js';
 import { log } from '../../../logger.js';
 import { getIconSVG } from '../../icons.js';
-import type { Node, ShapeRenderOptions } from '../../types.d.ts';
+import type { Node, ShapeRenderOptions } from '../../types.ts';
 import intersect from '../intersect/index.js';
 import { compileStyles, styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import { createRoundedRectPathD } from './roundedRectPath.js';

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

@@ -2,7 +2,7 @@ import rough from 'roughjs';
 import type { SVG } from '../../../diagram-api/types.js';
 import { log } from '../../../logger.js';
 import { getIconSVG } from '../../icons.js';
-import type { Node, ShapeRenderOptions } from '../../types.d.ts';
+import type { Node, ShapeRenderOptions } from '../../types.ts';
 import intersect from '../intersect/index.js';
 import { compileStyles, styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import { labelHelper, updateNodeBounds } from './util.js';

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

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

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

@@ -1,6 +1,6 @@
 import { log } from '../../../logger.js';
 import { getNodeClasses, updateNodeBounds } from './util.js';
-import type { Node } from '../../types.d.ts';
+import type { Node } from '../../types.ts';
 import type { SVG } from '../../../diagram-api/types.js';
 import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';

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

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

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

@@ -1,5 +1,5 @@
 import { labelHelper, getNodeClasses, updateNodeBounds, createPathFromPoints } from './util.js';
-import type { Node } from '../../types.d.ts';
+import type { Node } from '../../types.ts';
 import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 import intersect from '../intersect/index.js';

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

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

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

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

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

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

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

@@ -1,5 +1,5 @@
 import { labelHelper, getNodeClasses, updateNodeBounds, createPathFromPoints } from './util.js';
-import type { Node } from '../../types.d.ts';
+import type { Node } from '../../types.ts';
 import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 import intersect from '../intersect/index.js';

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

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

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

@@ -1,6 +1,6 @@
 import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
 import intersect from '../intersect/index.js';
-import type { Node } from '../../types.d.ts';
+import type { Node } from '../../types.ts';
 import { styles2String } from './handDrawnShapeStyles.js';
 
 export async function text(parent: SVGAElement, node: Node): Promise<SVGAElement> {

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

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

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

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

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

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

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

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

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

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

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

packages/mermaid/src/rendering-util/rendering-elements/shapesDoc.ts

@@ -0,0 +1,29 @@
+import { writeFile } from 'fs/promises';
+import { markdownTable } from 'markdown-table';
+import { shapesDefs } from './shapes.js';
+
+export const buildShapeDoc = () => {
+  const data = shapesDefs.map((shape) => {
+    const { name, semanticName, description, shortName, aliases } = shape;
+    aliases?.sort();
+    const aliasString = aliases?.join('`, `');
+    return [
+      semanticName,
+      name,
+      `\`${shortName}\``,
+      description,
+      aliasString ? `\`${aliasString}\`` : '',
+    ];
+  });
+  data.sort((a, b) => a[0].localeCompare(b[0]));
+  return markdownTable([
+    ['Semantic Name', 'Shape Name', 'Short Name', 'Description', 'Alias Supported'].map(
+      (s) => `**${s}**`
+    ),
+    ...data,
+  ]);
+};
+
+export const writeShapeDoc = async () => {
+  await writeFile('packages/mermaid/src/docs/syntax/shapesTable.md', buildShapeDoc());
+};