Diagram Document Object Model

NOV Diagram for .NET - Document Object Model

The Diagram Document Object Model (DDOM) is a cross-platform set of .NET objects for creating and managing sophisticated, interactive drawings. It enables you to integrate diagramming capabilities into Blazor, WinForms, WPF, macOS, and ASP.NET applications. The following sections introduce the main objects in the model and explain how they work together.
drawings multiple pages

Drawings

Drawings organize diagram content into one or more pages, each containing its own shapes, connectors, and other page items. This allows related diagrams to be managed within a single document.

Drawings support interactive editing and navigation, allowing users to select, move, resize, and connect shapes, as well as zoom and scroll through their content.

A drawing is displayed and edited through an NDrawingView widget, which can be embedded in any NOV UI hierarchy.
foreground background pages

Pages

Pages provide individual workspaces within a drawing. Each page can contain shapes, connectors, and guides that assist with positioning and alignment.

Page items can be organized into multiple layers, making complex diagrams easier to manage.

There are two page types: foreground and background. Foreground pages contain the main diagram content. Background pages provide reusable elements, such as borders, logos, and titles, that appear behind the content of the foreground pages to which they are assigned. Changes to a shared background are reflected in all pages that use it.

Foreground and background pages are visually distinguished in the Page Navigator and Drawing Explorer. The Page Navigator provides quick access to pages, while the Drawing Explorer presents a hierarchical view of pages and their contents.
2D and 1D shapes

Shapes

Shapes are the primary building blocks of diagrams. They are classified as 1D or 2D according to how they are positioned and manipulated:
  • 2D Shapes are manipulated through a bounding box and can be moved, resized, and rotated. Their geometry can take any supported form, such as a rectangle, ellipse, or custom symbol.
  • 1D Shapes are manipulated through their beginning and end points. They are commonly used for lines and connectors that link other shapes.
Each shape can include the following optional elements:
  • Geometry defines the shape's visual form using drawing commands.
  • Ports define connection locations and control how shapes connect to one another.
  • Control Points provide interactive handles for adjusting the shape's geometry or other properties.
  • Text Block provides formatted text for labels, captions, and other annotations within the shape.
group shapes

Groups

Groups are shapes that contain other shapes, allowing related elements to be moved, resized, and rotated as a single unit. They are useful for building composite symbols and organizing complex diagram content.

When a group is resized, each contained 2D shape follows one of two resize modes:
  • Resize and Reposition changes both the shape's size and its position within the group.
  • Reposition Only changes the shape's position within the group while preserving its size.
Contained 1D shapes are scaled by transforming their beginning and end points with the group.
routable connectors

Routable Connectors

Routable connectors calculate paths between their end points, aiming to avoid obstacles while minimizing turns and respecting port orientation. The router maintains a graph of page obstacles to determine these paths.

Connectors can display bridges (hops) over intersecting lines, greatly improving readability when crossings are unavoidable.

Three modes control automatic rerouting:
  • Never — disables automatic rerouting. Use the Reroute command or reroute programmatically.
  • Always — recalculates the path whenever obstacles change, allowing a potentially better route.
  • When needed — recalculates the path only when an obstacle intersects the current route.
layers

Layers

Layers organize page items into named categories, making complex diagrams easier to manage. Each page has its own layers, and items can belong to multiple layers.

Users can show or hide layers, control whether their items are printed or exported, and lock them to prevent accidental editing. Additional options control snapping, gluing, and color highlighting, helping users identify and work with related content.

Layers can be marked as active so that shapes dropped onto the page are automatically assigned to them, simplifying organization as the diagram is built.
library browser

Libraries

Libraries organize reusable drawing content into library items. Each item can contain a single shape or an arrangement of multiple shapes. Users can drag and drop library items into any drawing view to create new instances of their content, quickly assembling diagrams from existing symbols and diagram elements.

A library is displayed through an NLibraryView widget, which can be embedded in any NOV UI hierarchy.

Multiple libraries can be presented through an NLibraryBrowser widget, which combines library views with a navigation bar for browsing and switching between them. The library browser also supports searching for shapes and libraries.