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