{"id":13807653,"url":"https://github.com/excubo-ag/Blazor.Diagrams","last_synced_at":"2025-05-14T00:31:49.191Z","repository":{"id":54805199,"uuid":"271816539","full_name":"excubo-ag/Blazor.Diagrams","owner":"excubo-ag","description":null,"archived":false,"fork":false,"pushed_at":"2025-03-14T13:28:12.000Z","size":30134,"stargazers_count":145,"open_issues_count":4,"forks_count":19,"subscribers_count":10,"default_branch":"main","last_synced_at":"2025-04-15T02:06:29.947Z","etag":null,"topics":["blazor","diagrams"],"latest_commit_sha":null,"homepage":"https://excubo-ag.github.io/Blazor.Diagrams/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/excubo-ag.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-06-12T14:23:56.000Z","updated_at":"2025-03-18T23:17:17.000Z","dependencies_parsed_at":"2024-04-27T14:10:38.198Z","dependency_job_id":"85d74f3d-bb2f-45d0-917d-989b84fba14f","html_url":"https://github.com/excubo-ag/Blazor.Diagrams","commit_stats":{"total_commits":426,"total_committers":8,"mean_commits":53.25,"dds":"0.39906103286384975","last_synced_commit":"c0c6b0168964a1555d8b1b855063705822c4dbff"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/excubo-ag%2FBlazor.Diagrams","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/excubo-ag%2FBlazor.Diagrams/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/excubo-ag%2FBlazor.Diagrams/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/excubo-ag%2FBlazor.Diagrams/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/excubo-ag","download_url":"https://codeload.github.com/excubo-ag/Blazor.Diagrams/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254046356,"owners_count":22005576,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blazor","diagrams"],"created_at":"2024-08-04T01:01:28.247Z","updated_at":"2025-05-14T00:31:44.180Z","avatar_url":"https://github.com/excubo-ag.png","language":"HTML","funding_links":[],"categories":["Libraries \u0026 Extensions"],"sub_categories":["2D/3D Rendering engines"],"readme":"## Excubo.Blazor.Diagrams\r\n\r\n[![Nuget](https://img.shields.io/nuget/v/Excubo.Blazor.Diagrams)](https://www.nuget.org/packages/Excubo.Blazor.Diagrams/)\r\n[![Nuget](https://img.shields.io/nuget/dt/Excubo.Blazor.Diagrams)](https://www.nuget.org/packages/Excubo.Blazor.Diagrams/)\r\n[![GitHub](https://img.shields.io/github/license/excubo-ag/Blazor.Diagrams)](https://github.com/excubo-ag/Blazor.Diagrams)\r\n\r\nExcubo.Blazor.Diagrams is a native-Blazor diagram component library.\r\n\r\n![Ready to install?](screenshot.png)\r\n\r\n[Demo on github.io using Blazor Webassembly](https://excubo-ag.github.io/Blazor.Diagrams/)\r\n\r\n## Key features\r\n\r\n- Adding/Moving/Removing of nodes\r\n- Moving/Removing groups of nodes (select multiple nodes by drawing a region (-\u003e press `[shift]`), or by adding/removing individual nodes by clicking them while holding `[ctrl]`)\r\n- Adding/Modifying/Removing links (including shape of curve for CurvedLink!)\r\n- Undo/Redo with `[Ctrl]+[z]` (undo) and `[Ctrl]+[Shift]+[z]` / `[Ctrl]+[y]`(redo)\r\n- Panning/Zooming\r\n- Default link connection ports by position (North, NorthEast, East,...)\r\n- Custom nodes/links\r\n- Node library (fully customizable) for adding new nodes\r\n- Change shape and arrows for links\r\n- Overview screen for easy navigation on large diagrams\r\n- Customizable background (grid lines, color, any style you want)\r\n\r\n## How to use\r\n\r\nUsing Excubo.Blazor.Diagrams doesn't require any difficult installation. You need to install it and use it, that's it:\r\n\r\n### 1. Install the nuget package Excubo.Blazor.Diagrams\r\n\r\nExcubo.Blazor.Diagrams is distributed [via nuget.org](https://www.nuget.org/packages/Excubo.Blazor.Diagrams/).\r\n[![Nuget](https://img.shields.io/nuget/v/Excubo.Blazor.Diagrams)](https://www.nuget.org/packages/Excubo.Blazor.Diagrams/)\r\n\r\n#### Package Manager:\r\n```ps\r\nInstall-Package Excubo.Blazor.Diagrams\r\n```\r\n\r\n#### .NET Cli:\r\n```cmd\r\ndotnet add package Excubo.Blazor.Diagrams\r\n```\r\n\r\n#### Package Reference\r\n```xml\r\n\u003cPackageReference Include=\"Excubo.Blazor.Diagrams\" /\u003e\r\n```\r\n\r\n### 2. Add the `Diagram` component to your component\r\n\r\n```html\r\n@using Excubo.Blazor.Diagrams\r\n\r\n\u003cDiagram\u003e\r\n    \u003cNodes\u003e\r\n        \u003cNode Id=\"abc\" X=\"500\" Y=\"500\"\u003e\r\n            Hello node @context.Id\r\n        \u003c/Node\u003e\r\n        \u003cNode Id=\"def\" X=\"1000\" Y=\"500\"\u003e\r\n            Hello node @context.Id\r\n        \u003c/Node\u003e\r\n    \u003c/Nodes\u003e\r\n    \u003cLinks\u003e\r\n    \u003c/Links\u003e\r\n\u003c/Diagram\u003e\r\n```\r\n\r\nThis is of course only a minimalistic example.\r\nFor more examples, have a look at [the sample project](https://github.com/excubo-ag/Blazor.Diagrams/tree/main/TestProject_Components), which is the basis for the [demo application](https://excubo-ag.github.io/Blazor.Diagrams/).\r\n\r\n:information:\r\nShould you get a blank screen instead of the expected diagram, make sure that the diagram has a non-zero height.\r\nThe diagram takes 100% of the height of the parent DOM node.\r\nTo see whether this is the issue you're experiencing, try wrapping the diagram in a `div` with a fixed size,\r\ne.g. `\u003cdiv style=\"height: 1000px; width: 1000px;\"\u003e\u003cDiagram\u003e...\u003c/Diagram\u003e\u003c/div\u003e`.\r\n\r\n## Design principles\r\n\r\n- Extensibility\r\n\r\nUsers get a set of built-in node shapes and link types, but can expand this freely and with minimal amount of effort by adding their own shapes.\r\n\r\n- Blazor API\r\n\r\nThe API should feel like you're using Blazor, not a javascript library.\r\n\r\n- Minimal js, minimal css, lazy-loaded only when you use the component\r\n\r\nThe non-C# part of the code of the library should be as tiny as possible. We set ourselves a maximum amount of 10kB for combined js+css.\r\nThe current payload is less than 100 bytes, and only gets loaded dynamically when the component is actually used.\r\n\r\n## How to design a custom node\r\n\r\nA complete example of how to design a custom node is available [here](https://github.com/excubo-ag/Blazor.Diagrams/blob/main/TestProject_Components/Pages/UserDefinedNode.razor).\r\n\r\n## Changelog\r\n\r\n### 4.X.Y\r\n\r\nStarting with version 4.0.0, only the net6.0 TFM is targeted. This is a change to simplify dependency management and we strongly encourage all users to upgrade to net6.0.\r\n\r\n### 3.0.0 ![category: breaking change](https://img.shields.io/badge/category-breaking%20change-orange)![impact: low](https://img.shields.io/badge/impact-low-green)\r\n\r\nWhen implementing custom nodes, one must now decide between a node that has a fixed size (i.e. has a parameter for both width and height) or one that determines its size by the size of the node's content.\r\nTo upgrade existing projects, replace `NodeBase` with `ContentSizedNodeBase`.\r\n\r\n### 2.0.0 ![category: breaking change](https://img.shields.io/badge/category-breaking%20change-orange)![impact: medium](https://img.shields.io/badge/impact-medium-orange)\r\n\r\nStarting with 2.0.0, `EventCallback\u003cT\u003e`s have been replaced with `Action\u003cT\u003e`. In most situations, there should be nothing to change. If you previously used `await` in the callback method, you now have to move that into a separate method:\r\n\r\nbefore:\r\n```cs\r\nprivate async Task Callback(T value)\r\n{\r\n    Value = value;\r\n    await FooAsync();\r\n    await BarAsync();\r\n}\r\n```\r\n\r\nafter:\r\n```cs\r\nprivate void Callback(T value)\r\n{\r\n    Value = value;\r\n    RunFooAndBarAsync();\r\n}\r\nprivate async Task RunFooAndBarAsync()\r\n{\r\n    await FooAsync();\r\n    await BarAsync();\r\n}\r\n```\r\n\r\n### 1.11.0 ![category: breaking change](https://img.shields.io/badge/category-breaking%20change-orange)![impact: low](https://img.shields.io/badge/impact-low-green)\r\n\r\nStarting with version 1.11.0, `NodeBase` now implements `IDisposable`. This means that any node implementation inheriting from `NodeBase` that previously implemented `IDisposable` now needs to override `void Dispose()`:\r\n\r\nbefore:\r\n```cs\r\n@implements IDisposable\r\npublic void Dispose()\r\n{\r\n    Resource.Dispose();\r\n}\r\n```\r\n\r\nafter:\r\n\r\n```cs\r\npublic override void Dispose()\r\n{\r\n    Resource.Dispose();\r\n    base.Dispose();\r\n}\r\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fexcubo-ag%2FBlazor.Diagrams","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fexcubo-ag%2FBlazor.Diagrams","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fexcubo-ag%2FBlazor.Diagrams/lists"}