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