Skip to content

布局 ​

🌐 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
⌘ + 回车键|
Opens in mermaid.ai