Blazor.Diagrams is a fully customizable and extensible all-purpose diagrams library for Blazor (both Server Side and WASM). It was inspired by the popular React library react-diagrams.
Blazor.Diagrams can be used to make advanced diagrams with a custom design. Even the behavior of the library is "hackable" and can be changed to suit your needs. It is very code/OOP oriented, representing a diagram (using models) is seperate from rendering. This has a lot of benefits, for example if you want to (de)serialize diagrams or make an engine that runs at runtime (visual programming).
This library aims to provide most of its features using C#/Blazor while minimizing Javascript.
| NuGet Package | Version | Download |
|---|---|---|
| Z.Blazor.Diagrams.Core |  |
 |
| Z.Blazor.Diagrams |  |
 |
| Z.Blazor.Diagrams.Algorithms |  |
 |
| Badges | |
|---|---|
| JavaScript |  |
| CSS |  |
| Activity |  |
| License |  |
You can get started very easily & quickly using:
- Panning/Zooming
- Ports & Links (no free links for now)
- Multi selection / deletion
- Locking mechanism
- Custom nodes/links
- SVG layer for links/nodes and HTML layer for nodes for maximum customizability
- Replaceable behaviors (e.g. link dragging, model deletion, ...)
- Zoom to fit (all nodes or selected ones only)
- Customizable Diagram Overview/Preview/Navigator (on the bottom right by default)
- Snap to Grid
- Grouping: [CTRL + ALT + G] to (un)group
- Groups with ports/links and nested groups (experimental)
- Virtualization: only draw nodes that are visible to the users
- Algorithms
<CascadingValue Name="DiagramManager" Value="diagramManager">
<DiagramCanvas>
<Widgets>
<Navigator Width="300" Height="200" DefaultStyle="true"></Navigator>
</Widgets>
</DiagramCanvas>
</CascadingValue>
Repository: https://github.com/zHaytam/Blazor.DatabaseDesigner
- Better way to handle/render groups
- Pluggable history (undo/redo)
- Auto layout
- Razor-oriented diagram creation
- Send to front/back (limited since there are 2 layers)
- Free links, no need for ports (useful in simple diagram scenarios, like a flowchart)
- A set of common shapes (depends on the above feature)
If you find a bug or you want to see a functionality in this library, feel free to open an issue in the repository!
Of course, PRs are very welcome.