fix: avoid serializing block diagram debug objects

[henyanagar]

📑 Summary

Resolves #7907

This fixes a block diagram render crash caused by debug logging that attempted to serialize block layout objects with JSON.stringify.

In some environments, DOM nodes attached to block sizes can include extra enumerable properties, such as React-related properties, which may create circular references. When the block layout debug log tried to stringify those objects, rendering could fail with TypeError: Converting circular structure to JSON.

📏 Design Decisions

Instead of serializing the full block tree or full block size object, the debug output now logs only a safe summary of primitive layout values.

This keeps the existing layout behavior unchanged while avoiding serialization of DOM nodes or other non-serializable objects.

A regression test was added to verify that layout does not throw when a block size contains a non-serializable node.

📋 Tasks

• 📖 have read the [Contributing Guidelines](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/docs/community/contributing.md)
• 💻 have added necessary unit/e2e tests.
• 📓 documentation is not needed because this is an internal bug fix with no user-facing API change.
• 🦋 have added a changeset.

Tests

• corepack pnpm exec vitest run packages/mermaid/src/diagrams/block/layout.spec.ts
• corepack pnpm exec vitest run packages/mermaid/src/diagrams/block
• git diff --check

[netlify]

✅ Deploy Preview for mermaid-js ready!

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

[changeset-bot]

🦋 Changeset detected

Latest commit: 3a6dfd1

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

[pkg-pr-new]

Open in StackBlitz

@mermaid-js/examples

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

mermaid

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

@mermaid-js/layout-elk

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

@mermaid-js/layout-tidy-tree

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

@mermaid-js/mermaid-zenuml

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

@mermaid-js/parser

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

@mermaid-js/tiny

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

commit: 3a6dfd1

[codecov]

Codecov Report

❌ Patch coverage is 50.00000% with 1 line in your changes missing coverage. Please review.
✅ Project coverage is 25.97%. Comparing base (388ccd0) to head (3a6dfd1).

Files with missing lines	Patch %	Lines
packages/mermaid/src/diagrams/block/layout.ts	50.00%	0 Missing and 1 partial ⚠️

Additional details and impacted files

@@             Coverage Diff              @@
##           develop    #7914       +/-   ##
============================================
- Coverage    67.78%   25.97%   -41.81%     
============================================
  Files          429      193      -236     
  Lines        38648    14123    -24525     
  Branches      6380     1888     -4492     
============================================
- Hits         26199     3669    -22530     
- Misses        9675    10133      +458     
+ Partials      2774      321     -2453     

Flag	Coverage Δ
e2e	22.58% <50.00%> (-47.70%)	⬇️
unit	24.36% <ø> (ø)

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	71.42% <50.00%> (-3.16%)	⬇️

... and 399 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]

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

Build	Status	Details	Updated (UTC)
default (Inspect)	✅ No changes detected	-	Jun 24, 2026, 7:39 PM

[henyanagar]

All checks are passing, and the PR includes a regression test and a changeset.
Happy to adjust the implementation if maintainers prefer a different approach for the debug logging summary.