From c95c64139deef3df6d9f50dd152de2015350a138 Mon Sep 17 00:00:00 2001
From: darshanr0107 <darshan@mermaidchart.com>
Date: Mon, 4 Aug 2025 14:25:08 +0530
Subject: [PATCH] Decouple layout loaders from core package, register tidy-tree
 and elk loaders separately

on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
---
 packages/mermaid-layout-tidy-tree/src/render.ts | 15 ++++++++++-----
 packages/mermaid-layout-tidy-tree/src/types.ts  |  6 ++----
 packages/mermaid/package.json                   |  4 +++-
 packages/mermaid/src/rendering-util/render.ts   |  4 ++--
 pnpm-lock.yaml                                  |  7 +++++++
 5 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/packages/mermaid-layout-tidy-tree/src/render.ts b/packages/mermaid-layout-tidy-tree/src/render.ts
index be4c7270a..55d2ff38b 100644
--- a/packages/mermaid-layout-tidy-tree/src/render.ts
+++ b/packages/mermaid-layout-tidy-tree/src/render.ts
@@ -48,7 +48,7 @@ export const render = async (
   const edgePaths = element.insert('g').attr('class', 'edgePaths');
   const edgeLabels = element.insert('g').attr('class', 'edgeLabels');
   const nodes = element.insert('g').attr('class', 'nodes');
-
+  // Step 1: Insert nodes into DOM to get their actual dimensions
   log.debug('Inserting nodes into DOM for dimension calculation');
 
   await Promise.all(
@@ -87,7 +87,7 @@ export const render = async (
       }
     })
   );
-
+  // Step 2: Run the bidirectional tidy-tree layout algorithm
   log.debug('Running bidirectional tidy-tree layout algorithm');
 
   const updatedLayoutData = {
@@ -103,17 +103,22 @@ export const render = async (
   };
 
   const layoutResult = await executeTidyTreeLayout(updatedLayoutData, data4Layout.config);
-
+  // Step 3: Position the nodes based on bidirectional layout results
   log.debug('Positioning nodes based on bidirectional layout results');
 
   layoutResult.nodes.forEach((positionedNode) => {
     const node = nodeDb[positionedNode.id];
     if (node?.domId) {
+      // Position the node at the calculated coordinates from bidirectional layout
+      // The layout algorithm has already calculated positions for:
+      // - Root node at center (0, 0)
+      // - Left tree nodes with negative x coordinates (growing left)
+      // - Right tree nodes with positive x coordinates (growing right)
       node.domId.attr('transform', `translate(${positionedNode.x}, ${positionedNode.y})`);
-
+      // Store the final position
       node.x = positionedNode.x;
       node.y = positionedNode.y;
-
+      // Step 3: Position the nodes based on bidirectional layout results
       log.debug(`Positioned node ${node.id} at (${positionedNode.x}, ${positionedNode.y})`);
     }
   });
diff --git a/packages/mermaid-layout-tidy-tree/src/types.ts b/packages/mermaid-layout-tidy-tree/src/types.ts
index d38b68793..2015a4909 100644
--- a/packages/mermaid-layout-tidy-tree/src/types.ts
+++ b/packages/mermaid-layout-tidy-tree/src/types.ts
@@ -1,7 +1,7 @@
 import type { LayoutData } from 'mermaid';
 
-type Node = LayoutData['nodes'][number];
-type Edge = LayoutData['edges'][number];
+export type Node = LayoutData['nodes'][number];
+export type Edge = LayoutData['edges'][number];
 
 /**
  * Positioned node after layout calculation
@@ -67,5 +67,3 @@ export interface TidyTreeLayoutConfig {
   gap: number;
   bottomPadding: number;
 }
-
-export type { Node, Edge };
diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json
index 9b888760c..ed2392f6b 100644
--- a/packages/mermaid/package.json
+++ b/packages/mermaid/package.json
@@ -87,7 +87,9 @@
     "roughjs": "^4.6.6",
     "stylis": "^4.3.6",
     "ts-dedent": "^2.2.0",
-    "uuid": "^11.1.0"
+    "uuid": "^11.1.0",
+    "@mermaid-js/layout-elk": "workspace:^",
+    "@mermaid-js/layout-tidy-tree": "workspace:^"
   },
   "devDependencies": {
     "@adobe/jsonschema2md": "^8.0.2",
diff --git a/packages/mermaid/src/rendering-util/render.ts b/packages/mermaid/src/rendering-util/render.ts
index 1c822ccf2..a3aa9de7b 100644
--- a/packages/mermaid/src/rendering-util/render.ts
+++ b/packages/mermaid/src/rendering-util/render.ts
@@ -45,11 +45,11 @@ const registerDefaultLayoutLoaders = () => {
     },
     {
       name: 'tidy-tree',
-      loader: async () => await import('../../../mermaid-layout-tidy-tree/src/index.js'),
+      loader: async () => await import('@mermaid-js/layout-tidy-tree/src/render.js'),
     },
     {
       name: 'elk',
-      loader: async () => await import('../../../mermaid-layout-elk/src/render.js'),
+      loader: async () => await import('@mermaid-js/layout-elk/src/render.js'),
     },
   ]);
 };
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d2867adb9..40298be52 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -229,6 +229,12 @@ importers:
       '@iconify/utils':
         specifier: ^2.1.33
         version: 2.3.0
+      '@mermaid-js/layout-elk':
+        specifier: workspace:^
+        version: link:../mermaid-layout-elk
+      '@mermaid-js/layout-tidy-tree':
+        specifier: workspace:^
+        version: link:../mermaid-layout-tidy-tree
       '@mermaid-js/parser':
         specifier: workspace:^
         version: link:../parser
@@ -448,6 +454,7 @@ importers:
       mermaid:
         specifier: workspace:^
         version: link:../mermaid
+
   packages/mermaid-layout-tidy-tree:
     dependencies:
       d3: