feat(workflows): export the flowchart as PNG, JPEG, or SVG - #995
Merged
Conversation
Adds @antv/x6-plugin-export to the designer bundle, registers it on every graph (read-only included, since exporting a diagram for documentation is exactly what a read-only viewer is for), and exposes a single exportGraph JavaScript function that the new X6GraphApi.ExportGraphAsync drives. exportGraph downloads through toPNG/toJPEG/toSVG rather than the plugin's exportPNG/exportJPEG/exportSVG helpers, because the plugin's exportJPEG delegates to toPNG: calling it would have written PNG bytes into a file named .jpeg, which is the kind of failure that looks like a success. The extension is appended in the one place that knows the format, so the downloaded file always advertises the format the user asked for. The format crosses the interop boundary as a lowercase string, which the JavaScript switch requires and whose default branch throws rather than silently falling back to PNG. X6GraphApi.CreateExportPayload is internal so that contract is pinned by a test instead of only by a browser. Refs #585 Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Adds an Export item to the flowchart designer's toolbox in both read-only and editable mode. It opens a dialog for the format (PNG/JPEG/SVG), the file name, and the padding, then hands the result to the designer. The proposed file name comes from the flowchart's name, suffixed with its version when it has one, with characters the host platform rejects in a file name replaced by underscores. Two details keep an invalid state from being mistaken for a working one. The padding rule is scoped to the raster formats, which are exactly the formats for which the dialog shows the field: validating it for SVG too would keep the dialog open with its complaint rendered nowhere the user could see or fix it. And the toolbox item is offered only when the X6 designer is the one being rendered, because the React Flow renderer has no export path; FlowchartDesignerWrapper.ExportGraphAsync throws for that case rather than returning as if it had downloaded something. Refs #585 Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
The flowchart export dialog derived its proposed file name from the root activity's JSON, which for a real workflow carries no name and whose version is the activity type's version rather than the workflow's. Thread the workflow definition through DisplayContext (populated by DiagramDesignerWrapper from its hosts, which already hold it) so FlowchartDiagramDesigner.GetDefaultFileName can derive the name and version from the definition instead. Also localize the export format radio labels and select them by label text rather than position in ExportFlowchartDialogTests. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
![github-code-quality[bot]](https://avatars.githubusercontent.com/u/9919?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
🟡 Changes recommended
Critical dependency-security and binary-compatibility issues remain, alongside accessibility and validation defects.
Once you've addressed the issues Copilot identified, you can request another Copilot review.
Pull request overview
Adds PNG, JPEG, and SVG export support to editable and read-only X6 flowchart designers.
Changes:
- Adds the X6 export plugin and C#/JavaScript export pipeline.
- Adds an export dialog with validation and generated filenames.
- Propagates workflow metadata and tests dialog and interop behavior.
File summaries
| File | Review |
|---|---|
src/modules/Elsa.Studio.Workflows/Validators/ExportGraphOptionsValidator.cs |
Validates export options. Moderate: padding needs a reasonable upper bound. |
src/modules/Elsa.Studio.Workflows/Shared/Components/DiagramDesignerWrapper.razor.cs |
Passes workflow metadata into the display context. |
src/modules/Elsa.Studio.Workflows/DiagramDesigners/Flowcharts/FlowchartDiagramDesignerProvider.cs |
Injects export dependencies. |
src/modules/Elsa.Studio.Workflows/DiagramDesigners/Flowcharts/FlowchartDiagramDesigner.cs |
Adds export tooling and filename generation. Moderate: the icon button needs an accessible name. |
src/modules/Elsa.Studio.Workflows/DiagramDesigners/Flowcharts/FlowchartDesignerWrapper.razor.cs |
Routes exports to X6. |
src/modules/Elsa.Studio.Workflows/DiagramDesigners/Flowcharts/ExportFlowchartDialog.razor.cs |
Implements dialog behavior and validation. |
src/modules/Elsa.Studio.Workflows/DiagramDesigners/Flowcharts/ExportFlowchartDialog.razor |
Defines export controls. Moderate: the format radio group needs an accessible name. |
src/modules/Elsa.Studio.Workflows/Components/WorkflowInstanceViewer/Components/WorkflowInstanceDesigner.razor |
Supplies workflow metadata. |
src/modules/Elsa.Studio.Workflows/Components/WorkflowDefinitionEditor/Components/WorkflowEditor.razor |
Supplies editable workflow metadata. |
src/modules/Elsa.Studio.Workflows/Components/WorkflowDefinitionEditor/Components/WorkflowDefinitionVersionViewer.razor |
Supplies version metadata. |
src/modules/Elsa.Studio.Workflows.Tests/ExportFlowchartDialogTests.cs |
Tests dialog validation and filenames. |
src/modules/Elsa.Studio.Workflows.Designer/Models/ExportGraphOptions.cs |
Defines export settings. |
src/modules/Elsa.Studio.Workflows.Designer/Models/ExportGraphFormat.cs |
Defines supported formats. |
src/modules/Elsa.Studio.Workflows.Designer/Interop/X6GraphApi.cs |
Invokes export interop. |
src/modules/Elsa.Studio.Workflows.Designer/Components/FlowchartDesigner.razor.cs |
Exposes graph export operations. |
src/modules/Elsa.Studio.Workflows.Designer/ClientLib/src/designer/api/index.ts |
Exposes the client export API. |
src/modules/Elsa.Studio.Workflows.Designer/ClientLib/src/designer/api/export-graph.ts |
Encodes and downloads exported images. |
src/modules/Elsa.Studio.Workflows.Designer/ClientLib/src/designer/api/create-graph.ts |
Registers the X6 export plugin. |
src/modules/Elsa.Studio.Workflows.Designer/ClientLib/package.json |
Adds the export dependency. Critical: the safe version must be pinned exactly. |
src/modules/Elsa.Studio.Workflows.Designer.Tests/X6ExportPayloadTests.cs |
Tests the JavaScript payload contract. |
src/modules/Elsa.Studio.Workflows.Core/UI/Contexts/DisplayContext.cs |
Carries workflow metadata. Critical: changing the positional record breaks binary compatibility. |
src/modules/Elsa.Studio.Alterations/Components/AlterationDesignerHost.razor |
Supplies workflow metadata in alterations. |
Review details
- Files reviewed: 22/22 changed files
- Comments generated: 5
- Review effort level: Balanced
💡 Add a code-review agent skill for context-aware, tailored reviews. Learn more in the docs.
… plugin, and label the export controls Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Contributor
There was a problem hiding this comment.
🟡 Changes recommended
Two public constructor removals can cause MissingMethodException for existing compiled integrations.
Once you've addressed the issues Copilot identified, you can request another Copilot review.
Review details
- Files reviewed: 22/22 changed files
- Comments generated: 2
- Review effort level: Balanced
This was referenced Sep 7, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #585
Adds an Export action to the flowchart designer toolbox (editable and read-only views) that downloads the diagram as PNG, JPEG, or SVG.
What changed
@antv/x6-plugin-export(2.1.6, the last 2.x line matching the installed x6 2.18) and adds a singleexportGraph(graphId, options)function that encodes the requested format, applies padding for the raster formats, appends the matching extension, and throws on an unknown format.ExportGraphOptions/ExportGraphFormatcarried throughX6GraphApi,FlowchartDesigner, andFlowchartDesignerWrapper. A test pins the C#-to-JS payload contract (camel-cased properties, lower-cased format).ExportFlowchartDialog(format, file name, padding; padding hidden for SVG) validated with FluentValidation via Blazilla, following the dialog pattern adopted in fix(core): replace archived Blazored.FluentValidation with Blazilla #993. The proposed file name is the workflow definition's name plus a_v{version}suffix, sanitized for file-name use; to make that name available,DisplayContextgained an optional trailingWorkflowDefinitionparameter, andDiagramDesignerWrapperan optionalWorkflowDefinitionparameter that its four hosts now pass.NotSupportedExceptionrather than silently doing nothing.Notes
@antv/x6-plugin-export'sexportJPEG()delegates totoPNG()upstream, so it would download PNG bytes under a.jpegname. The implementation callstoJPEG()directly and derives the extension from the same value that selects the encoder.Verification
npm run buildin the designer ClientLib: webpack compiled successfully.dotnet build Elsa.Studio.sln: 0 errors, no new warnings.Elsa.Studio.Workflows.Tests: 260 passed (new dialog, validation, file-name, and payload tests);Elsa.Studio.Workflows.Designer.Tests: 74 passed on net8.0/net9.0/net10.0.🤖 Generated with Claude Code