Example of User Handles in Blazor Diagram Component

This sample demonstrates flow diagram interactions augmented with user handles—compact, context‑aware icons positioned around selected nodes to expose frequently used commands. Handles provide a lightweight, discoverable surface for actions such as cloning, deleting, or executing custom node operations without navigating complex menus.

User handle capabilities and configuration:

• Icons placed around nodes to present quick commands and improve workflow efficiency.
• Add handles via the UserHandles property on the diagram selection settings.
• Configure position, appearance, and hit areas to fit design and interaction requirements.
• Provide built-in actions such as clone and delete, implemented as handle commands tied to node operations.
• Customize command execution to invoke application logic, including asynchronous or confirmation workflows.

Implementation guidance: position handles to avoid occluding important node content and to preserve predictable connector routing. Use clear, high‑contrast icons and tooltips to communicate action intent. Map handle commands to explicit, testable handlers so behavior is consistent across selection states.

Accessibility and best practices: ensure handles are reachable by keyboard, expose descriptive ARIA labels for each control, and validate focus behavior to avoid trapping. Test handle interactions with representative datasets, various zoom levels, and assistive technologies to maintain usability and discoverability in production scenarios.

Looking for the full Blazor Diagram component overview, features, pricing, and documentation? Visit the Blazor Diagram page.