| 6dd74de | | | 1 | # @mermaid-js/layout-tidy-tree |
| 6dd74de | | | 2 | |
| 6dd74de | | | 3 | This package provides a bidirectional tidy tree layout engine for Mermaid based on the non-layered-tidy-tree-layout algorithm. |
| 6dd74de | | | 4 | |
| 6dd74de | | | 5 | > [!NOTE] |
| 6dd74de | | | 6 | > The Tidy Tree Layout engine will not be available in all providers that support mermaid by default. |
| 6dd74de | | | 7 | > The websites will have to install the @mermaid-js/layout-tidy-tree package to use the Tidy Tree layout engine. |
| 6dd74de | | | 8 | |
| 6dd74de | | | 9 | ## Usage |
| 6dd74de | | | 10 | |
| 6dd74de | | | 11 | ``` |
| 6dd74de | | | 12 | --- |
| 6dd74de | | | 13 | config: |
| 6dd74de | | | 14 | layout: tidy-tree |
| 6dd74de | | | 15 | --- |
| 6dd74de | | | 16 | mindmap |
| 6dd74de | | | 17 | root((mindmap)) |
| 6dd74de | | | 18 | A |
| 6dd74de | | | 19 | B |
| 6dd74de | | | 20 | ``` |
| 6dd74de | | | 21 | |
| 6dd74de | | | 22 | ### With bundlers |
| 6dd74de | | | 23 | |
| 6dd74de | | | 24 | ```sh |
| 6dd74de | | | 25 | npm install @mermaid-js/layout-tidy-tree |
| 6dd74de | | | 26 | ``` |
| 6dd74de | | | 27 | |
| 6dd74de | | | 28 | ```ts |
| 6dd74de | | | 29 | import mermaid from 'mermaid'; |
| 6dd74de | | | 30 | import tidyTreeLayouts from '@mermaid-js/layout-tidy-tree'; |
| 6dd74de | | | 31 | |
| 6dd74de | | | 32 | mermaid.registerLayoutLoaders(tidyTreeLayouts); |
| 6dd74de | | | 33 | ``` |
| 6dd74de | | | 34 | |
| 6dd74de | | | 35 | ### With CDN |
| 6dd74de | | | 36 | |
| 6dd74de | | | 37 | ```html |
| 6dd74de | | | 38 | <script type="module"> |
| 6dd74de | | | 39 | import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs'; |
| 6dd74de | | | 40 | import tidyTreeLayouts from 'https://cdn.jsdelivr.net/npm/@mermaid-js/layout-tidy-tree@0/dist/mermaid-layout-tidy-tree.esm.min.mjs'; |
| 6dd74de | | | 41 | |
| 6dd74de | | | 42 | mermaid.registerLayoutLoaders(tidyTreeLayouts); |
| 6dd74de | | | 43 | </script> |
| 6dd74de | | | 44 | ``` |
| 6dd74de | | | 45 | |
| 6dd74de | | | 46 | ## Tidy Tree Layout Overview |
| 6dd74de | | | 47 | |
| 6dd74de | | | 48 | tidy-tree: The bidirectional tidy tree layout |
| 6dd74de | | | 49 | |
| 6dd74de | | | 50 | The bidirectional tidy tree layout algorithm creates two separate trees that grow horizontally in opposite directions from a central root node: |
| 6dd74de | | | 51 | Left tree: grows horizontally to the left (children alternate: 1st, 3rd, 5th...) |
| 6dd74de | | | 52 | Right tree: grows horizontally to the right (children alternate: 2nd, 4th, 6th...) |
| 6dd74de | | | 53 | |
| 6dd74de | | | 54 | This creates a balanced, symmetric layout that is ideal for mindmaps, organizational charts, and other tree-based diagrams. |
| 6dd74de | | | 55 | |
| 6dd74de | | | 56 | Layout Structure: |
| 6dd74de | | | 57 | [Child 3] ← [Child 1] ← [Root] → [Child 2] → [Child 4] |
| 6dd74de | | | 58 | ↓ ↓ ↓ ↓ |
| 6dd74de | | | 59 | [GrandChild] [GrandChild] [GrandChild] [GrandChild] |