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

Supersedes #7567 (rebased onto latest develop with a clean lockfile).

[netlify]

✅ Deploy Preview for mermaid-js ready!

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

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@7647

mermaid

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

@mermaid-js/layout-elk

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

@mermaid-js/layout-tidy-tree

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

@mermaid-js/mermaid-zenuml

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

@mermaid-js/parser

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

@mermaid-js/tiny

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

commit: 45a9498

[codecov]

Codecov Report

❌ Patch coverage is 2.00000% with 49 lines in your changes missing coverage. Please review.
✅ Project coverage is 3.31%. Comparing base (2fe6e55) to head (45a9498).
⚠️ Report is 36 commits behind head on develop.

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

Additional details and impacted files

@@           Coverage Diff           @@
##           develop   #7647   +/-   ##
=======================================
  Coverage     3.31%   3.31%           
=======================================
  Files          539     541    +2     
  Lines        56688   56713   +25     
  Branches       824     825    +1     
=======================================
+ Hits          1880    1881    +1     
- Misses       54808   54832   +24     

Flag	Coverage Δ
unit	3.31% <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 approved	2 changed	Apr 22, 2026, 11:49 AM

[MrCoder]

Hey @knsv , thanks for approving the PR. It was removed from merge queue by github-merge-queue bot. Could you please have a look? Let me know if I can help.

[knsv]

Added again!