fix architecture rendering

[Crafter-Y]

vertical and horizontal lines were rendered too long. This should be fixed by now

📑 Summary

As described in the issue, there were problems rendering the architecture diagram. Lines should now be rendered at the correct width

Resolves #7313

📏 Design Decisions

I think it should be clear what I did there

📋 Tasks

Make sure you

• 📖 have read the contribution guidelines
• 💻 have added necessary unit/e2e tests.
• 📓 have added documentation. Make sure MERMAID_RELEASE_VERSION is used for all new features.
• 🦋 If your PR makes a change that should be noted in one or more packages' changelogs, generate a changeset by running pnpm changeset and following the prompts. Changesets that add features should be minor and those that fix bugs should be patch. Please prefix changeset messages with feat:, fix:, or chore:.

[changeset-bot]

🦋 Changeset detected

Latest commit: 89201ed

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

[netlify]

✅ Deploy Preview for mermaid-js ready!

Name	Link
🔨 Latest commit	89201ed
🔍 Latest deploy log	https://app.netlify.com/projects/mermaid-js/deploys/699dd43da9aeb00008fec16f
😎 Deploy Preview	https://deploy-preview-7416--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/mermaid/@mermaid-js/examples@7416

mermaid

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

@mermaid-js/layout-elk

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

@mermaid-js/layout-tidy-tree

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

@mermaid-js/mermaid-zenuml

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

@mermaid-js/parser

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

@mermaid-js/tiny

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

commit: 89201ed

[argos-ci]

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

Build	Status	Details	Updated (UTC)
default (Inspect)	✅ No changes detected	-	Feb 24, 2026, 4:48 PM

[codecov]

Codecov Report

❌ Patch coverage is 0% with 1 line in your changes missing coverage. Please review.
✅ Project coverage is 3.58%. Comparing base (9c90e24) to head (89201ed).
⚠️ Report is 5 commits behind head on develop.

Files with missing lines	Patch %	Lines
...kages/mermaid/src/diagrams/architecture/svgDraw.ts	0.00%	1 Missing ⚠️

Additional details and impacted files

@@           Coverage Diff           @@
##           develop   #7416   +/-   ##
=======================================
  Coverage     3.58%   3.58%           
=======================================
  Files          475     475           
  Lines        47605   47605           
  Branches       741     741           
=======================================
  Hits          1706    1706           
  Misses       45899   45899           

Flag	Coverage Δ
unit	3.58% <0.00%> (ø)

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

Files with missing lines	Coverage Δ
...kages/mermaid/src/diagrams/architecture/svgDraw.ts	0.33% <0.00%> (ø)

🚀 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.

[knsv]

[sisyphus-bot]

Thanks for this fix, @Crafter-Y — really clean work! The root cause analysis and fix are both spot-on.

What's Working Well

🎉 Correct diagnosis of the geometry bug. The old SVG path used mixed relative/absolute commands that accumulated incorrectly:

Old: M0 ${iconSize} v${-iconSize} q0,-5 5,-5 h${iconSize} q5,0 5,5 v${iconSize} H0 Z

With iconSize = 48, this traces a path from (0,48) → (0,0) → curve to (5,-5) → right to (53,-5) → curve to (58,0) → down to (58,48) → back to (0,48). That's a 58×53 bounding box instead of the expected 48×48. The extra 10px width and 5px height cause getBBox() to return oversized dimensions, which the layout engine uses for edge routing — hence the lines overshooting.

🎉 The fix is exactly right. Switching to all absolute SVG commands (V, Q, H) eliminates the accumulation issue and produces the correct iconSize × iconSize rectangle with 5px rounded top corners:

New: M0,${iconSize} V5 Q0,0 5,0 H${iconSize-5} Q${iconSize},0 ${iconSize},5 V${iconSize} Z

🎉 No secondary side effects. The getBBox() call on line 351 picks up the corrected dimensions dynamically, so the layout engine will automatically use the right values. No other code needs to change.

🎉 Changeset present with correct patch bump and fix: prefix.

🎉 Issue linked — Resolves #7313.

---

💡 [suggestion] E2E visual regression test

The architecture diagram's e2e test suite (cypress/integration/rendering/architecture.spec.ts) is currently entirely skipped due to non-deterministic layout — so it's not realistic to require a visual regression test for this PR. That said, if you'd like to add one, even a skipped test case with the exact diagram from #7313 would serve as documentation of the fix:

it('should render edges at correct length (issue #7313)', () => {
  imgSnapshotTest(`
    architecture-beta
      service cell[Table Cell]
      service colspan[colspan]
      service rowspan[rowspan]
      cell:R --> L:colspan
      cell:B --> T:rowspan
  `);
});

This is purely a suggestion — not blocking in any way.

---

Summary

This is a clean, focused one-line bug fix that correctly addresses the geometry issue. The SVG path is now mathematically correct, the changeset is proper, and the issue is linked. Approved!

🤖 Generated with Claude Code

[mermaid-bot]

@Crafter-Y, Thank you for the contribution!
You are now eligible for a year of Premium account on MermaidChart.
Sign up with your GitHub account to activate.