Fix leaf edges from directed subgraphs by xianjianlf2 · Pull Request #7993 · mermaid-js/mermaid

xianjianlf2 · 2026-07-24T10:03:02Z

Explicit-direction subgraphs are extracted into recursive dagre graphs so their local direction can be honored. For subgraphs that only contain disconnected leaf nodes with edges to sibling nodes, that extraction rebases those edges onto the cluster boundary and loses the leaf-level layout constraints.

This keeps that simple leaf-edge case in the parent graph, while still extracting explicit-direction subgraphs with internal edges or nested child clusters.

Tests:

pnpm exec vitest run packages/mermaid/src/rendering-util/layout-algorithms/dagre/mermaid-graphlib.spec.js
pnpm build:mermaid
Playwright render check for the Arrows between subgraphs are broken since 11.16.0 (direction statement in subgraph) #7954 repro: A/OA align at y=98 and B/OB align at y=202.

Summary

Fixed layout handling for leaf edges that cross from explicitly directed subgraphs (direction clusters).
Changed dagre cluster extraction so explicitDir clusters are only extracted into isolated subgraphs when they contain internal edges, rebased cluster edges, or non-leaf children—otherwise leaf-level cross-boundary edges remain in the parent graph to preserve alignment.
Added/updated helper logic in mermaid-graphlib.js (hasInternalEdge, hasRebasedClusterEdge, shouldExtractExplicitDirCluster) and integrated it into the extractor traversal.
Updated unit tests in mermaid-graphlib.spec.js (including new GLB-DIR5 coverage) to ensure:
- leaf cross-boundary edges between inside/outside nodes stay outer-graph edges (GLB-DIR4), and
- leaf edges between sibling subclusters remain leaf edges inside the extracted parent while sibling subclusters aren’t converted to clusterNodes (GLB-DIR5).
Added a Mermaid changeset and included build + Playwright validation confirming correct A/OA and B/OB alignment.
Resolves issue #7954.

netlify · 2026-07-24T10:03:07Z

✅ Deploy Preview for mermaid-js ready!

Name	Link
🔨 Latest commit	`a35154f`
🔍 Latest deploy log	https://app.netlify.com/projects/mermaid-js/deploys/6a66cc7a5faee70008cbb49c
😎 Deploy Preview	https://deploy-preview-7993--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 · 2026-07-24T10:03:07Z

🦋 Changeset detected

Latest commit: a35154f

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

coderabbitai · 2026-07-24T10:03:33Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: db2f6a78-1d27-4ddb-9baa-9bdf29408996

📥 Commits

Reviewing files that changed from the base of the PR and between 6d4556a and a35154f.

📒 Files selected for processing (3)

.changeset/fresh-layout-edges.md
packages/mermaid/src/rendering-util/layout-algorithms/dagre/mermaid-graphlib.js
packages/mermaid/src/rendering-util/layout-algorithms/dagre/mermaid-graphlib.spec.js

🚧 Files skipped from review as they are similar to previous changes (2)

packages/mermaid/src/rendering-util/layout-algorithms/dagre/mermaid-graphlib.js
packages/mermaid/src/rendering-util/layout-algorithms/dagre/mermaid-graphlib.spec.js

📝 Walkthrough

Walkthrough

Explicit-direction cluster extraction now depends on internal or rebased edges, or nested children. Graphlib tests reset shared state and cover leaf cross-boundary edges in direct and nested subgraph scenarios. A patch Changesets entry records the fix.

Changes

Explicit-direction cluster extraction

Layer / File(s)	Summary
Conditional cluster extraction `packages/mermaid/src/rendering-util/layout-algorithms/dagre/mermaid-graphlib.js`	Extraction now requires qualifying internal, rebased, or nested cluster structure before creating an isolated subgraph.
Extraction behavior coverage and release metadata `packages/mermaid/src/rendering-util/layout-algorithms/dagre/mermaid-graphlib.spec.js`, `.changeset/fresh-layout-edges.md`	Tests reset graphlib state and verify leaf edges remain connected to their original nodes in parent and extracted graphs; a patch release note documents the fix.

Estimated code review effort: 3 (Moderate) | ~20 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly matches the main fix: preserving leaf edges from explicitly directed subgraphs.
Description check	✅ Passed	The description covers the bug, the implementation approach, and verification steps, though it is less formal than the template.
Linked Issues check	✅ Passed	The code and tests address `#7954` by keeping simple leaf-edge cases in the parent graph while still extracting nested or internal explicit-direction subgraphs.
Out of Scope Changes check	✅ Passed	The changes stay focused on the directed-subgraph layout fix, its tests, and the required changeset entry.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands.}

pkg-pr-new · 2026-07-24T10:04:41Z

Open in StackBlitz

@mermaid-js/examples

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

mermaid

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

@mermaid-js/layout-elk

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

@mermaid-js/layout-tidy-tree

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

@mermaid-js/mermaid-zenuml

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

@mermaid-js/parser

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

@mermaid-js/tiny

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

commit: a35154f

coderabbitai

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In
`@packages/mermaid/src/rendering-util/layout-algorithms/dagre/mermaid-graphlib.js`:
- Around line 230-240: Update shouldExtractExplicitDirCluster so
explicit-direction clusters are still extracted when their direct outgoing or
incoming cluster edges are rebased onto child nodes, including edges marked with
fromCluster or toCluster. Preserve the existing protection for disconnected
leaf-only clusters without rebased direct cluster edges, and ensure the
externalConnections fallback can process this case.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

Push a commit to this branch (recommended)
Create a new PR with the fixes

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 0f6938cc-56e5-44d5-97ef-eea7926a12ce

📥 Commits

Reviewing files that changed from the base of the PR and between 56219a3 and 6d4556a.

📒 Files selected for processing (2)

packages/mermaid/src/rendering-util/layout-algorithms/dagre/mermaid-graphlib.js
packages/mermaid/src/rendering-util/layout-algorithms/dagre/mermaid-graphlib.spec.js

codecov · 2026-07-24T10:07:46Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 77.52%. Comparing base (56219a3) to head (a35154f).
⚠️ Report is 3 commits behind head on develop.

Additional details and impacted files

@@             Coverage Diff             @@
##           develop    #7993      +/-   ##
===========================================
+ Coverage    70.53%   77.52%   +6.98%     
===========================================
  Files          430      564     +134     
  Lines        37541    74931   +37390     
  Branches      6422    12675    +6253     
===========================================
+ Hits         26481    58092   +31611     
- Misses        8143    15839    +7696     
+ Partials      2917     1000    -1917

Flag	Coverage Δ
e2e	`70.70% <100.00%> (+0.16%)`	⬆️
unit	`74.85% <100.00%> (?)`

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

Files with missing lines	Coverage Δ
...g-util/layout-algorithms/dagre/mermaid-graphlib.js	`94.12% <100.00%> (-1.21%)`	⬇️

... and 540 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 · 2026-07-24T10:22:52Z

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

Build	Status	Details	Updated (UTC)
default (Inspect)	✅ No changes detected	-	Jul 27, 2026, 3:30 AM

Fix leaf edges from directed subgraphs

6d4556a

github-actions Bot added the Type: Bug / Error Something isn't working or is incorrect label Jul 24, 2026

coderabbitai Bot reviewed Jul 24, 2026

View reviewed changes

Comment thread packages/mermaid/src/rendering-util/layout-algorithms/dagre/mermaid-graphlib.js Outdated

fix: preserve rebased directed subgraph edges

a35154f

coderabbitai Bot mentioned this pull request Jul 29, 2026

Revert fix(flowchart): respect per-subgraph direction keyword in Dagre layout- #7672 #8005

Merged

1 of 4 tasks

pbrolin47 closed this in #8005 Jul 29, 2026

coderabbitai Bot mentioned this pull request Sep 23, 2026

[docs] Reviewed GSoC 26 final blog posts openwisp/OpenWISP-Website#267

Merged

Navigation Menu

Repository navigation

Fix leaf edges from directed subgraphs - #7993

Fix leaf edges from directed subgraphs#7993
xianjianlf2 wants to merge 2 commits into
mermaid-js:developfrom
xianjianlf2:fix/subgraph-direction-edge-layout-7954

xianjianlf2 commented Jul 24, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

netlify Bot commented Jul 24, 2026 •

edited

Loading

Uh oh!

changeset-bot Bot commented Jul 24, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Jul 24, 2026 •

edited

Loading

Walkthrough

Changes

Uh oh!

pkg-pr-new Bot commented Jul 24, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Uh oh!

codecov Bot commented Jul 24, 2026 •

edited

Loading

Uh oh!

argos-ci Bot commented Jul 24, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

xianjianlf2 commented Jul 24, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Uh oh!

netlify Bot commented Jul 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for mermaid-js ready!

Uh oh!

changeset-bot Bot commented Jul 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

coderabbitai Bot commented Jul 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Uh oh!

pkg-pr-new Bot commented Jul 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

codecov Bot commented Jul 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

argos-ci Bot commented Jul 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

xianjianlf2 commented Jul 24, 2026 •

edited by coderabbitai Bot

Loading

netlify Bot commented Jul 24, 2026 •

edited

Loading

changeset-bot Bot commented Jul 24, 2026 •

edited

Loading

coderabbitai Bot commented Jul 24, 2026 •

edited

Loading

pkg-pr-new Bot commented Jul 24, 2026 •

edited

Loading

codecov Bot commented Jul 24, 2026 •

edited

Loading

argos-ci Bot commented Jul 24, 2026 •

edited

Loading