Example of DrawingTools in Blazor Diagram Component

Diagram / Interactive Features / Drawing Tools

This sample demonstrates how to draw nodes and connectors interactively during runtime by clicking and dragging on the Diagram page using drawing tools.

Properties
Shapes
Connectors

This example illustrates how to interactively draw shapes and connections. Rulers, gridlines, and snapping options are enabled to assist with drawing. The InteractionController property is used to enable drawing, with DrawOnce or ContinuousDraw options for drawing modes. The DrawingObject property defines the shape or connector to be drawn.

Templates for various shapes and connectors are available in the palette. Click on a template to start drawing basic shapes and connectors. With each left-click, a corner or point is added to reshape polygons, and the drawing completes with a right-click or double-click.

Transform your Blazor web apps today with Syncfusion® Blazor components
100+ high-performance and responsive UI components
Dedicated support
Hassle-free licensing
TRY IT FOR FREE