Skip to content

fix: serialize Mermaid SVG downloads#526

Open
omribz156 wants to merge 1 commit into
vercel:mainfrom
omribz156:codex/fix-mermaid-svg-serialization
Open

fix: serialize Mermaid SVG downloads#526
omribz156 wants to merge 1 commit into
vercel:mainfrom
omribz156:codex/fix-mermaid-svg-serialization

Conversation

@omribz156
Copy link
Copy Markdown

Description

Fixes Mermaid SVG/PNG downloads when Mermaid returns HTML-serialized SVG markup containing tags like <br>.

The download path now parses the rendered markup as HTML, selects the SVG node, and serializes it with XMLSerializer before saving the SVG or converting it to PNG. That keeps the browser-normalized <br> from being written back out as invalid SVG markup.

Type of Change

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • Documentation update
  • Performance improvement
  • Refactoring (no functional changes)

Related Issues

Fixes #516

Changes Made

  • Added a Mermaid SVG download serializer helper.
  • Reused the serialized SVG for both SVG download and PNG conversion.
  • Added regression coverage for HTML-style <br> markup in Mermaid SVG output.
  • Added a patch changeset for streamdown.

Testing

  • All existing tests pass
  • Added new tests for the changes
  • Manually tested the changes

Test Coverage

  • corepack pnpm build:packages
  • corepack pnpm --dir packages/streamdown exec vitest run __tests__/mermaid-utils.test.ts __tests__/mermaid-download.test.tsx
  • corepack pnpm check packages/streamdown/lib/mermaid/download-button.tsx packages/streamdown/lib/mermaid/utils.ts packages/streamdown/__tests__/mermaid-download.test.tsx packages/streamdown/__tests__/mermaid-utils.test.ts packages/streamdown/__tests__/mermaid.test.tsx .changeset/clean-walls-agree.md
  • corepack pnpm --dir packages/streamdown test
  • git diff --check

Screenshots/Demos

Not applicable.

Checklist

  • My code follows the project's code style
  • I have performed a self-review of my own code
  • I have commented my code, particularly in hard-to-understand areas
  • I have made corresponding changes to the documentation
  • My changes generate no new warnings or errors
  • I have added tests that prove my fix is effective or that my feature works
  • New and existing unit tests pass locally with my changes
  • I have created a changeset (pnpm changeset)

Changeset

  • I have created a changeset for these changes

Additional Notes

Implemented with Codex assistance, with the final patch reviewed and kept focused.

@vercel
Copy link
Copy Markdown
Contributor

vercel Bot commented May 20, 2026

@omribz156 is attempting to deploy a commit to the Vercel Team on Vercel.

A member of the Team first needs to authorize it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Mermaid download produces invalid SVG / fails for PNG when chart contains <br />

1 participant