Blazor.Flows

A highly customizable and flexible Blazor component for rendering interactive node-based diagrams, flowcharts, and mind maps.

View Demo · Report Bug · Request Feature

Table of Contents

1. About The Project
2. Getting Started
3. Key Features
4. Roadmap
5. Contributing
6. License
7. Contact

About The Project

Blazor.Flows is a comprehensive Blazor component library that allows you to create interactive diagrams entirely within your C# Blazor application. It is built to offer maximum flexibility, allowing developers to create custom nodes, links, and implement complex interaction behaviors.

It provides a strong C# API, accessible via the IDiagramService, for managing diagram state, elements (Layers, Nodes, Ports, Links, Groups), and user interactions (panning, zooming, selection).

(back to top)

Built With

---

Getting Started

Follow these simple steps to integrate Blazor.Flows into your Blazor project.

Installation

1. Install the NuGet Package Add the core package to your Blazor project:

   dotnet add package Blazor.Flows

2. Register Scripts In your index.html or _Host.cs, add the script tag:

   <script src="_content/Blazor.Flows/Blazor.Flows.js"></script>

3. Register Services In your Program.cs or Startup.cs, register the required services:

   using Blazor.Flows;
   
   builder.Services.AddBlazorFlows();

(back to top)

---

Features

The library is designed with a set of core features to support professional diagramming applications:

• Custom Components: Use custom Razor components for Nodes, Ports, and Links.
• Diagram Service: Manage the entire diagram state via a single, injectable C# service (IDiagramService).
• Behaviors: Enable/disable features like Panning, Zooming, Dragging Nodes/Groups, Multi-Selection, and Link Creation.
• Layers and Groups: Organize complex diagrams using separate layers and composite groups.
• Virtualization: Optimized rendering for large diagrams.
• Events: Full subscription to lifecycle and interaction events (e.g., NodeClickedEvent, LinkAddedEvent).

(back to top)

---

Roadmap

• Add Z-index to diagram models (v0.0.2)
• [] Async event handling
• Move to front/back feature
• Read-Only diagrams.
• Automatic Layout Algorithms
• Undo/Redo behaviour

See the open issues for a full list of proposed features (and known issues).

(back to top)

---

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

(back to top)

---

License

Distributed under the MIT License. See LICENSE.txt for more information.

---

Contact

Baboo - @RickyBarb5

Project Link: https://github.com/Rickybarb5/Blazor.Flows

(back to top)

---