Skip to content

Add export as image feature for visual designer#19214

Open
shenglol wants to merge 7 commits intomainfrom
shenglol/export-visualization-as-image
Open

Add export as image feature for visual designer#19214
shenglol wants to merge 7 commits intomainfrom
shenglol/export-visualization-as-image

Conversation

@shenglol
Copy link
Contributor

@shenglol shenglol commented Mar 19, 2026

Summary

Add the ability to export the visual designer graph as an image (SVG, PNG, or JPEG).

Commits

Commit Description
ba7a552bc Add graph export feature with SVG/PNG/JPEG support
3de9633c6 Refactoring; code cleanup
49bbc7d1e Run format command
f2a697e3f Fix linting issues
77b246724 Use styled components
7041d8c9d Set path alias
c3463e4cd Add Copilot instructions and hooks

Review guidance

Reviewers: please focus your review on commit ba7a552bc ("Add graph export feature with SVG/PNG/JPEG support") — it contains the only functionality change. The remaining commits are hardening engineering work (code cleanup, formatting, linting fixes, refactoring to styled-components, path alias setup, and adding Copilot instructions/hooks) with no functionality changes.

Microsoft Reviewers: Open in CodeFlow

shenglol and others added 7 commits March 17, 2026 14:24
- Export toolbar with format/theme dropdowns, padding stepper, and save button
- Export area preview with dim overlay, dashed border, and size badge
- JPEG solid background cover rendered inside PanZoom
- Theme selector supporting all 4 themes (light, dark, high-contrast variants)
- Uses @vscode-elements/react-elements for dropdowns and badge
@github-actions
Copy link
Contributor

Test this change out locally with the following install scripts (Action run 23316490045)

VSCode
  • Mac/Linux
    bash <(curl -Ls https://aka.ms/bicep/nightly-vsix.sh) --run-id 23316490045
  • Windows
    iex "& { $(irm https://aka.ms/bicep/nightly-vsix.ps1) } -RunId 23316490045"
Azure CLI
  • Mac/Linux
    bash <(curl -Ls https://aka.ms/bicep/nightly-cli.sh) --run-id 23316490045
  • Windows
    iex "& { $(irm https://aka.ms/bicep/nightly-cli.ps1) } -RunId 23316490045"

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

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants