From e8ba79c6a9eb358d8290d6522e8afba1b45aacb5 Mon Sep 17 00:00:00 2001
From: darshanr0107 <darshan@mermaidchart.com>
Date: Fri, 12 Dec 2025 19:44:39 +0530
Subject: [PATCH] chore:  add tidy-tree layout installation instructions
 on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>

---
 docs/config/tidy-tree.md                      | 49 +++++++++++++++++--
 packages/mermaid/src/docs/config/tidy-tree.md | 49 +++++++++++++++++--
 2 files changed, 88 insertions(+), 10 deletions(-)

diff --git a/docs/config/tidy-tree.md b/docs/config/tidy-tree.md
index 1d4227596..5d11177f0 100644
--- a/docs/config/tidy-tree.md
+++ b/docs/config/tidy-tree.md
@@ -6,13 +6,52 @@
 
 # Tidy-tree Layout
 
-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.
+The **tidy-tree** layout provides a bidirectional tidy tree layout engine for Mermaid based on the non-layered-tidy-tree-layout algorithm.
 
-## Features
+> **Note:** The Tidy Tree Layout engine will not be available in all providers that support mermaid by default. Websites will need to install the `@mermaid-js/layout-tidy-tree` package to use the Tidy Tree layout engine.
 
-- Organizes nodes in a tidy, non-overlapping tree
-- Ideal for mindmaps and hierarchical data
-- Automatically adjusts spacing for readability
+## Installation and Setup
+
+The tidy-tree layout must be installed and registered before use.
+
+### With bundlers
+
+```sh
+npm install @mermaid-js/layout-tidy-tree
+```
+
+```ts
+import mermaid from 'mermaid';
+import tidyTreeLayouts from '@mermaid-js/layout-tidy-tree';
+
+mermaid.registerLayoutLoaders(tidyTreeLayouts);
+```
+
+### 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>
+```
+
+## Usage
+
+After registering the layout, add a configuration block at the top of your diagram:
+
+```
+---
+config:
+  layout: tidy-tree
+---
+mindmap
+root((mindmap))
+  A
+  B
+```
 
 ## Example Usage
 
diff --git a/packages/mermaid/src/docs/config/tidy-tree.md b/packages/mermaid/src/docs/config/tidy-tree.md
index f98d36379..d27f975f8 100644
--- a/packages/mermaid/src/docs/config/tidy-tree.md
+++ b/packages/mermaid/src/docs/config/tidy-tree.md
@@ -1,12 +1,51 @@
 # Tidy-tree Layout
 
-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.
+The **tidy-tree** layout provides a bidirectional tidy tree layout engine for Mermaid based on the non-layered-tidy-tree-layout algorithm.
 
-## Features
+> **Note:** The Tidy Tree Layout engine will not be available in all providers that support mermaid by default. Websites will need to install the `@mermaid-js/layout-tidy-tree` package to use the Tidy Tree layout engine.
 
-- Organizes nodes in a tidy, non-overlapping tree
-- Ideal for mindmaps and hierarchical data
-- Automatically adjusts spacing for readability
+## Installation and Setup
+
+The tidy-tree layout must be installed and registered before use.
+
+### With bundlers
+
+```sh
+npm install @mermaid-js/layout-tidy-tree
+```
+
+```ts
+import mermaid from 'mermaid';
+import tidyTreeLayouts from '@mermaid-js/layout-tidy-tree';
+
+mermaid.registerLayoutLoaders(tidyTreeLayouts);
+```
+
+### 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>
+```
+
+## Usage
+
+After registering the layout, add a configuration block at the top of your diagram:
+
+```
+---
+config:
+  layout: tidy-tree
+---
+mindmap
+root((mindmap))
+  A
+  B
+```
 
 ## Example Usage