All Projects → Blazor-Diagrams → Blazor.Diagrams

Blazor-Diagrams / Blazor.Diagrams

Licence: MIT License
A fully customizable and extensible all-purpose diagrams library for Blazor

Programming Languages

C#
18002 projects
HTML
75241 projects
javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Blazor.Diagrams

Blazor.diagrams
A fully customizable and extensible all-purpose diagrams library for Blazor
Stars: ✭ 119 (-63.61%)
Mutual labels:  modular, customization, drag, diagrams
Laravel Schematics
A Laravel package making a diagram of your models, relations and the ability to build them with it
Stars: ✭ 1,137 (+247.71%)
Mutual labels:  drag, diagrams
Diagram Maker
A library to display an interactive editor for any graph-like data.
Stars: ✭ 2,086 (+537.92%)
Mutual labels:  drag, diagrams
ValliStart
A start menu to replace the un-customizable one that you have right now.
Stars: ✭ 89 (-72.78%)
Mutual labels:  modular, customization
BlazorGrid
A simple, light weight data grid component for Blazor, focused on displaying remote data. Supports sorting and row highlighting, dynamic column changes and custom cell markup.
Stars: ✭ 61 (-81.35%)
Mutual labels:  blazor
nvim
🍨 Soothing pastel theme for NeoVim
Stars: ✭ 659 (+101.53%)
Mutual labels:  customization
DominicanWhoCodes
DominicanWho.Codes App
Stars: ✭ 58 (-82.26%)
Mutual labels:  blazor
rc-dock
Dock Layout for React Component
Stars: ✭ 318 (-2.75%)
Mutual labels:  drag
space
A SCI-FI community game server simulating space(ships). Built from the ground up to support moddable online action multiplayer and roleplay!
Stars: ✭ 25 (-92.35%)
Mutual labels:  modular
ember-cli-dropzonejs
Drag and drop file uploader addon using dropzonejs
Stars: ✭ 32 (-90.21%)
Mutual labels:  drag
drag-area
拖动实现区域选择,移动缩放选择区域
Stars: ✭ 18 (-94.5%)
Mutual labels:  drag
mi-gen
Mass-Interaction Sound Synthesis Toolbox for Max/MSP's gen~
Stars: ✭ 50 (-84.71%)
Mutual labels:  modular
BlazorWasmWithDocker
Companion code sample for my blog post - Containerising a Blazor WebAssembly App
Stars: ✭ 16 (-95.11%)
Mutual labels:  blazor
Blazor.Pagination
A reusable pagination component for Blazor.
Stars: ✭ 27 (-91.74%)
Mutual labels:  blazor
hangfire-dashboard-customize
Customize your Hangfire Dashboard (e.g. Change the Title of the Dashboard)
Stars: ✭ 19 (-94.19%)
Mutual labels:  customization
BlazorServerWithDocker
Companion code sample for my blog post - Containerising a Blazor Server App
Stars: ✭ 16 (-95.11%)
Mutual labels:  blazor
MachineLearning-BaseballPrediction-BlazorApp
Machine Learning over historical baseball data using latest Microsoft AI & Development technology stack (.Net Core & Blazor)
Stars: ✭ 36 (-88.99%)
Mutual labels:  blazor
YoutubeVideoSample
YoutubeVideoSample
Stars: ✭ 176 (-46.18%)
Mutual labels:  drag
UE4EditorCustomize
Change UE4 Editor to a new Style.
Stars: ✭ 38 (-88.38%)
Mutual labels:  customization
MaterialFox-BigSur
A cleaner, more refined userChrome.css theme for Firefox—forked from MaterialFox
Stars: ✭ 62 (-81.04%)
Mutual labels:  customization

Blazor.Diagrams

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
Badges
JavaScript GitHub file size in bytes
CSS GitHub file size in bytes
Activity GitHub
License GitHub

Mindset/Goals

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

Features

  • Multi purpose
  • Touch support
  • SVG layer for links/nodes and HTML layer for nodes for maximum customizability
  • Links between nodes directly or node ports
  • 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

Contributing

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.

Feedback

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].