主题
布局
🌐 Layouts
此页面列出了 Mermaid 图表支持的可用布局算法。
🌐 This page lists the available layout algorithms supported in Mermaid diagrams.
从 v12.0.0 开始,ELK 已经打包并默认提供
🌐 ELK is bundled and default from v12.0.0
在 v12.0.0 之前,ELK 作为一个单独的 @mermaid-js/layout-elk 包发布,每个站点都必须安装并注册它。现在它已经成为 mermaid 本身的一部分,并会自动注册,所以 layout: elk 可以直接使用,无需任何设置——而且它是 默认 的,取代了 Dagre。
🌐 Before v12.0.0, ELK shipped as a separate @mermaid-js/layout-elk package that each site had to install and register. It is now part of mermaid itself and registered automatically, so layout: elk works with no setup — and it is the default, replacing Dagre.
elk 是这些图表的新默认布局:
- 流程图
- 州
- 类
- 实体关系
- 要求
- 用例
- 代理流程
要返回到之前的布局,使用 layout: dagre。
🌐 To go back to the previous layout, use layout: dagre.
主要的 mermaid 包总是包含 ELK。如果你想要没有它的 Mermaid,可以使用 tiny build,它会省略 ELK 以及一些图表类型。@mermaid-js/layout-elk 仍然会发布,因此 tiny build 可以选择重新包含它。
🌐 The main mermaid package always includes ELK. If you want Mermaid without it, use the tiny build, which omits ELK along with some diagram types. @mermaid-js/layout-elk is still published so the tiny build can opt back in.
支持的布局
🌐 Supported Layouts
- elk(默认):ELK(Eclipse 布局内核)。随 Mermaid 一起打包;无需设置。可以选择特定的 ELK 算法,如
elk.stress、elk.force、elk.mrtree、elk.sporeOverlap、elk.box和elk.rectpacking。 - dagre:用于分层图的Dagre布局
- cose-bilkent:用于力导向图的 Cose Bilkent 布局
- tidy-tree:用于层级图的整洁树布局,来自
@mermaid-js/layout-tidy-tree包 整洁树配置
思维导图是唯一一种默认不使用 ELK 布局的图表类型;它们使用 cose-bilkent,除非你另有选择。
🌐 Mindmaps are the one diagram type not laid out with ELK by default; they use cose-bilkent unless you ask for something else.
微型版本为了保持小巧省略了 ELK,并在需要时回退到 Dagre 来绘制图表。详见ELK 和微型版本,如果你仍然想使用 ELK,可以在那里注册 @mermaid-js/layout-elk。
🌐 The tiny build omits ELK to stay small, and falls back to Dagre for diagrams that request it. See ELK and the tiny build for how to register @mermaid-js/layout-elk there if you want ELK anyway.
使用方法
🌐 How to Use
由于 elk 是默认的,图表使用它时无需进行配置。要选择不同的布局,可以在图表的 YAML 配置或初始化选项中进行设置。例如:
🌐 Since elk is the default, a diagram needs no configuration to use it. To pick a different layout, set it in your diagram's YAML config or initialization options. For example:
代码:
mermaid