feat(ui): support copying rendered Mermaid diagrams to clipboard
- Dominant language
- TypeScript
- Stars
- 5.4k
- Forks
- 502
- Avg merge
- 1d 2h
- Merged PRs (30d)
- 715
Description
## Background
The Mermaid diagram block already supports zoom / pan / fullscreen / view-source (source copy included), but there is no way to copy the **rendered image**. Users who want to paste a diagram into a document or IM have to screenshot it manually.
## Proposal
Add a "Copy diagram" action to the Mermaid toolbar (both inline and fullscreen views):
- Rasterize the already-sanitized SVG string (kept in component state, unaffected by pan/zoom) to a **2x PNG** via the canvas pipeline (`SVG data URL -> Image -> canvas -> toBlob`), then write it with `navigator.clipboard.write(new ClipboardItem(...))` — no new dependency (`html-to-image` not needed).
- Background resolves the figure's live theme color so dark-mode exports remain readable.
- Feedback reuses the shared `useClipboardCopyFeedback` tri-state (icon flips to `Check` on success, brief "copy failed" label on failure).
- Locale entries added for zh-CN / zh-TW / en.
- Node-level tests cover the pure data-URL helper.
## Out of scope
- Download-as-PNG fallback
- 4x pixel ratio (clipboard size sensitive)
- Duplicate source-code copy entry
Contributor guide
Assessment
This issue has not been assessed yet.