Skip to content

Fix: Connection gaps in flowchart shapes #6733

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 12 commits into from
Aug 7, 2025
Merged

Fix: Connection gaps in flowchart shapes #6733

merged 12 commits into from
Aug 7, 2025

Conversation

omkarht
Copy link
Contributor

@omkarht omkarht commented Jul 9, 2025 •
edited
Loading

📑 Summary

This PR improves how connector lines visually align with shape boundaries by enhancing the geometry and intersection logic of various diagram shapes. This prevents visual gaps between shapes and lines—especially in manual mode—and ensures a clean, professional appearance.

📏 Design Decisions

Describe the way your implementation works or what design decisions you made if applicable.

📋 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-bot
Copy link

changeset-bot bot commented Jul 9, 2025 •
edited
Loading

🦋 Changeset detected

Latest commit: b451c66

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

This PR includes changesets to release 2 packages
Name Type
mermaid Patch
@mermaid-js/examples 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 Netlify
Copy link

netlify bot commented Jul 9, 2025 •
edited
Loading

✅ Deploy Preview for mermaid-js ready!

Name Link
🔨 Latest commit b451c66
🔍 Latest deploy log https://app.netlify.com/projects/mermaid-js/deploys/68921258ed828900073fd53d
😎 Deploy Preview https://deploy-preview-6733--mermaid-js.netlify.app
📱 Preview on mobile
Toggle QR Code...

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 pkg.pr.new
Copy link

pkg-pr-new bot commented Jul 9, 2025 •
edited
Loading

Open in StackBlitz

@mermaid-js/examples

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

mermaid

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

@mermaid-js/layout-elk

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

@mermaid-js/mermaid-zenuml

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

@mermaid-js/parser

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

@mermaid-js/tiny

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

commit: b451c66

@codecov Codecov
Copy link

codecov bot commented Jul 9, 2025 •
edited
Loading

Codecov Report

❌ Patch coverage is 0% with 152 lines in your changes missing coverage. Please review.
⚠️ Please upload report for BASE (develop@4ab98c2). Learn more about missing BASE report.
⚠️ Report is 15 commits behind head on develop.

Files with missing lines Patch % Lines
...ring-util/rendering-elements/shapes/roundedRect.ts 0.00% 91 Missing ⚠️
...endering-util/rendering-elements/shapes/hexagon.ts 0.00% 32 Missing ⚠️
...endering-util/rendering-elements/shapes/stadium.ts 0.00% 26 Missing ⚠️
...ndering-util/rendering-elements/shapes/question.ts 0.00% 3 Missing ⚠️
Additional details and impacted files

Impacted file tree graph

@@            Coverage Diff            @@
##             develop   #6733   +/-   ##
=========================================
  Coverage           ?   3.70%           
=========================================
  Files              ?     455           
  Lines              ?   44852           
  Branches           ?     708           
=========================================
  Hits               ?    1660           
  Misses             ?   43192           
  Partials           ?       0
Flag Coverage Δ
unit 3.70% <0.00%> (?)

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

Files with missing lines Coverage Δ
...ndering-util/rendering-elements/shapes/question.ts 0.00% <0.00%> (ø)
...endering-util/rendering-elements/shapes/stadium.ts 0.00% <0.00%> (ø)
...endering-util/rendering-elements/shapes/hexagon.ts 0.00% <0.00%> (ø)
...ring-util/rendering-elements/shapes/roundedRect.ts 0.00% <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.

@argos-ci Argos CI
Copy link

argos-ci bot commented Jul 9, 2025 •
edited
Loading

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

Build Status Details Updated (UTC)
default (Inspect) 👍 Changes approved 242 changed, 3 added Aug 5, 2025, 2:27 PM

@omkarht omkarht marked this pull request as ready for review July 14, 2025 11:36
@sidharthv96
Copy link
Member

image

Blockers found in tests.

@omkarht
Copy link
Contributor Author

omkarht commented Jul 16, 2025

Blockers found in tests.

@sidharthv96 , resolved in 1498315

sidharthv96
sidharthv96 requested changes Aug 2, 2025
View reviewed changes
Copy link
Member

@sidharthv96 sidharthv96 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see a LOT of minute changes in many tests, but couldn't spot an example of the difference this brings. Can you add an E2E test if it's missing, to showcase what change this PR brings?

@sidharthv96 sidharthv96 changed the title Fix: Fixed Connection gaps in flowchart shapes Fix: Connection gaps in flowchart shapes Aug 2, 2025
@omkarht omkarht requested a review from sidharthv96 August 5, 2025 12:11
@omkarht @Mermaid-Chart
chore: added test case for updated shapes
b451c66 
on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
@sidharthv96 sidharthv96 added this pull request to the merge queue Aug 7, 2025
Merged via the queue into develop with commit 4b31361 Aug 7, 2025
25 checks passed
@sidharthv96 sidharthv96 deleted the fix-connection-gaps-in-flowchart-shapes branch August 7, 2025 14:48
This was referenced Aug 19, 2025
Closed
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@sidharthv96 sidharthv96 sidharthv96 approved these changes

@ashishjain0512 ashishjain0512 ashishjain0512 approved these changes

@shubhamparikh2704 shubhamparikh2704 Awaiting requested review from shubhamparikh2704

Assignees
No one assigned
Labels
Sponsored by MermaidChart
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@omkarht @sidharthv96 @ashishjain0512