Skip to content

Fix: Remove unexpected spaces in Block Diagram #6702

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 4 commits into from
Jul 29, 2025
Merged

Fix: Remove unexpected spaces in Block Diagram #6702

merged 4 commits into from
Jul 29, 2025

Conversation

qraqras
Copy link
Contributor

@qraqras qraqras commented Jun 28, 2025

📑 Summary

Remove unexpected spaces in Block Diagram.

Resolves #6633

e.g.

📏 Design Decisions

  • The width of the block that extends beyond the column is no longer included in the position calculation.
  • If necessary, add an error message stating that the columns and block widths do not match.

📋 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 Jun 28, 2025 •
edited
Loading

🦋 Changeset detected

Latest commit: b7a591b

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 Netlify
Copy link

netlify bot commented Jun 28, 2025 •
edited
Loading

✅ Deploy Preview for mermaid-js ready!

Name Link
🔨 Latest commit b7a591b
🔍 Latest deploy log https://app.netlify.com/projects/mermaid-js/deploys/68886e72e23f7b0008e26c15
😎 Deploy Preview https://deploy-preview-6702--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.

@github-actions github-actions bot added the Type: Bug / Error Something isn't working or is incorrect label Jun 28, 2025
@pkg-pr-new pkg.pr.new
Copy link

pkg-pr-new bot commented Jun 28, 2025 •
edited
Loading

Open in StackBlitz

@mermaid-js/examples

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

mermaid

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

@mermaid-js/layout-elk

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

@mermaid-js/mermaid-zenuml

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

@mermaid-js/parser

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

@mermaid-js/tiny

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

commit: b7a591b

@codecov Codecov
Copy link

codecov bot commented Jun 28, 2025 •
edited
Loading

Codecov Report

❌ Patch coverage is 0% with 5 lines in your changes missing coverage. Please review.
✅ Project coverage is 3.70%. Comparing base (11a86d9) to head (b7a591b).
⚠️ Report is 214 commits behind head on develop.

Files with missing lines Patch % Lines
packages/mermaid/src/diagrams/block/layout.ts 0.00% 5 Missing ⚠️
Additional details and impacted files

Impacted file tree graph

@@            Coverage Diff             @@
##           develop   #6702      +/-   ##
==========================================
- Coverage     3.84%   3.70%   -0.14%     
==========================================
  Files          418     453      +35     
  Lines        43706   44732    +1026     
  Branches       670     707      +37     
==========================================
- Hits          1681    1659      -22     
- Misses       42025   43073    +1048
Flag Coverage Δ
unit 3.70% <0.00%> (-0.14%) ⬇️

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

Files with missing lines Coverage Δ
packages/mermaid/src/diagrams/block/layout.ts 0.38% <0.00%> (-0.01%) ⬇️

... and 59 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 Argos CI
Copy link

argos-ci bot commented Jun 28, 2025 •
edited
Loading

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

Build Status Details Updated (UTC)
default (Inspect) 👍 Changes approved 1 added Jul 29, 2025, 6:57 AM

@shubhamparikh2704
Copy link
Member

I love it. thanks for contribution.
Please add some documentation

@shubhamparikh2704 shubhamparikh2704 self-assigned this Jul 3, 2025
@aloisklink
test(e2e): test block column overflowing
e073c80 
Add a test-case for 939da08 (Fix 6633, 2025-06-28), that checks
whether overflowing blocks render correctly.
@aloisklink
docs(block): add changeset for overflow bug
8bb29fc 
Add a changeset that explains that overflowing blocks no longer
create an empty line in block diagrams or cause bugs in later lines.

Technically, this is a breaking change since it can change the layout of
block diagrams, but this diagram is still in `-beta` and they all will
still render correctly.
@aloisklink
docs(block): add clarifying comment for overflow
b7a591b 
This line is a bit confusing to me, so I thought I should clarify it!

See: 939da08
aloisklink
aloisklink approved these changes Jul 29, 2025
View reviewed changes
Copy link
Member

@aloisklink aloisklink left a comment •
edited
Loading

Choose a reason for hiding this comment

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

LGTM! Sorry for the delaying in reviewing this.

I hope you don't mind, but I've added an E2E test-case, a changeset entry (so that this goes in the release notes and you get credit for solving this), and a comment that explains the code a bit.

"If necessary, add an error message stating that the columns and block widths do not match." is a good idea, but another contributor has already solved that part of it: #6717 😉

Please add some documentation

Since this is behaviour we don't recommend, I think we can skip adding it to the docs and just having the changeset entry is enough.

darshanr0107
darshanr0107 reviewed Jul 29, 2025
View reviewed changes
Copy link
Contributor

@darshanr0107 darshanr0107 left a comment

Choose a reason for hiding this comment

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

LGTM

@aloisklink aloisklink added this pull request to the merge queue Jul 29, 2025
Merged via the queue into mermaid-js:develop with commit 0cc0b63 Jul 29, 2025
23 checks passed
@mermaid-bot mermaid-bot
Copy link

mermaid-bot bot commented Jul 29, 2025

@qraqras, 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.

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

@darshanr0107 darshanr0107 darshanr0107 left review comments

@aloisklink aloisklink aloisklink approved these changes

@sidharthv96 sidharthv96 Awaiting requested review from sidharthv96

Assignees

@shubhamparikh2704 shubhamparikh2704

Labels
Graph: Block Type: Bug / Error Something isn't working or is incorrect
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Stacking blocks renders unexpected space
4 participants
@qraqras @shubhamparikh2704 @aloisklink @darshanr0107