diff --git a/.cspell/mermaid-terms.txt b/.cspell/mermaid-terms.txt index b0cfa0a1d..6900c15b0 100644 --- a/.cspell/mermaid-terms.txt +++ b/.cspell/mermaid-terms.txt @@ -5,6 +5,7 @@ bmatrix braintree catmull compositTitleSize +cose curv doublecircle elems diff --git a/.cspell/misc-terms.txt b/.cspell/misc-terms.txt index 1820e3c86..2906a02fa 100644 --- a/.cspell/misc-terms.txt +++ b/.cspell/misc-terms.txt @@ -1,4 +1,5 @@ BRANDES +Buzan circo handDrawn KOEPF diff --git a/docs/config/layouts.md b/docs/config/layouts.md new file mode 100644 index 000000000..ff5607629 --- /dev/null +++ b/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; +``` diff --git a/docs/config/tidy-tree.md b/docs/config/tidy-tree.md index b5863ec9e..a1105b780 100644 --- a/docs/config/tidy-tree.md +++ b/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 -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 ` -``` +- Currently, tidy-tree is primarily supported for mindmap diagrams. diff --git a/packages/mermaid/src/docs/.vitepress/config.ts b/packages/mermaid/src/docs/.vitepress/config.ts index 02da9f118..066fde693 100644 --- a/packages/mermaid/src/docs/.vitepress/config.ts +++ b/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' }, ], }, ]; diff --git a/packages/mermaid/src/docs/config/layouts.md b/packages/mermaid/src/docs/config/layouts.md new file mode 100644 index 000000000..743b7dd9a --- /dev/null +++ b/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; +``` diff --git a/packages/mermaid/src/docs/config/tidy-tree.md b/packages/mermaid/src/docs/config/tidy-tree.md index 49eeafe8f..0a617ac96 100644 --- a/packages/mermaid/src/docs/config/tidy-tree.md +++ b/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 -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 ` -``` +- Currently, tidy-tree is primarily supported for mindmap diagrams.