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 uses getNodesBounds to compute the content 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 WorkflowActions.tsx — component renamed to WorkflowActions to reflect its broader scope; PNG button added
• src/store/DiagramEditorContext.tsx / DiagramEditorContextProvider.tsx — isExporting state added to shared context
• src/react-flow/diagram/Diagram.tsx — sets onlyRenderVisibleElements={!isExporting} to disable viewport culling during capture
• src/i18n/locales/en.ts — "sidebar.exportPng.download" string added

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

[netlify]

✅ Deploy Preview for openworkflow-editor ready!

Name	Link
🔨 Latest commit	d91c10f
🔍 Latest deploy log	https://app.netlify.com/projects/openworkflow-editor/deploys/6a98262376bddb000823c68b
😎 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

[Copilot]

Pull request overview

Copilot reviewed 18 out of 20 changed files in this pull request and generated 1 comment.

Files not reviewed (1)

• pnpm-lock.yaml: Generated file

Suppressed comments (3)

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

packages/open-workflow-diagram-editor/tests/side-panel/WorkflowActions.test.tsx:18

• vi.waitFor isn’t used elsewhere in this test suite (other tests import waitFor from @testing-library/react) and may not exist in the Vitest API, which would break type-checking/runtime. Import waitFor from @testing-library/react here as well.
  packages/open-workflow-diagram-editor/tests/side-panel/WorkflowActions.test.tsx:141
• Use waitFor from @testing-library/react instead of vi.waitFor so the assertion retry mechanism works consistently with the rest of the test suite.

This issue also appears on line 162 of the same file.

packages/open-workflow-diagram-editor/tests/side-panel/WorkflowActions.test.tsx:164

• Use waitFor from @testing-library/react instead of vi.waitFor so the assertion retry mechanism works consistently with the rest of the test suite.

[lornakelly]

Just noticed this, what is the timeout for?

[cheryl7114]

Remember the issue I showed you where if you zoom into a part of the workflow, then only the visible on-screen part of the workflow will be captured?

When isExporting is set to true, onlyRenderVisibleElements is set to false; and the timeout gives React time to render all the off screen nodes before the snapshot is taken.

[lornakelly]

That wouldnt be very reliable as maybe it would take longer, I would be more explicit and add a helper to actually wait for the nodes as we know how many nodes there are

const MAX_RENDER_WAIT_FRAMES = 120; //cap so it cant loop forever

async function waitForAllNodesRendered(root: HTMLElement | Document, expected: number) {
  for (let frame = 0; frame < MAX_RENDER_WAIT_FRAMES; frame++) {
    if (root.querySelectorAll(".react-flow__node").length >= expected) return;
    await new Promise(requestAnimationFrame);
  }
}

and replace the setTimeout line with

await waitForAllNodesRendered(
    diagramDomNode ?? document,
    reactFlowInstance.getNodes().filter((node) => !node.hidden).length,
  );

That should work and is more reliable

[cheryl7114]

fixed!

[kumaradityaraj]

LGTM

[lornakelly]

LGTM