Export diagram from model to mermaid code

[cheryl7114]

Closes #150

Changes Made
Added two buttons to export diagram model (JSON/YAML) to Mermaid:

• Copy Mermaid Code - copy mermaid string to clipboard
• Download as Mermaid File - download workflow as a .mmd file

[netlify]

✅ Deploy Preview for swf-editor ready!

Name	Link
🔨 Latest commit	c10abc6
🔍 Latest deploy log	https://app.netlify.com/projects/swf-editor/deploys/6a33b8c83530e900084056e8
😎 Deploy Preview	https://deploy-preview-174--swf-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

Note

Copilot was unable to run its full agentic suite in this review.

Adds Mermaid export capabilities to the diagram editor, exposing “copy” and “download” actions from the SidePanel and providing a core utility to generate Mermaid code.

Changes:

• Add exportToMermaid + clipboard/file download helpers in src/core
• Expose “Copy Mermaid Code” and “Download as Mermaid File” buttons in SidePanel
• Add i18n strings and tests for both core export and SidePanel rendering states

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
packages/serverless-workflow-diagram-editor/tests/side-panel/SidePanel.test.tsx	Adds UI-state tests for Mermaid export buttons visibility.
packages/serverless-workflow-diagram-editor/tests/core/mermaidExport.test.ts	Adds a unit test for Mermaid conversion output shape.
packages/serverless-workflow-diagram-editor/src/side-panel/SidePanel.tsx	Adds export buttons + handlers wired to new Mermaid export helpers.
packages/serverless-workflow-diagram-editor/src/i18n/locales/en.ts	Adds English strings for Mermaid export UI.
packages/serverless-workflow-diagram-editor/src/core/mermaidExport.ts	Introduces Mermaid export, clipboard copy, and download helpers.
packages/serverless-workflow-diagram-editor/src/core/index.ts	Re-exports the new Mermaid export module.
.changeset/mermaid-export.md	Declares a minor release for the new functionality.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 7 out of 7 changed files in this pull request and generated 4 comments.

[Copilot]

Pull request overview

Copilot reviewed 7 out of 7 changed files in this pull request and generated 5 comments.

[Copilot]

Pull request overview

Copilot reviewed 7 out of 7 changed files in this pull request and generated 4 comments.

[Copilot]

Pull request overview

Copilot reviewed 7 out of 7 changed files in this pull request and generated 6 comments.

[fantonangeli]

@cheryl7114 I only added one comment in addition to other's comments.
Can you please also add the issue link in the description?

[Copilot]

Pull request overview

Copilot reviewed 14 out of 14 changed files in this pull request and generated 7 comments.

[Copilot]

Pull request overview

Copilot reviewed 15 out of 15 changed files in this pull request and generated 6 comments.

[cheryl7114]

@cheryl7114, I noticed that in the build process we have many warnings related to storybook such as the one below.

Could you take a look?

Hi @handreyrc these warnings are from component tests auto-generated by Storybook's test addon (@storybook/addon-vitest), not the actual test code. The Storybook addon automatically renders each story as a test, and the auto-generated tests don't wrap these async updates in act().
It's just React's testing library being strict about async state updates in the automated Storybook test environment. So in my opinion they're safe to ignore since its auto generated by Storybook.

But I do acknowledge it makes the build look really cluttered. I could add a config to suppress warnings of this type if needed?

[handreyrc]

@cheryl7114, I noticed that in the build process we have many warnings related to storybook such as the one below.
Could you take a look?

Hi @handreyrc these warnings are from component tests auto-generated by Storybook's test addon (@storybook/addon-vitest), not the actual test code. The Storybook addon automatically renders each story as a test, and the auto-generated tests don't wrap these async updates in act(). It's just React's testing library being strict about async state updates in the automated Storybook test environment. So in my opinion they're safe to ignore since its auto generated by Storybook.

But I do acknowledge it makes the build look really cluttered. I could add a config to suppress warnings of this type if needed?

@cheryl7114,

I'd suggest investigating how to wrap it into act(...) as the warning suggests. IMO, suppressing warnings is always the last case scenario because It masks the actual issue even if it is not breaking anything at the moment.

WDYT?

[cheryl7114]

@cheryl7114,

I'd suggest investigating how to wrap it into act(...) as the warning suggests. IMO, suppressing warnings is always the last case scenario because It masks the actual issue even if it is not breaking anything at the moment.

WDYT?

@handreyrc The tests are auto-generated at runtime by @storybook/addon-vitest, so there's no actual test code we can modify. The options I found for this situation are:

1. Add play functions to all 35 stories in Examples.stories.tsx, which would look roughly like this for all examples:

export const AuthenticationOAuth2: Story = {
  ...createWorkflowStory(workflows.authenticationOAuth2),
  play: async ({ canvasElement }) => {
    await waitFor(() => {
      // Wait for React Flow to finish rendering
      expect(canvasElement.querySelector('.react-flow')).toBeInTheDocument();
    });
  },
};  // generated by Bob

2. Configure Storybook test parameters by adding to preview.tsx:

parameters: {
  test: {
    // Disable act warnings for auto-generated tests
    dangerouslyIgnoreUnhandledErrors: true,
  },
}

3. Suppress act(...) warnings in vitest.config.ts

Option 2 and 3 would be simpler, but I wouldn't mind implementing option 1 if its necessary. Please let me hear you opinions! :)

[lornakelly]

LGTM

[cheryl7114]

@handreyrc I'll put in a separate PR for the storybook warning fixes after we conclude our discussion

[cheryl7114]

@ricardozanini this looks ready to merge. Thank you!