JsDiagram's Blazor bindings allow integrating the JavaScript diagramming library into Blazor applications. It contains a set of .NET wrapper classes, that use Blazor's JSInterop API to create and manipulate the client-side objects. The package provides easy access from C# code to the most of the MindFusion.Diagramming functionality, including different node types, layouts and styling. Additional UI components such as Overview, NodeListView, ZoomControl and Ruler are included too.
The following steps describe how to add a DiagramView to Blazor application:
1. Create a new Blazor WebAssembly App project.
2. Install the MindFusion.Diagramming.JavaScript NuGet package.
3. Add the importmap script for @mindfusion modules:
wwwroot/index.html:
 Copy Code
|
|---|
<head>
<script type="importmap">
{ "imports":
{
"@mindfusion/collections":"./_content/MindFusion.Diagramming.JavaScript/collections.js",
"@mindfusion/controls":"./_content/MindFusion.Diagramming.JavaScript/controls.js",
"@mindfusion/drawing":"./_content/MindFusion.Diagramming.JavaScript/drawing.js",
"@mindfusion/diagramming":"./_content/MindFusion.Diagramming.JavaScript/diagramming.js",
"@mindfusion/graphs":"./_content/MindFusion.Diagramming.JavaScript/graphs.js",
"@mindfusion/animations":"./_content/MindFusion.Diagramming.JavaScript/animations.js"
}
}
</script>
... |
4. Add imports to the top of _Imports.razor (or the top of Index.razor page):
| razor
Copy Code
|
|---|
@using MindFusion.Diagramming.JavaScript |
5. Add the DiagramView component razor tag:
| razor
Copy Code
|
|---|
<DiagramView @ref="diagramView"></DiagramView> |
Optionally add styles:
| razor
Copy Code
|
|---|
<style>
.mf_diagramView {
height: 80vh;
}
</style> |
Optionally set component parameters and add event handlers:
| razor
Copy Code
|
|---|
<DiagramView @ref="diagramView"
Behavior="Behavior.LinkTables"
NodeCreated="OnNodeCreated"></DiagramView> |
6. Create the DiagramView instance:
| C#
Copy Code
|
|---|
@code
{
private DiagramView diagramView = null!;
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await diagramView.CreateAsync();
}
}
// The event handler for the NodeCreated event
private async Task OnNodeCreated(NodeEventArgs args)
{
args.Node.Text = "some text";
}
} |
7. Obtain a reference to the Diagram instance and add nodes and links
| C#
Copy Code
|
|---|
@code
{
private DiagramView diagramView = null!;
private Diagram diagram = null!;
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await diagramView.CreateAsync();
diagram = diagramView.Diagram;
diagram.RouteLinks = true;
// create a Container node
var container = await diagram.Factory.CreateContainerNode(10, 20, 40, 60);
// create a Shape node
var shapeNode = await diagram.Factory.CreateShapeNode(100, 20, 20, 20);
shapeNode.Shape = Shape.FromId("Decision");
// create a link
diagram.Factory.CreateDiagramLink(container, shapeNode);
}
}
} |
Alternatively, the Diagram instance can be created first and then passed to the DiagramView component as a parameter of its CreateAsync method. To create the Diagram instance use the Diagram's static CreateAsync method.
| C#
Copy Code
|
|---|
@inject IJSRuntime JS
...
await MindFusion.JavaScript.BlazorInterop.ImportModules(JS!);
Diagram diagram = await Diagram.CreateAsync();
// ... set diagram properties/items/etc. here
await diagramView.CreateAsync(diagram);
// or
Diagram diagram = await Diagram.CreateAsync(JS!);
// ... set diagram properties/items/etc. here
await diagramView.CreateAsync(diagram); |
References to the JS modules can be disposed by using the DisposeModules method
| C#
Copy Code
|
|---|
async ValueTask IAsyncDisposable.DisposeAsync()
{
await MindFusion.JavaScript.BlazorInterop.DisposeModules();
} |
