Z.Blazor.Diagrams.Core 3.0.2

dotnet add package Z.Blazor.Diagrams.Core --version 3.0.2                
NuGet\Install-Package Z.Blazor.Diagrams.Core -Version 3.0.2                
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.
<PackageReference Include="Z.Blazor.Diagrams.Core" Version="3.0.2" />                
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add Z.Blazor.Diagrams.Core --version 3.0.2                
#r "nuget: Z.Blazor.Diagrams.Core, 3.0.2"                
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.
// Install Z.Blazor.Diagrams.Core as a Cake Addin
#addin nuget:?package=Z.Blazor.Diagrams.Core&version=3.0.2

// Install Z.Blazor.Diagrams.Core as a Cake Tool
#tool nuget:?package=Z.Blazor.Diagrams.Core&version=3.0.2                


alternate text is missing from this package README image

Z.Blazor.Diagrams is a fully customizable and extensible all-purpose diagrams library for Blazor (both Server Side and WASM). It was first inspired by the popular React library react-diagrams, but then evolved into something much bigger. ZBD 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.

NuGet Package Version Download
Z.Blazor.Diagrams.Core NuGet Nuget
Z.Blazor.Diagrams NuGet Nuget
Z.Blazor.Diagrams.Algorithms NuGet Nuget
JavaScript GitHub file size in bytes
CSS GitHub file size in bytes
Activity GitHub
License GitHub


  • Be multi purpose and useful for most diagramming use cases. ZBD started as a diagramming library for specific use cases, but it is now expanding to be more generic and more useful.
  • Performance is very important, especially in WebAssembly.
  • Separate the data layer (models) and the UI layer (widgets). Representing diagrams as a model has a lot of benefits, and the separation makes things easier, such as saving snapshots or mutating models, regardless of how/where it's gonna be rendered.
  • Be fully customizable, either in how things look or how things behave. All of the UI can be customized by either providing Blazor components or using CSS. All of the default behaviors are customizable by replacing them with your own custom behaviors.
  • Avoid JavaScript. 95% of ZBD is made using C#/Blazor, JS is only used when absolutely necessary (e.g. bounds and observers). JS interop calls are costly, in the future, we strive to have most of them batched and/or replaced.


  • Multi purpose
  • Touch support
  • SVG layer for links/nodes and HTML layer for nodes for maximum customizability
  • Links between nodes, ports and even other links
  • Link routers, path generators, markers and labels
  • Panning, Zooming and Zooming to fit a set of nodes
  • Multi selection, deletion and region selection
  • Groups as first class citizen, with all the features of nodes
  • Custom nodes, links and groups
  • Replaceable ("Hackable") behaviors (e.g. link dragging, model deletion, etc..)
  • Customizable Diagram overview/navigator for large diagrams
  • Snap to Grid
  • Virtualization, only draw nodes that are visible to the users
  • Locking mechanism (read-only)
  • Algorithms

Getting Started

You can get started very easily & quickly using:

Sample project

Repository: https://github.com/Blazor-Diagrams/Blazor.DatabaseDesigner

alternate text is missing from this package README image


All kinds of contributions are welcome!
If you're interested in helping, please create an issue or comment on an existing one to explain what you will be doing. This is because multiple people can be working on the same problem.


If you find a bug or you want to see a functionality in this library, feel free to open an issue.

Product Compatible and additional computed target framework versions.
.NET net6.0 is compatible.  net6.0-android was computed.  net6.0-ios was computed.  net6.0-maccatalyst was computed.  net6.0-macos was computed.  net6.0-tvos was computed.  net6.0-windows was computed.  net7.0 is compatible.  net7.0-android was computed.  net7.0-ios was computed.  net7.0-maccatalyst was computed.  net7.0-macos was computed.  net7.0-tvos was computed.  net7.0-windows was computed.  net8.0 is compatible.  net8.0-android was computed.  net8.0-browser was computed.  net8.0-ios was computed.  net8.0-maccatalyst was computed.  net8.0-macos was computed.  net8.0-tvos was computed.  net8.0-windows was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages (3)

Showing the top 3 NuGet packages that depend on Z.Blazor.Diagrams.Core:

Package Downloads

Application Component for the Alliance Business Suite.


A fully customizable and extensible all-purpose diagrams library for Blazor


Algorithms for Z.Blazor.Diagrams

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last updated
3.0.2 37,229 2/24/2024
3.0.1 36,533 10/27/2023
3.0.0 57,262 8/14/2023
3.0.0-beta.7 1,505 5/10/2023
3.0.0-beta.6 78 5/10/2023
3.0.0-beta.5 3,007 11/24/2022
3.0.0-beta.4 305 10/16/2022
3.0.0-beta.3 1,685 9/19/2022
3.0.0-beta.2 158 9/11/2022
3.0.0-beta.1 178 9/4/2022
2.1.6 497,846 11/1/2021
2.1.5 6,698 8/30/2021
2.1.4 1,280 8/29/2021
2.1.3 2,447 7/19/2021
2.1.2 5,241 5/31/2021
2.1.1 1,319 5/25/2021
2.1.0 2,309 4/30/2021
2.0.0 3,869 3/24/2021
2.0.0-rc 1,035 3/22/2021
1.5.2 5,556 1/18/2021
1.5.1 1,433 1/9/2021
1.5.0 1,610 1/5/2021
1.4.2 1,431 12/30/2020
1.4.1 1,520 12/24/2020
1.4.0 1,416 12/12/2020
1.3.0 1,580 11/29/2020
1.2.0 11,411 11/8/2020
1.1.3 1,487 11/2/2020
1.1.2 1,412 11/2/2020
1.1.0 1,555 10/19/2020 1,325 10/11/2020
1.0.4 1,340 10/2/2020
1.0.3 1,351 9/25/2020
1.0.2 1,407 9/25/2020
1.0.1 1,421 9/24/2020
1.0.0 1,425 9/24/2020
0.7.0 1,567 9/13/2020
0.6.0 1,526 8/14/2020
0.5.0 1,443 7/29/2020
0.4.0 1,484 7/15/2020
0.3.1 1,488 6/25/2020
0.3.0 1,399 6/25/2020
0.2.0 1,443 6/19/2020
0.1.1 1,601 6/18/2020
0.1.0 2,370 6/13/2020