You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@maka.apache.org by "faga295 (via GitHub)" <gi...@apache.org> on 2026/09/08 11:48:53 UTC
[PR] feat(ui): copy rendered Mermaid diagrams to clipboard as PNG [maka]
faga295 opened a new pull request, #5035:
URL: https://github.com/apache/maka/pull/5035
## Summary
Closes #5034
Add a "Copy diagram" button to the Mermaid toolbar (inline + fullscreen views) that copies the rendered diagram to the clipboard as a PNG image.
## Implementation
- `packages/ui/src/mermaid-diagram.tsx`
- New pure helper `mermaidSvgToDataUrl`: injects explicit pixel dimensions and strips responsive sizing (`width="100%"`, `max-width` style) from the root tag, then encodes the sanitized SVG string as a data URL.
- Canvas pipeline (`Image.decode -> canvas -> toBlob`) rasterizes at **2x** the natural size; the input is the state-held sanitized SVG string, so exports are unaffected by pan/zoom state.
- Writes via `navigator.clipboard.write(new ClipboardItem({ 'image/png': blob }))`; feedback reuses the existing `useClipboardCopyFeedback` tri-state (Copy -> Check icon, brief failure label).
- Background color resolves the figure's computed theme background so dark-mode exports stay readable.
- `packages/ui/src/shared-ui-copy.ts`: `mermaidCopyImage` / `mermaidCopyImageFailed` for zh-CN / zh-TW / en.
- `packages/ui/src/__tests__/mermaid-svg-data-url.test.ts`: node tests for the pure helper.
No new dependencies (kwaipilot's `html-to-image` approach is unnecessary here since the sanitized SVG string is already self-contained).
## Test plan
- [x] `npm run typecheck` (packages/ui)
- [x] `npm run build` (packages/ui)
- [x] `node --test dist/__tests__/mermaid-svg-data-url.test.js` — 2 pass
- [x] Existing `mermaid-render-cache` tests still pass
- [ ] Manual: copy in light/dark themes, paste into a document / IM
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@maka.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@maka.apache.org
For additional commands, e-mail: commits-help@maka.apache.org
Re: [PR] feat(ui): copy rendered Mermaid diagrams to clipboard as PNG [maka]
Posted by "me2seeks (via GitHub)" <gi...@apache.org>.
me2seeks merged PR #5035:
URL: https://github.com/apache/maka/pull/5035
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@maka.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@maka.apache.org
For additional commands, e-mail: commits-help@maka.apache.org