Fix: Ensure Gantt vert markers do not consume row spacing

[darshanr0107]

📑 Summary

This PR fixes an issue where Gantt vertical markers (vert) unintentionally affected the chart layout by introducing extra vertical spacing.
This aligns the implementation with the documentation and resolves user reports of unexpected padding when multiple vertical markers are used.
Resolves #7240

📏 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 detected

Latest commit: 6a2d1ba

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	c1f116d
🔍 Latest deploy log	https://app.netlify.com/projects/mermaid-js/deploys/6954e336b056f20008146b26
😎 Deploy Preview	https://deploy-preview-7284--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@7284

mermaid

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

@mermaid-js/layout-elk

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

@mermaid-js/layout-tidy-tree

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

@mermaid-js/mermaid-zenuml

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

@mermaid-js/parser

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

@mermaid-js/tiny

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

commit: 6a2d1ba

[codecov]

Codecov Report

❌ Patch coverage is 20.83333% with 19 lines in your changes missing coverage. Please review.
✅ Project coverage is 3.27%. Comparing base (dffd2c8) to head (6a2d1ba).

Files with missing lines	Patch %	Lines
...ckages/mermaid/src/diagrams/gantt/ganttRenderer.js	0.00%	18 Missing ⚠️
packages/mermaid/src/diagrams/gantt/ganttDb.js	83.33%	1 Missing ⚠️

Additional details and impacted files

@@           Coverage Diff           @@
##           develop   #7284   +/-   ##
=======================================
  Coverage     3.26%   3.27%           
=======================================
  Files          600     599    -1     
  Lines        60643   60646    +3     
  Branches       915     916    +1     
=======================================
+ Hits          1982    1985    +3     
  Misses       58661   58661           

Flag	Coverage Δ
unit	3.27% <20.83%> (+<0.01%)	⬆️

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

Files with missing lines	Coverage Δ
packages/mermaid/src/diagrams/gantt/ganttDb.js	77.18% <83.33%> (-0.02%)	⬇️
...ckages/mermaid/src/diagrams/gantt/ganttRenderer.js	0.00% <0.00%> (ø)

... 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 approved	1 changed, 1 added	May 15, 2026, 8:38 AM

[nevsal]

It appears the failing argos check merely highlights the very essence of the fix and resolves the original issue leading to this PR.

Is there anything in particular why this PR should be held back or is a merge expected to be imminent?

[netlify]

✅ Deploy Preview for mermaid-js ready!

Name	Link
🔨 Latest commit	6a2d1ba
🔍 Latest deploy log	https://app.netlify.com/projects/mermaid-js/deploys/6a06da84ca7bf00008e69271
😎 Deploy Preview	https://deploy-preview-7284--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.

[ashishjain0512]

Thanks @darshanr0107, and sincere apologies for the long delay on this one — almost five months since you opened it, which is far too long for a tidy fix that aligns the implementation with the documented behavior. The change is small, focused, and the bug report is unambiguous (docs explicitly say "vertical markers don't take up a row"), so this is genuinely good to land. Just merged develop in to clear the conflict on cypress/integration/rendering/gantt/gantt.spec.js and around the ganttDb.js edits — your c1f116d36 commit is preserved as a parent of the merge.

What's working well

🎉 The sentinel-order choice is elegant. Setting rawTask.order = -1 for vert tasks (ganttDb.js:570-575) and not incrementing lastOrder means non-vert tasks keep contiguous 0..N-1 orders, and you can filter verts out anywhere by !task.vert. No magic numbers leaking into the renderer, no parallel "vert index" to maintain.

🎉 The Cypress test is the right test. cypress/integration/rendering/gantt/gantt.spec.js:378-405 interleaves three groups of six identical vert markers with two real tasks — the exact pathological shape from issue #7240. If the verts ever started consuming rows again, Argos would catch it immediately because the chart height would balloon. Nice that the test diagram uses 18 vert lines in front of 2 tasks; that's a strong stress signal.

🎉 Renderer-side filtering is uniformly applied. Every place that read taskArray.length for row-count math (draw() chart-height, compact-mode categories, drawRects unique-order set, and the two vert-specific y / height expressions at lines 320 and 432) now uses tasksWithoutVert. I walked the full diff and didn't find a spot where taskArray.length is still used for row counting — that's the kind of thing that's easy to miss across a few hundred lines of renderer.

🎉 Changeset present and correctly typed (patch, fix: prefix). Resolves #7240 is in the PR body, so GitHub will auto-close on squash-merge.

A few non-blocking notes

🟢 [nit] tasksWithoutVert is recomputed at four sites in draw() (ganttRenderer.js:116, 132, 150, 245). Each call is a fresh taskArray.filter((task) => !task.vert). For a 100-task gantt that's 400 array iterations where one would do. Tiny, but a const tasksWithoutVert = taskArray.filter((task) => !task.vert); once at the top would be both cheaper and easier to follow — and would let the comment "Filter out vertical markers to ensure they don't take up rows" live in a single place. Same suggestion applies to the duplicate tasksWithoutVert redefined inside drawRects (line 245) which shadows the outer name.

🟢 [nit] theArray.sort((a, b) => …) at ganttRenderer.js:243 mutates the caller's array. This is pre-existing — your PR just adds the subsequent .filter() next to it — so it's not in scope for this fix, but worth a follow-up to switch to .slice().sort(…) since theArray comes from diagObj.db.getTasks(). Out of scope for this PR.

🟢 [nit] A focused ganttDb.spec.ts unit test would be a nice safety net. Something like "addTask with vert: true does not increment lastOrder" — the cypress test already covers the rendering behavior end-to-end, but a unit assertion on the DB contract makes the regression harder to reintroduce. Genuinely optional.

💡 [suggestion] When tasksWithoutVert.length === 0 (a gantt that's all verts and no tasks), the chart collapses to 2 * topPadding height and the verts themselves render with height = barHeight * 2. This is an edge case that probably doesn't exist in practice but worth a thought experiment. No action needed unless someone files a bug.

Verification I ran

• Merged origin/develop into the PR branch and pushed (this is what cleared the CONFLICTING flag). Develop had advanced ~1039 commits since the PR was opened, but the only file overlap with the PR's changes was on non-conflicting lines, so git's three-way merge accepted both halves without manual intervention.
• Ran pnpm vitest run packages/mermaid/src/diagrams/gantt/ on the merged tree → 72 passed, 1 pre-existing skip.
• Ran pnpm exec eslint packages/mermaid/src/diagrams/gantt/ → 0 errors, only pre-existing prefer-nullish-coalescing warnings in styles.js (not touched by this PR).
• XSS sub-agent verified no DOM-sink surface change: tasksWithoutVert only feeds numeric .length arithmetic for height / y attribute math, no new path takes user-controlled task label / section strings to a sink.

Severity tally: 🔴 0 / 🟡 0 / 🟢 3 / 💡 1 / 🎉 4

Approving. Thanks for sticking with this.