企业官网建设流程全解析

Mermaid 流程图 ELK 布局一键启用：3 行改动搞定复杂连线交叉

【免费下载链接】mermaidGeneration of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown项目地址: https://gitcode.com/GitHub_Trending/me/mermaid

当你画到第 10 个节点、连线开始穿过别人的节点时，问题多半不在画法，而在布局算法。Mermaid 流程图默认用 dagre 渲染，节点一多交叉就压不住，把布局算法换成 ELK 就能明显收敛。本文讲两件事：如何用最小改动切到 ELK 布局，以及切换后哪几个参数值得动。

先跑通：最小改动方案 🔧

如果你的环境已内置 ELK 布局包（新版官方示例页和多数在线编辑器开箱即用），只需要改一行：把代码块首行的flowchart写成flowchart-elk。

flowchart-elk TD A[开始] --> B{条件判断} B -->|是| C[执行操作] B -->|否| D[其他处理] C --> E[输出] D --> E

保存刷新，节点会按更规整的层次重新排布。不想动首行的话，用 frontmatter 声明也可以：

--- config: layout: elk ---

下面照旧写flowchart TD即可。自建 Web 应用要多一步：ELK 是独立布局包，先安装@mermaid-js/layout-elk，再调一次mermaid.registerLayoutLoaders(...)注册，完整写法见 packages/mermaid-layout-elk/ 的 README。

再调优：关键参数逐项拆解 ⚙️

切换后默认值多数情况够用，只需要注意下面 4 个位置：

多入口图还可以把子布局换成elk.mrtree，避免 ELK 把某个节点当成唯一根、强行把其余节点塞进它下面。

场景实战：拿一个真实图来验证

用官方示例图验证：一个"评审 → 执行 → 反馈"的业务流程，其中 Flow 2 的一条分支回流到 Step 1 形成大环，主路径用粗箭头==>强调，完整图在 demos/flowchart-elk.html。

这类带环的图在 dagre 下最容易翻车：布局器想把 Step 1 排到反馈节点上方，回流连线只好穿过中间的 C、D、E 三个节点。ELK 的分层算法会把回路边甩到图的外侧绕行，粗主线横穿中间，一眼就是"一条主流程加一次绕路"。这里强调粗箭头不是装饰——视觉权重高的边更容易保住主路径的直线走向。另外回路边建议留一个短标签说明"评审不通过"，比读者自己数交叉数边可靠得多。

踩坑提醒与性能边界 ⚠️

• 如果flowchart-elk前缀渲染报错或布局没变化，建议先确认宿主环境注册过布局包，ELK 不是所有支持 Mermaid 的网站都默认带上，缺了就要装@mermaid-js/layout-elk。
• 如果图是少于 15 个节点的线性流程，建议保留默认 dagre，ELK 的计算开销更大，简单图上只会变慢看不到收益。
• 如果节点数超过约 100 个，建议按子图拆成几张图，或者用elk.layered这类确定性算法，力导向类布局在大规模图上耗时增长明显。

图超过 20 个节点、带反馈环时，一行切换 ELK 布局通常是投入产出比最高的操作，简单图则默认值直接跑。细节可查流程图语法文档的渲染器章节 docs/syntax/flowchart.md、全部可用布局列表 docs/config/layouts.md，以及示例页源码 demos/flowchart-elk.html。

【免费下载链接】mermaidGeneration of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown项目地址: https://gitcode.com/GitHub_Trending/me/mermaid