GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → zHaytam → Blazor.diagrams

zHaytam / Blazor.diagrams

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

Labels

svgmodulardragcustomizationdiagrams

Projects that are alternatives of or similar to Blazor.diagrams

Blazor.Diagrams
A fully customizable and extensible all-purpose diagrams library for Blazor
Stars: ✭ 327 (+174.79%)
Mutual labels:  modular, customization, drag, diagrams
Diagram Maker
A library to display an interactive editor for any graph-like data.
Stars: ✭ 2,086 (+1652.94%)
Mutual labels:  diagrams, drag
Laravel Schematics
A Laravel package making a diagram of your models, relations and the ability to build them with it
Stars: ✭ 1,137 (+855.46%)
Mutual labels:  diagrams, drag
Openjscad.org
JSCAD is an open source set of modular, browser and command line tools for creating parametric 2D and 3D designs with JavaScript code. It provides a quick, precise and reproducible method for generating 3D models, and is especially useful for 3D printing applications.
Stars: ✭ 1,851 (+1455.46%)
Mutual labels:  svg, modular
ValliStart
A start menu to replace the un-customizable one that you have right now.
Stars: ✭ 89 (-25.21%)
Mutual labels:  modular, customization
Plain Draggable
The simple and high performance library to allow HTML/SVG element to be dragged.
Stars: ✭ 362 (+204.2%)
Mutual labels:  svg, drag
Snap.svg.zpd
A zoom/pan/drag/rotate plugin for Snap.svg (useful for view only)
Stars: ✭ 119 (+0%)
Mutual labels:  svg, drag
Sprotty
A diagramming framework for the web
Stars: ✭ 309 (+159.66%)
Mutual labels:  svg, diagrams
Nn Svg
Publication-ready NN-architecture schematics.
Stars: ✭ 805 (+576.47%)
Mutual labels:  svg, diagrams
Asciitosvg
Create beautiful SVG renderings of ASCII diagrams.
Stars: ✭ 82 (-31.09%)
Mutual labels:  svg, diagrams
Leader Line
Draw a leader line in your web page.
Stars: ✭ 1,872 (+1473.11%)
Mutual labels:  svg
React Smooth Dnd
react wrapper components for smooth-dnd
Stars: ✭ 1,560 (+1210.92%)
Mutual labels:  drag
Vue Weather
基于vue.js 2.0的天气应用demo
Stars: ✭ 116 (-2.52%)
Mutual labels:  svg
React Native Svg Animations
SVG Animations wrapper for react-native.
Stars: ✭ 117 (-1.68%)
Mutual labels:  svg
React Fast Charts
Blazing Fast Charting Library in React with loading time less than 50ms
Stars: ✭ 113 (-5.04%)
Mutual labels:  svg
Chartjs Plugin Dragdata
Draggable data points plugin for Chart.js
Stars: ✭ 116 (-2.52%)
Mutual labels:  drag
Svg Icon
👻 A lightweight library that makes it easier to use SVG icons in your Angular Application
Stars: ✭ 112 (-5.88%)
Mutual labels:  svg
Python Altium
Altium schematic format documentation, SVG converter and TK viewer
Stars: ✭ 112 (-5.88%)
Mutual labels:  svg
Bgrabitmap
📜 BGRABitmap graphics library made with Lazarus (Free Pascal).
Stars: ✭ 112 (-5.88%)
Mutual labels:  svg
Geojson2svg
Converts geojson to svg string given svg viewport size and maps extent.
Stars: ✭ 117 (-1.68%)
Mutual labels:  svg
View All Similar Projects ➔

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

Getting Started

You can get started very easily & quickly using:

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
  • Groups with ports/links and nested groups (experimental)
  • Virtualization: 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

  • [x] 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.

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