fix(mindmap): correct root edge attachment in tidy-tree layout

[Valley-15]

📑 Summary

Fixes an issue where root-to-child edges in mindmap diagrams using layout: tidy-tree appeared visually disconnected on the right side.

Resolves #7572
Related to #7579

---

📏 Design Decisions

• The issue was caused by intermediate routing points being added even for edges connected to the root node.
• This created bent paths that did not align properly with node boundaries, especially on the right side.
• The fix ensures that when the target node is the root, intermediate routing points are skipped.
• As a result, edges use direct paths ([startPos, endPos]) and attach correctly.

---

📋 Tasks

• 📖 have read the contribution guidelines
• 💻 have added necessary unit/e2e tests
• 📓 have added documentation
• 🦋 changeset added (not required for small bug fix)

[changeset-bot]

⚠️ No Changeset found

Latest commit: 6e59085

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

[netlify]

✅ Deploy Preview for mermaid-js ready!

Name	Link
🔨 Latest commit	6e59085
🔍 Latest deploy log	https://app.netlify.com/projects/mermaid-js/deploys/69d741cf72f9de000814c94e
😎 Deploy Preview	https://deploy-preview-7591--mermaid-js.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

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

[pkg-pr-new]

Open in StackBlitz

@mermaid-js/examples

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

mermaid

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

@mermaid-js/layout-elk

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

@mermaid-js/layout-tidy-tree

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

@mermaid-js/mermaid-zenuml

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

@mermaid-js/parser

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

@mermaid-js/tiny

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

commit: 35232f1

[codecov]

Codecov Report

❌ Patch coverage is 0% with 6 lines in your changes missing coverage. Please review.
✅ Project coverage is 3.33%. Comparing base (7781d76) to head (6e59085).

Files with missing lines	Patch %	Lines
packages/mermaid-layout-tidy-tree/src/layout.ts	0.00%	6 Missing ⚠️

Additional details and impacted files

@@           Coverage Diff           @@
##           develop   #7591   +/-   ##
=======================================
  Coverage     3.33%   3.33%           
=======================================
  Files          536     535    -1     
  Lines        56249   56240    -9     
  Branches       820     820           
=======================================
  Hits          1876    1876           
+ Misses       54373   54364    -9     

Flag	Coverage Δ
unit	3.33% <0.00%> (+<0.01%)	⬆️

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

Files with missing lines	Coverage Δ
packages/mermaid-layout-tidy-tree/src/layout.ts	0.22% <0.00%> (-0.01%)	⬇️

... and 1 file 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)	6 changed, 1 added	Apr 9, 2026, 6:29 AM

[knsv]

Appreciate this @Valley-15

It looks much better at the right part of the diagram but there are some new visual discepencies on the left part oif the diagram instead. Looking forward to an update! (I will also let my bot do a review)-

You can see them here:
https://app.argos-ci.com/mermaid/mermaid/builds/6471/290705813

Attaching a screenshot as well

[knsv]

[sisyphus-bot]

Thanks for tackling this, @Valley-15 — nice first contribution! The root cause analysis in your PR description is clear and the fix is well-targeted.

What's working well

🎉 [praise] Excellent diagnosis of the root cause. The intermediate routing points being added unconditionally for root-connected edges is exactly the problem, and skipping them when targetNode.section === 'root' or sourceNode.section === 'root' is the right fix. The symmetry of the 4 conditions (covering both source→root and root→target for both left and right sections) is clean.

🎉 [praise] Minimal, surgical change — 4 conditions added, zero collateral modifications. This is the ideal scope for a bug fix PR.

Things to address

🔴 [blocking] The issue with added artifacts in the left part of the diagram (See earlier comment).

🟡 [important] Missing e2e visual regression test. Since this is a rendering fix that changes how edges visually appear, it would be great to add a test case to cypress/integration/rendering/mindmap-tidy-tree.spec.js that reproduces the original bug (>5 children causing disconnected edges on the right side). This ensures the fix isn't accidentally regressed. Here's an example you could add:

it('5-tidy-tree: should render root edges correctly with many children', () => {
  imgSnapshotTest(
    ` ---
    config:
      layout: tidy-tree
    ---
    mindmap
    root((Central Idea))
      Branch1
      Branch2
      Branch3
      Branch4
      Branch5
      Branch6
      Branch7
    `
  );
});

The existing test file at cypress/integration/rendering/mindmap-tidy-tree.spec.js has 4 tests you can use as reference — they all follow the imgSnapshotTest() pattern. The key is to have enough children (>5) so that nodes appear on both left and right sides, which is the scenario from issue #7572.

🟢 [nit] Consider generating a changeset for this fix: pnpm changeset, select mermaid-layout-tidy-tree, choose patch, and prefix with fix:. Your checklist notes this as optional for small fixes, and it is — but it helps users see the fix in release notes.

Security

No XSS or injection issues identified. This change modifies purely geometric edge routing calculations with no user-input handling or DOM manipulation.

Summary

Severity	Count
🔴 blocking	1
🟡 important	1
🟢 nit	1
💡 suggestion	0
🎉 praise	2

Self-check

• At least one 🎉 praise item
• No duplicate comments
• Severity tally: 0 🔴 / 1 🟡 / 1 🟢 / 0 💡 / 2 🎉
• Verdict matches criteria: COMMENT (1 🟡, no 🔴)
• No inline comments used
• Tone check: collaborative and constructive

[knsv]

Happy you are still on this @Valley-15 !!

There are some rendering issues still: https://app.argos-ci.com/mermaid/mermaid/builds/6508/291474114

You can always check the argos output after your push, no need to wait for a maintainer. This is part of our CI and will run on each push to your PR.

A red cross does not necessarily mean it is wrong; it simply means the output has changed. For your next update, you can expect it to be red, as your PR is changing the output. Click the link and see that the visual tests align with what you want to achieve!

[Valley-15]

thanks @knsv sir for guidance I am working on this and will workout asap.

[ashishjain0512]

@Valley-15 Tag us in a comment when PR is ready for re-review or the Argos build needs verification. We'll be happy to assist.