| 1 | > **Warning** |
| 2 | > |
| 3 | > ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. |
| 4 | > |
| 5 | > ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/layouts.md](../../packages/mermaid/src/docs/config/layouts.md). |
| 6 | |
| 7 | # Layouts |
| 8 | |
| 9 | This page lists the available layout algorithms supported in Mermaid diagrams. |
| 10 | |
| 11 | ## Supported Layouts |
| 12 | |
| 13 | - **elk**: [ELK (Eclipse Layout Kernel)](https://www.eclipse.org/elk/) |
| 14 | - **tidy-tree**: Tidy tree layout for hierarchical diagrams [Tidy Tree Configuration](/config/tidy-tree) |
| 15 | - **cose-bilkent**: Cose Bilkent layout for force-directed graphs |
| 16 | - **dagre**: Dagre layout for layered graphs |
| 17 | |
| 18 | ## How to Use |
| 19 | |
| 20 | You can specify the layout in your diagram's YAML config or initialization options. For example: |
| 21 | |
| 22 | ```mermaid-example |
| 23 | --- |
| 24 | config: |
| 25 | layout: elk |
| 26 | --- |
| 27 | graph TD; |
| 28 | A-->B; |
| 29 | B-->C; |
| 30 | ``` |
| 31 | |
| 32 | ```mermaid |
| 33 | --- |
| 34 | config: |
| 35 | layout: elk |
| 36 | --- |
| 37 | graph TD; |
| 38 | A-->B; |
| 39 | B-->C; |
| 40 | ``` |
| 41 | |