fix(flowchart): apply ELK mergeEdges in subgraphs

[ptlnextdoor]

Summary

Fixes #7659.

This propagates the configured ELK mergeEdges option to subgraph layout options. Previously, Mermaid set elk.layered.mergeEdges on the root ELK graph, but subgraphs only received that option when they declared their own direction. As a result, mergeEdges: true worked for root-level flowchart edges but not for equivalent edges inside subgraphs.

Why this approach

• Keeps the existing root graph options unchanged.
• Applies only the scoped elk.layered.mergeEdges option to all subgraphs.
• Leaves the existing explicit-direction branch and its SEPARATE_CHILDREN behavior intact to avoid changing unrelated hierarchy handling.
• Adds an ELK flowchart rendering regression test using the reported shape.

Validation

• pnpm exec prettier --check packages/mermaid-layout-elk/src/render.ts cypress/integration/rendering/flowchart/flowchart-elk.spec.js
• pnpm exec eslint --quiet packages/mermaid-layout-elk/src/render.ts cypress/integration/rendering/flowchart/flowchart-elk.spec.js
• pnpm --filter @mermaid-js/layout-elk exec tsc --noEmit
• pnpm run load:env -- start-server-and-test dev http://localhost:9000/ "cypress run --spec cypress/integration/rendering/flowchart/flowchart-elk.spec.js --browser electron"
  • Result: 64 tests, 63 passing, 1 pending, 0 failing

[netlify]

✅ Deploy Preview for mermaid-js ready!

Name	Link
🔨 Latest commit	a4e803a
🔍 Latest deploy log	https://app.netlify.com/projects/mermaid-js/deploys/69fe1cabb276660008fbb696
😎 Deploy Preview	https://deploy-preview-7703--mermaid-js.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[changeset-bot]

🦋 Changeset detected

Latest commit: a4e803a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
mermaid	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[pkg-pr-new]

Open in StackBlitz

@mermaid-js/examples

npm i https://pkg.pr.new/@mermaid-js/examples@7703

mermaid

npm i https://pkg.pr.new/mermaid@7703

@mermaid-js/layout-elk

npm i https://pkg.pr.new/@mermaid-js/layout-elk@7703

@mermaid-js/layout-tidy-tree

npm i https://pkg.pr.new/@mermaid-js/layout-tidy-tree@7703

@mermaid-js/mermaid-zenuml

npm i https://pkg.pr.new/@mermaid-js/mermaid-zenuml@7703

@mermaid-js/parser

npm i https://pkg.pr.new/@mermaid-js/parser@7703

@mermaid-js/tiny

npm i https://pkg.pr.new/@mermaid-js/tiny@7703

commit: a4e803a

[Copilot]

Pull request overview

This PR fixes ELK flowchart rendering so the configured mergeEdges option is also applied to subgraphs, matching root-level behavior and addressing the reported subgraph rendering inconsistency from #7659.

Changes:

• Propagates elk.layered.mergeEdges into subgraph layout options in the ELK renderer.
• Preserves the existing explicit-direction subgraph branch and hierarchy handling behavior.
• Adds a Cypress image regression test covering merged edges inside subgraphs.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.

File	Description
packages/mermaid-layout-elk/src/render.ts	Adds mergeEdges to default subgraph ELK layout options so nested layouts honor the global config.
cypress/integration/rendering/flowchart/flowchart-elk.spec.js	Adds a regression snapshot test for merged edges within subgraphs.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[codecov]

Codecov Report

❌ Patch coverage is 0% with 1 line in your changes missing coverage. Please review.
✅ Project coverage is 3.29%. Comparing base (84abc58) to head (a4e803a).
⚠️ Report is 100 commits behind head on develop.

Files with missing lines	Patch %	Lines
packages/mermaid-layout-elk/src/render.ts	0.00%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           develop   #7703      +/-   ##
==========================================
- Coverage     3.33%   3.29%   -0.05%     
==========================================
  Files          542     560      +18     
  Lines        56881   58566    +1685     
  Branches       839     873      +34     
==========================================
+ Hits          1899    1928      +29     
- Misses       54982   56638    +1656     

Flag	Coverage Δ
unit	3.29% <0.00%> (-0.05%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines	Coverage Δ
packages/mermaid-layout-elk/src/render.ts	0.12% <0.00%> (-0.01%)	⬇️

... and 42 files with indirect coverage changes

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[argos-ci]

The latest updates on your projects. Learn more about Argos notifications ↗︎

Build	Status	Details	Updated (UTC)
default (Inspect)	⚠️ Changes detected (Review)	11 changed, 1 added	May 8, 2026, 5:39 PM

[ashishjain0512]

[sisyphus-bot]

Thanks for picking this up — a clean, surgical fix with a reproducing test that mirrors the exact case from #7659. Really appreciate the contribution.

What's working well

• 🎉 [praise] The fix is well-scoped: one line in packages/mermaid-layout-elk/src/render.ts:815 propagating elk.layered.mergeEdges to the default subgraph branch, exactly mirroring the option already set on the root graph (render.ts:722) and on the explicit-direction subgraph branch (render.ts:822). Leaving the SEPARATE_CHILDREN / hierarchy behavior alone is the right call — it keeps the blast radius small.
• 🎉 [praise] The new Cypress test in cypress/integration/rendering/flowchart/flowchart-elk.spec.js reproduces the issue's diagram verbatim, which makes the regression coverage immediately recognizable from the bug report. The 4a-elk numbering slots in nicely next to the existing 4-elk.
• 🎉 [praise] Validation in the PR description (prettier / eslint / tsc / cypress) is thorough — that's exactly the level of pre-flight detail that makes review fast.

Things to address

• 🟡 [important] No changeset for this user-facing fix. Most fixes in .changeset/ ship with a one-line entry (see e.g. .changeset/fix-style-unknown-node-warning.md for the format). Could you run pnpm changeset, choose mermaid with a patch bump, and use a fix: prefix? Something along the lines of fix: apply ELK mergeEdges option to subgraph layout would do it.

Suggestions

• 💡 [suggestion] Just an observation, not a request: when config.elk?.mergeEdges is unset, this assigns 'elk.layered.mergeEdges': undefined. That matches the existing pattern on the root graph at line 722, so consistency wins — but if you ever want to clean up both sites in a follow-up, conditionally spreading the option only when defined would read a touch more cleanly. Definitely out of scope here.

Security

No XSS or injection concerns — the change adds a single boolean-ish layout option consumed by ELK; no DOM sinks, no DOMPurify-relevant code paths.

---

Once the changeset lands this looks good to merge from my end. Thanks again for the careful fix and the reproduction-faithful test! 🙌

[knsv]

Thanks for this the update! It was resolved by this PR #7712 at the same time
Unfortunate, please pick another issue to work with. Happy to have your contributions.