fix: improve zenuml print rendering, sizing, and syntax resilience

[MrCoder]

Summary

• improve ZenUML print rendering so lifelines remain visible (Fixes Print a ZenUML diagram on Chrome, Edge, or Firefox, and the vertical lines disappear #6004)
• make ZenUML respect Mermaid sizing and container boundaries (Fixes Mermaid Renders ZenUML Diagrams with Abnormal SVG Dimensions Exceeding Container Boundaries, Causing Layout Issues #7266)
• prevent invalid ZenUML syntax from freezing the editor (Fixes ZenUML diagrams on mermaid.live are regularly freezes editor #7154)
• add focused renderer tests and a local type override for @zenuml/core

Details

This change updates the Mermaid ZenUML integration to use native SVG output from @zenuml/core instead of HTML inside foreignObject.

That change addresses three user-facing problems:

Print rendering (#6004): Lifelines are rendered as SVG lines instead of HTML borders, so they continue to appear in print preview and PDF export.

Responsive sizing (#7266): ZenUML output now respects Mermaid's useMaxWidth behavior and stays within its container instead of forcing a fixed oversized SVG.

Invalid syntax resilience (#7154): Invalid ZenUML no longer freezes the editor; rendering falls back to best-effort output instead.

Validation

• pnpm exec vitest run packages/mermaid-zenuml/src/zenumlRenderer.spec.ts
• pnpm exec tsc -p packages/mermaid-zenuml/tsconfig.json --noEmit

[netlify]

✅ Deploy Preview for mermaid-js ready!

Name	Link
🔨 Latest commit	f691124
🔍 Latest deploy log	https://app.netlify.com/projects/mermaid-js/deploys/69ce42c84746210008aa87d0
😎 Deploy Preview	https://deploy-preview-7567--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.

[changeset-bot]

🦋 Changeset detected

Latest commit: f691124

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/mermaid-zenuml	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@7567

mermaid

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

@mermaid-js/layout-elk

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

@mermaid-js/layout-tidy-tree

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

@mermaid-js/mermaid-zenuml

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

@mermaid-js/parser

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

@mermaid-js/tiny

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

commit: f691124

[codecov]

Codecov Report

❌ Patch coverage is 2.00000% with 49 lines in your changes missing coverage. Please review.
✅ Project coverage is 3.34%. Comparing base (2b938d0) to head (f691124).

Files with missing lines	Patch %	Lines
packages/mermaid-zenuml/src/zenumlRenderer.ts	0.00%	49 Missing ⚠️

Additional details and impacted files

@@           Coverage Diff           @@
##           develop   #7567   +/-   ##
=======================================
  Coverage     3.34%   3.34%           
=======================================
  Files          524     526    +2     
  Lines        55392   55417   +25     
  Branches       795     796    +1     
=======================================
+ Hits          1853    1854    +1     
- Misses       53539   53563   +24     

Flag	Coverage Δ
unit	3.34% <2.00%> (+<0.01%)	⬆️

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

Files with missing lines	Coverage Δ
packages/mermaid-zenuml/src/types/zenuml-core.d.ts	100.00% <100.00%> (ø)
packages/mermaid-zenuml/src/zenumlRenderer.ts	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 detected (Review)	2 changed	Apr 2, 2026, 10:31 AM