dystudio / blazor.diagrams

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

Blazor.Diagrams

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

Getting Started

You can get started very easily & quickly using:

• Documentation
• Quick Start
• Demos

Functionalities

• 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
• Clipping: only draw nodes that are visible to the users
• Algorithms

Preview

<CascadingValue Name="DiagramManager" Value="diagramManager">
  <DiagramCanvas>
    <Widgets>
      <Navigator Width="300" Height="200" DefaultStyle="true"></Navigator>
    </Widgets>
  </DiagramCanvas>
</CascadingValue>

Sample project

Repository: https://github.com/zHaytam/Blazor.DatabaseDesigner

Roadmap

• Better way to handle/render groups
• Pluggable history (undo/redo)
• Auto layout

Thinking about

• 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)

Feedback

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.