Mermaid ELK 布局引擎插件完全指南mermaid-js/layout-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 仓库中的packages/mermaid-layout-elk包文档讲解如何将 ELK 布局引擎作为插件接入 Mermaid包括三种启用 ELK 布局的方式独立指令、frontmatter 配置、代码注册、各布局算法的选型以及elk配置组下每个参数的源码级含义。读完本文你可以在自己的项目中让流程图获得正交路由、自动分层、可预测的布局结果并理解 Mermaid 通用布局渲染框架如何调用 elkjs 完成排版。1. 什么是 ELK 布局插件Mermaid 的默认布局基于 dagre 系分层算法。mermaid-js/layout-elk包则提供了基于 Eclipse Layout KernelELK的替代布局引擎由独立的 README 说明This package provides a layout engine for Mermaid based on the ELK layout engine.该包当前的实现事实来自 package.json包名mermaid-js/layout-elk当前版本 0.2.3MIT 协议核心依赖为elkjs^0.9.3ELK 的 JavaScript 移植与d3^7.9.0曲线工具peer 依赖mermaid: ^11.0.2即需要 Mermaid 11.x 环境发布产物为dist/mermaid-layout-elk.core.mjsESM类型声明在dist/layouts.d.ts。官方文档特别强调了一条部署前提ELK 布局引擎不会随所有支持 Mermaid 的第三方站点默认提供网站方必须自行安装该包才能使用。这正是它被设计成独立 npm 插件包的原因——ELK 体积较大插件化可以让不需要它的用户零成本使用 Mermaid 核心。2. 三种启用 ELK 布局的方式README 给出了三类用法覆盖指令级、文档级和代码级三个粒度。2.1 方式一独立指令flowchart-elk最简单的启用方式是在图中直接声明flowchart-elkMermaid 检测到该指令后会加载 ELK 布局器flowchart-elk TD A -- B A -- C2.2 方式二frontmatter 配置layout在 YAML frontmatter 中设置layout: elk对标准flowchart指令生效--- config: layout: elk --- flowchart TD A -- B A -- C也可以指定具体算法例如应力布局stress layout--- config: layout: elk.stress --- flowchart TD A -- B A -- C2.3 方式三代码注册布局加载器无论哪种方式都需要在宿主应用中把 ELK 加载器注册进 Mermaid。使用打包器时npm install mermaid-js/layout-elkimport mermaid from mermaid; import elkLayouts from mermaid-js/layout-elk; mermaid.registerLayoutLoaders(elkLayouts);无打包器、走 CDN 的场景ESM 动态导入script typemodule import mermaid from https://cdn.jsdelivr.net/npm/mermaid11/dist/mermaid.esm.min.mjs; import elkLayouts from https://cdn.jsdelivr.net/npm/mermaid-js/layout-elk0/dist/mermaid-layout-elk.esm.min.mjs; mermaid.registerLayoutLoaders(elkLayouts); /script从源码看registerLayoutLoaders是 Mermaid 主包公开 API 的一部分定义在 mermaid.ts实际逻辑位于 rendering-util/render.ts。它接收LayoutLoaderDefinition[]每个条目包含name布局名、loader惰性加载函数的 Promise和可选的algorithm底层 ELK 算法标识。3. 支持的布局算法README 的 Supported layouts 一节列出了五个布局名。对照 layouts.ts 可以确认其注册结构布局名底层算法说明elkelk.layered默认布局等价于elk.layered分层布局elk.layeredelk.layered分层布局Sugiyama 风格正交边路由elk.stresselk.stress应力布局基于节点间弹簧平衡elk.forceelk.force力导向布局elk.mrtreeelk.mrtree多根树布局Multi-Root Treeelk.sporeOverlapelk.sporeOverlapSpore 重叠布局layouts.ts的关键结构const loader async () await import(./render.js); const algos [elk.stress, elk.force, elk.mrtree, elk.sporeOverlap]; const layouts: LayoutLoaderDefinition[] [ { name: elk, loader, algorithm: elk.layered, }, ...algos.map((algo) ({ name: algo, loader, algorithm: algo, })), ];两个值得注意的设计点elk是elk.layered的别名。无论用户写layout: elk还是elk.layered底层都会把elk.layered作为elk.algorithm传给 elkjs。所有布局共用同一个渲染模块./render.js差异只在algorithm字段。这意味着 ELK 的图构建、几何修正、绘制逻辑对五种算法完全复用。4. ELK 布局的内部工作流程插件的入口逻辑在 render.ts。它通过 Mermaid 导出的createCommonLayoutRenderer工厂挂入通用布局渲染框架暴露两个核心回调export const render createCommonLayoutRendererElkLayoutResult, ElkPreparedLayout({ prepareLayout: prepareLayoutForElk, runLayoutCore: runElkLayoutCore, paintOptions: { skipIntersect: true, }, });从源码结构看一次完整的 ELK 布局按如下阶段执行对应runElkLayoutCore→buildElkGraphFromLayoutData调用链同步配置syncElkPackageConfig通过mermaid.mermaidAPI.setConfig把当前解析后的配置回写给内部 API保证后续测量与主题计算使用同一份配置。构建 ELK 图buildElkGraphFromLayoutData依次执行——createRootElkGraph创建根 ELK 图节点写入全部默认布局选项elk.hierarchyHandling: INCLUDE_CHILDREN、spacing.baseValue: 40、elk.layered.mergeHierarchyEdges: true等并透传用户在config.elk下设置的nodePlacementStrategy、nodePlacementAlignment、mergeEdges、forceNodeModelOrder、considerModelOrder、cycleBreakingStrategyaddSubGraphs按parentId建立子图subgraph父子关系树addVertices/createElkNode把 Mermaid 的LayoutData.nodes转为 ELK 节点普通节点带上预测量的width/height组节点保留children递归结构addEdgesToElkGraph把边转为 ELK 边标签设为edgeLabels.inline: true、placement: CENTERconfigureSubgraphNodes为每个子图写入布局选项spacing.baseValue: 30、nodeLabels.placement: [H_CENTER V_TOP, INSIDE]子图方向通过dir2ElkDirection映射LR→RIGHT、RL→LEFT、TB/TD→DOWN、BT→UPconfigureCrossHierarchyEdges对跨子图边查找公共祖先findCommonAncestor沿路径设置elk.hierarchyHandling: INCLUDE_CHILDREN让 ELK 允许边穿过中间容器applyCyclicEntryConstraint若开启elk.keepEntryNodeOnTop把含环子图的入口节点钉在首层详见第 5 节。执行布局runElkLayout调用elk.layout(elkGraph)拿到带坐标的 ELK 结果。回写坐标applyElkLayoutResult→applyElkNodePositions递归地把 ELK 返回的节点坐标含嵌套子图的相对偏移换算回 MermaidLayoutData中的中心点坐标applyElkEdgeLayout把 ELK 边的sections起点、折点、终点换算成 Mermaid 边点序列并把端点吸附到节点中心、统一设置layoutEdge.curve rounded。排序绘制orderNodesForElkPaint把组节点按嵌套深度升序排在普通节点之前保证容器先于内容绘制随后由通用渲染器的 paint 阶段完成 SVG 绘制。其中paintOptions.skipIntersect: true表明 ELK 路径跳过了通用渲染器的节点相交检测——因为 ELK 的几何修正由本插件自己完成geometry.ts 提供了computeNodeIntersection、replaceEndpoint、onBorder等工具函数处理边与节点边界含菱形等形状的精确交点。仓库还包含针对这些函数的单测位于 packages/mermaid-layout-elk/src/tests/覆盖几何计算geometry.spec.ts、完整渲染render.spec.ts与公共渲染器导入common-renderer-import.spec.ts。5.elk配置项详解Mermaid 全局配置中的elk对象schema 定义在 config.schema.yaml提供以下可选项。它们在createRootElkGraph中被逐一映射为 ELK 的layoutOptionsconfig: layout: elk elk: mergeEdges: true nodePlacementStrategy: BRANDES_KOEPF nodePlacementAlignment: NONE cycleBreakingStrategy: GREEDY_MODEL_ORDER forceNodeModelOrder: false considerModelOrder: NODES_AND_EDGES keepEntryNodeOnTop: false5.1mergeEdges布尔默认falseElk specific option that allows edges to share path where it convenient. It can make for pretty diagrams but can also make it harder to read the diagram.允许多条边共享同一路径合并平行边。映射到 ELK 的elk.layered.mergeEdges。源码中它同时被透传到子图层buildSubgraphLayoutOptions对每个子图写入elk.layered.mergeEdges: elkConfig?.mergeEdges。这一点在 0.2.2 版本曾是一个 bug 修复点——此前子图内部的边不会应用该配置见 CHANGELOG修复后顶层与子图行为一致。5.2nodePlacementStrategy枚举默认BRANDES_KOEPF控制分层布局中每层内节点的横向放置算法取值SIMPLE简单按序放置NETWORK_SIMPLEX网络单纯形法优化交叉LINEAR_SEGMENTS线性段法BRANDES_KOEPFBrandes-Koepf 法默认兼顾对齐与交叉数。映射到nodePlacement.strategy并同样透传给每个子图。5.3nodePlacementAlignment枚举默认NONEElk specific option affecting Brandes-Koepf node placement alignment. NONE picks the alignment with the smallest height.在BRANDES_KOEPF策略产生多个合法对齐alignment时决定选哪一个取值NONE/LEFTUP/LEFTDOWN/RIGHTUP/RIGHTDOWN/BALANCED其中NONE表示选高度最小的对齐整体图更紧凑。对应 ELK 选项elk.layered.nodePlacement.bk.fixedAlignment未设置时以常量DEFAULT_NODE_PLACEMENT_ALIGNMENT NONE兜底见 render.ts。5.4cycleBreakingStrategy枚举默认GREEDY_MODEL_ORDERThis strategy decides how to find cycles in the graph and deciding which edges need adjustment to break loops.决定如何检测环路并选择回边反转取值GREEDY/DEPTH_FIRST/INTERACTIVE/MODEL_ORDER/GREEDY_MODEL_ORDER映射到elk.layered.cycleBreaking.strategy。默认值带MODEL_ORDER即尽量尊重源码中声明的节点顺序来断环。5.5forceNodeModelOrder布尔默认falseThe node order given by the model does not change to produce a better layout.设为true时交叉最小化阶段不再重排节点——模型里 A 在 B 之前布局里就保持 A 在 B 之前。官方提示这需配合considerModelOrder.strategy: NODES_AND_EDGES才能达到预期。映射到elk.layered.crossingMinimization.forceNodeModelOrder。5.6considerModelOrder枚举默认NODES_AND_EDGESPreserves the order of nodes and edges in the model file if this does not lead to additional edge crossings.在不增加交叉的前提下保留源码中节点/边的声明顺序取值NONE/NODES_AND_EDGES/PREFER_EDGES/PREFER_NODES。这是 0.1.8~0.1.9 版本引入的系列特性Make elk respect the order of nodes based from the code让 ELK 布局结果与代码书写顺序更可预测。5.7keepEntryNodeOnTop布尔默认falseElk specific option that keeps the entry node of a recursive flow at the top of the layout.这是 0.2.3 版本新增的选项解决的问题是elk.layered必须先断环才能分层而其默认断环启发式纯按度数计算没有入口点概念。一旦流程图存在回边递归/循环第一个声明的节点可能被排到布局中部阅读顺序被打乱。从源码看其实现findCyclicEntryNodesapplyCyclicEntryConstraint按容器parentId分组只在容器内部寻找弱连通分量若某分量不存在入度为 0 的节点忽略自环说明该分量必含环则提名声明顺序中第一个节点作为入口无环分量存在天然源头不做任何提名布局不受影响被提名的节点通过elk.layered.layering.layerConstraint: FIRST钉在首层。两个明确的适用边界与 schema 描述一致如果循环流程外部有节点指入如 start 节点指向环该分量已有天然源头不触发钉选检测按容器作用域进行跨越子图边界的环不会被识别。该选项是纯增量行为——关闭时对既有 ELK 图无任何影响。6. 其他内置行为无需配置createRootElkGraph中还固化了一批不可通过配置覆盖的选项了解它们有助于理解 ELK 布局的默认观感spacing.baseValue: 40根图/30子图基础间距elk.layered.unnecessaryBendpoints: true与elk.layered.mergeHierarchyEdges: true减少多余拐点、合并层级边elk.direction默认DOWN随后按图的direction指令LR/RL/TB/BT改写边绘制统一curve rounded圆角直角边。这正是 0.2.1 版本的关键修复此前 ELK 边会继承全局basis曲线默认值导致本应直角走线的边出现弯曲现在 ELK 布局默认使用圆角直角边而非 ELK 布局保持原有basis默认值。7. 验证与示例资源E2E 快照用例e2e/diagrams/flowchart/elk/ 与 e2e/diagrams/class-diagram/elk/ 目录收录了大量使用 ELK 布局渲染的流程图与类图基准图可用作布局行为的回归参照交互式演示页demos/flowchart-elk.html 可直接在浏览器中体验flowchart-elk指令布局机制总览文档docs/config/layouts.md 介绍 Mermaid 布局系统dagre 与 ELK的整体关系单元测试packages/mermaid-layout-elk/src/tests/。8. 小结适用前提与限制综合 README 与源码使用 ELK 布局的前提与边界可以归纳为必须是 Mermaid 11.xpeer 依赖mermaid: ^11.0.2且宿主需自行安装/引入mermaid-js/layout-elk并调用mermaid.registerLayoutLoaders五个布局名中elk即elk.layered分层算法适合流程图/类图这类有向分层结构stress、force适合无固定阅读方向的网络状图elk配置组提供 7 个可调项mergeEdges、nodePlacementStrategy、nodePlacementAlignment、cycleBreakingStrategy、forceNodeModelOrder、considerModelOrder、keepEntryNodeOnTop默认值已针对贴近源码声明顺序、紧凑分层调优递归流程建议开启keepEntryNodeOnTop保证入口节点置顶但注意它对有外部入边的环和跨子图的环不生效边默认圆角直角路由、组节点先绘制的顺序、子图标签内嵌顶部居中等行为由插件内置属于该包的既定观感不是全局配置项。【免费下载链接】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），仅供参考 Mermaid ELK 布局引擎插件完全指南：@mermaid-js/layout-elk 的安装、配置与源码解析
Mermaid ELK 布局引擎插件完全指南mermaid-js/layout-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 仓库中的packages/mermaid-layout-elk包文档讲解如何将 ELK 布局引擎作为插件接入 Mermaid包括三种启用 ELK 布局的方式独立指令、frontmatter 配置、代码注册、各布局算法的选型以及elk配置组下每个参数的源码级含义。读完本文你可以在自己的项目中让流程图获得正交路由、自动分层、可预测的布局结果并理解 Mermaid 通用布局渲染框架如何调用 elkjs 完成排版。1. 什么是 ELK 布局插件Mermaid 的默认布局基于 dagre 系分层算法。mermaid-js/layout-elk包则提供了基于 Eclipse Layout KernelELK的替代布局引擎由独立的 README 说明This package provides a layout engine for Mermaid based on the ELK layout engine.该包当前的实现事实来自 package.json包名mermaid-js/layout-elk当前版本 0.2.3MIT 协议核心依赖为elkjs^0.9.3ELK 的 JavaScript 移植与d3^7.9.0曲线工具peer 依赖mermaid: ^11.0.2即需要 Mermaid 11.x 环境发布产物为dist/mermaid-layout-elk.core.mjsESM类型声明在dist/layouts.d.ts。官方文档特别强调了一条部署前提ELK 布局引擎不会随所有支持 Mermaid 的第三方站点默认提供网站方必须自行安装该包才能使用。这正是它被设计成独立 npm 插件包的原因——ELK 体积较大插件化可以让不需要它的用户零成本使用 Mermaid 核心。2. 三种启用 ELK 布局的方式README 给出了三类用法覆盖指令级、文档级和代码级三个粒度。2.1 方式一独立指令flowchart-elk最简单的启用方式是在图中直接声明flowchart-elkMermaid 检测到该指令后会加载 ELK 布局器flowchart-elk TD A -- B A -- C2.2 方式二frontmatter 配置layout在 YAML frontmatter 中设置layout: elk对标准flowchart指令生效--- config: layout: elk --- flowchart TD A -- B A -- C也可以指定具体算法例如应力布局stress layout--- config: layout: elk.stress --- flowchart TD A -- B A -- C2.3 方式三代码注册布局加载器无论哪种方式都需要在宿主应用中把 ELK 加载器注册进 Mermaid。使用打包器时npm install mermaid-js/layout-elkimport mermaid from mermaid; import elkLayouts from mermaid-js/layout-elk; mermaid.registerLayoutLoaders(elkLayouts);无打包器、走 CDN 的场景ESM 动态导入script typemodule import mermaid from https://cdn.jsdelivr.net/npm/mermaid11/dist/mermaid.esm.min.mjs; import elkLayouts from https://cdn.jsdelivr.net/npm/mermaid-js/layout-elk0/dist/mermaid-layout-elk.esm.min.mjs; mermaid.registerLayoutLoaders(elkLayouts); /script从源码看registerLayoutLoaders是 Mermaid 主包公开 API 的一部分定义在 mermaid.ts实际逻辑位于 rendering-util/render.ts。它接收LayoutLoaderDefinition[]每个条目包含name布局名、loader惰性加载函数的 Promise和可选的algorithm底层 ELK 算法标识。3. 支持的布局算法README 的 Supported layouts 一节列出了五个布局名。对照 layouts.ts 可以确认其注册结构布局名底层算法说明elkelk.layered默认布局等价于elk.layered分层布局elk.layeredelk.layered分层布局Sugiyama 风格正交边路由elk.stresselk.stress应力布局基于节点间弹簧平衡elk.forceelk.force力导向布局elk.mrtreeelk.mrtree多根树布局Multi-Root Treeelk.sporeOverlapelk.sporeOverlapSpore 重叠布局layouts.ts的关键结构const loader async () await import(./render.js); const algos [elk.stress, elk.force, elk.mrtree, elk.sporeOverlap]; const layouts: LayoutLoaderDefinition[] [ { name: elk, loader, algorithm: elk.layered, }, ...algos.map((algo) ({ name: algo, loader, algorithm: algo, })), ];两个值得注意的设计点elk是elk.layered的别名。无论用户写layout: elk还是elk.layered底层都会把elk.layered作为elk.algorithm传给 elkjs。所有布局共用同一个渲染模块./render.js差异只在algorithm字段。这意味着 ELK 的图构建、几何修正、绘制逻辑对五种算法完全复用。4. ELK 布局的内部工作流程插件的入口逻辑在 render.ts。它通过 Mermaid 导出的createCommonLayoutRenderer工厂挂入通用布局渲染框架暴露两个核心回调export const render createCommonLayoutRendererElkLayoutResult, ElkPreparedLayout({ prepareLayout: prepareLayoutForElk, runLayoutCore: runElkLayoutCore, paintOptions: { skipIntersect: true, }, });从源码结构看一次完整的 ELK 布局按如下阶段执行对应runElkLayoutCore→buildElkGraphFromLayoutData调用链同步配置syncElkPackageConfig通过mermaid.mermaidAPI.setConfig把当前解析后的配置回写给内部 API保证后续测量与主题计算使用同一份配置。构建 ELK 图buildElkGraphFromLayoutData依次执行——createRootElkGraph创建根 ELK 图节点写入全部默认布局选项elk.hierarchyHandling: INCLUDE_CHILDREN、spacing.baseValue: 40、elk.layered.mergeHierarchyEdges: true等并透传用户在config.elk下设置的nodePlacementStrategy、nodePlacementAlignment、mergeEdges、forceNodeModelOrder、considerModelOrder、cycleBreakingStrategyaddSubGraphs按parentId建立子图subgraph父子关系树addVertices/createElkNode把 Mermaid 的LayoutData.nodes转为 ELK 节点普通节点带上预测量的width/height组节点保留children递归结构addEdgesToElkGraph把边转为 ELK 边标签设为edgeLabels.inline: true、placement: CENTERconfigureSubgraphNodes为每个子图写入布局选项spacing.baseValue: 30、nodeLabels.placement: [H_CENTER V_TOP, INSIDE]子图方向通过dir2ElkDirection映射LR→RIGHT、RL→LEFT、TB/TD→DOWN、BT→UPconfigureCrossHierarchyEdges对跨子图边查找公共祖先findCommonAncestor沿路径设置elk.hierarchyHandling: INCLUDE_CHILDREN让 ELK 允许边穿过中间容器applyCyclicEntryConstraint若开启elk.keepEntryNodeOnTop把含环子图的入口节点钉在首层详见第 5 节。执行布局runElkLayout调用elk.layout(elkGraph)拿到带坐标的 ELK 结果。回写坐标applyElkLayoutResult→applyElkNodePositions递归地把 ELK 返回的节点坐标含嵌套子图的相对偏移换算回 MermaidLayoutData中的中心点坐标applyElkEdgeLayout把 ELK 边的sections起点、折点、终点换算成 Mermaid 边点序列并把端点吸附到节点中心、统一设置layoutEdge.curve rounded。排序绘制orderNodesForElkPaint把组节点按嵌套深度升序排在普通节点之前保证容器先于内容绘制随后由通用渲染器的 paint 阶段完成 SVG 绘制。其中paintOptions.skipIntersect: true表明 ELK 路径跳过了通用渲染器的节点相交检测——因为 ELK 的几何修正由本插件自己完成geometry.ts 提供了computeNodeIntersection、replaceEndpoint、onBorder等工具函数处理边与节点边界含菱形等形状的精确交点。仓库还包含针对这些函数的单测位于 packages/mermaid-layout-elk/src/tests/覆盖几何计算geometry.spec.ts、完整渲染render.spec.ts与公共渲染器导入common-renderer-import.spec.ts。5.elk配置项详解Mermaid 全局配置中的elk对象schema 定义在 config.schema.yaml提供以下可选项。它们在createRootElkGraph中被逐一映射为 ELK 的layoutOptionsconfig: layout: elk elk: mergeEdges: true nodePlacementStrategy: BRANDES_KOEPF nodePlacementAlignment: NONE cycleBreakingStrategy: GREEDY_MODEL_ORDER forceNodeModelOrder: false considerModelOrder: NODES_AND_EDGES keepEntryNodeOnTop: false5.1mergeEdges布尔默认falseElk specific option that allows edges to share path where it convenient. It can make for pretty diagrams but can also make it harder to read the diagram.允许多条边共享同一路径合并平行边。映射到 ELK 的elk.layered.mergeEdges。源码中它同时被透传到子图层buildSubgraphLayoutOptions对每个子图写入elk.layered.mergeEdges: elkConfig?.mergeEdges。这一点在 0.2.2 版本曾是一个 bug 修复点——此前子图内部的边不会应用该配置见 CHANGELOG修复后顶层与子图行为一致。5.2nodePlacementStrategy枚举默认BRANDES_KOEPF控制分层布局中每层内节点的横向放置算法取值SIMPLE简单按序放置NETWORK_SIMPLEX网络单纯形法优化交叉LINEAR_SEGMENTS线性段法BRANDES_KOEPFBrandes-Koepf 法默认兼顾对齐与交叉数。映射到nodePlacement.strategy并同样透传给每个子图。5.3nodePlacementAlignment枚举默认NONEElk specific option affecting Brandes-Koepf node placement alignment. NONE picks the alignment with the smallest height.在BRANDES_KOEPF策略产生多个合法对齐alignment时决定选哪一个取值NONE/LEFTUP/LEFTDOWN/RIGHTUP/RIGHTDOWN/BALANCED其中NONE表示选高度最小的对齐整体图更紧凑。对应 ELK 选项elk.layered.nodePlacement.bk.fixedAlignment未设置时以常量DEFAULT_NODE_PLACEMENT_ALIGNMENT NONE兜底见 render.ts。5.4cycleBreakingStrategy枚举默认GREEDY_MODEL_ORDERThis strategy decides how to find cycles in the graph and deciding which edges need adjustment to break loops.决定如何检测环路并选择回边反转取值GREEDY/DEPTH_FIRST/INTERACTIVE/MODEL_ORDER/GREEDY_MODEL_ORDER映射到elk.layered.cycleBreaking.strategy。默认值带MODEL_ORDER即尽量尊重源码中声明的节点顺序来断环。5.5forceNodeModelOrder布尔默认falseThe node order given by the model does not change to produce a better layout.设为true时交叉最小化阶段不再重排节点——模型里 A 在 B 之前布局里就保持 A 在 B 之前。官方提示这需配合considerModelOrder.strategy: NODES_AND_EDGES才能达到预期。映射到elk.layered.crossingMinimization.forceNodeModelOrder。5.6considerModelOrder枚举默认NODES_AND_EDGESPreserves the order of nodes and edges in the model file if this does not lead to additional edge crossings.在不增加交叉的前提下保留源码中节点/边的声明顺序取值NONE/NODES_AND_EDGES/PREFER_EDGES/PREFER_NODES。这是 0.1.8~0.1.9 版本引入的系列特性Make elk respect the order of nodes based from the code让 ELK 布局结果与代码书写顺序更可预测。5.7keepEntryNodeOnTop布尔默认falseElk specific option that keeps the entry node of a recursive flow at the top of the layout.这是 0.2.3 版本新增的选项解决的问题是elk.layered必须先断环才能分层而其默认断环启发式纯按度数计算没有入口点概念。一旦流程图存在回边递归/循环第一个声明的节点可能被排到布局中部阅读顺序被打乱。从源码看其实现findCyclicEntryNodesapplyCyclicEntryConstraint按容器parentId分组只在容器内部寻找弱连通分量若某分量不存在入度为 0 的节点忽略自环说明该分量必含环则提名声明顺序中第一个节点作为入口无环分量存在天然源头不做任何提名布局不受影响被提名的节点通过elk.layered.layering.layerConstraint: FIRST钉在首层。两个明确的适用边界与 schema 描述一致如果循环流程外部有节点指入如 start 节点指向环该分量已有天然源头不触发钉选检测按容器作用域进行跨越子图边界的环不会被识别。该选项是纯增量行为——关闭时对既有 ELK 图无任何影响。6. 其他内置行为无需配置createRootElkGraph中还固化了一批不可通过配置覆盖的选项了解它们有助于理解 ELK 布局的默认观感spacing.baseValue: 40根图/30子图基础间距elk.layered.unnecessaryBendpoints: true与elk.layered.mergeHierarchyEdges: true减少多余拐点、合并层级边elk.direction默认DOWN随后按图的direction指令LR/RL/TB/BT改写边绘制统一curve rounded圆角直角边。这正是 0.2.1 版本的关键修复此前 ELK 边会继承全局basis曲线默认值导致本应直角走线的边出现弯曲现在 ELK 布局默认使用圆角直角边而非 ELK 布局保持原有basis默认值。7. 验证与示例资源E2E 快照用例e2e/diagrams/flowchart/elk/ 与 e2e/diagrams/class-diagram/elk/ 目录收录了大量使用 ELK 布局渲染的流程图与类图基准图可用作布局行为的回归参照交互式演示页demos/flowchart-elk.html 可直接在浏览器中体验flowchart-elk指令布局机制总览文档docs/config/layouts.md 介绍 Mermaid 布局系统dagre 与 ELK的整体关系单元测试packages/mermaid-layout-elk/src/tests/。8. 小结适用前提与限制综合 README 与源码使用 ELK 布局的前提与边界可以归纳为必须是 Mermaid 11.xpeer 依赖mermaid: ^11.0.2且宿主需自行安装/引入mermaid-js/layout-elk并调用mermaid.registerLayoutLoaders五个布局名中elk即elk.layered分层算法适合流程图/类图这类有向分层结构stress、force适合无固定阅读方向的网络状图elk配置组提供 7 个可调项mergeEdges、nodePlacementStrategy、nodePlacementAlignment、cycleBreakingStrategy、forceNodeModelOrder、considerModelOrder、keepEntryNodeOnTop默认值已针对贴近源码声明顺序、紧凑分层调优递归流程建议开启keepEntryNodeOnTop保证入口节点置顶但注意它对有外部入边的环和跨子图的环不生效边默认圆角直角路由、组节点先绘制的顺序、子图标签内嵌顶部居中等行为由插件内置属于该包的既定观感不是全局配置项。【免费下载链接】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），仅供参考