feat: Add ability to export workflow diagram as png

[cheryl7114]

Closes #341

Summary

This PR adds a Download as PNG button to the side panel, which allows users to export the workflow diagram as a PNG file.

Preview:

Key Changes

• Added html-to-image as a dependency
• src/lib/exportPng.ts — new utility that computes the bounding box of all nodes, translates the React Flow viewport to frame them, and uses html-to-image to render a high-resolution PNG
• src/side-panel/MermaidActions.tsx renamed to ExportActions.tsx — component renamed to ExportActions to reflect its broader scope; PNG button added
• src/store/DiagramEditorContext — added reactFlowInstance, isExporting, and their setters to shared context so ExportActions can access the React Flow instance and Diagram can respond to export state
• src/react-flow/diagram/Diagram.tsx — syncs reactFlowInstance into context; flips onlyRenderVisibleElements off during export so all nodes are in the DOM when html-to-image captures them

Preview of exported PNG from Managing Github Issues (under Use Cases):

[netlify]

✅ Deploy Preview for openworkflow-editor ready!

Name	Link
🔨 Latest commit	88303a2
🔍 Latest deploy log	https://app.netlify.com/projects/openworkflow-editor/deploys/6a95589d19cbe90008917f16
😎 Deploy Preview	https://deploy-preview-373--openworkflow-editor.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.

[Copilot]

Pull request overview

Adds a PNG export capability for the React Flow diagram in the Open Workflow diagram editor, integrating a new export utility and exposing the React Flow instance through shared editor context so the side panel can trigger an image download.

Changes:

• Add html-to-image dependency and a new exportDiagramAsPng utility for rendering the diagram to a high-resolution PNG.
• Replace MermaidActions with a broader ExportActions component and add a “Download as PNG” button in the side panel.
• Extend DiagramEditorContext to share reactFlowInstance, isExporting, and a diagram container ref, and adjust Diagram rendering during export.

Reviewed changes

Copilot reviewed 16 out of 17 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
pnpm-workspace.yaml	Adds html-to-image to the workspace catalog.
pnpm-lock.yaml	Locks html-to-image dependency version and metadata.
packages/open-workflow-diagram-editor/package.json	Adds html-to-image as a package dependency.
packages/open-workflow-diagram-editor/src/lib/exportPng.ts	New utility to compute bounds and export viewport as PNG via html-to-image.
packages/open-workflow-diagram-editor/src/side-panel/ExportActions.tsx	Renamed/expanded actions UI and adds “Download as PNG” behavior.
packages/open-workflow-diagram-editor/src/side-panel/SidePanel.tsx	Swaps MermaidActions for ExportActions in the footer.
packages/open-workflow-diagram-editor/src/store/DiagramEditorContext.tsx	Extends context type with react-flow instance, exporting state, and container ref.
packages/open-workflow-diagram-editor/src/store/DiagramEditorContextProvider.tsx	Implements new context state and exposes diagram container ref through provider.
packages/open-workflow-diagram-editor/src/react-flow/diagram/Diagram.tsx	Syncs React Flow instance into context and disables visible-only rendering during export.
packages/open-workflow-diagram-editor/src/react-flow/diagram/Diagram.css	Adjusts condition edge stroke styling to use a CSS variable.
packages/open-workflow-diagram-editor/src/i18n/locales/en.ts	Adds English string for “Download as PNG”.
packages/open-workflow-diagram-editor/src/diagram-editor/DiagramEditor.tsx	Passes diagram container ref into the context provider.
packages/open-workflow-diagram-editor/src/components/ui/sonner.css	Updates Sonner toast styling selectors to match portal behavior and enforce positioning.
packages/open-workflow-diagram-editor/tests/test-utils/render-helpers.tsx	Updates mocked context with new fields used by export flow.
packages/open-workflow-diagram-editor/tests/side-panel/ExportActions.test.tsx	Renames tests and adds coverage for PNG export button behavior.
packages/open-workflow-diagram-editor/stories/examples/workflows/listen-to-any-forever-foreach.yaml	Updates example workflow content.
.changeset/png-export.md	Adds a minor changeset entry for PNG export feature.

Files not reviewed (1)

• pnpm-lock.yaml: Generated file

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[Copilot]

Pull request overview

Copilot reviewed 16 out of 17 changed files in this pull request and generated no new comments.

Files not reviewed (1)

• pnpm-lock.yaml: Generated file

Suppressed comments (3)

Previously missed (3) — in code that hasn't changed since the last review.

packages/open-workflow-diagram-editor/src/side-panel/ExportActions.tsx:92

• The export flow uses a hard-coded setTimeout(..., 50) to wait for React Flow to render non-visible nodes. This time-based delay can be flaky on slower/faster devices and adds unnecessary latency. Prefer waiting for one or two animation frames so the export reliably happens after the DOM has updated.
  packages/open-workflow-diagram-editor/src/components/ui/sonner.css:42
• The Sonner styles are now applied to every [data-sonner-*] toaster on the page. Since this package can be embedded in other apps, this can unintentionally restyle a host application's own Sonner toasts. You already set className="dec:toaster" on the editor’s <Sonner> (see src/components/ui/sonner.tsx:30-33), so these rules can be safely scoped to only that toaster.

  [data-sonner-toaster] {
    --width: 300px !important;
    position: fixed !important;
    top: var(--offset, 32px) !important;
    bottom: auto !important;

.changeset/png-export.md:5

• Changeset summary text is inconsistent with the existing Changesets style (sentence case, proper casing for acronyms like PNG, and punctuation). This becomes user-facing release notes, so it should be polished.

add png export button for react flow diagram