marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-26 02:39:41 +02:00
Code Issues Packages Projects Releases Wiki Activity

docs: updated tidy-tree docs

Browse Source 
on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
This commit is contained in:
darshanr0107
2025-08-28 19:36:31 +05:30
parent 85e9ca2a0f
commit 869709a75f
7 changed files with 122 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.cspell/mermaid-terms.txt
View File

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

1
.cspell/misc-terms.txt
View File

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

34
docs/config/layouts.md Normal file
View File

@@ -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;
```

68
docs/config/tidy-tree.md
View File

@@ -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
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.
## Example Usage
```
---
@@ -38,26 +29,31 @@ root((mindmap is a long thing))
D
```
### With bundlers
```sh
npm install @mermaid-js/layout-tidy-tree
```
---
config:
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
import mermaid from 'mermaid';
import tidyTreeLayouts from '@mermaid-js/layout-tidy-tree';
## Note
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>
```
- Currently, tidy-tree is primarily supported for mindmap diagrams.

2
packages/mermaid/src/docs/.vitepress/config.ts
View File

@@ -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' },
],
},
];

21
packages/mermaid/src/docs/config/layouts.md Normal file
View File

@@ -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;
```

68
packages/mermaid/src/docs/config/tidy-tree.md
View File

@@ -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
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.
## Example Usage
```
---
@@ -32,26 +23,31 @@ root((mindmap is a long thing))
D
```
### With bundlers
```sh
npm install @mermaid-js/layout-tidy-tree
```
---
config:
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
import mermaid from 'mermaid';
import tidyTreeLayouts from '@mermaid-js/layout-tidy-tree';
## Note
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>
```
- Currently, tidy-tree is primarily supported for mindmap diagrams.