mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-11-03 20:34:20 +01:00
41 lines
879 B
Markdown
41 lines
879 B
Markdown
> **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
|
|
---
|
|
config:
|
|
layout: elk
|
|
---
|
|
graph TD;
|
|
A-->B;
|
|
B-->C;
|
|
```
|
|
|
|
```mermaid
|
|
---
|
|
config:
|
|
layout: elk
|
|
---
|
|
graph TD;
|
|
A-->B;
|
|
B-->C;
|
|
```
|