docs: updated tidy-tree docs

on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>

.cspell/mermaid-terms.txt

@@ -5,6 +5,7 @@ bmatrix
 braintree
 catmull
 compositTitleSize
+cose
 curv
 doublecircle
 elems

.cspell/misc-terms.txt

@@ -1,4 +1,5 @@
 BRANDES
+Buzan
 circo
 handDrawn
 KOEPF

docs/config/layouts.md

@@ -0,0 +1,34 @@
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/layouts.md](../../packages/mermaid/src/docs/config/layouts.md).
+
+# Layouts
+
+This page lists the available layout algorithms supported in Mermaid diagrams.
+
+## Supported Layouts
+
+- **elk**: [ELK (Eclipse Layout Kernel)](https://www.eclipse.org/elk/)
+- **tidy-tree**: Tidy tree layout for hierarchical diagrams [Tidy Tree Configuration](/config/tidy-tree)
+- **cose-bilkent**: Cose Bilkent layout for force-directed graphs
+- **dagre**: Dagre layout for layered graphs
+
+## How to Use
+
+You can specify the layout in your diagram's YAML config or initialization options. For example:
+
+```mermaid-example
+%%{init: { 'layout': 'elk' }}%%
+graph TD;
+  A-->B;
+  B-->C;
+```
+
+```mermaid
+%%{init: { 'layout': 'elk' }}%%
+graph TD;
+  A-->B;
+  B-->C;
+```

docs/config/tidy-tree.md

@@ -4,26 +4,17 @@
 >
 > ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/tidy-tree.md](../../packages/mermaid/src/docs/config/tidy-tree.md).
 
-# Tidy-tree Layout Instructions
+# Tidy-tree Layout
 
-Instructions to use the Tidy-tree layout algorithm.
+The **tidy-tree** layout arranges nodes in a hierarchical, tree-like structure. It is especially useful for diagrams where parent-child relationships are important, such as mindmaps.
 
-## Getting Started
+## Features
 
-### Installation
+- Organizes nodes in a tidy, non-overlapping tree
+- Ideal for mindmaps and hierarchical data
+- Automatically adjusts spacing for readability
 
-```bash
+## Example Usage
-npm install non-layered-tidy-tree-layout
-# or
-yarn add non-layered-tidy-tree-layout
-
-```
-
-There's also a built version: `dist/non-layered-tidy-tree-layout.js` for use with browser `<script>` tag, or as a Javascript module.
-
-## Tidy tree Layouts
-
-Mermaid also supports a Tidy Tree layout for mindmaps.
 
 ```
 ---
@@ -38,26 +29,31 @@ root((mindmap is a long thing))
   D
 ```
 
-### With bundlers
+```
-
+ ---
-```sh
+      config:
-npm install @mermaid-js/layout-tidy-tree
+        layout: tidy-tree
+      ---
+      mindmap
+      root((mindmap))
+        Origins
+          Long history
+          ::icon(fa fa-book)
+          Popularisation
+            British popular psychology author Tony Buzan
+        Research
+          On effectiveness&lt;br/>and features
+          On Automatic creation
+            Uses
+                Creative techniques
+                Strategic planning
+                Argument mapping
+        Tools
+              id)I am a cloud(
+                  id))I am a bang((
+                    Tools
 ```
 
-```ts
+## Note
-import mermaid from 'mermaid';
-import tidyTreeLayouts from '@mermaid-js/layout-tidy-tree';
 
-mermaid.registerLayoutLoaders(tidyTreeLayouts);
+- Currently, tidy-tree is primarily supported for mindmap diagrams.
-```
-
-### With CDN
-
-```html
-<script type="module">
-  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
-  import tidyTreeLayouts from 'https://cdn.jsdelivr.net/npm/@mermaid-js/layout-tidy-tree@0/dist/mermaid-layout-tidy-tree.esm.min.mjs';
-
-  mermaid.registerLayoutLoaders(tidyTreeLayouts);
-</script>
-```

packages/mermaid/src/docs/.vitepress/config.ts

@@ -203,7 +203,7 @@ function sidebarConfig() {
         { text: 'Accessibility', link: '/config/accessibility' },
         { text: 'Mermaid CLI', link: '/config/mermaidCLI' },
         { text: 'FAQ', link: '/config/faq' },
-        { text: 'Tidy tree layout Instructions', link: '/config/tidy-tree' },
+        { text: 'Layouts', link: '/config/layouts' },
       ],
     },
   ];

packages/mermaid/src/docs/config/layouts.md

@@ -0,0 +1,21 @@
+# Layouts
+
+This page lists the available layout algorithms supported in Mermaid diagrams.
+
+## Supported Layouts
+
+- **elk**: [ELK (Eclipse Layout Kernel)](https://www.eclipse.org/elk/)
+- **tidy-tree**: Tidy tree layout for hierarchical diagrams [Tidy Tree Configuration](/config/tidy-tree)
+- **cose-bilkent**: Cose Bilkent layout for force-directed graphs
+- **dagre**: Dagre layout for layered graphs
+
+## How to Use
+
+You can specify the layout in your diagram's YAML config or initialization options. For example:
+
+```mermaid
+%%{init: { 'layout': 'elk' }}%%
+graph TD;
+  A-->B;
+  B-->C;
+```

packages/mermaid/src/docs/config/tidy-tree.md

@@ -1,23 +1,14 @@
-# Tidy-tree Layout Instructions
+# Tidy-tree Layout
 
-Instructions to use the Tidy-tree layout algorithm.
+The **tidy-tree** layout arranges nodes in a hierarchical, tree-like structure. It is especially useful for diagrams where parent-child relationships are important, such as mindmaps.
 
-## Getting Started
+## Features
 
-### Installation
+- Organizes nodes in a tidy, non-overlapping tree
+- Ideal for mindmaps and hierarchical data
+- Automatically adjusts spacing for readability
 
-```bash
+## Example Usage
-npm install non-layered-tidy-tree-layout
-# or
-yarn add non-layered-tidy-tree-layout
-
-```
-
-There's also a built version: `dist/non-layered-tidy-tree-layout.js` for use with browser `<script>` tag, or as a Javascript module.
-
-## Tidy tree Layouts
-
-Mermaid also supports a Tidy Tree layout for mindmaps.
 
 ```
 ---
@@ -32,26 +23,31 @@ root((mindmap is a long thing))
   D
 ```
 
-### With bundlers
+```
-
+ ---
-```sh
+      config:
-npm install @mermaid-js/layout-tidy-tree
+        layout: tidy-tree
+      ---
+      mindmap
+      root((mindmap))
+        Origins
+          Long history
+          ::icon(fa fa-book)
+          Popularisation
+            British popular psychology author Tony Buzan
+        Research
+          On effectiveness&lt;br/>and features
+          On Automatic creation
+            Uses
+                Creative techniques
+                Strategic planning
+                Argument mapping
+        Tools
+              id)I am a cloud(
+                  id))I am a bang((
+                    Tools
 ```
 
-```ts
+## Note
-import mermaid from 'mermaid';
-import tidyTreeLayouts from '@mermaid-js/layout-tidy-tree';
 
-mermaid.registerLayoutLoaders(tidyTreeLayouts);
+- Currently, tidy-tree is primarily supported for mindmap diagrams.
-```
-
-### With CDN
-
-```html
-<script type="module">
-  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
-  import tidyTreeLayouts from 'https://cdn.jsdelivr.net/npm/@mermaid-js/layout-tidy-tree@0/dist/mermaid-layout-tidy-tree.esm.min.mjs';
-
-  mermaid.registerLayoutLoaders(tidyTreeLayouts);
-</script>
-```