Example of Rulers in Blazor Diagram Component

This example demonstrates ruler usage in the Diagram component to determine element position and dimensions with a customizable appearance. Rulers provide visual measurement aids for precise placement, alignment, and sizing of nodes and connectors during diagram authoring.

Ruler features include:

• Toggle ruler visibility using the IsVisible parameter.
• Customize the measurement interval with the Interval property.
• Define tick alignment via the TickAlignment property to control major/minor tick placement.
• Specify guide and marker color using the MarkerColor property.
• Add a horizontal ruler via the HorizontalRuler child component.
• Add a vertical ruler via the VerticalRuler child component.
• Configure all ruler options under the diagram's RulerSettings collection.

Implementation guidance: enable the rulers to support precision alignment workflows, set Interval to match your grid or unit system, and use TickAlignment to ensure ticks align with node anchors. Adjust MarkerColor to keep guides visible against your canvas theme. Combine horizontal and vertical rulers for two‑axis measurement and bind RulerSettings at the diagram level so rulers update with canvas transforms (pan/zoom).

These controls help authors produce consistent diagrams by providing visual measurement, snap alignment cues, and configurable guides that integrate with the Diagram component’s layout and interaction model.

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