快速把 Mermaid 流程图的布局切到 ELK：一份完整配置指南
【免费下载链接】mermaidGeneration of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown项目地址: https://gitcode.com/GitHub_Trending/me/mermaid
在 mermaid 项目里，流程图默认走 dagre 渲染器，小图够用，节点一多就开始叠线、绕圈。这篇文章带你把布局切到 ELK 引擎：一行指令就能开启，再配合几个官方配置项控制间距和阅读顺序，复杂图也能排得干净。
先说一个踩坑瞬间：你把大图粘进在线编辑器，把flowchart改成flowchart-elk，页面却报错说布局不存在。原因很简单——ELK 引擎不是所有宿主默认注册的，很多站点没装@mermaid-js/layout-elk这个包。下面按"先跑通、再调参"的顺序讲。
两种切法：改一个指令，或加一段 frontmatter
ELK 有两条启用路径，选一个就行。
方式一：换指令名。把flowchart直接写成flowchart-elk：
方式二：frontmatter 声明layout。图语法保持flowchart不变，在头部配置块里写：
--- config: layout: elk --- flowchart TD A --> B B --> Clayout的默认值是dagre，改成elk就整体换引擎。两条路径的生效条件一样：宿主要已注册 ELK 布局加载器，否则只声明不渲染。
ELK 布局参数表：这 7 个配置项最值得动 ⚙️
参数都挂在config的elk块下，默认值来自项目的配置 schema。建议值按实际图来调：
| 参数 | 默认值 | 建议值 | 作用 |
|---|---|---|---|
layout | dagre | elk/elk.stress | 选布局引擎；elk等价于分层布局elk.layered |
elk.mergeEdges | false | 连线密集时试true | 允许边共用路径，更整洁但可读性下降 |
elk.nodePlacementStrategy | BRANDES_KOEPF | 图过高时试NETWORK_SIMPLEX | 控制同层节点的排布策略 |
elk.nodePlacementAlignment | NONE | 想层与层对准时用BALANCED | Brandes-Koepf 排布的对齐方式，NONE取最小高度 |
elk.cycleBreakingStrategy | GREEDY_MODEL_ORDER | 环路多图试DEPTH_FIRST | 找到环后决定断开哪条边 |
elk.considerModelOrder | NODES_AND_EDGES | 保持默认 | 在不增加交叉的前提下保留你声明的节点顺序 |
elk.keepEntryNodeOnTop | false | 有明确入口的图开true | 把循环流的入口节点钉在顶层，阅读顺序不乱 |
一个提醒：这些嵌套配置和默认值是深度合并的，你只写想改的字段即可，其余自动继承。
避坑：ELK 不是默认注册的 🔧
坑一：编辑器里切换失败。带打包器的项目里，先装包再注册：
import mermaid from 'mermaid'; import elkLayouts from '@mermaid-js/layout-elk'; mermaid.registerLayoutLoaders(elkLayouts);注册一次，flowchart-elk指令和layout: elk配置就都能用了。注册后可选的布局不止一个：elk（分层）、elk.stress、elk.force、elk.mrtree、elk.sporeOverlap，前两者覆盖绝大多数流程图场景。
坑二：循环图阅读顺序被洗乱。有回边的流程图（比如"失败后回到重试"），ELK 的破环策略不认识你的入口点，可能把第一个节点排到中间。把elk.keepEntryNodeOnTop设为true，入口节点会被固定在第一层，图还是从上往下读。这个开关只对"循环自身没有外部来源"的环生效，带起点的循环图不受影响。
延伸资源
- layouts 布局算法文档：官方支持的布局清单与声明方式
- flowchart 语法文档：渲染器切换的完整说明
- @mermaid-js/layout-elk 包 README：打包器与 CDN 两种接入方式
- flowchart-elk 示例页面：带回边结构的示例图
- 配置项 schema：所有
elk.*参数的一手定义
下一步
打开你项目里最大的那张流程图，先只改指令名看效果，再按需调keepEntryNodeOnTop和nodePlacementStrategy两个参数——通常两轮就能得到一张干净的图。
【免费下载链接】mermaidGeneration of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown项目地址: https://gitcode.com/GitHub_Trending/me/mermaid
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
