Blazor Diagram workflow designer

[GeorgeS2019]

Goal: Blazor Diagram workflow designer.

ref: #10 (reply in thread)

Details

This discussion addresses what need to be implemented to replace TypeScript ClientLib with Blazor.Domain

Reference

• Blazor.Diagram

• AzureStudio

[GeorgeS2019]

Original discussion
Blazor-Diagrams/Blazor.Diagrams#334 (comment)

cc @sfmskywalker

All these Javascript interopt is very slow.
It would be great if there is a Blazor Diagram based workflow designer, a separate project to what you have done with database designer.

https://workflowengine.io/documentation/workflow-designer-in-blazor-application

[sfmskywalker]

Define slow.
The Workflow Engine designer you linked to also uses JS Interop - they simply wrapped their JS workflow designer inside of a Blazor component - exactly the same technique that Elsa uses for interacting with the X6 JS library 🤷🏻‍♂️

[sfmskywalker]

It would be great if there is a Blazor Diagram based workflow designer, a separate project to what you have done with database designer.

I'm not sure what you mean with database designer, but I do agree that it would be great if there was a Blazor Diagram workflow designer. Let me know if you see any viable options that is on-par with what we have at the moment, both in terms of features and performance.

[GeorgeS2019]

@sfmskywalker
The Optimajet approach is far worse than your approach.
Your approach has a long list of Javascript API exposed.
That means these API could eventually be replaced by Blazor Diagram.

Before that, perhaps export these javascript as a javascript library like the optimajet.
This allow the next step to do Test Driven Development of writing blazor unit tests againts the javascript library of Elsa Studio exported as external javascript library

[GeorgeS2019]

I'm not sure what you mean with database designer,

Currently for Blazor Diagram, there is this project
https://github.com/Blazor-Diagrams/Blazor.DatabaseDesigner

We need to persuade the Blazor Diagram team to create a project specific for Blazor diagram for workflow

[GeorgeS2019]

List of Javascript API for interopt with Antv c# wrappers

Javascript APIs

https://github.com/elsa-workflows/elsa-studio/tree/main/src/modules/Elsa.Studio.Workflows.Designer/ClientLib/src/designer/api

1. add-activity-node.ts
2. auto-layout.ts
3. calculate-activity-size.ts
4. center-content.ts
5. create-graph.ts
6. dispose-graph.ts
7. dotnet-flowchart-designer.ts
8. graph-bindings.ts
9. index.ts
10. Ioad-graph.ts
11. paste-cells.ts
12. raise-activity-embedded-port-selected.ts
13. raise-activity-selected.ts
14. read-graph.ts
15. select-activity.ts
16. set-grid-color.ts
17. update-activity-size.ts
18. update-activity-stats.ts
19. update-activity.ts
20. zoom-to-fit.ts

https://github.com/elsa-workflows/elsa-studio/blob/main/src/modules/Elsa.Studio.Workflows.Designer/ClientLib/package.json

"name": "elsa-designer-dependencies",
  "description": "Bundle dependencies for the designer.",
  "repository": "https://github.com/elsa-workflows/elsa-dashboard",
  "license": "MIT",
  "version": "1.0.0",
  "dependencies": {
    "@antv/layout": "^0.3.25",
    "@antv/x6": "^2.17.1",
    "@antv/x6-plugin-clipboard": "^2.1.6",
    "@antv/x6-plugin-history": "^2.2.4",
    "@antv/x6-plugin-keyboard": "^2.2.2",
    "@antv/x6-plugin-scroller": "^2.0.10",
    "@antv/x6-plugin-selection": "^2.2.1",
    "@antv/x6-plugin-snapline": "^2.1.7",
    "@antv/x6-plugin-transform": "^2.1.8",
    "lodash.camelcase": "^4.3.0",
    "uuid": "^9.0.1"
  },

https://x6.antv.vision/en

[sfmskywalker]

It would be helpful if you could clarify the practical issues related to JS interop. From my perspective, moving activities in the designer operates smoothly in the JS space, with events sent via JS Interop only after the user stops dragging, which seems efficient. If there are specific performance bottlenecks affecting the UX, I'd appreciate more detailed examples. Simply listing TS files used for interop doesn't highlight these issues. If significant problems exist that justify a native Blazor rewrite, please provide concrete instances of these performance concerns.

[GeorgeS2019]

One step at a time

[GeorgeS2019]

https://github.com/GoldSubmarine/workflow-bpmn-modeler

[sfmskywalker]

That's a JS library too it seems. Which also requires JS Interop.

[GeorgeS2019]

It is a MIT license, compared to other recommended by other users here, which is commercial driven

[GeorgeS2019]

@sfmskywalker

ASP.NET Core 9/10 Blazor will simplify .NET JavaScript Interoperability
https://learn.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/import-export-interop?view=aspnetcore-9.0

Bundlers like Vite/Webpack handle minification, tree‑shaking, and hot reload, while Blazor automatically generates the C# glue code.

using System.Runtime.InteropServices.JavaScript;

public partial class MathInterop
{
    [JSImport("add", "wwwroot/dist/math.js")]
    public static partial int Add(int a, int b);
}

Check out @soenneker
https://github.com/soenneker/soenneker.blazor.drawflow

Blazor wrapper of DrawFlow.js

DrawFlow.js

[GeorgeS2019]

with the ASP.NET 10, the c#
https://github.com/elsa-workflows/elsa-studio/blob/main/src/modules/Elsa.Studio.Workflows.Designer/Interop/

Instead of manual InvokeAsync: Blazor in .NET 10 uses source generators with [JSImport] and [JSExport] to wrap JavaScript functions in strongly‑typed C# methods.

This modernizes JS interop, integrates seamlessly with bundlers like Vite/Webpack (POTENTIALLY easily decouple Other Diagramming JavaScript libraries to be integrated into Elsa-Studio), and makes Blazor apps more reliable and developer‑friendly.