diff --git a/cypress/platform/flowchart-refactor.html b/cypress/platform/flowchart-refactor.html
index 034e79a52..6d9ce423f 100644
--- a/cypress/platform/flowchart-refactor.html
+++ b/cypress/platform/flowchart-refactor.html
@@ -822,7 +822,7 @@ flowchart LR
 
     <script type="module">
       import mermaid from './mermaid.esm.mjs';
-      import { layouts } from './mermaid-layout-elk.esm.mjs';
+      import layouts from './mermaid-layout-elk.esm.mjs';
       mermaid.registerLayoutLoaders(layouts);
       mermaid.parseError = function (err, hash) {};
 
diff --git a/cypress/platform/flowchart-sate.html b/cypress/platform/flowchart-sate.html
index 37cf4a828..a85d2131c 100644
--- a/cypress/platform/flowchart-sate.html
+++ b/cypress/platform/flowchart-sate.html
@@ -147,7 +147,7 @@ flowchart LR
 
     <script type="module">
       import mermaid from './mermaid.esm.mjs';
-      import { layouts } from './mermaid-layout-elk.esm.mjs';
+      import layouts from './mermaid-layout-elk.esm.mjs';
       mermaid.registerLayoutLoaders(layouts);
       mermaid.parseError = function (err, hash) {};
 
diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
index ab7d9f68d..4cd42bd24 100644
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -159,7 +159,7 @@ flowchart LR
 
     <script type="module">
       import mermaid from './mermaid.esm.mjs';
-      // import { layouts } from './mermaid-layout-elk.esm.mjs';
+      // import layouts from './mermaid-layout-elk.esm.mjs';
       // mermaid.registerLayoutLoaders(layouts);
       mermaid.parseError = function (err, hash) {
         console.error('Mermaid error: ', err);
diff --git a/cypress/platform/state-refactor.html b/cypress/platform/state-refactor.html
index c9347eee9..8c04be7f6 100644
--- a/cypress/platform/state-refactor.html
+++ b/cypress/platform/state-refactor.html
@@ -1222,7 +1222,7 @@ direction LR
 
   <script type="module">
     import mermaid from './mermaid.esm.mjs';
-    import { layouts } from './mermaid-layout-elk.esm.mjs';
+    import layouts from './mermaid-layout-elk.esm.mjs';
     mermaid.registerLayoutLoaders(layouts);
     mermaid.parseError = function (err, hash) {
 
@@ -1268,4 +1268,4 @@ direction LR
   </script>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/cypress/platform/viewer.js b/cypress/platform/viewer.js
index 0b480b8bc..77da253c2 100644
--- a/cypress/platform/viewer.js
+++ b/cypress/platform/viewer.js
@@ -1,7 +1,7 @@
-import mermaid from './mermaid.esm.mjs';
-import { layouts } from './mermaid-layout-elk.esm.mjs';
 import externalExample from './mermaid-example-diagram.esm.mjs';
+import layouts from './mermaid-layout-elk.esm.mjs';
 import zenUml from './mermaid-zenuml.esm.mjs';
+import mermaid from './mermaid.esm.mjs';
 
 function b64ToUtf8(str) {
   return decodeURIComponent(escape(window.atob(str)));
diff --git a/packages/mermaid-layout-elk/README.md b/packages/mermaid-layout-elk/README.md
new file mode 100644
index 000000000..c32803292
--- /dev/null
+++ b/packages/mermaid-layout-elk/README.md
@@ -0,0 +1,72 @@
+# @mermaid-js/layout-elk
+
+This package provides a layout engine for Mermaid based on the [ELK](https://www.eclipse.org/elk/) layout engine.
+
+> [!NOTE]  
+> The ELK Layout engine will not be available in all providers that support mermaid by default.
+> The websites will have to install the `@mermaid-js/layout-elk` package to use the ELK layout engine.
+
+## Usage
+
+```
+flowchart-elk TD
+  A --> B
+  A --> C
+```
+
+```
+---
+config:
+  layout: elk
+---
+
+flowchart TD
+  A --> B
+  A --> C
+```
+
+```
+---
+config:
+  layout: elk.stress
+---
+
+flowchart TD
+  A --> B
+  A --> C
+```
+
+### With bundlers
+
+```sh
+npm install @mermaid-js/layout-elk
+```
+
+```ts
+import mermaid from 'mermaid';
+import elkLayouts from '@mermaid-js/layout-elk';
+
+mermaid.registerLayoutLoaders(elkLayouts);
+```
+
+### With CDN
+
+```html
+<script type="module">
+  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
+  import elkLayouts from 'https://cdn.jsdelivr.net/npm/@mermaid-js/layout-elk@11/dist/mermaid-layout-elk.esm.min.mjs';
+
+  mermaid.registerLayoutLoaders(elkLayouts);
+</script>
+```
+
+## Supported layouts
+
+- `elk`: The default layout, which is `elk.layered`.
+- `elk.layered`: Layered layout
+- `elk.stress`: Stress layout
+- `elk.force`: Force layout
+- `elk.mrtree`: Multi-root tree layout
+- `elk.sporeOverlap`: Spore overlap layout
+
+<!-- TODO: Add images for these layouts, as GitHub doesn't support natively -->
diff --git a/packages/mermaid-layout-elk/src/layouts.ts b/packages/mermaid-layout-elk/src/layouts.ts
index a6075386b..dc48ccbfa 100644
--- a/packages/mermaid-layout-elk/src/layouts.ts
+++ b/packages/mermaid-layout-elk/src/layouts.ts
@@ -3,7 +3,7 @@ import type { LayoutLoaderDefinition } from 'mermaid';
 const loader = async () => await import(`./render.js`);
 const algos = ['elk.stress', 'elk.force', 'elk.mrtree', 'elk.sporeOverlap'];
 
-export const layouts: LayoutLoaderDefinition[] = [
+const layouts: LayoutLoaderDefinition[] = [
   {
     name: 'elk',
     loader,
@@ -15,3 +15,5 @@ export const layouts: LayoutLoaderDefinition[] = [
     algorithm: algo,
   })),
 ];
+
+export default layouts;