https://github.com/soenneker/soenneker.blazor.drawflow
A Blazor interop library for drawflow.js
https://github.com/soenneker/soenneker.blazor.drawflow
blazor blazorlibrary canvas csharp diagram dotnet drawflow drawflowinterop
Last synced: about 1 hour ago
JSON representation
A Blazor interop library for drawflow.js
- Host: GitHub
- URL: https://github.com/soenneker/soenneker.blazor.drawflow
- Owner: soenneker
- License: mit
- Created: 2025-06-30T22:51:22.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2026-05-09T12:47:09.000Z (4 days ago)
- Last Synced: 2026-05-09T14:43:39.128Z (3 days ago)
- Topics: blazor, blazorlibrary, canvas, csharp, diagram, dotnet, drawflow, drawflowinterop
- Language: CSS
- Homepage: https://soenneker.com
- Size: 974 KB
- Stars: 5
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
- Security: .github/SECURITY.md
Awesome Lists containing this project
README
[](https://www.nuget.org/packages/soenneker.blazor.drawflow/)
[](https://github.com/soenneker/soenneker.blazor.drawflow/actions/workflows/codeql.yml)
[](https://github.com/soenneker/soenneker.blazor.drawflow/actions/workflows/publish-package.yml)
[](https://www.nuget.org/packages/soenneker.blazor.drawflow/)
[](https://soenneker.github.io/soenneker.blazor.drawflow)
#  Soenneker.Blazor.Drawflow
**Soenneker.Blazor.Drawflow** is a lightweight, modern Blazor wrapper for [drawflow.js](https://github.com/jerosoler/Drawflow), enabling interactive node-based diagrams in your Blazor applications. It supports advanced features like modules, zoom, import/export, and full event handling.
## Features
- **Node and Connection Management**: Add, remove, and update nodes and connections programmatically.
- **Modules**: Organize nodes into modules and switch between them.
- **Zoom & Pan**: Built-in zoom controls and canvas panning.
- **Import/Export**: Serialize and restore flows as JSON.
- **Event Handling**: Subscribe to all major events (node created, removed, selected, data changed, etc).
- **Customizable**: Pass options to control rerouting, curvature, zoom limits, and more.
- **CDN or Local Assets**: Load drawflow.js and CSS from CDN or local files.
---
## Installation
```bash
dotnet add package Soenneker.Blazor.Drawflow
```
---
## Quick Start
1. **Register Services** (in `Program.cs`):
```csharp
builder.Services.AddDrawflowInteropAsScoped();
```
2. **Add the Component** (in your `.razor` file):
```razor
@code {
private Drawflow? Flow;
private readonly DrawflowOptions _options = new();
private Task HandleNodeCreated(string id)
{
Console.WriteLine($"Node created {id}");
return Task.CompletedTask;
}
}
```
---
### Event Callbacks
```razor
```
### Programmatic API
The Drawflow component implements `IDrawflow` interface, providing a clean API for programmatic control:
```csharp
// Using the component reference
await Flow.AddNode("github", 1, 1, 150, 150, "github", new { name = "GitHub" }, "
GitHub");
await Flow.AddConnection("github", "slack", "output", "input");
await Flow.ZoomIn();
// Export as strongly-typed object
DrawflowExport graph = await Flow.Export();
// Export as JSON string
string json = await Flow.ExportAsJson();
```
### Interface Usage
You can also use the `IDrawflow` interface for dependency injection and testing:
```csharp
// In your service registration
services.AddScoped();
// In your component or service
@inject IDrawflow DrawflowService
// Usage
await DrawflowService.AddNode("test", 1, 1, 100, 100, "test", null, "
Test");
```
### Strongly-Typed Methods
The library provides overload methods that accept strongly-typed objects for better type safety and IntelliSense support:
```csharp
// Add node using strongly-typed DrawflowNode
var node = new DrawflowNode
{
Name = "MyNode",
PosX = 100,
PosY = 100,
Class = "my-node",
Html = "
My Node",
Data = new Dictionary { ["key"] = "value" }
};
await Flow.AddNode(node);
// Add module using strongly-typed DrawflowModule
var module = new DrawflowModule
{
Data = new Dictionary
{
["node1"] = new DrawflowNode { Name = "Node1", PosX = 100, PosY = 100 }
}
};
await Flow.AddModule("MyModule", module);
// Import using strongly-typed DrawflowExport
var drawflowExport = new DrawflowExport
{
Drawflow = new Dictionary
{
["Home"] = new DrawflowModule { Data = new Dictionary() }
}
};
await Flow.Import(drawflowExport);
// Import from JSON string
await Flow.Import(jsonString);
```
### Options
```csharp
var options = new DrawflowOptions {
Reroute = true,
Curvature = 0.3,
Zoom = 1.0,
ZoomMax = 2.0,
ZoomMin = 0.3,
DraggableInputs = true,
UseUuid = true,
ManualCreate = false // auto-create on render
};
```
### Export Models
The library provides strongly-typed models for working with exported drawflow data:
```csharp
// Main graph structure
public class DrawflowExport
{
public Dictionary? Drawflow { get; set; }
}
// Module containing nodes
public class DrawflowModule
{
public Dictionary? Data { get; set; }
}
// Individual node with connections
public class DrawflowNode
{
public string? Id { get; set; }
public string? Name { get; set; }
public Dictionary? Data { get; set; }
public Dictionary? Inputs { get; set; }
public Dictionary? Outputs { get; set; }
public int PosX { get; set; }
public int PosY { get; set; }
}
// Input/Output connections
public class DrawflowNodeIO
{
public List? Connections { get; set; }
}
// Connection between nodes
public class DrawflowConnection
{
public string? Node { get; set; }
public string? Input { get; set; }
public string? Output { get; set; }
}
```