Merge branch 'elk-migration' into sidv/cleanupLayoutElk

* elk-migration:
  chore: Use spaces
  docs: Add Readme
  chore: Use default export
  [autofix.ci] apply automated fixes

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) {};
 

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) {};
 

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);

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>
+</html>

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)));

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 -->

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;