{"id":23061293,"url":"https://github.com/syncfusionexamples/create-a-diagram-component-in-a-blazor-server-application","last_synced_at":"2026-01-18T06:51:33.680Z","repository":{"id":51531316,"uuid":"256418399","full_name":"SyncfusionExamples/Create-a-Diagram-Component-in-a-Blazor-Server-Application","owner":"SyncfusionExamples","description":"This example explains how to create a Blazor Diagram component to the Blazor server application and how to create a simple flowchart using nodes and connectors.","archived":false,"fork":false,"pushed_at":"2024-07-29T07:35:17.000Z","size":368,"stargazers_count":0,"open_issues_count":1,"forks_count":3,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-02-08T20:48:01.026Z","etag":null,"topics":["blazor-diagram","connector","flow-chart","nodes"],"latest_commit_sha":null,"homepage":"https://blazor.syncfusion.com/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SyncfusionExamples.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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-04-17T06:16:00.000Z","updated_at":"2024-07-29T07:35:21.000Z","dependencies_parsed_at":"2024-02-15T08:32:41.738Z","dependency_job_id":"330ac33c-418c-40c8-9001-c5b9f9192761","html_url":"https://github.com/SyncfusionExamples/Create-a-Diagram-Component-in-a-Blazor-Server-Application","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SyncfusionExamples%2FCreate-a-Diagram-Component-in-a-Blazor-Server-Application","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SyncfusionExamples%2FCreate-a-Diagram-Component-in-a-Blazor-Server-Application/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SyncfusionExamples%2FCreate-a-Diagram-Component-in-a-Blazor-Server-Application/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SyncfusionExamples%2FCreate-a-Diagram-Component-in-a-Blazor-Server-Application/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SyncfusionExamples","download_url":"https://codeload.github.com/SyncfusionExamples/Create-a-Diagram-Component-in-a-Blazor-Server-Application/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246952281,"owners_count":20859813,"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-diagram","connector","flow-chart","nodes"],"created_at":"2024-12-16T03:17:10.536Z","updated_at":"2026-01-18T06:51:33.641Z","avatar_url":"https://github.com/SyncfusionExamples.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Create a Diagram Component in a Blazor Server Application\n\nThis example explains how to create a Blazor application, add the Syncfusion Blazor package, and add the Syncfusion Blazor Diagram component to the Blazor server application. It also explains how to create a simple flowchart using nodes and connectors.\n\n## Prerequisites\n\n* Visual Studio 2022\n\n## How to run the project\n\n* Checkout this project to a location in your disk.\n* Open the solution file using the Visual Studio 2022.\n* Restore the NuGet packages by rebuilding the solution.\n* Run the project.\n\n## Overview\n\nThe [Blazor Diagram](https://www.syncfusion.com/blazor-components/blazor-diagram) is a feature-rich library for visualizing and creating diagrams. It supports creating flowcharts, organizational charts, mind maps, and BPMN charts either through code or a visual interface.\n\n## Flowchart\n\nThe Blazor Diagram component provides all the standard flowchart shapes as ready-made objects to build flowcharts, making it is easy to add them to a diagram surface in a single call.\n\n{:.list-unstyled}\n* [Learn more about blazor flowchart diagram features](https://www.syncfusion.com/blazor-components/blazor-diagram/blazor-library-flowchart)\n\n## Organizational chart\n\nBuilt-in automatic layout algorithm specifically made for organizational charts to arrange the parent and child node positions automatically.\n\n{:.list-unstyled}\n* [Learn more about Blazor organizational chart features](https://www.syncfusion.com/blazor-components/blazor-diagram/blazor-library-organizational-chart)\n\n## Mind map\n\nThe built-in automatic layout algorithm is also built for mind map diagrams, which allows you to define which node should be at the center and which nodes should be placed around the center node in the diagram surface.\n\n{:.list-unstyled}\n* [Learn more about Blazor mind map diagram features](https://www.syncfusion.com/blazor-components/blazor-diagram/blazor-library-mind-map)\n\n## Nodes\n\nVisualize any graphical object using nodes, which can be arranged and manipulated at the same time on a Blazor diagram page. They allow the following:\n\n* Use many predefined standard shapes\n* Create and add custom shapes easily.\n* Fully customize the appearance of a node.\n* Design a node UI template and reuse it across multiple nodes.\n\n## Connectors\nA connector represents a relationship between two nodes. Some of the key features like connector types, bridging, and more.\n\n### Types\nThe Blazor Diagram component provides straight, orthogonal, polyline, and curved connector types. You can choose any of these based on the type of Blazor diagram or relationship between the connected nodes.\n\n### Bridging or line jumps\nUse bridging (line jumps) to illustrate a connector’s route, making it easy to read where connectors overlap each other in a dense diagram.\n\n### Arrowheads\nUse different types of predefined arrowheads to illustrate flow direction in flowchart diagrams. You can also build your own custom arrowheads.\n\n### Appearance\nLike nodes, the connector look and feel can also be customized any way you want. The Blazor Diagram component provides a rich set of properties through which you can customize connector color, thickness, dash and dot appearance, rounded corners, and even decorators.\n\n## Ports (connection points)\nAttach connectors to specific places on a node through different types of ports or connecting points.\n\n## Labels\nAdditional information can be shown by adding text or labels on nodes and connectors.\n\n### Edit\nYou can add and edit text at runtime and mark it read-only if it should not be edited.\n\n### Multiple labels\nAdd any number of labels and align them individually.\n\n### Alignment\nLabels include sophisticated alignment options: Place inside or outside a node, or at the source or target end of a connector. Automatically align when a node or connector moves.\n\n## Interactive features\nUse interactive features to improve the editing experience of a Blazor diagram at runtime. Furthermore, you can easily edit a Blazor diagram with mouse, touchscreen, or keyboard interfaces. \n\n### Select and drag\nSelect one or more nodes, connectors, or annotations and edit them using thumbs or handlers.\n\n### Resize\nYou can resize a node in eight different directions and lock a node’s aspect ratios to keep its shape. You can also resize multiple objects at the same time.\n\n### Rotate\nRotate selected nodes from 0 to 360 degrees.\n\n### Undo and redo\nDon’t worry when you edit by mistake—undo and redo commands help to easily correct recent changes.\n\n### Clipboard\nCut, copy, paste, or duplicate selected objects within and across Blazor diagrams.\n\n### Z-order\nWhen multiple objects overlap, the z-order controls which object is at the top and which is at the bottom.\n\n### Snap\nPrecisely align nodes, connectors, and annotations easily while dragging just by snapping to the nearest gridlines or objects.\n\n### Grouping\nYou can combine multiple nodes into a group and then interact with them as a single object. Nested groups are also possible with our Blazor Diagram control.\n\n### Quick commands\nFrequently used commands like delete, connect, and duplicate can be shown as buttons near a selector. This makes it easy for users to quickly perform those operations instead of searching for the correct buttons in a toolbox.\n\n## Alignment\nOur Blazor Diagram library has predefined alignment commands that enable you to align the selected objects nodes and connectors with respect to the selection boundary.\n\n### Spacing commands\nSpacing commands enable you to place selected objects on the Blazor diagram at equal intervals from each other.\n\n### Sizing commands\nUse sizing commands to equally size selected nodes with respect to the first selected object.\n\n### Align commands\nAll the nodes or connectors in the selection list can be aligned at the left, right, or center horizontally, or aligned at the top, bottom, or middle vertically with respect to the selection boundary.\n\n## Automatic layout\nUse automatic layouts to arrange nodes automatically based on a predefined layout algorithm. Features built-in hierarchical tree, radial tree, and symmetric layouts.\n\n## Ruler\nRulers allow you to measure the distance of nodes or connectors from the origin of the page. This is especially useful in creating scale models.\n\n## Symbol palette\nIncludes a gallery of stencils, reusable symbols, and nodes that can be dragged onto the surface of a Blazor diagram.\n\n## Overview panel\nThe overview panel allows you to improve the navigation experience when exploring large Blazor diagrams. It displays a small preview of the full Blazor diagram page that allows users to zoom and pan within it.\n\n## Drawing tools\nDraw all kinds of built-in nodes and connect them with connectors interactively by just clicking and dragging on the drawing area.\n\n## Zoom and pan tools\nView a large diagram closely or assume a wider view by zooming in and out. Also, navigate from one region of a diagram to another by panning across the Blazor diagram.\n\n## Data binding\n\nPopulate Blazor diagrams with nodes and connectors created and positioned based on data from data sources. In addition, data in any format can be easily converted, mapped, and consumed in the Blazor diagram by setting a few properties, without having to write any code. The Blazor Diagram library also supports loading data from a list or IEnumerable collection.\n\n## Exporting\nYou can export the Blazor diagram to different image files such as PNG, JPEG, BMP, and SVG.\n\n## Printing\nPrint Blazor diagrams from the browser. You can also customize the page size, orientation, and page margin, and fit a Blazor diagram to a single page.\n\n## Serialization\nYou can save your Blazor diagram state in JSON format and load it back later for further editing using the serializer.\n\n## Miscellaneous\nIn addition to all the features listed thus far, there many more that enhance the diagramming experience.\n\n### Gridlines\nGridlines provide guidance when trying to align objects.\n\n### Page layout\nGive a page-like appearance to the drawing surface using page size, orientation, and margins.\n\n### Tooltip\nUse tooltips to provide additional information about a node.\n\n### Context menu\nEasily map frequently used commands to the context menu.\n\n## Related Links\n\n[Learn about more Blazor Diagram](https://www.syncfusion.com/blazor-components/blazor-diagram?utm_source=github\u0026utm_medium=listing\u0026utm_campaign=blazor-diagram-github-samples) \u003cbr/\u003e\u003cbr/\u003e\n[Download Free Trial](https://www.syncfusion.com/downloads/blazor-components?utm_source=github\u0026utm_medium=listing\u0026utm_campaign=blazor-diagram-github-samples) \u003cbr/\u003e\u003cbr/\u003e\n[Pricing](https://www.syncfusion.com/sales/products?utm_source=github\u0026utm_medium=listing\u0026utm_campaign=blazor-diagram-github-samples) \u003cbr/\u003e\u003cbr/\u003e\n[Documentation](https://blazor.syncfusion.com/documentation/diagram/?utm_source=github\u0026utm_medium=listing\u0026utm_campaign=blazor-diagram-github-samples) \u003cbr/\u003e\u003cbr/\u003e\n[Online Examples](https://blazor.syncfusion.com/demos/diagram/flowchart?utm_source=github\u0026utm_medium=listing\u0026utm_campaign=blazor-diagram-github-samples) \u003cbr/\u003e\u003cbr/\u003e\n[Community Forums](https://www.syncfusion.com/forums/blazor-components/diagram?utm_source=github\u0026utm_medium=listing\u0026utm_campaign=blazor-diagram-github-samples) \u003cbr/\u003e\u003cbr/\u003e\n[Suggest a feature](https://www.syncfusion.com/feedback/blazor-components?utm_source=github\u0026utm_medium=listing\u0026utm_campaign=blazor-diagram-github-samples)\n\n## About Syncfusion Blazor Components\nThe Syncfusion's [Blazor component](https://www.syncfusion.com/blazor-components?utm_source=github\u0026utm_medium=listing\u0026utm_campaign=blazor-diagram-github-samples) library offers over 70 UI components to work with Blazor server-side and client-side (Blazor WebAssembly) projects seamlessly. In addition to Diagram, we provide popular Blazor Components such as [DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid?utm_source=github\u0026utm_medium=listing\u0026utm_campaign=blazor-diagram-github-samples),[Charts](https://www.syncfusion.com/blazor-components/blazor-charts?utm_source=github\u0026utm_medium=listing\u0026utm_campaign=blazor-diagram-github-samples) [Scheduler](https://www.syncfusion.com/blazor-components/blazor-scheduler?utm_source=github\u0026utm_medium=listing\u0026utm_campaign=blazor-diagram-github-samples), [File Upload](https://www.syncfusion.com/blazor-components/blazor-file-upload?utm_source=github\u0026utm_medium=listing\u0026utm_campaign=blazor-diagram-github-samples), [Word Processor](https://www.syncfusion.com/blazor-components/blazor-word-processor?utm_source=github\u0026utm_medium=listing\u0026utm_campaign=blazor-diagram-github-samples), and more.\n\n## About Syncfusion\nFounded in 2001 and headquartered in Research Triangle Park, N.C., Syncfusion has more than 23,000+ customers and more than 1 million users, including large financial institutions, Fortune 500 companies, and global IT consultancies.\n \nToday, we provide 1600+ controls and frameworks for web\n([Blazor](https://www.syncfusion.com/blazor-components?utm_source=github\u0026utm_medium=listing\u0026utm_campaign=blazor-diagram-github-samples),\n[ASP.NET\nCore](https://www.syncfusion.com/aspnet-core-ui-controls?utm_source=github\u0026utm_medium=listing\u0026utm_campaign=blazor-diagram-github-samples),\n[ASP.NET\nMVC](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_source=github\u0026utm_medium=listing\u0026utm_campaign=blazor-diagram-github-samples),\n[ASP.NET\nWebForms](https://www.syncfusion.com/jquery/aspnet-webforms-ui-controls?utm_source=github\u0026utm_medium=listing\u0026utm_campaign=blazor-diagram-github-samples),\n[JavaScript](https://www.syncfusion.com/javascript-ui-controls?utm_source=github\u0026utm_medium=listing\u0026utm_campaign=blazor-diagram-github-samples),\n[Angular](https://www.syncfusion.com/angular-ui-components?utm_source=github\u0026utm_medium=listing\u0026utm_campaign=blazor-diagram-github-samples),\n[React](https://www.syncfusion.com/react-ui-components?utm_source=github\u0026utm_medium=listing\u0026utm_campaign=blazor-diagram-github-samples),\n[Vue](https://www.syncfusion.com/vue-ui-components?utm_source=github\u0026utm_medium=listing\u0026utm_campaign=blazor-diagram-github-samples),\nand\n[Flutter](https://www.syncfusion.com/flutter-widgets?utm_source=github\u0026utm_medium=listing\u0026utm_campaign=blazor-diagram-github-samples)),\nmobile\n([Xamarin](https://www.syncfusion.com/xamarin-ui-controls?utm_source=github\u0026utm_medium=listing\u0026utm_campaign=blazor-diagram-github-samples),\n[Flutter](https://www.syncfusion.com/flutter-widgets?utm_source=github\u0026utm_medium=listing\u0026utm_campaign=blazor-diagram-github-samples),\n[UWP](https://www.syncfusion.com/uwp-ui-controls?utm_source=github\u0026utm_medium=listing\u0026utm_campaign=blazor-diagram-github-samples),\nand\n[JavaScript](https://www.syncfusion.com/javascript-ui-controls?utm_source=github\u0026utm_medium=listing\u0026utm_campaign=blazor-diagram-github-samples)),\nand desktop development ([Windows\nForms](https://www.syncfusion.com/winforms-ui-controls?utm_source=github\u0026utm_medium=listing\u0026utm_campaign=blazor-diagram-github-samples),\n[WPF](https://www.syncfusion.com/wpf-ui-controls?utm_source=github\u0026utm_medium=listing\u0026utm_campaign=blazor-diagram-github-samples),\n[WinUI(Preview)](https://www.syncfusion.com/winui-controls?utm_source=github\u0026utm_medium=listing\u0026utm_campaign=blazor-diagram-github-samples)\nand\n[UWP](https://www.syncfusion.com/uwp-ui-controls?utm_source=github\u0026utm_medium=listing\u0026utm_campaign=blazor-diagram-github-samples)).\nWe provide ready-to-deploy enterprise software for dashboards, reports,\ndata integration, and big data processing. Many customers have saved\nmillions in licensing fees by deploying our software.\n\n\u003chr style=\"height:0.3px;border:none;color:lightgrey;background-color:lightgrey;\" /\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"mailto:sales@syncfusion.com?Subject=Syncfusion Blazor Diagram - Github\" target=\"_top\"\u003esales@syncfusion.com\u003c/a\u003e | \u003ca href=\"https://www.syncfusion.com?utm_source=github\u0026utm_medium=listing\u0026utm_campaign=blazor-diagram-github-samples\"\u003ewww.syncfusion.com\u003c/a\u003e | 1-888-9 DOTNET \u003cbr\u003e\n\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsyncfusionexamples%2Fcreate-a-diagram-component-in-a-blazor-server-application","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsyncfusionexamples%2Fcreate-a-diagram-component-in-a-blazor-server-application","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsyncfusionexamples%2Fcreate-a-diagram-component-in-a-blazor-server-application/lists"}