Blazor Diagram - Overview

The Blazor Diagram component displays relationships between objects or concepts, for example, an organizational hierarchy, or a process flow. The Diagram provides a variety of built-in shapes and horizontal and vertical layouts. The connections between the graph nodes can be one-directional, bi-directional, or non-directional. The component allows customizing the size, position, and geometric form of its elements.

This example uses a visual function to render each Shape programmatically, which allows you to display richer UI and multiple pieces of data in a single Shape. When using a visual function, the Diagram ignores all Shape parameters in the Razor markup (except Text), but you can still consume these settings from the visual function argument. The Shapes use an optional DataItem paramter that allows you to display multiple pieces of content or implement custom logic in the visual function.